/* ============================================================================
   GATE M — pagina di un lavoro (condivisa da tutte le azienda-*.html)
   Griglia a colonne di larghezza diversa; scorrendo, colonne alternate salgono
   e scendono, con un ritardo (lag) crescente verso l'esterno.
   Origine dell'idea: Knowledge → 09_grid-animations/elasticgridscroll (demo2),
   che raggruppa gli item in .grid__column e applica lag + stiramento sulla
   velocità di scroll. Lì servono GSAP + ScrollSmoother (plugin a pagamento):
   qui è riscritto in JS puro e con la DIREZIONE ALTERNATA, che l'originale non ha.
   ========================================================================== */

:root{
  --warm-white:#F7F5F2; --soft-beige:#EBDED2; --sand:#DCCDBD;
  --anthracite:#292725; --taupe:#A8978B; --dusty:#E2BAB6; --acc:#B9A17C;
}
*{margin:0;padding:0;box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{font-family:'Montserrat',sans-serif;color:var(--warm-white);background:var(--anthracite);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:500;line-height:1.02;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.eyebrow{font-weight:500;letter-spacing:.28em;text-transform:uppercase;font-size:.7rem;color:var(--sand)}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(26px,5vw,64px)}

/* ---------- nav ---------- */
header{position:fixed;top:18px;left:0;right:0;z-index:80;display:flex;justify-content:space-between;
  align-items:center;padding:0 clamp(16px,3vw,30px);pointer-events:none}
.pill{pointer-events:auto;background:rgba(247,245,242,.08);backdrop-filter:blur(14px);
  border:1px solid rgba(247,245,242,.14);border-radius:40px;display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px;font-size:.76rem;letter-spacing:.04em;color:var(--warm-white)}
.pill.brand{font-family:'Gate Geometric','Playfair Display',serif;font-weight:400;letter-spacing:.24em;font-size:1rem;padding:8px 18px}
.pill-group{display:flex;gap:10px;align-items:center}
.pill.cta{background:var(--acc);color:var(--anthracite);border-color:var(--acc);text-transform:uppercase;
  font-weight:600;letter-spacing:.08em;transition:transform .3s}
.pill.cta:hover{transform:translateY(-2px)}
.lbl-short{display:none}

/* ---------- intestazione ---------- */
.az-head{padding:150px 0 clamp(40px,7vh,74px)}
.az-head h1{font-size:clamp(2.8rem,8vw,6rem);margin:.12em 0 .18em}
.az-head-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.az-tag{color:var(--sand);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.az-intro{max-width:52ch;color:rgba(247,245,242,.72);font-size:.95rem;margin-top:6px}

/* ---------- griglia parallax ---------- */
/* il padding verticale assorbe lo scorrimento delle colonne: niente buchi ai bordi */
.pgrid-wrap{padding:clamp(40px,7vh,90px) 0 clamp(80px,13vh,160px);overflow:hidden}
/* 6 colonne di larghezza diversa: il ritmo irregolare è la firma della griglia */
.pgrid{display:grid;grid-template-columns:1.18fr .82fr 1.06fr .86fr 1.22fr .92fr;
  gap:clamp(9px,1.1vw,16px);align-items:stretch}
/* Le colonne finiscono tutte alla stessa quota, in due passaggi:
   1. lavoro.js distribuisce le foto nella colonna di volta in volta più corta;
   2. l'ultima foto di ogni colonna assorbe il residuo (l'immagine non si deforma,
      si ritaglia — object-fit:cover), così il pareggio è esatto. */
.pgrid__col{display:flex;flex-direction:column;gap:clamp(9px,1.1vw,16px);will-change:transform}
.pgrid__col > .ph:last-child{flex:1 1 auto;aspect-ratio:auto;min-height:120px}

.ph{position:relative;overflow:hidden;border-radius:clamp(14px,1.5vw,22px);background:rgba(247,245,242,.06)}
.ph img{width:100%;height:100%;object-fit:cover;transform:scaleY(var(--sy,1));transform-origin:var(--to,50% 100%)}
.ph--tall{aspect-ratio:3/4}
.ph--square{aspect-ratio:1/1}
.ph--wide{aspect-ratio:4/3}
.ph--port{aspect-ratio:4/5}

/* riquadro segnaposto, per le attività di cui non abbiamo ancora le foto */
.ph--empty{display:flex;align-items:center;justify-content:center;border:1px dashed rgba(247,245,242,.2);
  background:none}
.ph--empty span{font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);text-align:center;padding:0 10px}

/* ---------- descrizione del lavoro (sotto la griglia) ---------- */
.az-about{padding:clamp(20px,4vh,44px) 0 clamp(60px,10vh,110px)}
.az-about-in{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(26px,6vw,86px);align-items:start}
.az-about h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-top:.28em}
.az-about p{color:rgba(247,245,242,.78);max-width:62ch;margin-bottom:1.1em;font-size:clamp(.94rem,1.1vw,1.02rem)}
.az-about p:first-child{color:var(--warm-white);font-family:'Playfair Display';font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.4;letter-spacing:-.01em}
.az-done{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(247,245,242,.14);list-style:none}
.az-done li{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);
  border:1px solid rgba(220,205,189,.34);border-radius:30px;padding:7px 14px}

