/* MLVx Watch: the additions the watch section needs on top of Sean's own CSS.
   Sean's .wx-* rules stay untouched; this file only adds what the real
   catalogue and the in-page player need.                                      */

.wx-note { color: #9AA3B2; font-size: .88rem; }
.wx-row[hidden], .wx-rail[hidden] { display: none; }
.wx-cap span + span { margin-top: .15rem; }

/* the band foot: what this catalogue actually is */
.wx-foot { margin: 2rem 0 0; max-width: 62ch; line-height: 1.5; }

/* ---- the sheet: a real photo for the band, then the player ---- */
/* the thumbnails are the channels' own promo cards, with type already in them,
   so the hero needs a heavier scrim under ours */
/* the hero scrim existed to keep an overlay title readable; the thumbnail carries
   its own type now, so the image is left alone */
.feat .wx-art::after { content: none; }
.wx-sheet .top { background-color: #0F1318; background-size: cover; background-position: center; }
/* the heading lives in the body now, not on the picture */
.wx-sheet .wx-sb h3 { font-size: clamp(1.55rem, 3.4vw, 2.35rem); line-height: 1.03; margin: 0 0 .7rem; }
/* rail labels that must not be seen but must still be announced */
.wx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wx-player { background: #0B0E13; }
.wx-player::after { content: none !important; }
.wx-player video, .wx-player iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; border: 0; background: #000;
}
.wx-player video { object-fit: contain; }
.wx-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 2rem 2.5rem; background: #0F1318; color: #D3D6DB;
}
.wx-hint b { display: block; color: #fff; margin-bottom: .6rem; font-size: 1.05rem; }
.wx-hint code {
  background: #1E242E; color: #F1EEE7; padding: .12rem .38rem;
  border-radius: 3px; font-size: .92em;
}

/* archive facts inside the sheet */
.wx-sb.wx-solo { grid-template-columns: 1fr; }
.wx-facts { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; }
.wx-facts span { font-size: .86rem; color: #9AA3B2; }
.wx-facts b { display: block; color: #F1EEE7; font-size: 1.15rem; line-height: 1.2; }

/* the sessions that are in the archive but not on YouTube */
.wx-details summary { cursor: pointer; font-weight: 700; color: #F1EEE7; font-size: .95rem; }
.wx-details summary:hover { color: #fff; }
.wx-details[open] summary { margin-bottom: .8rem; }
.wx-arc { columns: 2; column-gap: 2.5rem; }
.wx-arc span {
  display: block; padding: .28rem 0; color: #9AA3B2; font-size: .88rem;
  break-inside: avoid; border-bottom: 1px solid #232A35;
}
@media (max-width: 760px) { .wx-arc { columns: 1; } }

/* nothing here is clickable-looking until it is clickable */
.wx-card img { background: #232A35; }

/* touch: on phones and small tablets the close button and the buttons inside
   the sheet get a 44px target, the usual tap floor. Sean's own sizes stand on
   the desktop where a mouse is doing the pointing. */
@media (max-width: 760px) {
  .wx-x { width: 2.75rem; height: 2.75rem; font-size: 1.45rem; }
  .wx-play, .wx-sec { padding: .8rem 1.4rem; }
  .wx-sb { padding: .5rem 1.1rem 1.6rem; }
}

/* ---- phones: the rails, the hero and the sheet, sized for a thumb ----
   The desktop rail shows a card plus a sliver of the next one, which on a phone reads as
   a clipped card. A phone shows one card and a clear second card, snapping per card, with
   the rail fading at the right edge so the cut looks deliberate. The artwork keeps the
   same proportions as the desktop, only the words under it get the room they need. */
@media (max-width: 720px) {
  .feat .wx-art { aspect-ratio: 16 / 9; }
  .feat .wx-art img { object-position: center 32%; }
  .feat .cap { padding: .85rem 1rem 1.05rem; font-size: .95rem; }
  .feat .cap b { font-size: 1.08rem; line-height: 1.25; }

  .wx-row { margin-top: 1.9rem; }
  .wx-rowhead h3 { font-size: 1.25rem; }
  .wx-rail {
    grid-auto-columns: 76vw;
    gap: .95rem;
    padding: .2rem 1rem 1.1rem;
    scroll-padding-left: 1rem;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 93%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 93%, rgba(0, 0, 0, 0) 100%);
  }
  .wx-cap b { font-size: 1rem; }
  .wx-cap span { font-size: .87rem; }
  .wx-cap .wx-go { display: inline-flex; align-items: center; min-height: 44px; }
  .wx-note { font-size: .8rem; }

  /* the sheet takes the screen: the scrim's own padding is what left the margins */
  .wx-scrim.open { padding: 0; }
  .wx-sheet { max-width: none; width: 100%; min-height: 100%; margin: 0; border-radius: 0; }
  .wx-sheet .top { aspect-ratio: 3 / 2; }
  .wx-sb { grid-template-columns: 1fr; gap: 1.1rem; padding: 1rem 1rem 1.6rem; }
  .wx-btns { flex-direction: column; }
  .wx-btns .wx-play, .wx-btns .wx-sec {
    width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  }
  .wx-x { width: 3rem; height: 3rem; font-size: 1.5rem; right: .6rem; top: .6rem; }
  .wx-facts { gap: .9rem 1.4rem; }
  .wx-arc span { display: flex; align-items: center; min-height: 44px; }
  .wx-next a { display: flex; align-items: center; min-height: 48px; }
}