/* ==========================================================================
   SITO DI PROGETTO — regole base (direzione A "Costiera")
   Template riutilizzabile per cantieri residenziali · ADrender
   Per ogni progetto si cambiano solo: --accent, logo, nome, foto, testi, dati.
   Font: Google Fonts
   <link href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Hanken+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
   ========================================================================== */

/* 1. TOKEN ---------------------------------------------------------------- */
:root {
  /* Accento del cliente: l'unico colore che cambia da progetto a progetto.
     Deve avere contrasto ≥ 4.5:1 con il bianco (testo dei pulsanti). */
  --accent: #1F5A66;      /* colore del cliente (segnaposto) */
  --accent-ink: #FFFFFF;
  --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, #fff);

  /* Neutri: pietra calda, reggono qualsiasi accento */
  --bg: #F4F2EE;          /* fondo pagina */
  --surface: #FFFFFF;     /* pannelli, schede, moduli */
  --paper: #FBFAF7;       /* fondo delle planimetrie */
  --sunken: #E9E5DD;      /* segnaposto immagini, aree incassate */
  --ink: #1D1C1A;         /* testo principale */
  --ink-2: #3A3833;       /* testo secondario forte */
  --muted: #66625B;       /* didascalie, etichette (5.4:1 su --bg) */
  --line: #DCD8D0;        /* filetti */
  --line-soft: #EEEBE5;   /* filetti dentro i pannelli */
  --control: #CFCAC0;     /* bordo di campi e chip */
  --on-image: #FFFFFF;
  --scrim: linear-gradient(180deg, rgba(18,18,16,.45) 0%, rgba(18,18,16,0) 22%, rgba(18,18,16,0) 48%, rgba(18,18,16,.72) 100%);
  --error: #A3362A;
  --error-soft: #FBEDEA;

  /* Stati di vendita: FISSI in tutti i progetti, non seguono l'accento.
     Si distinguono anche per trama (pieno / righe / tratteggio) e sempre con l'etichetta. */
  --st-disp: #3E9467;  --st-disp-line: #2E7A55; --st-disp-ink: #1F5C3F; --st-disp-soft: #EAF4EE;
  --st-ris: #D9A441;   --st-ris-light: #F6E6C2; --st-ris-line: #A86F17; --st-ris-ink: #6E4A0F; --st-ris-soft: #FBF3E2;
  --st-vend: #8F9396;  --st-vend-light: #E2E3E4; --st-vend-line: #6C7074; --st-vend-ink: #4A4D50; --st-vend-soft: #F1F1F1;

  /* Tipografia */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: 120px;  --lh-display: .94;   /* nome del progetto in apertura */
  --fs-h1: 72px;        --lh-h1: 1;          /* titolo di pagina (scheda unità) */
  --fs-h2: 56px;        --lh-h2: 1.05;       /* titolo di sezione */
  --fs-h3: 34px;        --lh-h3: 1.12;
  --fs-h4: 24px;        --lh-h4: 1.2;
  --fs-statement: 40px; --lh-statement: 1.25;/* frase del concept */
  --fs-number: 64px;                          /* numeri chiave */
  --fs-lead: 20px;      --lh-lead: 1.5;
  --fs-body: 17px;      --lh-body: 1.55;
  --fs-small: 15px;     --lh-small: 1.5;
  --fs-caption: 13px;   --lh-caption: 1.4;
  --fs-eyebrow: 13px;   --ls-eyebrow: .12em;
  --fs-label: 12px;     --ls-label: .1em;

  /* Spaziature (base 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y: 112px;   /* respiro verticale delle sezioni */

  /* Raggi */
  --r-0: 0;       /* immagini, sezioni */
  --r-1: 2px;     /* pulsanti, chip, campi */
  --r-2: 4px;     /* pannelli flottanti e schede */
  --r-sheet: 12px;/* angoli alti del pannello mobile */
  --r-pill: 999px;/* solo etichetta di stato */

  /* Ombre: solo per pannelli sopra immagini o modello 3D */
  --shadow-float: 0 1px 2px rgba(29,28,26,.08), 0 8px 24px rgba(29,28,26,.10);
  --shadow-sheet: 0 -6px 24px rgba(29,28,26,.14);

  /* Griglia */
  --grid-cols: 12; --gutter: 24px; --margin: 56px; --max: 1440px;
  --header-h: 88px;
  --tap: 44px;    /* area minima di tocco */
}

