/* =============================================================
   EDIL VINCI — HOMEPAGE
   Layout dei blocchi nell'ordine del design definitivo (Figma,
   set 2026): Hero · In breve · Servizi · Per chi lavoriamo ·
   Metodo · Cantieri · Certificazioni · Parliamone.
   Su mobile Cantieri sale sopra il Metodo (.order-swap).
   Dipende da tokens.css, base.css, components.css.
   ============================================================= */


/* ============ 01 · HERO ============
   Tre strati, tre velocità (specifica «Hero · parallasse allo
   scroll»): il cielo resta quasi fermo (0,14×), i testi salgono
   piano (0,31×) e si spengono, l'edificio sale il doppio (1,25×)
   e se li mangia. Il movimento lo scrive main.js con translate3d;
   qui vivono solo i quattro strati e il loro ordine. */

.hero {
  position: relative;
  /* hidden e non clip: serve anche il BFC, altrimenti il margine
     negativo dell'edificio collassa fuori dalla sezione e trascina
     su il blocco successivo. */
  overflow: hidden;
  background-color: #A7C8E8; /* colore medio del cielo: regge mentre carica la foto */
}

/* Cielo: foto 1 ritagliata sulla sola porzione di cielo.
   Sborda di 120px in basso così, salendo di 100px, non scopre mai
   il fondo della sezione. */
.hero__sky {
  position: absolute;
  inset: 0 0 -120px 0;
  z-index: 0;
  background-image: url("../img/hero/cielo.jpg");
  background-size: cover;
  background-position: center top;
  will-change: transform;
}

/* Velo di leggibilità: calce sfumata che si spegne al 78%.
   Su foto, ink-2 non regge il contrasto: occhiello, lead e nota
   sono in ink pieno, e il velo fa il resto. Solidale al cielo. */
.hero__veil {
  position: absolute;
  inset: 0 0 -120px 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(246, 244, 241, 0.66) 0%,
    rgba(246, 244, 241, 0.30) 45%,
    rgba(246, 244, 241, 0) 78%
  );
  will-change: transform;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-5);
  padding-top: clamp(3.5rem, 7.5vw, 6.75rem);
  will-change: transform, opacity;
}

/* 1020px misurati in Figma: solo quella finestra manda a capo
   dopo «finiamo.» — non allargare senza rimisurare. */
.hero__title { max-width: 1020px; }

.hero__eyebrow,
.hero__note { color: var(--c-ink); }

.hero__lead {
  max-width: 46ch;
  color: var(--c-ink);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-2);
}

.hero__note { margin-top: var(--sp-2); }

/* Edificio in primo piano: foto 2 ritagliata su trasparenza.
   JPEG + maschera alpha invece del PNG: stesso ritaglio, un
   decimo del peso. Il margine negativo decide quanta parte
   dell'edificio resta sotto il bordo della sezione a riposo. */
.hero__building {
  position: relative;
  z-index: 3;
  width: min(980px, 92vw);
  aspect-ratio: 2350 / 2494;
  margin-inline: auto;
  margin-top: clamp(3rem, 6.6vw, 5.9rem);
  margin-bottom: calc(min(980px, 92vw) * -0.47);
  background-image: url("../img/hero/edificio.jpg");
  background-size: 100% 100%;
  -webkit-mask-image: url("../img/hero/edificio-mask.png");
  mask-image: url("../img/hero/edificio-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  will-change: transform;
}

@media (max-width: 639.98px) {
  .hero__content { padding-top: var(--sp-7); }
  /* A 390 l'edificio è largo 640 e sfora ai lati (come in Figma) */
  .hero__building {
    width: min(640px, 164vw);
    margin-top: clamp(3.5rem, 25vw, 6.2rem);
    margin-bottom: calc(min(640px, 164vw) * -0.12);
  }
}

/* Il parallasse è un'aggiunta: senza JS o con «riduci il
   movimento» i quattro strati restano semplicemente fermi. */


/* ============ 02 · EDIL VINCI IN BREVE ============
   Griglia d'archivio su calce: 4×3 su desktop, 2×4 su mobile.
   I filetti sono i bordi superiore+sinistro delle celle e i bordi
   inferiore+destro della griglia: così restano 1px, mai doppi. */

.inbreve { padding-block: var(--sect-pad); }

.inbreve__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}

