/* ---------------------------------------------------------------------------
 * LCA! Film Festival 2026 — News story deck controls, mobile correction
 *
 * Added under LCA2026-SITE-010 at owner direction (2026-09-27): the story deck's
 * controls on news.html need work on mobile. The About deck was already correct.
 *
 * THE DEFECT (measured at a verified 390px viewport, not inferred)
 *   `.r06-progress { margin-right: auto }` in refinement/components.css makes the
 *   progress rail absorb ALL remaining width. On desktop that is intentional and
 *   harmless. On mobile the rail grew to the full 350px of the control row, which
 *   pushed the counter and the two arrow buttons onto separate wrapped lines:
 *
 *     row 1   PAUSE SLIDESHOW ....... 01 / 03 ....... [←]
 *     row 2   [→]
 *     row 3   progress rail
 *
 *   The two arrows ended up separated from each other, which reads as broken and
 *   breaks the expected previous/next pairing in reading order.
 *
 * THE FIX
 *   Below 700px the control row becomes a deliberate two-line layout instead of
 *   an accident of wrapping:
 *
 *     row 1   PAUSE SLIDESHOW            (primary action, full-width target)
 *     row 2   progress rail  ·  01 / 03  ·  [←] [→]
 *
 *   The progress rail stops absorbing width, the counter sits beside the arrows,
 *   and the two arrow buttons stay adjacent so they can never be split.
 *
 * Scope: this file owns ONLY the mobile behaviour of the news deck controls. It
 * defines no token and redefines none. Desktop rendering is untouched.
 * ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  /* Let the row wrap deliberately rather than by accident. */
  .r06-story-controls {
    flex-wrap: wrap;
    row-gap: var(--space-3);
    column-gap: var(--space-3);
    align-items: center;
  }

  /* The pause control takes its own line so it keeps a full-width touch target. */
  .r06-story-controls > [data-play-toggle] {
    flex: 1 1 100%;
    justify-content: center;
    margin-bottom: var(--space-1);
  }

  /* The rail stops absorbing all the slack - that is what pushed the arrows apart. */
  .r06-progress {
    margin-right: 0;
    flex: 0 0 auto;
  }

  /* Counter sits immediately before the arrows, not at the far edge. */
  .r06-story-count {
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* Arrows stay adjacent. Wrapping can never separate prev from next. */
  .r06-story-controls > [data-story-prev],
  .r06-story-controls > [data-story-next] {
    flex: 0 0 auto;
  }

  /* Keep both arrows on one line whatever the viewport. */
  .r06-story-controls > [data-story-prev] {
    margin-left: var(--space-2);
  }

  /* Comfortable touch targets at phone width. */
  .r06-story-controls .btn--square {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Very narrow phones: shrink the rail so the row still fits on two lines. */
@media (max-width: 420px) {
  .r06-progress {
    gap: .3rem;
  }

  .r06-progress button {
    width: 2rem;
  }

  .r06-story-count {
    font-size: .68rem;
  }

  .r06-story-controls .btn--square {
    min-width: 40px;
  }
}