/* ============================================================
 * Reddgifs Channels Index — channel-tile internal styling ONLY.
 *
 * Layout/grid/pagination all come from home.css (parent
 * homepage layout). Tile baseline comes from pornstars.css
 * (.rg-tile-item base styles). This file only adds the two things
 * that make a "channel" tile look different from a "category" or
 * "pornstar" tile:
 *
 *   1. .rgch-avatar — circular avatar overlay at the bottom-left
 *      of the video thumbnail. Like YouTube's old channel-card
 *      treatment: keeps the content-rich thumbnail visible AND
 *      adds an identity marker for the channel.
 *
 *   2. .rgch-count — small muted "N videos" line below the
 *      channel name. (Categories deliberately don't show this;
 *      channels are about output, so the count is informative.)
 *
 * Scoping: all rules are prefixed with .rgch-tile so they only
 * apply to channel tiles. Pornstars and categories tiles inherit
 * pornstars.css unchanged.
 *
 * STRATEGY B PHASE 3.1 — DUAL-CLASS TRANSITION (2026-06-03):
 * tile descendant selectors use .rg-tile-* (post-Phase-6 cleanup).
 * tile markup with dual classes styles identically. Phase 6 drops
 * the dual-class transition.
 * ============================================================ */

.rgch-tile .rg-tile-item__thumb-wrap {
    /* Already position: relative from pornstars.css — restating defensively
       so the avatar absolute-positioning is guaranteed to anchor here even
       if pornstars.css is ever refactored. */
    position: relative;
}

.rgch-avatar {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    /* Dark border separates the avatar visually from the thumbnail
       behind it. Slight box-shadow adds depth, especially when the
       thumb is busy. */
    border: 2px solid rgba(0, 0, 0, 0.65);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    background: #1a1a1a;
    /* Avatar shouldn't intercept hover events — the whole tile is the
       link. Without this, hovering the avatar swallows the parent
       :hover state on some browsers, breaking the name color change. */
    pointer-events: none;
}

/* Tighter avatar on small grids so it doesn't dominate the thumb at
   the 2-column mobile layout. home.css's responsive grid switches
   to 2 columns under ~600px, so this kicks in there. */
@media (max-width: 600px) {
    .rgch-avatar {
        width: 40px;
        height: 40px;
        bottom: 6px;
        left: 6px;
        border-width: 1.5px;
    }
}

.rgch-tile .rg-tile-item__name {
    /* Reserve a single line for the name so the count below it doesn't
       jump up/down across tiles when names wrap to two lines. The grid
       row height is consistent this way. */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rgch-count {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    line-height: 1.2;
}