.inbreve__cell {
  position: relative;
  min-height: clamp(150px, 44.9vw, 260px);
  border-top: var(--hairline);
  border-left: var(--hairline);
  padding: clamp(1.25rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.inbreve__cell--title {
  grid-column: 1 / -1;
  min-height: 120px;
  justify-content: flex-start;
}

.inbreve__title {
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: 1.08;
}

.inbreve__num {
  font-size: var(--fs-num-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-red-dark);
}

.inbreve__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-ink-2);
}

/* Il quadratino rosso: il rosso come punteggiatura (doc 02 §4.3) */
.inbreve__tick {
  width: 8px;
  height: 8px;
  background: var(--c-red);
  flex: none;
}

.inbreve__cell--photo { padding: 12px; }

.inbreve__cell--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Il cronoprogramma occupa due celle unite; dentro una cella già
   bordata l'ombra del widget non serve (e verrebbe tagliata). */
.inbreve__cell--chrono {
  grid-column: 1 / -1;
  display: block;
}

.inbreve__cell--chrono .chrono {
  box-shadow: none;
  height: 100%;
}

.inbreve__cell--chrono .chrono__rows { gap: var(--sp-2); }

/* Su mobile (artboard 390) la griglia è 2×4: niente cronoprogramma,
   niente cella vuota, due foto su tre. */
@media (max-width: 639.98px) {
  .inbreve__cell--photo-2,
  .inbreve__cell--empty,
  .inbreve__cell--chrono { display: none; }
}

@media (min-width: 640px) {
  .inbreve__grid { grid-template-columns: repeat(4, 1fr); }
  .inbreve__cell { min-height: clamp(230px, 21vw, 302px); }
  .inbreve__cell--title { grid-column: span 2; min-height: 0; }
  .inbreve__cell--chrono { grid-column: span 2; }
}


/* ============ 04 · I NOSTRI SERVIZI (slider) ============ */

.services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--c-on-dark);
}

/* Le foto, impilate e tutte caricate: la dissolvenza incrociata ha
   bisogno che la successiva sia già in memoria, altrimenti al primo
   click si vede il buco. Il JS fa comunque un preload di cortesia. */
.services__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.services__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.services__photo.is-active {
  opacity: 1;
  transform: scale(1);
  will-change: transform;
}

/* Il velo. Scuro in alto per il titolo, quasi trasparente a metà,
   di nuovo scuro in fondo per appoggiare la card. */
.services__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 20, 0.52) 0%,
    rgba(20, 20, 20, 0.16) 42%,
    rgba(20, 20, 20, 0.30) 100%
  );
}

.services__inner {
  position: relative;
  z-index: 2;
  min-height: min(86vh, 860px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-6);
  padding-block: clamp(3rem, 6vw, 6rem);
}

.services__head {
  margin-bottom: 0;
  max-width: 22ch;
}

.services__head .section-head__title { color: var(--c-on-dark); }

.services__card {
  background-color: var(--c-red);
  color: var(--c-on-red);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
}

@media (min-width: 840px) {
  .services__inner {
    grid-template-columns: minmax(0, 1fr) min(520px, 46%);
  }
  .services__head { grid-column: 1 / -1; }
  .services__card { grid-column: 2; align-self: end; }
}

/* Le schede: tutte nella stessa cella di griglia, così l'altezza
   della card è quella del testo più lungo e non cambia mai. Le
   inattive restano nel flusso (visibility, non display). */

.services__deck { display: grid; }

.services__deck > .service {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out),
              visibility 0s linear var(--dur-2);
}

/* Posizione di partenza di quella che entra. Il segno lo decide il
   verso di marcia, scritto dal JS su [data-deck]. */
.services__deck > .service.is-entering {
  transform: translateX(var(--slide-from, 24px));
  transition: none;
}

.services__deck > .service.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 420ms var(--ease-out) 120ms,
              transform 420ms var(--ease-out) 120ms,
              visibility 0s;
}