@media(max-width:900px){ .az-about-in{grid-template-columns:1fr;gap:18px} }

/* ---------- chiusura ---------- */
.az-cta{border-top:1px solid rgba(247,245,242,.14);padding:clamp(48px,8vh,90px) 0}
.az-cta-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.az-cta h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.btn{display:inline-block;background:var(--acc);color:var(--anthracite);padding:14px 28px;border-radius:2px;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;transition:transform .3s}
.btn:hover{transform:translateY(-2px)}
.az-nav{display:flex;gap:18px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
.az-nav a{border-bottom:1px solid rgba(220,205,189,.4);padding-bottom:3px;transition:opacity .3s}
.az-nav a:hover{opacity:.6}

footer{padding:38px 0;text-align:center;font-size:.76rem;color:var(--taupe)}

/* Attività con poche foto: meno colonne, altrimenti la griglia resta vuota.
   Doppia classe = specificità alta, così vince anche dentro le media query sotto. */
.pgrid.pgrid--3{grid-template-columns:1.12fr .86fr 1.04fr}
.pgrid.pgrid--2{grid-template-columns:1.1fr .9fr}

/* Da 6 colonne si scende per gradi: 5 → 4 → 3 → 2 → 1.
   Le foto NON spariscono mai: lavoro.js le ridistribuisce nelle colonne disponibili,
   leggendo quante ne dichiara il CSS (stesso meccanismo di elasticgridscroll). */
@media(max-width:1400px){ .pgrid{grid-template-columns:1.15fr .85fr 1.08fr .88fr 1.2fr} }
@media(max-width:1150px){ .pgrid{grid-template-columns:1.15fr .85fr 1.1fr .9fr} }
@media(max-width:900px){  .pgrid{grid-template-columns:1.12fr .88fr 1fr} }
@media(max-width:700px){  .pgrid{grid-template-columns:1.1fr .9fr} }
@media(max-width:900px){  .pgrid.pgrid--3{grid-template-columns:1.08fr .92fr} }
/* su schermo stretto i due pulsanti dell'header non ci stanno: etichette accorciate */
@media(max-width:620px){
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .pill{padding:9px 13px;font-size:.7rem}
  .pill.brand{font-size:.9rem;letter-spacing:.18em;padding:8px 14px}
}
/* schermi stretti: i titoli grandi restavano a 45px per via del minimo della clamp
   e con 22px di margine sembravano tagliati */
@media(max-width:620px){
  .az-head{padding:128px 0 clamp(30px,5vh,44px)}
  .az-head h1{font-size:clamp(2.05rem,9.5vw,3.2rem);line-height:1.06}
  .az-intro{font-size:.9rem}
  .az-about h2,.az-cta h2{font-size:clamp(1.45rem,6.6vw,2rem);line-height:1.1}
  .az-about p:first-child{font-size:1.05rem}
  .az-nav{gap:12px;font-size:.68rem}
}
@media(max-width:520px){
  .pgrid,.pgrid.pgrid--3,.pgrid.pgrid--2{grid-template-columns:1fr;gap:14px}
  .pgrid__col{transform:none !important}
}
@media(prefers-reduced-motion:reduce){
  .pgrid__col{transform:none !important}
  .ph img{transform:none}
  *{transition-duration:.001ms !important}
}