/* ===========================================================================
   Pages module — the few things the portfolio pages need that site.css does
   not already have: the film as a real <button>, card grids, galleries,
   silent loops, the lightbox and the home page editor. Tokens only; no
   borders. Shares its reel styles with the Flayr site's website.css.
   ======================================================================== */

/* ----------------------------------------------------------- general ---- */
.pages-list-reset { list-style: none; margin: 0; padding: 0; }
.pages-kicker { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: center; letter-spacing: 0; margin: 0 0 24px; }
.pages-dot { color: var(--faint); margin: 0 12px; }
.pages-anchor { scroll-margin-top: 104px; }
.pages-hero-media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.pages-intro { text-align: center; }
.pages-intro .lead { margin-bottom: 18px; }
.pages-split-top { align-items: start; }
.pages-copy p:not(.lead) { color: var(--muted); }
.pages-copy .lead { margin-bottom: 20px; }
.pages-figures { grid-template-columns: minmax(0, 1fr); }
.pages-sub { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); margin: -2px 0 12px; }
.pages-chips-left { justify-content: flex-start; }
.pages-actions { margin-top: 24px; flex-wrap: wrap; }
.pages-logo { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; margin: 20px auto 0; filter: brightness(0) saturate(0); opacity: .55; }
.pages-logo-lg { height: 56px; max-width: 220px; margin-top: 28px; }
.pages-figure { margin: 0; }
.pages-figure figcaption { padding: 14px 4px 0; font-size: var(--fs-4); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }

