/* VODCatalog - homepage rows.
   Deliberately small and self-contained: this loads on the hottest page on the
   site, so it must not pull in a framework or fight the theme for layout. */

/* STACKING CONTEXT IS REQUIRED, not cosmetic.
   The theme paints the hero on a negative-z-index layer and compensates with
   `#carouselRows h2 { position: relative; }`. Our rows are a SIBLING of
   #carouselRows, so that rule never reaches them: the tiles happened to show
   because .vc-tile is positioned (for its badge), while the row heading was not,
   and disappeared behind the hero. Everything here is positioned deliberately. */
.vc-home {
    position: relative;
    z-index: 1;
    padding: 6px 12px 18px;
}

/* A row is a framed block, so it is obvious where one curated row ends and the
   next begins - and that these are not just more of the theme's carousels. */
.vc-row {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
    padding: 12px 14px 14px;
    background: rgba(0, 0, 0, .38);
    border-radius: 6px;
    border-left: 3px solid #4a9eff;
}

.vc-row-title {
    position: relative;
    z-index: 1;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 10px;
    padding-bottom: 8px;
    color: #f2f2f2;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* Horizontal strip. Scrolls rather than wraps, so a row stays one row however
   many tiles it holds. */
.vc-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
}

.vc-tile {
    position: relative;
    flex: 0 0 auto;
    width: 232px;
    background: #1b1b1b;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: #eee;
    scroll-snap-align: start;
    transition: transform .12s ease;
}

.vc-tile:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }

.vc-tile img,
.vc-tile-noimg {
    display: block;
    width: 232px;
    height: 131px;             /* 16:9, matching the 640x360 poster geometry */
    object-fit: cover;
    background: #2a2a2a;
}

.vc-tile-body { display: block; padding: 6px 8px 8px; }

.vc-tile-name {
    display: block;
    font-size: 13px;
    line-height: 1.25;
    max-height: 2.5em;
    overflow: hidden;
}

.vc-tile-sub { display: block; font-size: 11px; color: #9a9a9a; margin-top: 2px; }

/* Says what a tile IS, so a series is visibly not just another episode. */
.vc-tile-badge {
    position: absolute;
    top: 6px; left: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 5px;
    border-radius: 2px;
    background: rgba(0,0,0,.7);
    color: #fff;
}

.vc-tile-series .vc-tile-badge { background: rgba(46,125,50,.85); }
.vc-tile-season .vc-tile-badge { background: rgba(21,101,192,.85); }

/* ---- the open tile -------------------------------------------------------
   Marks which tile the panel below belongs to. The connector has to be drawn
   INSIDE the tile: .vc-strip scrolls horizontally, which forces overflow-y to
   be clipped too, so anything drawn past the tile's bottom edge is cut off.
   A notch sitting on the bottom edge, in the panel's own colour, reads as the
   tile opening into the panel without needing to escape the strip. */

.vc-tile-open {
    outline: 2px solid #4a9eff;
    outline-offset: -2px;
}

/* Bar along the bottom edge: the "tab" joining tile to panel. */
.vc-tile-open::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: #4a9eff;
    z-index: 2;
}

/* Notch pointing down into the panel. */
.vc-tile-open::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #4a9eff;
    z-index: 2;
}

.vc-tile-open .vc-tile-body { padding-bottom: 12px; }

/* Panels stack under the strip, one per level, each indented slightly so the
   nesting is visible: series -> seasons -> episodes. */
.vc-drill-stack { display: block; }

.vc-drill {
    margin-top: 6px;
    padding: 10px;
    background: rgba(255,255,255,.04);
    border-radius: 4px;
    border-top: 3px solid #4a9eff;   /* same accent as the open tile's tab */
}

.vc-drill + .vc-drill { margin-left: 14px; border-left: 2px solid rgba(255,255,255,.12); }
.vc-drill-title { font-size: 13px; color: #ccc; margin-bottom: 8px; }
.vc-drill-msg { color: #999; font-size: 12px; }
.vc-drill .vc-strip { padding-bottom: 0; }

.vc-drill-close {
    float: right;
    background: none;
    border: 0;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}