/* ============================================================
   CLONE "CPH OPEN / About" — layout editoriale
   Fedele a cphopen.com/aboutcph:
     · colonna testo stretta (~462px) allineata a sinistra
     · immagini centrate a 960px, incorniciate dal bianco
     · titoli Bebas Neue, corpo serif (EB Garamond)
   Richiede: style.css + style-cph.css (variabili e nav/footer a tema).
   ============================================================ */

.editorial{max-width:1320px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--pad) clamp(60px,9vw,110px);}
/* hero come prima immagine: a filo sotto l'header (annulla il padding-top dell'articolo) */
.editorial > .ed-hero:first-child{margin-top:calc(-1 * clamp(40px,6vw,80px));}
/* About: l'hero a filo + assenza di kicker alzava troppo "ABOUT DOCK".
   Riporto il titolo all'altezza dei titoli editoriali delle altre pagine. */
.editorial > .ed-hero:first-child + .ed-col{margin-top:clamp(30px,5vw,64px);}

/* colonna testo stretta a sinistra */
.ed-col{max-width:462px;}
.ed-kicker{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:2.4px;font-size:13px;color:var(--red);margin-bottom:14px;}
.ed-h1{font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(44px,7.4vw,76px);line-height:.95;letter-spacing:-2.8px;
  -webkit-text-stroke:1.1px currentColor;
  color:var(--white);margin-bottom:22px;
  display:inline-block;transform:scaleX(1.2);transform-origin:left;}