.services__deck[data-dir="avanti"]   { --slide-from:  24px; }
.services__deck[data-dir="indietro"] { --slide-from: -24px; }

.service__axis {
  color: var(--c-on-red-2);
  opacity: 0.72;
}

.service__title {
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.service__text { color: var(--c-on-red-2); }

.service__link { color: var(--c-on-red); }
.service__link:hover { color: var(--c-on-red); }
.service__link:hover .icon { transform: translateX(4px); }
.service__link .icon { color: currentColor; }

/* Piede: contatore e frecce */

.services__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
}

.service__count {
  color: var(--c-on-red-2);
  font-variant-numeric: tabular-nums;
}

.services__nav {
  display: flex;
  gap: var(--sp-3);
}

@media (max-width: 839px) {
  .services__inner {
    min-height: min(92vh, 760px);
    grid-template-rows: auto 1fr;
  }
  .services__card { align-self: end; }
}

/* Senza JS: le cinque schede restano tutte visibili, una sotto
   l'altra. Nessun servizio sparisce, nessun link irraggiungibile. */

.no-js .services__deck { display: flex; flex-direction: column; gap: var(--sp-6); }
.no-js .services__deck > .service { opacity: 1; visibility: visible; transform: none; }
.no-js .services__foot { display: none; }

/* Movimento ridotto: via la scala e via lo slittamento, resta il
   solo cambio di foto, corto (doc 02 §4.7). */

@media (prefers-reduced-motion: reduce) {
  .services__photo {
    transform: none;
    transition: opacity 150ms linear;
  }
  .services__photo.is-active { transform: none; }
  .services__deck > .service,
  .services__deck > .service.is-active {
    transform: none;
    transition: opacity 150ms linear, visibility 0s;
  }
  .services__deck > .service.is-entering { transform: none; }
}


/* ============ 04b · PER CHI LAVORIAMO / 06 · CERTIFICAZIONI ============
   Usano la «Card icona e testo» (.card-it, in components.css). */

/* Variante di intestazione con lead sotto il titolo (Certificazioni) */
.section-head--lead .section-head__lead {
  margin-top: var(--sp-4);
  max-width: 60ch;
}


/* ============ 05 · IL NOSTRO METODO (pannelli a tenda) ============
   I sei pannelli sono fratelli dentro la stessa <ol>: ognuno è
   position: sticky sotto l'header e il successivo — che nel DOM
   viene dopo — gli sale sopra come una tenda. Niente JavaScript. */

.metodo {
  --h-header: 64px;
  padding-bottom: var(--sect-pad);
}

@media (min-width: 1080px) {
  .metodo { --h-header: 80px; }
}

.metodo__pila {
  list-style: none;
  padding: 0;
  /* Nessun bleed: i pannelli restano dentro il container, così il
     bordo della foto si allinea al titolo della sezione. */
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}

.metodo__pannello {
  position: sticky;
  top: var(--h-header);
  /* svh e non vh: su iOS la barra che compare e scompare farebbe
     saltare l'altezza a metà scroll. */
  height: calc(100svh - var(--h-header));
  min-height: 520px;
  max-height: 900px;
  overflow: hidden;
  background-color: var(--c-ink);
  color: var(--c-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.75rem, 4vw, 4rem);
}

/* La foto è un <img> e non un background: così prende il lazy load
   e soprattutto un alt. Sono foto che dicono qualcosa. */
.metodo__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Il velo. Più forte in basso che in alto: il paragrafo è più
   piccolo del titolo ed è il primo a cedere su una foto chiara. */
.metodo__pannello::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 20, 0.55) 0%,
    rgba(20, 20, 20, 0.12) 38%,
    rgba(20, 20, 20, 0.80) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.metodo__testa,
.metodo__descrizione { position: relative; z-index: 2; }

/* Testo e CTA sono un blocco solo: space-between sul pannello vuole
   due figli, non tre, altrimenti il testo finisce a mezz'aria. */
.metodo__descrizione {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}

.metodo__numero { color: var(--c-on-dark-2); }

.metodo__titolo {
  margin-top: var(--sp-4);
  /* min(): a 390px «Cronoprogramma» deve stare su una riga */
  font-size: min(var(--fs-display), 9.4vw);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  color: var(--c-on-dark);
}

