/* =============================================================
   EDIL VINCI — PAGINE INTERNE
   Layout editoriale delle pagine interne, dal file Figma
   «Sito Web · V3» (settembre 2026): hero di pagina, intestazioni
   di sezione, righe numerate, sezioni a due colonne, dichiarazioni,
   FAQ, archivio cantieri, richiesta in tre passi, CTA di chiusura.
   Dipende da tokens.css, base.css, components.css. Non serve alla
   home (che usa home.css).

   Scala editoriale V3 (Desktop 1440 / Mobile 390), risolta in
   clamp(): Display 72/36 · Sezione 48/32 · Card 24/20 · Corpo 18/17
   · Meta 12. Spazi: sezione 120/72, gap 32/24, piccolo 16/12.
   ============================================================= */

:root {
  --fs-page-title: clamp(2.25rem, 1.4rem + 3.8vw, 4.5rem);   /* 36 → 72 */
  --fs-sec:        clamp(2rem, 1.35rem + 2.3vw, 3rem);       /* 32 → 48 */
  --fs-sec-large:  clamp(2.125rem, 1.3rem + 2.8vw, 3.5rem);  /* 34 → 56 */
  --fs-card:       clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);  /* 20 → 24 */
  --fs-page-body:  clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem); /* 17 → 18 */
  --measure-page:  40em;   /* ≈ 720px a 18px: la misura del disegno */
}

/* Le sezioni bianche adiacenti si separano con un filetto, come le
   celle della griglia «in breve»: spaziatura sola non basta. */
main > .section + .section:not(.surface-calce) { border-top: var(--hairline); }
main > .surface-calce + .section { border-top: 0; }


/* ============ 01 · HERO DI PAGINA ============
   Occhiello rosso, titolo display con la coda in rosso (accent),
   lead, un solo bottone primario. Poi la fotografia a tutta colonna
   e, sotto, didascalia a sinistra e tag a destra su un filetto. */

.page-hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.page-hero__text {
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
  max-width: 960px;
}

.page-hero__kicker { color: var(--c-red); }

.page-hero__title {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.page-hero__lead {
  max-width: var(--measure-page);
  color: var(--c-ink-2);
}

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

.page-hero__media {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 1208 / 640;
  overflow: hidden;
  background: var(--c-calce);
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero__media--top img { object-position: center top; }

.page-hero__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--hairline);
}

/* Senza foto il filetto dei tag sta sotto il testo, con più aria */
.page-hero__text + .page-hero__foot { margin-top: clamp(2rem, 4vw, 3rem); }

.page-hero__caption {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  max-width: 52ch;
}

.page-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) 0;
  color: var(--c-ink);
}

/* Il separatore «/» lo mette il CSS: nel markup c'è uno span per voce.
   Sta in coda alla voce (::after), così se i tag vanno a capo la riga
   nuova non comincia mai con la barra. */
.page-hero__tags span:not(:last-child)::after {
  content: "/";
  margin: 0 0.85em;
  color: var(--c-line-strong);
}

@media (max-width: 639.98px) {
  .page-hero__media { aspect-ratio: 342 / 300; }
  .page-hero__foot { flex-direction: column; align-items: flex-start; }
}


/* ============ 02 · INTESTAZIONE DI SEZIONE ============ */

.sec-head {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.sec-head__kicker { color: var(--c-red); }

.sec-head__title {
  font-size: var(--fs-sec);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  max-width: 22ch;
}

.sec-head__body {
  margin-top: var(--sp-2);
  font-size: var(--fs-page-body);
  color: var(--c-ink-2);
  max-width: var(--measure-page);
}

.sec-head--large .sec-head__title {
  font-size: var(--fs-sec-large);
  max-width: 18ch;
}


/* ============ 03 · RIGHE NUMERATE ============
   Numero rosso, titolo, testo: tre colonne su un filetto, come
   una tabella d'archivio. Su mobile numero e titolo affiancati,
   testo sotto. */

.rows {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--hairline);
}

.row {
  display: grid;
  grid-template-columns: 72px minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-4) var(--grid-gap);
  align-items: start;
  padding-block: clamp(1.5rem, 2.8vw, 2.25rem);
  border-bottom: var(--hairline);
}

.row__num {
  color: var(--c-red);
  padding-top: 0.45em;
  font-variant-numeric: tabular-nums;
}

