/* ---------------------------------------------------------------------------
 * LCA! Film Festival 2026 — About cover adjustments
 *
 * Added under LCA2026-SITE-010 at owner direction (2026-09-27):
 *   "About page hero should be yellow and should instead have a photo slideshow"
 *
 * This file owns ONLY the About cover. It consumes assets/css/tokens.css and the
 * adopted refinement layer; it defines no design value of its own and redefines
 * no token.
 *
 * WHY IT EXISTS
 *   `refinement/about.css` authored `.r06-about-contact-sheet` as a three-column
 *   scatter of three separate photographs. The About page owns four archive
 *   photographs and now presents them as one sliding deck using the shared
 *   `.r06-story-deck` behaviour from `refinement/carousels.js`. The grid rules
 *   for the scatter therefore have to be replaced with a single-frame window.
 *
 * Reverting is deleting this file and the two class names it targets.
 * ------------------------------------------------------------------------ */

/* One frame at a time.
 * `refinement/about.css` declares this element as a three-column grid with
 * `align-items:end`, a negative bottom margin and a 1.25fr middle track sized for
 * a scatter of three photos. Every one of those has to be neutralised for a
 * single-frame deck, so the override is explicit rather than incremental.
 *
 * NOTE ON THE SELECTOR: the deck is marked in markup with `data-story-deck`, and
 * `refinement/carousels.js` only ever ADDS `is-enhanced`. The `r06-story-deck`
 * CLASS is never applied on this page. An earlier version of this file keyed on
 * `.r06-story-deck` and therefore matched nothing at all — the deck stayed a
 * three-column grid and the controls sat beside the photograph instead of below
 * it. The selector below uses the attribute and the class together so it holds
 * whether or not the class is present. */
.r06-about-contact-sheet[data-story-deck],
.r06-about-contact-sheet.r06-story-deck {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  align-items: stretch;
  gap: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  width: min(100%, 46rem);
  max-width: 100%;
  z-index: auto;
}

/* The window, controls and caption are the deck's children. As a block they stack
 * in source order; the base layer's grid put window and controls side by side,
 * which is what made the controls sit level with the photograph. */
.r06-about-contact-sheet[data-story-deck] > *,
.r06-about-contact-sheet.r06-story-deck > * {
  grid-column: auto;
  grid-row: auto;
}

.r06-about-contact-sheet .r06-story-window {
  overflow: hidden;
  background: var(--color-paper);
  padding: .7rem;
}

.r06-about-contact-sheet .r06-story-track {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.r06-about-contact-sheet .r06-story-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* Neutralise the scatter rotations: a single visible frame must sit square. */
.r06-about-contact-sheet .r06-photo,
.r06-about-contact-sheet .r06-photo:nth-child(1),
.r06-about-contact-sheet .r06-photo:nth-child(2),
.r06-about-contact-sheet .r06-photo:nth-child(3),
.r06-about-contact-sheet .r06-photo:nth-child(4) {
  transform: none;
  margin-bottom: 0;
}

.r06-about-contact-sheet img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

/* Cards sit on the yellow field, so the frame keeps the paper mat. The mat now
 * lives on the window, so the slide itself carries no padding or shadow. */
.r06-about-contact-sheet[data-story-deck] .r06-photo {
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: var(--color-ink);
}

/* Controls sit BELOW the frame, never over it.
 * The deck is a plain block on About, so the window, controls and caption stack
 * in source order. `margin-top` plus an explicit `position: static` guarantees the
 * controls clear the photograph at every width; previously the base layer's
 * absolute positioning let them ride up over the image around 834px. */
.r06-about-contact-sheet .r06-story-controls,
.r06-about-cover .r06-story-controls {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  width: min(100%, 46rem);
  max-width: 100%;
  margin-top: var(--space-6);
  color: var(--color-ink);
}

.r06-about-cover .r06-story-controls .r06-progress {
  margin-right: auto;
}

.r06-about-cover .r06-story-controls .r06-story-count {
  flex-shrink: 0;
  white-space: nowrap;
}

.r06-about-cover .r06-story-controls .btn-outline {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: transparent;
}

.r06-about-cover .r06-story-controls .btn-dark {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* The caption sat behind the controls at tablet width because both were narrowed
 * to the same box while the controls wrapped onto a second line. It is now a
 * normal block after the controls, with breathing room above it. */
.r06-about-cover .r06-caption {
  display: block;
  width: min(100%, 46rem);
  max-width: 100%;
  margin-top: var(--space-4);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--color-ink);
  opacity: .8;
}

/* Without JavaScript the deck must degrade to a readable stack, never a clipped row. */
.r06-about-contact-sheet:not(.is-enhanced) .r06-story-track {
  display: grid;
  gap: var(--space-4);
}

.r06-about-contact-sheet:not(.is-enhanced) .r06-story-controls {
  display: none;
}

/* --- Breakpoints -----------------------------------------------------------
 * Checked at 1920 / 1440 / 1024 / 834 / 768 / 390. Two real defects were found
 * at 834px: the controls rode up over the photograph, and the caption was clipped
 * behind the arrow buttons. Both are corrected here.
 * ------------------------------------------------------------------------- */

/* Tablet and narrow desktop: the frame fills the column and controls wrap cleanly. */
@media (max-width: 900px) {
  .r06-about-contact-sheet[data-story-deck],
.r06-about-contact-sheet.r06-story-deck,
  .r06-about-contact-sheet .r06-story-controls,
  .r06-about-cover .r06-caption {
    width: 100%;
  }

  .r06-about-contact-sheet .r06-story-controls,
  .r06-about-cover .r06-story-controls {
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-4);
  }

  /* Let the progress dots shrink rather than push the arrows off the line. */
  .r06-about-cover .r06-story-controls .r06-progress {
    min-width: 0;
    flex-shrink: 1;
  }
}

/* Small tablet / large phone. */
@media (max-width: 700px) {
  .r06-about-contact-sheet .r06-story-controls,
  .r06-about-cover .r06-story-controls {
    row-gap: var(--space-2);
  }

  /* Controls read left-to-right in one predictable order on touch. */
  .r06-about-cover .r06-story-controls .r06-progress {
    order: 3;
    flex-basis: 100%;
    margin-right: 0;
  }
}

/* Phone. */
@media (max-width: 650px) {
  .r06-about-contact-sheet .r06-story-window {
    padding: .4rem;
  }

  .r06-about-contact-sheet .r06-photo {
    padding: 0;
  }

  .r06-about-contact-sheet img {
    aspect-ratio: 4 / 3;
  }

  .r06-about-cover .r06-caption {
    margin-top: var(--space-3);
    font-size: .68rem;
  }

  .r06-about-contact-sheet .r06-story-controls,
  .r06-about-cover .r06-story-controls {
    margin-top: var(--space-3);
  }
}

/* Very small phones: the deck's own controls must not crowd the 44px target. */
@media (max-width: 420px) {
  .r06-about-cover .r06-story-controls .btn {
    padding-inline: .9rem;
    font-size: .78rem;
  }

  .r06-about-cover .r06-story-controls .btn--square {
    min-width: 44px;
  }
}