/* ARC BK — κοινό στρώμα: επιφάνειες (§1) · διατάξεις (§2) · lightbox (§3) · κινητό (§4) */

/* ── §1 ΕΠΙΦΑΝΕΙΕΣ ────────────────────────────────────────────────────────── */
.band{background:var(--band-bg,var(--paper,#faf8f4));color:var(--band-fg,var(--ink,#16161a));padding:clamp(34px,5.5vw,80px) 0}
.band--paper{--band-bg:var(--paper,#faf8f4);--band-fg:var(--ink,#16161a)}
.band--tinted{--band-bg:color-mix(in srgb,var(--accent,#8a1c1c) 8%,var(--paper,#faf8f4));--band-fg:var(--ink,#16161a)}
.band--accent{--band-bg:color-mix(in srgb,var(--accent,#8a1c1c) 16%,var(--paper,#faf8f4));--band-fg:var(--ink,#16161a)}
.band--dark{--band-bg:#15151a;--band-fg:#f4f1ec}
/* Το accent είναι AA πάνω στο ΧΑΡΤΙ — πάνω στο σκούρο δεν είναι. Λευκό, δηλωμένα. */
.band--dark a{color:#fff}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark strong{color:#fff}
.band--dark .missing,.band--dark .muted,.band--dark dt,.band--dark .year{color:#b9b5ad}
.band--dark .card,.band--dark .pn,.band--dark .feature{background:#1d1d24;border-color:#2e2e38}
.band--dark .chip{background:#1d1d24;color:#f4f1ec;border-color:#2e2e38}
.band--dark .chip.is-on{background:#f4f1ec;color:#15151a;border-color:#f4f1ec}
.band--dark .decade-head{border-bottom-color:#2e2e38}
.band--dark .points li{border-top-color:#fff}
.band--dark .shot,.band--dark .noposter{border-color:#2e2e38;background:#22222a}
.band--dark .pdf{color:#fff}

/* Ένα band κουβαλά ΤΟ ΔΙΚΟ του .wrap. Ένα main.wrap απ' έξω θα διπλασίωνε το padding και θα
   ακύρωνε το full-bleed — ισχύει μόνο όταν το main ΟΝΤΩΣ περιέχει bands. */
main.wrap:has(> .band),main.bands{max-width:none;padding:0}
.band > .wrap{max-width:var(--maxw,1180px);margin:0 auto;padding:0 var(--gap,24px)}
/* Μια ζώνη είναι ΕΠΙΦΑΝΕΙΑ: κενό ανάμεσα σε δύο ζώνες σημαίνει τρίτο χρώμα (του body) στη μέση.
   Νικά το .frame-page section{margin:…} του style.css με ειδικότητα (0,2,0) vs (0,1,1). */
.bands > .band,main > .band{margin:0}

/* ── §2 ΔΙΑΤΑΞΕΙΣ ─────────────────────────────────────────────────────────── */
.band__in{display:block}
.band[data-lay="narrow"] > .wrap{max-width:min(74ch,var(--maxw,1180px))}
.band[data-lay="full"] > .wrap{max-width:none;padding:0 clamp(14px,3vw,44px)}
.band[data-lay="split"] .band__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.band[data-lay="asym"] .band__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,44px);align-items:start}
.band[data-lay="cards"] .band__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(14px,2vw,26px)}
.band > .wrap > h2:first-child{margin-top:0}

/* ── §4 ΚΙΝΗΤΟ: hamburger ─────────────────────────────────────────────────── */
/* Το κρύψιμο της λίστας κρέμεται από το .has-toggle, που το βάζει ΜΟΝΟ το site-nav.js αφού
   φτιάξει το κουμπί. Χωρίς αυτό, μια σελίδα με απενεργοποιημένο JS θα έχανε ΟΛΟΚΛΗΡΗ τη
   μπάρα της στο κινητό — δηλαδή θα «κερδίζαμε» hamburger και θα χάναμε την πλοήγηση. */
.nav__toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;
  background:none;border:1px solid var(--line,#e2ded6);border-radius:8px;cursor:pointer;color:inherit;padding:0}
.nav__toggle span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
.nav.is-open .nav__toggle span{background:transparent}
.nav.is-open .nav__toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav__toggle span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:768px){
  .nav{flex-wrap:nowrap}
  .nav.has-toggle .nav__toggle{display:inline-flex}
  .nav.has-toggle > ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--paper,#faf8f4);border-bottom:1px solid var(--line,#e2ded6);padding:8px 0;
    box-shadow:0 18px 40px -26px rgba(0,0,0,.6);max-height:calc(100dvh - 64px);overflow:auto}
  .nav.has-toggle.is-open > ul{display:flex}
  .nav > ul > li{width:100%}
  .nav > ul > li > a{display:block;padding:13px var(--gap,20px);font-size:16px}

  /* Ό,τι ακολουθεί είναι ΣΚΟΠΙΜΑ κλεισμένο μέσα στο δικό μας markup (.band / .bands). Αυτό το
     αρχείο πέφτει και πάνω σε sites που έγραψε ο spawn, και ένα σκέτο .grid{…} εδώ θα άλλαζε
     τη διάταξη ενός εγκεκριμένου σχεδίου πελάτη χωρίς να το ζητήσει κανείς. */
  /* grid 2 στήλες — το auto-fill(210px) δίνει ΜΙΑ στήλη στα 390 px */
  .band .grid,.band .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* hero stacked */
  .band__in,.band .feature{grid-template-columns:1fr !important}
  .bands .masthead__strip,.masthead__strip{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);grid-auto-columns:auto;max-height:none}
  .masthead__strip img{aspect-ratio:3/4}
  /* πίνακες συντελεστών σε ΜΙΑ στήλη */
  .band .credits-list,.band .ident{grid-template-columns:1fr;gap:2px 0}
  .band .credits-list dt,.band .ident dt{margin-top:10px}
  .band .prevnext{flex-direction:column}
}

/* ── §3 ΤΟ ΝΤΥΣΙΜΟ ΤΟΥ LIGHTBOX ───────────────────────────────────────────── */
.lb{position:fixed;inset:0;background:rgba(10,10,12,.95);display:none;z-index:60;padding:clamp(12px,3vw,32px)}
.lb.is-open{display:grid;grid-template-rows:1fr auto;place-items:center}
.lb__fig{margin:0;display:grid;place-items:center;max-width:100%;max-height:100%}
.lb__img{max-width:min(1500px,94vw);max-height:78vh;object-fit:contain;display:block}
.lb__cap{color:#e6e4e0;text-align:center;font-size:14px;line-height:1.5;margin:12px auto 0;max-width:70ch;padding:0 12px}
.lb__bar{display:flex;align-items:center;gap:14px;color:#cfcdc8;font-size:13px;letter-spacing:.08em;padding-top:10px}
.lb__count{font-variant-numeric:tabular-nums}
.lb button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;
  border-radius:999px;width:52px;height:52px;display:grid;place-items:center;font-size:20px;line-height:1;padding:0}
.lb button:hover{background:rgba(255,255,255,.2)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb__close{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);z-index:2}
.lb__prev,.lb__next{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb__prev{left:clamp(8px,2vw,24px)}
.lb__next{right:clamp(8px,2vw,24px)}
.lb[data-single="1"] .lb__prev,.lb[data-single="1"] .lb__next,.lb[data-single="1"] .lb__count{display:none}
@media (max-width:768px){
  .lb button{width:46px;height:46px}
  .lb__img{max-height:66vh}
}
@media (prefers-reduced-motion:reduce){.lb,.lb *{transition:none!important;animation:none!important}}