.row__title {
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.row__text {
  font-size: var(--fs-page-body);
  color: var(--c-ink-2);
  max-width: var(--measure-page);
}

.row__text a { color: var(--c-ink); }

@media (max-width: 839.98px) {
  .row { grid-template-columns: 48px minmax(0, 1fr); }
  .row__text { grid-column: 2; }
}

/* Nota di sezione: il quadratino rosso come punteggiatura */
.sec-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  max-width: 64ch;
}

.sec-note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  background: var(--c-red);
}


/* ============ 04 · SEZIONE A DUE COLONNE ============
   Testo a sinistra (intestazione + coppie titolo/testo + link),
   fotografia a destra. La variante --reverse inverte le colonne. */

.sec-split__grid {
  display: grid;
  gap: var(--sp-7) var(--grid-gap);
  align-items: center;
}

.sec-split__copy { min-width: 0; }

.sec-split__copy .sec-head { margin-bottom: 0; }

.sec-split__media {
  margin: 0;
  aspect-ratio: 592 / 640;
  overflow: hidden;
  background: var(--c-calce);
}

.sec-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pairs {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: var(--hairline);
}

.pair {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-bottom: var(--hairline);
}

.pair__title {
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.pair__text {
  margin: 0;
  font-size: var(--fs-page-body);
  color: var(--c-ink-2);
  max-width: var(--measure-page);
}

.sec-split__copy > .link-action { margin-top: var(--sp-6); }

@media (min-width: 840px) {
  .sec-split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sec-split--reverse .sec-split__copy { order: 2; }
  .sec-split--reverse .sec-split__media { order: 1; }
}

@media (max-width: 639.98px) {
  .sec-split__media { aspect-ratio: 342 / 380; }
}


/* ============ 05 · DICHIARAZIONE ============
   Su calce, titolo più grande, misura corta. */

.sec-statement .sec-head {
  margin-bottom: 0;
  max-width: 920px;
}


/* ============ 06 · FAQ ============
   Intestazione a sinistra (sticky), accordion a destra largo
   otto colonne: gli 824px del componente Figma. */

.sec-faq__grid {
  display: grid;
  gap: var(--sp-6) var(--grid-gap);
  align-items: start;
}

.sec-faq .sec-head { margin-bottom: 0; }

.sec-faq .accordion__summary {
  font-size: var(--fs-card);
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding-block: clamp(1.25rem, 2.6vw, 2.5rem);
  gap: var(--sp-6);
}

.sec-faq .accordion__panel {
  font-size: var(--fs-page-body);
  padding-bottom: clamp(1.25rem, 2.6vw, 2.5rem);
  max-width: var(--measure-page);
}

.sec-faq .accordion__panel p + p { margin-top: var(--sp-3); }

@media (min-width: 840px) {
  .sec-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .sec-faq .sec-head { position: sticky; top: 104px; }
}


/* ============ 07 · ARCHIVIO CANTIERI ============
   Filtri a bottone, etichetta d'archivio, griglia di modelli
   (624×630 nel disegno: foto 360 + testi). */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.filter {
  min-height: 44px;
  padding: 0 1.1em;
  border: 1px solid var(--c-line-strong);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.filter:hover { border-color: var(--c-ink); }

.filter.is-active {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

.archive__label {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: var(--sp-4);
  border-bottom: var(--hairline);
}

.archive__grid {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) var(--grid-gap);
}

@media (min-width: 840px) {
  .archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card-model[hidden] { display: none; }

.card-model__link {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  color: inherit;
  text-decoration: none;
}

.card-model__link:hover { color: inherit; }

.card-model__media {
  display: block;
  width: 100%;
  aspect-ratio: 624 / 360;
  overflow: hidden;
  background: var(--c-calce);
  margin-bottom: var(--sp-2);
}

.card-model__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.card-model__link:hover .card-model__media img,
.card-model__link:focus-visible .card-model__media img { transform: scale(1.04); }

.card-model__cat { color: var(--c-red); }

.card-model__title {
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.card-model__text {
  font-size: var(--fs-page-body);
  color: var(--c-ink-2);
  max-width: var(--measure-page);
}

.card-model__action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-weight: var(--fw-semibold);
  transition: color var(--dur-1) var(--ease-out);
}

.card-model__action .icon {
  color: var(--c-red);
  transition: transform var(--dur-2) var(--ease-out);
}

.card-model__link:hover .card-model__action { color: var(--c-red); }
.card-model__link:hover .card-model__action .icon { transform: translate(3px, -3px); }

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


/* ============ 08 · RICHIESTA IN TRE PASSI ============
   Passo 1 le scelte, passo 2 i dettagli, passo 3 i recapiti.
   A sinistra l'intestazione del passo e una nota, a destra i
   campi. Il JS mostra un passo alla volta; senza JS restano
   tutti visibili, in sequenza, con un solo bottone di invio. */

.richiesta {
  padding-block: var(--sect-pad);
  border-top: var(--hairline);
  scroll-margin-top: 6rem;
}

.stepper {
  list-style: none;
  padding: 0 0 var(--sp-4);
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  border-bottom: var(--hairline);
}

.stepper__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-ink-2);
}

.stepper__step.is-active { color: var(--c-ink); }

.stepper__num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-1) var(--ease-out);
}