/* Mobile ≤ 767px (nei mockup: classe .is-mobile sulla radice) */
@media (max-width: 767px) { :root {
  --fs-display: 56px; --fs-h1: 44px; --fs-h2: 36px; --fs-h3: 26px; --fs-h4: 20px;
  --fs-statement: 26px; --lh-statement: 1.3; --fs-number: 44px;
  --fs-lead: 17px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --fs-eyebrow: 12px;
  --section-y: 56px; --grid-cols: 4; --gutter: 16px; --margin: 16px; --header-h: 64px;
} }
.is-mobile {
  --fs-display: 56px; --fs-h1: 44px; --fs-h2: 36px; --fs-h3: 26px; --fs-h4: 20px;
  --fs-statement: 26px; --lh-statement: 1.3; --fs-number: 44px;
  --fs-lead: 17px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --fs-eyebrow: 12px;
  --section-y: 56px; --grid-cols: 4; --gutter: 16px; --margin: 16px; --header-h: 64px;
}
@media (min-width: 768px) and (max-width: 1199px) { :root { --grid-cols: 8; --margin: 40px; --fs-display: 88px; --fs-h2: 44px; --section-y: 88px; } }

/* 2. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tnum { font-variant-numeric: tabular-nums; }

/* Griglia */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }

/* Testi */
.t-display { font: 400 var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: -.02em; margin: 0; }
.t-h1 { font: 400 var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: -.02em; margin: 0; }
.t-h2 { font: 400 var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: -.015em; margin: 0; }
.t-h3 { font: 400 var(--fs-h3)/var(--lh-h3) var(--font-display); margin: 0; }
.t-h4 { font: 500 var(--fs-h4)/var(--lh-h4) var(--font-display); margin: 0; }
.t-statement { font: 400 var(--fs-statement)/var(--lh-statement) var(--font-display); letter-spacing: -.01em; margin: 0; }
.t-number { font: 400 var(--fs-number)/1 var(--font-display); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); margin: 0; }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.t-muted { color: var(--muted); }
.eyebrow { font: 500 var(--fs-eyebrow)/1.2 var(--font-text); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); margin: 0; }
.label { font: 500 var(--fs-label)/1.2 var(--font-text); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.price { font: 400 var(--fs-h3)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 3. COMPONENTI ----------------------------------------------------------- */

/* Pulsanti: altezza 48 (40 compatto, 52 mobile pieno) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-1); font: 600 15px/1 var(--font-text); text-decoration: none; white-space: nowrap; cursor: pointer; background: none; color: inherit; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--on-image { border-color: rgba(255,255,255,.75); color: #fff; }
.btn--on-image:hover { background: #fff; color: var(--ink); }
.btn--quiet { height: auto; padding: 0; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--block { display: flex; width: 100%; height: 52px; font-size: 16px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--sunken); border-color: var(--sunken); color: var(--muted); cursor: not-allowed; }
.btn-icon { width: var(--tap); height: var(--tap); display: inline-grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--r-1); }

/* Icona di stato: colore + trama, 12 px */
.st { width: 12px; height: 12px; border-radius: 2px; flex: none; display: inline-block; }
.st--disp { background: var(--st-disp); border: 1px solid var(--st-disp-line); }
.st--ris  { background: repeating-linear-gradient(135deg, var(--st-ris) 0 2px, var(--st-ris-light) 2px 4px); border: 1px solid var(--st-ris-line); }
.st--vend { background: repeating-linear-gradient(135deg, var(--st-vend) 0 1.5px, var(--st-vend-light) 1.5px 3px); border: 1px solid var(--st-vend-line); }

/* Etichetta di stato: icona + parola, mai solo colore */
.status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid; border-radius: var(--r-pill); font: 600 12px/1 var(--font-text); white-space: nowrap; }
.status .st { width: 9px; height: 9px; }
.status--disp { border-color: var(--st-disp-line); background: var(--st-disp-soft); color: var(--st-disp-ink); }
.status--ris  { border-color: var(--st-ris-line);  background: var(--st-ris-soft);  color: var(--st-ris-ink); }
.status--vend { border-color: var(--st-vend-line); background: var(--st-vend-soft); color: var(--st-vend-ink); }

/* Chip dei filtri: pulsanti a selezione multipla (aria-pressed) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-width: 40px; height: 36px; padding: 0 12px; border: 1px solid var(--control); border-radius: var(--r-1); background: var(--surface); font: 500 14px/1 var(--font-text); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.is-mobile .chip { min-width: 44px; height: 44px; font-size: 15px; }

/* Etichetta di campo nei pannelli */
.f-label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; font: 500 var(--fs-label)/1.2 var(--font-text); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.f-label output { letter-spacing: 0; text-transform: none; color: var(--ink); font-size: 13px; }

/* Slider (prezzo, ora del sole). --fill = percentuale riempita */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; margin: 0; border-radius: 2px; outline-offset: 8px; background: linear-gradient(to right, var(--ink) 0 var(--fill, 50%), var(--line) var(--fill, 50%) 100%); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); cursor: pointer; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); cursor: pointer; }
.is-mobile .range::-webkit-slider-thumb { width: 26px; height: 26px; }

