/* ===========================================================================
   lounge.css — 3D circular gallery (rewrite 2026-06-04)
   ---------------------------------------------------------------------------
   Replaces the previous expanding-carousel rules. The new visual is an
   8-item ring rotating on the Y axis; lounge-selector.js writes
   --lounge-rotation on .lounge__ring and per-item
   --lounge-item-transform + --lounge-opacity on each .lounge__item.

   Below 768px AND when prefers-reduced-motion:reduce, the 3D layer is
   killed and the items lay out as a 2-column grid. JS skips entirely in
   reduced-motion (no listeners, no RAF) so the static grid is the only
   thing the user sees.

   Token note: --lh-base does not exist in tokens.css; substituted with
   --lh-normal (1.5), the closest body-line-height token.
   ========================================================================= */

.lounge {
  background: var(--bg);
  /* Breathing gap (2026-06-10 v9) — the hero is now a static composition
     that scrolls out as one unit (§3). The --section-pad-hero-gap top pad
     (25vh) gives a deliberate pause between the hero and the lounge eyebrow
     before the ring appears. Bottom keeps the standard section rhythm before
     #culinary. (Tokenized 2026-06-15 unify pass.) */
  padding-block: var(--section-pad-hero-gap) var(--section-pad);
  overflow: hidden;             /* contains 3D overflow when items rotate */
}

.lounge__header {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
  margin-block-end: var(--space-12);
}

.lounge__stage {
  position: relative;
  inline-size: 100%;
  block-size: clamp(420px, 64vh, 720px);
  perspective: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Drag-to-rotate: pointer becomes a grab cursor, becomes grabbing while
     a drag is active. user-select:none stops text drag-selection from
     hijacking the gesture. touch-action:pan-y keeps vertical page scroll
     working on touch even while horizontal drags rotate the ring. */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.lounge__stage[data-dragging] {
  cursor: grabbing;
}

.lounge__ring {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--lounge-rotation, 0deg));
  /* No transition — the JS RAF loop drives this every frame. A
     transition would compound and produce drift. */
}

.lounge__item {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;        /* ring centre; offset via margin below */
  inline-size: clamp(220px, 22vw, 320px);
  aspect-ratio: 3 / 4;
  margin-inline-start: clamp(-160px, -11vw, -110px);   /* half of inline-size, negated */
  margin-block-start:  clamp(-213px, -14.66vw, -147px); /* half of computed block-size — see note */
  transform: var(--lounge-item-transform, none);
  opacity: var(--lounge-opacity, 1);
  transition: opacity 0.3s linear;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  background: var(--bg-cocoa);
}

/* NOTE on the negative margins: aspect-ratio 3/4 means block-size = inline-size × 4/3.
   Inline-size clamp(220, 22vw, 320) → block-size clamp(293.3, 29.33vw, 426.6).
   Half of that, negated, is what we need for centering — clamp(-213.3, -14.66vw, -146.6).
   Rounded to integers above. If the math doesn't read clean to a future maintainer,
   they can replace this whole pair with `translate(-50%, -50%)` AT THE COST of needing
   to write the JS-side --lounge-item-transform with a leading `translate(-50%,-50%)`
   prefix. We use the margin technique to keep the JS side clean (it just emits
   `rotateY() translateZ()`). */

.lounge__item picture,
.lounge__item picture img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Stops native HTML5 image drag from hijacking the pointer mid-gesture
     (the symptom: ring stuck after a fast drag because the browser flipped
     into drag-and-drop of the <img>). The stage still receives the pointer
     since pointer-events bubbles from elsewhere on .lounge__item. */
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.lounge__item figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding-block: var(--space-4);
  padding-inline: var(--space-4);
  /* Unified scrim (2026-06-15 unify pass — was a bespoke rgba(26,20,16,…)). */
  background: var(--scrim-strong);
  color: var(--ivory);
  text-align: start;
  pointer-events: none;
}

.lounge__item figcaption h3 {
  font-family: var(--font-display-he);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-1) 0;
  color: var(--ivory);
}

.lounge__item figcaption p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin: 0;
  color: var(--fg-on-dark-muted);   /* one translucent-ivory method site-wide */
  line-height: var(--lh-normal);
}

/* ---------------------------------------------------------------------------
   Fallback layout: prefers-reduced-motion:reduce ONLY.
   ---------------------------------------------------------------------------
   2026-06-11 mobile-fidelity pass: the `(max-width: 767.98px)` arm was removed
   so the real 3D rotating ring survives on phones (it was flattening it to a
   grid). The ring is fit to narrow viewports by scaling .lounge__stage in
   /mobile/css/lounge.css — rotation/drag/depth preserved. The
   prefers-reduced-motion arm stays: it is the ONE allowed static fallback
   (§13), and lounge-selector.js short-circuits init() under RM so the grid
   below is what renders. (§13 rule-6 sanctioned migration — see Maintenance Log.)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lounge__stage {
    perspective: none;
    block-size: auto;
    display: block;
    cursor: auto;                         /* no drag affordance in fallback */
    touch-action: auto;
  }
  .lounge__ring {
    position: relative;
    transform-style: flat;
    transform: none !important;        /* override any inline JS write */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .lounge__item {
    position: relative;
    inset-block-start: auto;
    inset-inline-start: auto;
    margin: 0 !important;
    inline-size: auto;
    transform: none !important;
    opacity: 1 !important;
  }
}