.ed-lead{margin-bottom:26px;max-width:462px;}
.ed-col p:not(.ed-lead){font-family:var(--f-body);font-size:clamp(17px,1.7vw,18px);
  line-height:1.5;color:#484747;margin:0 0 16px;max-width:462px;}
.ed-col p strong{color:var(--white);font-weight:500;}
.ed-col p a{color:var(--red);border-bottom:1px solid rgba(226,5,16,.35);}
.ed-col p a:hover{border-color:var(--red);}

/* immagine editoriale: centrata, incorniciata dal bianco */
.ed-fig{margin:clamp(46px,7vw,88px) 0;}
.ed-fig img{width:100%;height:auto;display:block;}
.ed-fig figcaption{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:#16130f;margin-top:12px;
  font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}

/* citazione grande (pull-quote) */
.ed-quote{max-width:none;margin:clamp(30px,5vw,58px) 0;text-align:left;}
.ed-quote q{font-family:var(--f-display);font-weight:800;quotes:none;
  font-size:clamp(24px,3.4vw,40px);line-height:1.1;letter-spacing:-1.5px;
  -webkit-text-stroke:1px currentColor;
  text-transform:uppercase;color:var(--white);margin-bottom:16px;
  display:block;max-width:83%;transform:scaleX(1.2);transform-origin:left;}
.ed-cite{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:2px;font-size:13px;color:var(--red);font-style:normal;}

/* immagine hero finale a tutta larghezza (full-bleed) */
.ed-hero{width:100vw;max-width:100vw;position:relative;left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;margin-top:clamp(46px,7vw,88px);margin-bottom:0;}
.ed-hero img{width:100%;height:clamp(380px,82vh,820px);object-fit:cover;display:block;}
.ed-hero figcaption{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;font-size:12px;color:#16130f;margin-top:12px;
  padding:0 clamp(20px,5vw,72px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}

/* CTA finale inline (stile CPH: riga sobria + link) */
.ed-cta{max-width:462px;margin-top:8px;}
.ed-cta .btn{margin-top:22px;}

/* blocco contatti ordinato (pagina Contatti) */
.contact-lines{margin:4px 0 8px;display:grid;gap:16px;max-width:462px;}
.contact-lines .ln{display:flex;flex-direction:column;gap:3px;
  padding-bottom:14px;border-bottom:1px solid #e3e3e0;}
.contact-lines .ln:last-child{border-bottom:0;padding-bottom:0;}
.contact-lines .k{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:1.6px;font-size:12px;color:#8a8a86;word-spacing:normal;}
.contact-lines .v{font-family:var(--f-body);font-size:clamp(16px,1.7vw,18px);
  line-height:1.4;color:#16130f;}
.contact-lines .v a{color:var(--red);border-bottom:1px solid rgba(226,5,16,.35);}
.contact-lines .v a:hover{border-color:var(--red);}

@media(max-width:620px){
  .ed-col,.ed-lead,.ed-col p,.ed-cta{max-width:100%;}
  .ed-h1{font-size:clamp(30px,10vw,46px);transform:scaleX(1.1);overflow-wrap:anywhere;}
  .pkg-subtitle{transform:scaleX(1.1);overflow-wrap:anywhere;}
  .ed-hero img{height:clamp(300px,56vh,460px);}
  .ed-quote q{max-width:100%;transform:none;}
}

/* ============================================================
   EFFETTI DI MOVIMENTO — clone Squarespace "Fade" di CPH Open
   Solo le immagini si animano (come sul sito reale): dissolvenza
   + leggera risalita quando entrano in vista, una volta sola.
   ============================================================ */
/* stato di partenza attivo solo se il JS è vivo (html.cphfx) */
html.cphfx .ed-fig{opacity:0;transform:translateY(42px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),
             transform 1s cubic-bezier(.22,.61,.36,1);}
html.cphfx .ed-fig.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html.cphfx .ed-fig{opacity:1;transform:none;transition:none;}
}

/* barra di caricamento rossa in alto (come l'ajax loading bar Squarespace) */
#cph-load{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);
  z-index:9999;pointer-events:none;
  transition:width .6s ease,opacity .45s ease .6s;}
#cph-load.done{width:100%;opacity:0;}

/* ============================================================
   MEDIA / ARCHIVIO — stile cphopen.com/archive
   Header editoriale + griglia di card (thumbnail + titolo).
   ============================================================ */
.arch-wrap{max-width:1320px;margin:0 auto;
  padding:clamp(40px,6vw,80px) var(--pad) clamp(60px,9vw,110px);}
.arch-lead{max-width:640px;}
.arch-h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.4px;
  font-size:clamp(24px,3.2vw,38px);color:var(--white);
  margin:clamp(40px,6vw,72px) 0 20px;padding-bottom:10px;border-bottom:2px solid var(--red);}

.arch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,26px);}
@media(max-width:1000px){.arch-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.arch-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:440px){.arch-grid{grid-template-columns:1fr;}}
.arch-card{display:block;color:inherit;}
.arch-card .thumb{position:relative;overflow:hidden;background:#111;}
.arch-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  filter:grayscale(100%);transition:transform .5s ease,filter .5s ease;}
.arch-card:hover img{transform:scale(1.05);filter:grayscale(0);}
.arch-card .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.arch-card .play::before{content:"\25B6";color:#fff;font-size:24px;opacity:.92;
  text-shadow:0 2px 14px rgba(0,0,0,.6);}
.arch-card .t{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:-.3px;
  font-size:clamp(16px,1.4vw,20px);line-height:1.1;color:var(--white);margin-top:12px;transition:color .2s;}
.arch-card:hover .t{color:var(--red);}
.arch-card .s{font-family:var(--f-body);font-style:italic;color:#6f6a63;font-size:14px;margin-top:3px;}

/* griglia foto (senza titolo/play) */
.arch-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);}
@media(max-width:680px){.arch-photos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:440px){.arch-photos{grid-template-columns:1fr;}}
.arch-photos figure{margin:0;}
.arch-photos img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;}
.arch-photos figcaption{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:#16130f;margin-top:8px;
  font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}

