/* ---------------------------------------------------------------------------
 * LCA! Film Festival 2026 — refinement layer
 *
 * Ported into this repository under LCA2026-SITE-010 (decision D-018) from the
 * Living Experience workspace. Design language adopted by the owner.
 *
 * AUTHORITY
 *   assets/css/tokens.css owns every design value. This file consumes tokens
 *   and defines none. It must never redefine a --color-*, --font-*, --duration-*,
 *   --easing-*, --space-* or --display-* custom property.
 *
 * CASCADE CONTRACT
 *   This layer SUPPLEMENTS production CSS; it never replaces it. It is linked
 *   AFTER the page's own stylesheet so it wins only where specificity is equal
 *   or higher. `.btn` itself stays owned by assets/css/components.css.
 *
 * Namespace is `.r06-`. Every rule below is as authored in the source layer
 * except this comment block.
 * ------------------------------------------------------------------------ */
/* R06 reusable composition patterns. Outer geometry only; controls remain shared. */
.r06-poster-fan { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; align-items:center; padding:2rem 0; }
.r06-poster-fan .r06-poster { box-shadow:0 12px 24px #0003; }
.r06-poster-fan .r06-poster:nth-child(1) { transform:translateY(1rem) rotate(-7deg); }
.r06-poster-fan .r06-poster:nth-child(2) { z-index:1; transform:translateY(-1rem); }
.r06-poster-fan .r06-poster:nth-child(3) { transform:translateY(1rem) rotate(7deg); }
.r06-marquee-ribbon { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; padding:1rem var(--gutter); background:var(--color-yellow); color:var(--color-ink); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.r06-film-strip { display:flex; gap:1rem; overflow-x:auto; padding:1rem 0 2rem; scroll-snap-type:x proximity; scrollbar-color:var(--color-teal) var(--color-mist); }
.r06-film-strip>a { flex:0 0 clamp(150px,19vw,250px); scroll-snap-align:start; text-decoration:none; }
.r06-film-strip .r06-poster { transition:transform var(--duration-hover); }
.r06-film-strip>a:is(:hover,:focus-visible) .r06-poster { transform:translateY(-6px); }
.r06-photo-wall { display:grid; grid-template-columns:1.15fr .85fr; gap:1.25rem; align-items:start; }
.r06-photo-wall figure:nth-child(2) { margin-top:5rem; }
.r06-photo-wall figure:nth-child(3) { margin-top:-3rem; }
.r06-photo-wall figure:nth-child(4) { margin-top:2rem; }
.r06-photo-wall figure:nth-child(3) img { aspect-ratio:1; }
.r06-photo-wall figure { background:var(--color-paper); padding:.75rem; color:var(--color-ink); }
.r06-cta-ribbon { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem; padding-block:3rem; }
.r06-cta-ribbon h2 { max-width:22ch; }
.r06-cta-ribbon p { max-width:52ch; margin-top:1rem; }
.r06-mosaic { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }
.r06-mosaic>*:nth-child(1){grid-column:1/6;grid-row:1/3}.r06-mosaic>*:nth-child(2){grid-column:6/10;grid-row:1}.r06-mosaic>*:nth-child(3){grid-column:10/13;grid-row:1/3}.r06-mosaic>*:nth-child(4){grid-column:6/10;grid-row:2}
.r06-mosaic img { width:100%; height:100%; min-height:0; object-fit:cover; }
.r06-mosaic figure { overflow:hidden; }
.r06-mosaic .r06-mosaic-text { padding:2rem; background:var(--color-yellow); display:grid; align-content:center; }
@media(max-width:700px){ .r06-cta-ribbon{grid-template-columns:1fr}.r06-photo-wall{gap:.75rem}.r06-photo-wall figure:nth-child(2){margin-top:2rem}.r06-photo-wall figure:nth-child(3){margin-top:0}.r06-mosaic{grid-template-columns:1fr 1fr}.r06-mosaic>*:nth-child(n){grid-column:auto;grid-row:auto}.r06-mosaic .r06-mosaic-text{padding:1.25rem} }