/* Ratios (media boxes and reel frames) */
.pages-ratio-16x9 { aspect-ratio: 16 / 9; }
.pages-ratio-21x9 { aspect-ratio: 21 / 9; }
.pages-ratio-9x16 { aspect-ratio: 9 / 16; }
.pages-ratio-1x1 { aspect-ratio: 1; }
.media.pages-ratio-16x9 img, .media.pages-ratio-21x9 img, .media.pages-ratio-9x16 img, .media.pages-ratio-1x1 img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- films ---- */
.reel-wrap { margin: 0; }
.reel-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--ink); }
button.reel { width: 100%; padding: 0; border: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; }
.reel:focus-visible { outline: none; box-shadow: inset var(--ring); }
.reel-blank { display: block; aspect-ratio: 16 / 9; background: var(--navy); }
.reel-frame .embed { border-radius: 0; }
.reel-frame.pages-ratio-9x16 .reel img, .reel-frame.pages-ratio-9x16 .embed { aspect-ratio: 9 / 16; }
.reel-frame.pages-ratio-1x1 .reel img, .reel-frame.pages-ratio-1x1 .embed { aspect-ratio: 1; }
.reel-frame.pages-ratio-9x16, .reel-frame.pages-ratio-1x1 { aspect-ratio: auto; }
.reel-note { margin-top: 12px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.pages-reel-meta { padding: 14px 4px 0; }
.pages-reel-meta .eyebrow { font-size: var(--fs-xs); margin-bottom: 2px; }
.pages-reel-meta h3, .pages-reel-meta h4 { font-size: var(--fs-4); margin: 0; }
.pages-reel-meta a { color: var(--ink); }
.pages-reel-meta p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.pages-narrow-reel { max-width: 980px; margin: 0 auto; }
.pages-shorts { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
.pages-adverts { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .pages-reels { grid-template-columns: minmax(0, 1fr); }
  .pages-shorts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pages-adverts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------- card grids --- */
.pages-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pages-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pages-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pages-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pages-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pages-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.pages-card:hover { text-decoration: none; }
.pages-card .media { border-radius: var(--r-lg); margin-bottom: 12px; }
.pages-card .media img { transition: transform .6s var(--ease); }
.pages-card:hover .media img { transform: scale(1.03); }
.pages-card-meta { font-size: var(--fs-2xs); color: var(--teal-ink); font-weight: 500; margin-bottom: 2px; }
.pages-card-title { font-size: var(--fs-body); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; line-height: 1.3; }
.pages-highlights { display: grid; gap: 28px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pages-clips { grid-auto-columns: minmax(200px, 240px); }
@media (max-width: 1100px) { .pages-cols-4, .pages-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .pages-cols-3, .pages-cols-4, .pages-cols-6, .pages-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pages-cols-2, .pages-cols-3, .pages-cols-4, .pages-highlights { grid-template-columns: minmax(0, 1fr); } }

/* Full-width tile (Retracing Jemma, the documentary series) */
.pages-wide-tile { min-height: 0; }
.pages-wide-tile h2 { font-size: clamp(32px, 4.4vw, 56px); margin-bottom: 6px; }
.pages-wide-tile .tile-media img { aspect-ratio: 21 / 9; }
@media (max-width: 860px) { .pages-wide-tile .tile-media img { aspect-ratio: 16 / 10; } }

/* ----------------------------------------------------------- galleries -- */
.pages-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pages-gallery a { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.pages-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pages-gallery a:hover img { transform: scale(1.03); }
.pages-gallery-square img { aspect-ratio: 1; }
.pages-gallery-poster img { aspect-ratio: 1109 / 1600; }
.pages-gallery-wide img { aspect-ratio: 1920 / 803; }
.pages-gallery-social { align-items: center; }
.pages-gallery-social img { height: auto; }
/* Masonry: columns keep each photo's own shape */
.pages-gallery-masonry { display: block; columns: 4; column-gap: 12px; }
.pages-gallery-masonry.pages-cols-3 { columns: 3; }
.pages-gallery-masonry li { break-inside: avoid; margin-bottom: 12px; }
.pages-gallery-masonry img { height: auto; }
@media (max-width: 860px) { .pages-gallery-masonry, .pages-gallery-masonry.pages-cols-3 { columns: 2; } }

.pages-lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1600px); max-height: 92vh; overflow: visible; }
.pages-lightbox::backdrop { background: rgba(13, 22, 37, .86); }
.pages-lightbox img { display: block; max-width: min(92vw, 1600px); max-height: 92vh; width: auto; height: auto; border-radius: var(--r-lg); }
.pages-lightbox-close { position: absolute; top: -18px; right: -18px; background: var(--surface); color: var(--ink); }
@media (max-width: 640px) { .pages-lightbox-close { top: 8px; right: 8px; } }

/* ---------------------------------------------------------------- loops - */
.pages-loops { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pages-loop { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-2); }
.pages-loops.is-square .pages-loop { aspect-ratio: 1; }

/* ---------------------------------------------------------- feature film - */
.pages-feature-film { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; background: var(--ink); color: rgba(255, 255, 255, .78); border-radius: var(--r-xl); overflow: hidden; }
.pages-feature-media img { display: block; width: 100%; height: 100%; aspect-ratio: 2048 / 858; object-fit: cover; }
.pages-feature-copy { padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px) clamp(28px, 4vw, 48px) 0; }
.pages-feature-copy h2, .pages-feature-copy h3 { color: #fff; }
.pages-feature-copy h3 { font-size: var(--fs-4); margin: 24px 0 8px; }
.pages-feature-copy .eyebrow { color: var(--teal); }
.pages-feature-copy .muted { color: rgba(255, 255, 255, .62); }
.pages-feature-copy .btn:not(.btn-primary) { background: rgba(255, 255, 255, .12); color: #fff; }
.pages-feature-copy .btn-primary { background: var(--teal); color: var(--ink); }
@media (max-width: 960px) {
  .pages-feature-film { grid-template-columns: minmax(0, 1fr); }
  .pages-feature-copy { padding: 0 24px 32px; }
}

/* ---------------------------------------------------------------- quotes - */
.pages-quote { margin: 0; }
.pages-quote p { font-size: var(--fs-body); color: inherit; line-height: 1.5; margin: 0 0 12px; }
.pages-quote p::before { content: '“'; display: block; font-size: 44px; line-height: .8; color: var(--teal); font-weight: 600; margin-bottom: 8px; }
.pages-quote footer { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.feature.pages-quote p { color: var(--text); }
.pages-feature-copy .pages-quote footer { color: rgba(255, 255, 255, .6); }
.pages-bigquote { margin: 0; text-align: center; }
.pages-bigquote p { font-size: var(--fs-2); line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; color: #fff; margin: 0 0 20px; }
.pages-bigquote footer { color: var(--teal); font-weight: 600; font-size: var(--fs-sm); }

/* ---------------------------------------------------------- flayr panel - */
.pages-flayr { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; background: var(--navy); color: rgba(255, 255, 255, .78); border-radius: var(--r-xl); padding: clamp(32px, 5vw, 56px); }
.pages-flayr > div { max-width: 640px; }
.pages-flayr h2 { color: #fff; font-size: var(--fs-3); margin-bottom: 10px; }
.pages-flayr .eyebrow { color: var(--mint); }
.pages-flayr p { margin: 0; }
.pages-flayr .btn .icon { width: 16px; height: 16px; }

/* --------------------------------------------------------------- contact - */
.pages-contact { display: flex; flex-direction: column; gap: 10px; }
.pages-contact-line { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface-2); color: var(--ink); font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.pages-contact-line:hover { background: var(--surface-3); text-decoration: none; }
.pages-contact-line > span { display: flex; flex-direction: column; }
.pages-contact-line .icon { flex: none; width: 22px; height: 22px; color: var(--teal-deep); }
.pages-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pages-social a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill); background: var(--surface-2); color: var(--ink); font-size: var(--fs-sm); }
.pages-social a:hover { background: var(--surface-3); text-decoration: none; }
.pages-social .icon { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ lists */
.pages-links li { padding: 6px 0; }
.pages-ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: var(--fs-body); color: var(--ink); box-shadow: inset 0 -1px 0 var(--hairline); }
.pages-ticks li:last-child { box-shadow: none; }
.pages-ticks .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--teal-deep); }
.pages-ticks.is-not .icon { color: var(--faint); }

/* ------------------------------------------------------------ film school */
.pages-projects { --gap: 16px; }
.pages-project { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); background: var(--surface); border-radius: var(--r-xl); padding: clamp(20px, 3vw, 32px); scroll-margin-top: 80px; }
.section-white .pages-project { background: var(--surface-2); }
.pages-project-media { display: grid; gap: 12px; align-content: start; }
.pages-project-copy h3 { margin-bottom: 14px; }
.pages-project-copy p { color: var(--muted); font-size: var(--fs-sm); }
.pages-project .feature-num { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--teal-ink); margin-bottom: 8px; }
.pages-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 20px 0 0; }
.pages-specs div { background: var(--surface-2); border-radius: var(--r); padding: 12px 14px; }
.section-white .pages-specs div { background: var(--surface); }
.pages-specs dt { font-size: var(--fs-2xs); color: var(--muted); }
.pages-specs dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
@media (max-width: 860px) { .pages-project { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ legal */
.pages-legal .table-wrap { margin: 0 0 1.4em; }
.pages-legal .table td { vertical-align: top; font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ admin */
.pages-admin-reel { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px 0; box-shadow: inset 0 -1px 0 var(--hairline); }
.pages-admin-reel:last-child { box-shadow: none; }
.pages-admin-thumb { border-radius: var(--r); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
.pages-admin-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pages-admin-save { position: sticky; bottom: 0; padding: 16px 0; background: var(--bg); display: flex; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 760px) { .pages-admin-reel { grid-template-columns: minmax(0, 1fr); } }

/* Long page names in the sticky sub-nav (The Boxer from Somewhere Else) */
@media (max-width: 560px) { .subnav-title { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; } }