/*
 * styles-9-container-queries.css
 *
 * Phase 4 S4 component-level @container queries (glance rotator).
 *
 * Phase 5 S3 pass-2: extracted from the monolithic styles.css
 * (8 286 LOC) to bring every CSS source file under the < 1 500
 * LOC bar. Load order in index.html preserves the original
 * cascade exactly: this file occupies lines 8253 - 8287 of the
 * pre-split styles.css.
 */

/* ============================================================
   Phase 4 S4 — container queries
   ============================================================
   Component-level breakpoints for surfaces whose layout depends on
   their OWN size, not the viewport. The carousel "glance" rotator is
   the canonical case: on desktop the rotator can live inside a
   narrow side-rail (e.g. 360 px), and a viewport-level @media query
   keyed off `min-width` would still apply desktop styling there.
   `@container` reads off the actual parent box width and gives the
   carousel a chance to fall back to the compact layout when the
   side-rail puts it in a phone-shaped slot.

   The `container-type: inline-size` declaration on `#glance-rotate`
   is what enables children to query its size. We tag a single
   container so the rule scope is explicit.
   ============================================================ */
#glance-rotate {
  container-type: inline-size;
  container-name: glance-rotate;
}

@container glance-rotate (max-width: 360px) {
  /* When the rotator lives in a narrow column, compress the arrow
     buttons inward so they don't crowd the slide content. The arrows
     keep their 48 × 48 touch hit area (see .glance-rotate__arrow);
     only the visual offset shifts. */
  #glance-rotate .glance-rotate__arrow--prev {
    left: 0;
  }
  #glance-rotate .glance-rotate__arrow--next {
    right: 0;
  }
}