.metodo__testo {
  max-width: 37.5rem;   /* 600px, la misura del disegno */
  color: var(--c-on-dark);
  margin: 0;
}

/* Il CTA: il tondo è decorativo, l'area cliccabile è tutta
   l'ancora — niente <button> annidato dentro un <a>. */

.metodo__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: var(--c-on-dark);
}

.metodo__cta .btn-round {
  pointer-events: none;
  --btn-round-pieno: var(--c-on-dark);
  --btn-round-icona: var(--c-ink);
}

.metodo__cta:hover .btn-round {
  background-color: var(--btn-round-pieno);
  border-color: var(--btn-round-pieno);
  color: var(--btn-round-icona);
}

.metodo__cta:hover .btn-round .icon { transform: translateX(3px); }

/* Movimento ridotto: l'effetto è tutto nello scroll, non si
   ammorbidisce — si toglie. Pannelli in colonna, 16:9. */

@media (prefers-reduced-motion: reduce) {
  .metodo__pannello {
    position: static;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--sp-6);
  }
}

/* Fallback: senza position: sticky i pannelli restano in colonna.
   Nessun contenuto sparisce, si perde solo il gesto. */

@supports not (position: sticky) {
  .metodo__pannello {
    position: static;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--sp-6);
  }
}


/* ============ 03 · CANTIERI RECENTI ============ */

/* Griglia esplicita: mai lo stato 2+1 con card orfana (effetto archivio) */
.projects-grid {
  display: grid;
  gap: var(--sp-7) var(--grid-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 840px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
}

.section-foot { margin-top: clamp(2.5rem, 5vw, 4rem); }


/* ============ Ordine mobile: Cantieri sopra il Metodo ============
   Desktop (DOM): Metodo → Cantieri. Mobile (artboard 390):
   Cantieri → Metodo. Il wrapper è un flex verticale e l'ordine
   si scambia sotto gli 840px. */

.order-swap {
  display: flex;
  flex-direction: column;
}

.order-swap > * { width: 100%; }

@media (max-width: 839.98px) {
  .order-swap > .metodo { order: 2; }
}


/* ============ 07 · PARLIAMONE ============
   Desktop: foto di sfondo (palazzina a sinistra, cielo pulito a
   destra), testi a destra nella porzione di cielo, senza velo —
   su quel cielo il bianco tiene un contrasto largo. Se la foto
   cambia con una più chiara, il velo torna necessario.
   Mobile: fondo calce, senza foto (come in Figma). */

.talk {
  padding-block: var(--sect-pad);
  background-color: var(--c-calce);
}

.talk__copy {
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
}

.talk__head { margin-bottom: 0; }

.talk__text {
  max-width: 52ch;
  color: var(--c-ink-2);
}

.talk__phone {
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: var(--c-ink);
}
.talk__phone:hover { color: var(--c-red); }

.talk__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}

/* WhatsApp: ghost su chiaro (mobile) e ghost su scuro (desktop) */
.talk__btn-wa {
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.talk__btn-wa:hover {
  background: var(--c-ink);
  color: var(--c-white);
}

@media (min-width: 840px) {
  .talk {
    background-image: url("../img/parliamone.jpg");
    background-size: cover;
    background-position: left center;
    min-height: 728px;
    display: grid;
    align-items: center;
  }

  /* Il blocco occupa la porzione di cielo dove la casa non arriva */
  .talk__inner {
    display: flex;
    justify-content: flex-end;
  }

  .talk__copy { max-width: 612px; }

  .talk__head .section-head__eyebrow { color: var(--c-on-dark-2); }
  .talk__head .section-head__title { color: var(--c-on-dark); }
  .talk__text { color: var(--c-on-dark); }
  .talk__phone { color: var(--c-on-dark); }
  .talk__phone:hover { color: var(--c-white); }

  .talk__btn-wa {
    border-color: rgba(246, 244, 241, 0.55);
    color: var(--c-on-dark);
  }
  .talk__btn-wa:hover {
    background: var(--c-white);
    border-color: var(--c-white);
    color: var(--c-ink);
  }
}