.stepper__step.is-active .stepper__num {
  background: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-white);
}

.stepper__step.is-done .stepper__num {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

.stepper__sep { color: var(--c-line-strong); }

.step {
  display: grid;
  gap: var(--sp-6) var(--grid-gap);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.step[hidden] { display: none; }

.step + .step {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: var(--hairline);
}

@media (min-width: 840px) {
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.step__intro .sec-head { margin-bottom: 0; }

.step__aside {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--hairline);
  display: grid;
  gap: var(--sp-1);
  justify-items: start;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.step__aside strong {
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
}

.step__aside a { color: var(--c-ink); }

.step__back {
  margin-top: var(--sp-2);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-line-strong);
}

.step__back:hover { color: var(--c-red); text-decoration-color: currentColor; }

.step__form {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.step__question {
  padding: 0;
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Scelte: righe su filetto con il pallino a destra (● / ○) */
.choices {
  display: grid;
  border-top: var(--hairline);
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: var(--hairline);
  font-size: var(--fs-page-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out);
}

.choice:hover { color: var(--c-red); }

.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.choice__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  transition: border-color var(--dur-1) var(--ease-out);
}

.choice__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-red);
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease-out);
}

.choice:hover .choice__dot { border-color: var(--c-ink); }
.choice input:checked ~ .choice__dot { border-color: var(--c-red); }
.choice input:checked ~ .choice__dot::after { transform: scale(1); }
.choice input:checked ~ .choice__label { color: var(--c-ink); }

.choice input:focus-visible ~ .choice__dot {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}

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

/* Sotto le righe dei contatti diretti il bottone WhatsApp respira
   come una nota di sezione, non come il piede di un campo. */
.sec-rows .rows + .step__actions { margin-top: var(--sp-6); }

.step__note {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  max-width: 52ch;
}

/* Icona in un link dentro il testo corrente (es. «Leggi l’informativa
   privacy ↗»): base.css rende gli svg block, qui deve restare in riga. */
.field__hint .icon,
.step__note .icon {
  display: inline-block;
  vertical-align: -0.15em;
}

.form-status {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-red);
  font-size: var(--fs-small);
  color: var(--c-ink);
  max-width: 60ch;
}

.form-status[hidden] { display: none; }

.form-status a { color: var(--c-ink); font-weight: var(--fw-semibold); }

/* Senza JavaScript: tre passi in sequenza, niente stepper, un solo invio */
.no-js .step[hidden] { display: grid; }
.no-js .stepper,
.no-js .step__next,
.no-js .step__back { display: none; }


/* ============ 09 · CTA DI CHIUSURA ============ */

.cta-band {
  padding-block: var(--sect-pad);
  border-top: var(--hairline);
}

.cta-band__inner {
  display: grid;
  gap: var(--sp-6) var(--grid-gap);
  align-items: end;
}

.cta-band .sec-head { margin-bottom: 0; }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

@media (min-width: 840px) {
  .cta-band__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cta-band__actions { justify-self: start; padding-bottom: 0.4em; }
}


/* ============ 10 · CASI PARTICOLARI ============ */

/* 404 e Grazie: hero più alto, così la pagina non finisce a metà schermo */
.page-hero--tall {
  min-height: min(62vh, 640px);
  display: grid;
  align-items: center;
}

/* Link nel lead (404: «raccontarci il vostro progetto») */
.page-hero__lead a {
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}