/* =========================================================================
   NIYO — VIDEO BAND

   The header, the channel strip and the "see all" pill are the site's own
   components (.ldesk__mark, .ytbar) and are deliberately NOT redefined here —
   the first version of this band invented its own header, an uppercase 16px
   label on a grey hairline, and that is exactly what made it read as a
   different website. Everything below is only what a video queue needs on
   top of them.

   The lead panel is dark on purpose. Its palette is lifted off the hero's
   dark panel — #101114 ground, #3fcb92 kicker, #e3e6ea headline, white at
   52% for the date — so the page carries exactly two dark blocks, the
   masthead story and the video, and they match each other.
   ========================================================================= */

.vgrid { display: grid; gap: var(--sp-6); }

/* ── lead ────────────────────────────────────────────── */
.vlead { display: flex; flex-direction: column; overflow: hidden;
         background: #101114; border: 1px solid #101114;
         border-radius: var(--radius-sm); }

.vframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
          background: #000; border: 0; padding: 0; cursor: pointer; overflow: hidden; }
.vframe img { position: absolute; inset: 0; width: 100%; height: 100%;
              object-fit: cover; transition: transform var(--t-fast) var(--ease); }
.vlead:hover .vframe img { transform: scale(1.02); }

.vframe__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
               width: 68px; height: 68px; border-radius: 50%;
               background: rgb(0 0 0 / .55); border: 2px solid rgb(255 255 255 / .92);
               display: grid; place-items: center;
               transition: background var(--t-fast) var(--ease),
                           border-color var(--t-fast) var(--ease),
                           transform var(--t-fast) var(--ease); }
.vframe:hover .vframe__btn,
.vframe:focus-visible .vframe__btn { background: #0f57d6; border-color: #0f57d6;
                                     transform: translate(-50%, -50%) scale(1.06); }
.vframe__btn svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }

.vdur { position: absolute; right: var(--sp-2); bottom: var(--sp-2);
        background: rgb(0 0 0 / .82); color: #fff; font-size: var(--fs-2xs);
        font-weight: 700; line-height: 1; padding: 4px 6px;
        border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; }
.vdur:empty { display: none; }