/* griglia pacchetti sponsor a 3 colonne */
.pkg-grid.trio{grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
@media(max-width:900px){.pkg-grid.trio{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.pkg-grid.trio{grid-template-columns:1fr;}}
/* variante a 2 colonne (Expo) */
.pkg-grid.trio.duo{grid-template-columns:repeat(2,1fr);max-width:720px;margin-left:auto;margin-right:auto;}
@media(max-width:560px){.pkg-grid.trio.duo{grid-template-columns:1fr;}}

/* card pacchetto: pulita e uniforme */
.pkg-grid.trio .pkg{background:#fff;border:1px solid #e3e3e0;border-radius:3px;
  padding:30px 26px;height:100%;display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.pkg-grid.trio .pkg:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.10);border-color:#cdcdca;}
.pkg-grid.trio .pkg.exclusive{border-color:var(--red);box-shadow:inset 0 0 0 2px var(--red);}
.pkg-grid.trio .pkg.exclusive:hover{box-shadow:inset 0 0 0 2px var(--red),0 14px 34px rgba(226,5,16,.14);}

.pkg-grid.trio .pkg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-height:30px;}
.pkg-grid.trio .pkg:not(.exclusive) .pkg-head{justify-content:center;text-align:center;}
.pkg-grid.trio .pkg-name{font-size:clamp(20px,1.9vw,26px);max-width:100%;letter-spacing:.5px;}
.pkg-grid.trio .pkg:not(.exclusive) .pkg-name{transform-origin:center;}
.pkg-grid.trio .pkg-badge{align-self:flex-start;}

/* prezzo + early bird (data sotto) */
.pkg-grid.trio .pkg-price{font-family:var(--f-display);color:var(--red);
  font-size:clamp(30px,3.2vw,40px);line-height:1;margin:14px 0 0;}
.pkg-early{font-family:var(--f-sub);margin:8px 0 0;line-height:1.3;word-spacing:normal;
  display:flex;flex-direction:column;gap:1px;}
.pkg-early .lbl{font-weight:700;color:#16130f;font-size:13.5px;text-transform:uppercase;letter-spacing:.02em;}
.pkg-early .dt{font-weight:600;color:#8a8a86;font-size:12px;}

/* vantaggi più leggibili */
.pkg-grid.trio .benefits{margin-top:20px;padding-top:18px;border-top:1px solid #eaeae7;
  display:grid;gap:13px;}
.pkg-grid.trio .benefits li{position:relative;padding-left:28px;
  font-family:var(--f-sub);font-weight:500;font-size:14.5px;line-height:1.4;color:#2a2a28;word-spacing:normal;}
.pkg-grid.trio .benefits li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--red);font-weight:800;font-size:15px;line-height:1.4;}
.pkg-grid.trio .benefits li::after{content:none;}
.pkg-grid.trio .benefits li:first-child{font-weight:700;color:#16130f;}

/* paginazione galleria foto (18 per pagina) */
.arch-photos figure.is-hidden{display:none;}
.arch-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px;flex-wrap:wrap;}
.arch-pager button{background:none;border:0;padding:6px;cursor:pointer;color:#16130f;
  display:inline-flex;align-items:center;line-height:0;transition:color .18s ease,opacity .18s ease;}
.arch-pager button svg{width:40px;height:40px;display:block;transition:transform .22s ease;}
.arch-pager button[data-prev]:hover:not(:disabled) svg{transform:translateX(-3px);}
.arch-pager button[data-next]:hover:not(:disabled) svg{transform:translateX(3px);}
.arch-pager button:hover{color:var(--red);}
.arch-pager button:disabled{opacity:.25;cursor:default;color:#16130f;}
.arch-pager .page-info{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:#393838;font-size:14px;min-width:120px;text-align:center;}

/* loghi edizioni passate */
.arch-editions{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,60px);align-items:flex-end;padding:6px 0;}
.arch-ed{display:flex;flex-direction:column;align-items:center;gap:12px;}
.arch-ed img{width:clamp(78px,9vw,120px);height:auto;filter:grayscale(100%);opacity:.8;transition:.3s;}
.arch-ed:hover img{filter:grayscale(0);opacity:1;}
.arch-ed .y{font-family:var(--f-sub);font-weight:700;text-transform:uppercase;letter-spacing:2px;
  font-size:13px;color:#6f6a63;}

