/* What's on — Figma "what's on" (node 1313:895), 1999×685, deep purple. Absolute
   --px frame for the mic/title/intro/CTA; a full-bleed scrollable strip for the
   album covers. */
.wo {
  position: relative;
  height: calc(708.6 * var(--px));   /* 685 + 23.6 (section-spacing standard) */
  background: #2b005f;
  overflow: hidden;
  color: #fff;
}
.wo__frame {
  /* top shifted so the first text sits 65px from the section top (standard). */
  position: absolute; left: 50%; top: calc(23.6 * var(--px)); transform: translateX(-50%);
  width: calc(1999 * var(--px)); height: 100%;
}
.wo__frame > * {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  margin: 0;
}

/* ---- header ---- */
.wo__title { font-family: var(--font-display); font-weight: 700; font-size: calc(60 * var(--px)); transform: translateY(-50%); white-space: nowrap; }
.wo__rule  { width: calc(var(--w) * var(--px)); height: 1px; background: rgba(255,255,255,.8); }
.wo__intro {
  /* Playfair italic runs wider than Figma's Domaine Narrow, so keep the three
     intended lines with <br> + nowrap and condense to match the Figma width. */
  transform: translate(-50%, -50%) scaleX(0.9);
  white-space: nowrap; text-align: center;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: calc(27.441 * var(--px)); line-height: 1.25; letter-spacing: 0.01em;
}
.wo__cta {
  transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(19.891 * var(--px)); color: #fff;
  text-decoration: underline; white-space: nowrap;
}

/* ---- album covers: USER-scrollable belt, 6 AT A TIME ----
   The strip window is exactly six covers wide (centred); the other covers sit
   beyond its edges. The user swipes (touch) or drags (mouse — see landing.js
   data-drag-scroll) and the strip settles a full PAGE of 6 at a time
   (scroll-snap every 6th cover; the JS pages the same way for mouse drags).
   No arrows, no auto-scroll, scrollbar hidden. */
.wo-strip {
  --wo-gap:   clamp(10px, calc(19 * var(--px)), 16px);
  --wo-cover: clamp(118px, calc(182 * var(--px)), 148px);
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: min(100%, calc(6 * var(--wo-cover) + 5 * var(--wo-gap)));
  top: calc(360 * var(--px));
  display: flex;
  align-items: flex-start;
  gap: var(--wo-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  cursor: grab;
  scrollbar-width: none;            /* Firefox */
}
.wo-strip::-webkit-scrollbar { display: none; }
.wo-strip:active { cursor: grabbing; }
.wo-album:nth-child(6n + 1) { scroll-snap-align: start; }   /* covers 1 / 7 / 13 = the pages */
.wo-album {
  flex: 0 0 auto;
  box-sizing: border-box;           /* border inside the cover size: 6 fit exactly */
  width:  var(--wo-cover);
  height: var(--wo-cover);
  border: max(1px, calc(0.824 * var(--px))) solid #fff;
  overflow: hidden;
}
.wo-album img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;   /* no native image-drag ghost while drag-scrolling */
}

/* ---- hanging microphone (rotated ~180°, cropped fill) ---- */
.wo-mic { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
.wo-mic__rot { position: absolute; inset: 0; overflow: hidden; transform: rotate(179.45deg); }
.wo-mic__rot img {
  position: absolute;
  left: calc(var(--il) * 1%); top: calc(var(--it) * 1%);
  width: calc(var(--iw) * 1%); height: calc(var(--ih) * 1%);
  max-width: none; display: block;
}

/* ---- section order: the mobile copy sits right after the "!TRENDING!" strip,
   the desktop copy keeps its slot after Our food & drink. Only one shows. ---- */
.wo--mobile-only { display: none; }
@media (max-width: 600px) {
  .wo--desktop-only { display: none; }
  .wo--mobile-only { display: block; }
}

/* ---- MOBILE What's on (Figma 1313:155, 421×592). Absolute --mpx frame; the
   covers stack into a 3×3 grid (98.346px tiles, 11px gutters). ---- */
@media (max-width: 600px) {
  .wo-m {
    position: relative;
    height: calc(592 * var(--mpx));
    background: #2f255b;
    overflow: hidden;
    color: #fff;
  }
  .wo-m__frame {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: calc(421 * var(--mpx)); height: 100%;
  }
  .wo-m__frame > * {
    position: absolute;
    left: calc(var(--x) * var(--mpx));
    top:  calc(var(--y) * var(--mpx));
    margin: 0;
  }
  .wom-mic { width: calc(var(--w) * var(--mpx)); height: calc(var(--h) * var(--mpx)); }
  .wom__title { font-family: var(--font-display); font-weight: 700; font-size: calc(30 * var(--mpx)); white-space: nowrap; }
  .wom__rule  { width: calc(var(--w) * var(--mpx)); height: 1px; background: rgba(255,255,255,.8); }
  .wom__intro {
    /* Playfair italic runs wider than Figma's Domaine Narrow — keep the three
       intended lines with <br> + nowrap and condense to the Figma width (331). */
    transform: translate(-50%, -50%) scaleX(0.9);
    white-space: nowrap; text-align: center;
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: calc(13.5 * var(--mpx)); line-height: 1.2; letter-spacing: 0.01em;
  }
  /* 3 fixed rows flowing into COLUMNS: the visible window is the Figma 3x3;
     the extra covers continue as more columns off-screen. The user swipes
     sideways (or mouse-drags — see data-drag-scroll in landing.js) and the
     grid settles a full 3-COLUMN page at a time (scroll-snap every 9th tile;
     the JS pages the same way for mouse drags). No arrows, no auto-scroll,
     scrollbar hidden. Grid spans the frame (--x:0); the Figma 56 side inset
     becomes padding + scroll-padding so pages align with the inset. */
  .wom__grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, calc(98.346 * var(--mpx)));
    grid-auto-columns: calc(98.346 * var(--mpx));
    gap: calc(11 * var(--mpx));
    width: calc(421 * var(--mpx));
    padding-inline: calc(56 * var(--mpx));
    box-sizing: border-box;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: calc(56 * var(--mpx));
    cursor: grab;
    scrollbar-width: none;            /* Firefox */
  }
  .wom__grid::-webkit-scrollbar { display: none; }
  .wom__grid:active { cursor: grabbing; }
  .wom-album:nth-child(9n + 1) { scroll-snap-align: start; }   /* tiles 1 / 10 = the 3x3 pages */
  .wom-album {
    width: calc(98.346 * var(--mpx));
    height: calc(98.346 * var(--mpx));
    border: 1px solid #fff;
    overflow: hidden;
  }
  .wom-album img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    pointer-events: none;   /* no native image-drag ghost while drag-scrolling */
  }
  .wom__cta {
    font-family: var(--font-display); font-weight: 700;
    font-size: calc(10.067 * var(--mpx)); color: #fff;
    text-decoration: underline; white-space: nowrap;
  }
}