.vlead__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.vkicker { display: inline-block; margin-bottom: var(--sp-2);
           font-size: var(--fs-xs); font-weight: 700; color: #3fcb92; }
.vlead__t { margin: 0; font-size: 20px; font-weight: 700; line-height: var(--lh-title);
            color: #e3e6ea; display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
            transition: color var(--t-fast) var(--ease); }
.vlead:hover .vlead__t { color: #fff; }
.vmeta { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: rgb(255 255 255 / .52); }

/* ── queue ───────────────────────────────────────────── */
.vqueue { background: var(--background); border: 1px solid var(--border);
          border-radius: var(--radius-sm); overflow: hidden; }

.vq { display: grid; grid-template-columns: 20px 116px minmax(0, 1fr);
      gap: var(--sp-3); align-items: center; width: 100%; text-align: left;
      background: none; border: 0; border-bottom: 1px solid var(--border);
      padding: var(--sp-3); cursor: pointer; font: inherit; color: inherit;
      transition: background var(--t-fast) var(--ease); }
.vq:last-child { border-bottom: 0; }
.vq:hover { background: var(--surface); }
.vq[aria-current="true"] { background: var(--surface); box-shadow: inset 3px 0 0 #0f57d6; }

.vq__n { font-size: var(--fs-sm); color: var(--text-secondary);
         text-align: center; font-variant-numeric: tabular-nums; }
.vq[aria-current="true"] .vq__n { color: var(--accent-trust); font-weight: 700; }

.vq__pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
           background: #000; border-radius: var(--radius-xs); }
.vq__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vq__body { display: block; min-width: 0; }
.vq__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
         overflow: hidden; margin: 0; font-size: 15px; font-weight: 700;
         line-height: 1.45; color: var(--text-primary);
         transition: color var(--t-fast) var(--ease); }
.vq:hover .vq__t { color: var(--accent-trust); }
.vq__m { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs);
         color: var(--text-secondary); }

/* ── desktop ─────────────────────────────────────────── */
/* Two columns only from 1080px. At 900 the split left the lead 436px against
   a 392px queue — the queue was taking 47% of the band and the "lead" video
   was no bigger than the thing listing it. */
@media (min-width: 1080px) {
  .vgrid { grid-template-columns: minmax(0, 1fr) 392px; align-items: start; }

  /* The row takes its height from the lead, not from however many videos are
     queued: absolutely positioning the scroller makes the queue contribute
     zero height, so three videos and twelve both leave the band the same
     height, and the queue scrolls inside it. */
  .vqueue-wrap { position: relative; min-height: 0; height: 100%; }
  .vqueue { position: absolute; inset: 0; overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin; scrollbar-color: #0f57d6 var(--surface-2); }
  .vqueue::-webkit-scrollbar { width: 8px; }
  .vqueue::-webkit-scrollbar-track { background: var(--surface-2); }
  .vqueue::-webkit-scrollbar-thumb { background: #0f57d6; border-radius: var(--radius-pill); }
}

/* ── phone: lead first, queue beneath it, nothing scrolls inside ──── */
@media (max-width: 1079px) {
  .vlead__t { font-size: 18px; }
  .vframe__btn { width: 54px; height: 54px; }
  .vframe__btn svg { width: 19px; height: 19px; }
  .vlead__body { padding: var(--sp-4); }
  .vq { grid-template-columns: 18px 104px minmax(0, 1fr); }
  .vq__t { font-size: 14px; }
}

/* Stacked but wide: a single column of 850px-wide rows next to a 116px
   thumbnail is mostly empty space, so the queue pairs up until the layout
   goes two-column and the queue becomes a narrow rail again. */
@media (min-width: 600px) and (max-width: 1079px) {
  .vqueue { display: grid; grid-template-columns: 1fr 1fr; }
  .vq { border-right: 1px solid var(--border); }
  .vq:nth-child(even) { border-right: 0; }
  .vq:nth-last-child(-n+2) { border-bottom: 0; }
  /* an odd one out spans the pair so the grid never ends ragged */
  .vq:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}

/* ── poster caption ───────────────────────────────────────────────────────
   Added 2026-08-23. Additive only — the palette above is untouched, so the
   band still matches the masthead's dark block.

   The caption moves onto the poster from 1280 up and no lower. That is not
   a round number picked for tidiness: the caption is a fixed ~165px tall
   (kicker, two clamped title lines, date) while the 16/9 frame shrinks with
   its column, so the caption covers 29% of the poster at 1440, 35% at 1280
   and 45% at 1080. 45% is a caption wearing the photo, so below 1280 the
   caption keeps the strip the rest of this file already builds for it.

   The kicker is a chip rather than bare text because bare #3fcb92 measures
   1.02:1 against a white poster even through the scrim — the scrim is at
   its thinnest exactly where the topmost line sits. On its own #101114
   ground it is 9.14:1 and the photo underneath stops mattering. Through the
   same scrim the white headline is 5.5:1 and the date 10.6:1, both over a
   pure white photo, which is the worst case there is.
   ======================================================================== */

@media (min-width: 1280px) {

  .vlead { position: relative; }

  .vlead__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--sp-6) var(--sp-6) var(--sp-5);
    background: linear-gradient(to top,
                                rgb(0 0 0 / .94)   0%,
                                rgb(0 0 0 / .72)  60%,
                                rgb(0 0 0 / .30)  85%,
                                rgb(0 0 0 / 0)   100%);
    /* the frame underneath is the play button: the caption must not eat the
       bottom third of its hit area, and nothing in here is clickable */
    pointer-events: none;
  }

  .vkicker {
    padding: 3px var(--sp-2);
    border-radius: var(--radius-xs);
    background: #101114;
  }

  .vlead__t { color: #fff; }
  .vmeta    { color: rgb(255 255 255 / .82); }

  /* the duration badge sits bottom-right, which is now under the caption */
  .vdur { top: var(--sp-2); bottom: auto; }
}

/* ── play button ──────────────────────────────────────────────────────────
   The disc is already a translucent black with a white rim; what it lacks
   against an arbitrary photo is depth. Shadow and ring only — no colour.
   ======================================================================== */

.vframe__btn {
  box-shadow: 0 8px 28px rgb(0 0 0 / .45), 0 0 0 6px rgb(255 255 255 / .14);
}

.vframe:hover .vframe__btn,
.vframe:focus-visible .vframe__btn {
  box-shadow: 0 10px 34px rgb(0 0 0 / .55), 0 0 0 10px rgb(255 255 255 / .18);
}

/* Once the queue swaps in the embed, .vframe holds an iframe instead of the
   poster — and the caption, which is a sibling pinned to the bottom, lands
   squarely on YouTube's progress bar and controls: 140px of overlap measured
   at 1440. It is only an overlay above 1280, so only that case needs it. */

@media (min-width: 1280px) {
  .vlead:has(.vframe iframe) .vlead__body { display: none; }
}

/* ── queue numbering removed ──────────────────────────────────────────────
   Requested 2026-08-23. The ordinal column goes with the digits: hiding
   .vq__n alone would leave its 20px (18px on small screens) track standing
   as an empty gutter. The active row still reads as active without them —
   that is the inset 3px rule on .vq, not the number's colour.
   ======================================================================== */

.vq__n { display: none; }

.vq { grid-template-columns: 116px minmax(0, 1fr); }

/* must come after the rule above, or the wide track wins below 1080 */
@media (max-width: 1079px) {
  .vq { grid-template-columns: 104px minmax(0, 1fr); }
}

/* ── audit fixes ──────────────────────────────────────────────────────────
   2026-08-23. Three things a sweep from 320 to 1920 turned up, each measured
   before and after rather than assumed.

   1. Two lines is not enough for a Burmese headline once the queue leaves its
      side rail. Clipped titles out of 8 — 768px: 3 -> 0, 375px: 4 -> 1,
      320px: 6 -> 3. It costs 61px of band height at 768. From 1080 up the
      queue IS a fixed-height scrolling rail, where a third line would only
      push items out of sight, so this stops at 1079.

   2. That rail hides 214px of queue at 1440, and the scrollbar it offers
      measures 2px wide — an overlay scrollbar, invisible until it moves. The
      fade is the only standing signal that the list continues below.

   3. Every affordance here was hover-only, so a touch device got no press
      feedback at all. :active gives it the same read a mouse already had.
   ======================================================================== */

@media (max-width: 1079px) {
  .vq__t { -webkit-line-clamp: 3; }
}

@media (min-width: 1080px) {
  .vqueue-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: linear-gradient(to top, var(--background), transparent);
    pointer-events: none;
  }
}

.vq:active,
.ytbar:active { background: var(--surface-2); }