/* Interruttore (Solo disponibili) */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); font: 500 15px var(--font-text); cursor: pointer; }
.switch__track { position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--control); flex: none; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.switch[aria-checked="true"] .switch__track, .switch__track.on { background: var(--ink); }
.switch[aria-checked="true"] .switch__track::after, .switch__track.on::after { left: 19px; }

/* Segmenti (date del sole, schede mobili) */
.seg { height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-1); background: none; font: 500 13px var(--font-text); color: var(--muted); cursor: pointer; }
.seg[aria-pressed="true"], .seg[aria-selected="true"] { background: var(--ink); color: #fff; }

/* Pannello flottante (sopra il modello 3D o le immagini) */
.panel { background: var(--surface); border-radius: var(--r-2); box-shadow: var(--shadow-float); }

/* Riga dell'elenco unità */
.unit-row { display: grid; grid-template-columns: 12px 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 10px; border: 0; border-bottom: 1px solid var(--line-soft); background: none; text-align: left; font: 400 14px var(--font-text); color: var(--ink); cursor: pointer; }
.unit-row:hover { background: #F7F5F1; }
.unit-row__code { font-weight: 600; }
.unit-row__meta { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-row__price { font-variant-numeric: tabular-nums; }
.unit-row[aria-current="true"] { background: #F1EEE8; box-shadow: inset 3px 0 0 var(--accent); }
.unit-row--off .unit-row__price { color: var(--muted); }
.is-mobile .unit-row { height: 52px; font-size: 15px; padding: 0; }

/* Dati (dl) */
.facts { display: grid; gap: 12px 16px; margin: 0; }
.facts dt { font: 500 11px/1.2 var(--font-text); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 0; font: 500 15px/1.3 var(--font-text); }
.facts--lg dd { font: 400 22px/1.2 var(--font-display); }

/* Scheda unità (flottante nel selettore) */
.unit-card { width: 300px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.unit-card__code { font: 400 44px/1 var(--font-display); margin: 2px 0 0; }

/* Tipologia (riga-scheda selezionabile, sostituisce la "card") */
.type-tab { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; width: 100%; padding: 22px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; color: #8A857C; cursor: pointer; }
.type-tab__name { font: 400 34px/1.1 var(--font-display); }
.type-tab__meta { grid-column: 1; font-size: 15px; }
.type-tab__price { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 500; }
.type-tab[aria-selected="true"] { color: var(--ink); }
.type-tab[aria-selected="true"] .type-tab__meta { color: var(--muted); }

/* Modulo */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font: 600 14px/1.2 var(--font-text); }
.field__label .opt { font-weight: 400; color: var(--muted); }
.field__input { height: 52px; padding: 0 16px; border: 1px solid var(--control); border-radius: var(--r-1); background: var(--surface); font: 400 16px var(--font-text); color: var(--ink); width: 100%; }
.field__input::placeholder { color: #8A857C; }
.field__input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
textarea.field__input { height: 120px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.field__hint { font-size: 13px; color: var(--muted); }
.field--error .field__input { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__error { display: flex; gap: 6px; align-items: center; font: 500 13px var(--font-text); color: var(--error); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.check__box { width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: var(--r-1); background: var(--surface); display: grid; place-items: center; margin-top: 1px; }
.check__box.on { background: var(--ink); }
.radio-card { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 1px solid var(--control); border-radius: var(--r-1); background: var(--surface); font: 500 15px var(--font-text); cursor: pointer; }
.radio-card.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.radio-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.radio-card.on .radio-dot { border-width: 6px; }
.unit-chip { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper); }

/* Pannello mobile che sale dal basso */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet); display: flex; flex-direction: column; }
.sheet__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--control); margin: 8px auto 6px; flex: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px 0 16px; border-bottom: 1px solid var(--line-soft); }
.sheet__foot { padding: 12px 16px 24px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; align-items: center; }
.backdrop { position: absolute; inset: 0; background: rgba(18,18,16,.35); }

/* Header */
.site-header { height: var(--header-h); padding: 0 var(--margin); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header--over-image { position: absolute; top: 0; left: 0; right: 0; color: #fff; z-index: 2; }
.site-header--solid { background: var(--bg); border-bottom: 1px solid var(--line); color: var(--ink); }
.site-header__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.site-header__name { font: 500 22px/1 var(--font-display); }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a { font: 500 15px var(--font-text); text-decoration: none; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; }

/* Footer */
.site-footer { background: var(--ink); color: #D9D5CD; padding: 72px var(--margin) 32px; font-size: 14px; line-height: 1.6; }
.site-footer a { color: #fff; }
.site-footer__legal { color: #A9A49A; font-size: 13px; }
.site-footer__credit { color: #fff; }

/* Segnaposto immagine (da sostituire con render/foto) */
.ph-img { background: var(--sunken); color: var(--muted); display: grid; place-items: center; text-align: center; font: 500 13px/1.4 var(--font-text); padding: 16px; }

/* Planimetria */
.plan { background: var(--paper); }