/* ==========================================================================
   MC — Landing "Become a member" / The House of Flour
   Ricostruzione semantica dei frame Figma 23:456 (desktop 1920) e 23:3004 (mobile 390)
   del file "MC_Landing page House of Flour_1210.fig"; a settembre 1:347 e 1:1356.

   Le misure sono interpolate fra i due design con clamp(): il minimo è il valore
   disegnato a 390px, il massimo quello disegnato a 1920px. Non sono numeri a occhio:
   vengono dai bounding box dei nodi Figma e dalla cap-height misurata sui glifi.

   Le dimensioni del testo derivano da cap-height / (cap-height per em del font).
   Il font di progetto e' Milligram (Zetafonts): i tre tagli hanno lo stesso
   rapporto, 0.693, quindi qui c'e' un solo divisore. I passi di riga invece sono
   valori in px del design e non multipli del corpo. Vedi README §Font.
   ========================================================================== */

:root {
  /* --- colori (fills dei nodi Figma) --- */
  --bordeaux: #572936;
  --rosso: #E50000;
  --rosso-badge: #DD001B;   /* badge delle card: un rosso diverso da quello del bottone */
  --bianco: #FFFFFF;
  --bordeaux-fade: rgba(87, 41, 54, .25);   /* placeholder */
  --consent-fill: rgba(87, 41, 54, .30);    /* disco dei consensi: opacita' del nodo 0.30 */

  /* --- famiglie (assegnazione del designer) ---
     titolo: Compressed Extrabold. Sottotitolo, etichette dei campi e bottone:
     Condensed Extrabold (800). Testo digitato e placeholder dei controlli:
     Condensed Medium (500). */
  --font-display: "Milligram Compressed", sans-serif;
  --font-body: "Milligram Condensed", sans-serif;

  /* --- tipografia (390px → 1920px) ---
     cap-height del Figma / (cap-height per em del font). Le tre Milligram hanno
     lo stesso rapporto, 0.693, quindi qui c'e' un solo divisore. */
  --fs-title: clamp(77.1px, 30.48px + 11.95vw, 260px);          /* cap 53.4 / 180.2 */
  --fs-button: clamp(17px, 13.79px + 0.8235vw, 29.6px);         /* cap 11.8 / 20.5 */
  --fs-lead: clamp(16px, 6.518px + 2.431vw, 53.2px);            /* cap 11.1 / 36.9 */
  --fs-field: clamp(13.4px, 10.85px + 0.6536vw, 23.4px);        /* cap 9.3 / 16.2 */
  --fs-footer: clamp(20.6px, 18.61px + 0.5098vw, 28.4px);       /* cap 14.3 / 19.7 */

  /* --- misure --- */
  --container: clamp(350px, 137.9px + 54.38vw, 1182px);          /* form */
  --lead-width: clamp(350px, 86.94px + 67.45vw, 1382px);         /* paragrafo */
  --footer-container: clamp(315px, -50.53px + 93.73vw, 1749px);
  --label-col: clamp(125px, 101.8px + 5.948vw, 216px);
  --prefix-col: clamp(60px, 48.28px + 3.007vw, 106px);
  --phone-label-col: clamp(92px, 67.27px + 6.34vw, 189px);   /* piu' stretta di --label-col */
  --phone-gap: clamp(15.5px, 14.61px + 0.2288vw, 19px);
  --btn-h: clamp(41px, 33.1px + 2.026vw, 72px);
  --btn-w: clamp(350px, 288.6px + 15.75vw, 591px);
  --btn-pad: clamp(20px, 15.16px + 1.242vw, 39px);
  --consent-size: clamp(19px, 15.43px + 0.915vw, 33px);
  --logo-w: clamp(283px, 231.5px + 13.2vw, 485px);
  --rule: clamp(1px, .745px + .0654vw, 2px);
  --consent-ring: clamp(1.7px, 1.37px + .085vw, 3px);   /* anello del Figma, 9% del diametro */

  /* --- ritmo verticale --- */
  --gap-hero: clamp(46.7px, 29.8px + 4.333vw, 113px);       /* 124 e 50 meno il leading misurato */
  --gap-title-cards: clamp(20px, 17.71px + 0.5882vw, 29px); /* 26 e 51 meno il leading misurato */
  --gap-cards-lead: clamp(25px, 18.37px + 1.699vw, 51px);   /* 29.7 e 64 meno il leading misurato */
  --gap-lead-form: clamp(10.8px, 6.288px + 1.157vw, 28.5px);/* idem */
  --row-pitch: clamp(55.4px, 45.18px + 2.621vw, 95.5px);
  --field-pad: clamp(10.1px, 8.214px + 0.4837vw, 17.5px);
  --gap-form-policy: clamp(32px, 24.61px + 1.895vw, 61px);
  --gap-policy-consents: clamp(15px, 12.45px + 0.6536vw, 25px);
  --gap-consents-cta: clamp(20px, 14.65px + 1.373vw, 41px);
  --gap-cta-footer: clamp(105.7px, 75.8px + 7.667vw, 223px);
  --gap-logo-cols: clamp(132.7px, 118.86px + 3.549vw, 187px);
  --gap-col-link: clamp(40.4px, 37.19px + 0.8235vw, 53px);
  --pad-bottom: clamp(140.7px, 132.72px + 2.046vw, 172px);
}

/* --------------------------------------------------------------------------
   Milligram (Zetafonts) — le tre tagli del pacchetto acquistato.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Milligram Compressed";
  src: url("assets/fonts/Milligram-Compressed-Extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Milligram Condensed";
  src: url("assets/fonts/Milligram-Condensed-Extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Milligram Condensed";
  src: url("assets/fonts/Milligram-Condensed-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ==========================================================================
   Reset minimo
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bianco);
  color: var(--bordeaux);
  font-family: var(--font-body);
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, input, select):focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 3px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1080;
  object-fit: cover;
}

@media (max-width: 767px) {
  .hero img { aspect-ratio: 390 / 591; }
}

/* ==========================================================================
   Intro — titolo, occhiello e i due decori vettoriali a filo bordo
   ========================================================================== */

.intro {
  position: relative;
  padding-top: var(--gap-hero);
  text-align: center;
}

.intro__deco {
  position: absolute;
  /* 199x392 e y=1207 sono l'INCHIOSTRO reale, misurato sul render. Il bbox del
     nodo Figma (216x441 @ y=1181) e' piu' grande perche' include la maschera:
     usarlo per dimensionare l'SVG sbaglia di 17px in larghezza e 26 in quota. */
  top: clamp(75px, 6.615vw, 127px);
  width: clamp(110px, 10.365vw, 199px);
  height: auto;
  pointer-events: none;
}
.intro__deco--left { left: 0; }
.intro__deco--right { right: 0; }

@media (max-width: 767px) {
  /* Nel design mobile i decori non ci sono. */
  .intro__deco { display: none; }
}

.intro__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-title);
  /* Il passo fra le due righe e' un dato del design (213.7px desktop, 63.3
     mobile), non un multiplo del corpo: cambiando font cambia il corpo, non il
     passo. 213.7/260 = 63.3/77.1 = 0.821, uguale ai due breakpoint. */
  line-height: var(--title-lh, 0.821);
  text-transform: uppercase;
}

/* ==========================================================================
   Card — tre riquadri foto fra titolo e occhiello (Figma 23:895 / 23:3330)

   Sono un'immagine composta (foto, sfumatura, badge, titolo), quindi scalano
   in modo rigido col viewport invece di interpolare fra i due design: --u vale
   1px del design desktop (1920) da 768px in su, 1px del design mobile (390)
   sotto. Fra i due layout cambiano proporzioni, badge e a capo del titolo.
   ========================================================================== */

.cards {
  --u: calc(min(100vw, 1920px) / 1920);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 * var(--u));
  width: calc(1406 * var(--u));
  margin: var(--gap-title-cards) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.card {
  position: relative;
  aspect-ratio: 455.6 / 356;
  overflow: hidden;
  border-radius: calc(13 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .25);
  background: #D9D9D9;   /* sotto la foto, come nel Figma: si vede solo finche' carica */
  color: var(--bianco);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sfumatura nera dal basso: 80% -> 0 sui 156.7px inferiori. */
.card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(156.7 * var(--u));
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}

/* Desktop: linguetta a filo del bordo sinistro, tonda solo a destra. */
.card__badge {
  position: absolute;
  z-index: 1;
  top: calc(27 * var(--u));
  left: 0;
  display: grid;
  place-items: center;
  width: calc(183 * var(--u));
  height: calc(48 * var(--u));
  border-radius: 0 calc(15 * var(--u)) calc(15 * var(--u)) 0;
  background: var(--rosso-badge);
  font-size: calc(25.66 * var(--u));
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}

/* Testo reale nel Figma (nodi TEXT delle card ITA): Condensed Medium, tracking
   2%, con la parola chiave in Extrabold. */
.card__title {
  position: absolute;
  z-index: 1;
  left: calc(22 * var(--u));
  bottom: calc(13 * var(--u));
  margin: 0;
  font-size: calc(31.83 * var(--u));
  font-weight: 500;
  letter-spacing: var(--card-title-ls, 0);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.card__title b { font-weight: 800; }

.m-br { display: none; }

@media (max-width: 767px) {
  /* Nel design mobile la fila e' larga 409px su 390: sporge di 9.5px per lato,
     tagliata dal bordo del viewport. Riprodotto cosi', in proporzione. */
  .intro { overflow-x: clip; }

  .cards {
    --u: calc(100vw / 390);
    gap: calc(5 * var(--u));
    width: calc(409 * var(--u));
    margin-inline: calc(-9.5 * var(--u));
  }

  .card {
    aspect-ratio: 133 / 183;
    border-radius: calc(8 * var(--u));
  }
  .card::after { height: calc(101 * var(--u)); }

  /* Mobile: etichetta appesa al bordo superiore, centrata, tonda solo sotto. */
  .card__badge {
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: calc(90 * var(--u));
    height: calc(21 * var(--u));
    border-radius: 0 0 calc(4 * var(--u)) calc(4 * var(--u));
    font-size: calc(13.38 * var(--u));
  }

  .card__title {
    left: calc(9.3 * var(--u));
    bottom: calc(9 * var(--u));
    font-size: calc(13.69 * var(--u));
    line-height: .92;
    white-space: normal;
  }
  /* La prima card sporge a sinistra: nel Figma il suo titolo e' rientrato di
     piu' (13.1 invece di 9.3) per restare dentro lo schermo. */
  .card:first-child .card__title { left: calc(13.1 * var(--u)); }

  .m-br { display: inline; }
}

.intro__lead {
  /* min(): sotto i 390px il minimo del clamp (350) sarebbe piu' largo del
     viewport e la pagina sforerebbe in orizzontale. Misurato a 320px: +30px. */
  width: min(var(--lead-width), calc(100% - 40px));
  margin: var(--gap-cards-lead) auto 0;
  /* Gli a capo del design desktop sono per frase (uno <span> per riga), e la
     riga piu' lunga riempie tutti i 1382px: misura 26.1 corpi, tracking
     compreso. Il corpo quindi scende quanto serve perche' ci stia anche sotto
     i 1920px (al massimo -8% a 768px), invece di aggiungere una sesta riga. */
  font-size: min(var(--fs-lead), calc(var(--lead-width) / var(--lead-k, 26.1)));
  letter-spacing: .02em;   /* tracking 2%: senza, la riga 2 misura 1325 su 1382 */
  /* Come per il titolo: il passo e' un dato del design (64.7px desktop), non un
     multiplo del corpo. 64.7 / 53.2 = 1.217. Si calcola su --fs-lead e non sul
     corpo effettivo, cosi' la riduzione qui sopra non accorcia il paragrafo. */
  line-height: calc(var(--fs-lead) * var(--lead-lh, 1.217));
  text-transform: uppercase;
}
.intro__lead span { display: block; white-space: nowrap; }

@media (max-width: 767px) {
  /* Sul mobile il paragrafo va a capo da se', come nel design. */
  .intro__lead { font-size: var(--fs-lead); }
  .intro__lead span { display: inline; white-space: normal; }
}

/* ==========================================================================
   Form

   13/10: nelle pagine il form e' quello di HubSpot, che si carica in un
   iframe: di questa sezione lo usa solo `.form` (larghezza e margini del
   contenitore). Il resto e' il form del design, misurato sul Figma, tenuto
   come riferimento per quando il form HubSpot verra' reso stilabile (form
   "raw HTML" lato HubSpot) o stilato dalle impostazioni di HubSpot.
   ========================================================================== */

.form {
  width: min(var(--container), calc(100% - 40px));
  margin: var(--gap-lead-form) auto 0;
}

.field {
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  align-items: end;
  min-height: var(--row-pitch);
  padding-bottom: var(--field-pad);
  border-bottom: var(--rule) solid var(--bordeaux);
}

/* La riga telefono ha tre controlli e, nel Figma, tre segmenti di riga distinti. */
.field--phone {
  grid-template-columns: var(--phone-label-col) var(--prefix-col) 1fr;
  column-gap: var(--phone-gap);
  border-bottom: 0;
  padding-bottom: 0;
}
.field--phone > * {
  padding-bottom: var(--field-pad);
  border-bottom: var(--rule) solid var(--bordeaux);
}
.field__cell { display: flex; align-items: end; }

.field__label,
.field__control {
  font: inherit;
  font-size: var(--fs-field);
  letter-spacing: .02em;   /* tracking 2%, misurato sulle larghezze del Figma */
  line-height: 1;
  color: var(--bordeaux);
  text-transform: uppercase;
}

/* "Dove si compila": il testo digitato e il placeholder sono il taglio Medium,
   le etichette restano Extrabold. */
.field__control {
  font-weight: 500;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  appearance: none;
}

.field__control::placeholder { color: var(--bordeaux-fade); opacity: 1; }

/* Chevron disegnato in SVG inline: nel Figma è un vettore stroked 30x15. */
.field__control--select {
  padding-right: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 15'%3E%3Cpath d='M1.5 1.5 15 13 28.5 1.5' fill='none' stroke='%23572936' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 1em center;
  background-size: 1.28em .64em;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* `option` disabilitata e selezionata = placeholder: stesso colore del ::placeholder. */
.field__control--select:has(option[value=""]:checked) { color: var(--bordeaux-fade); }

/* --- link alla privacy policy, consensi e disclaimer ---
   Tutti e tre in Condensed Medium al corpo delle etichette (cap 16.19 desktop,
   9.35 mobile), con tracking 2% come i nodi TEXT del file: letto sui glifi del
   Figma 12/10. Senza tracking le righe venivano strette del 5-6%. */

.form__policy {
  margin: var(--gap-form-policy) 0 0;
  font-size: var(--fs-field);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
}
/* Sottolineatura misurata: 0.08em sotto la linea di base, spessa 0.04em,
   uguale ai due breakpoint. */
.form__policy a {
  text-decoration: underline;
  text-decoration-thickness: .04em;
  text-underline-offset: .08em;
}

.consents {
  margin: var(--gap-policy-consents) 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  /* Inchiostro-inchiostro nel Figma: 47 e 48. Il box dell'etichetta sporge di
     ~2px oltre l'ultimo glifo (tracking finale e margine), quindi 45. */
  column-gap: clamp(20px, 2.344vw, 45px);
  row-gap: clamp(12px, 2vw, 20px);
}

.consent {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  cursor: pointer;
}

.consent input {
  flex: none;
  width: var(--consent-size);
  height: var(--consent-size);
  margin: 0;
  appearance: none;
  border: var(--consent-ring) solid var(--bordeaux);
  border-radius: 50%;
  background: var(--consent-fill);
  cursor: pointer;
}
.consent input:checked { background: var(--bordeaux); }

.consent__label { font-size: var(--fs-field); font-weight: 500; letter-spacing: .02em; line-height: 1; }

@media (max-width: 767px) {
  /* Nel design mobile i tre consensi sono impilati. */
  .consents { flex-direction: column; }
}

/* --- CTA --- */

.form__submit {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 59px);
  margin-top: var(--gap-consents-cta);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  width: var(--btn-w);
  height: var(--btn-h);
  padding-inline: var(--btn-pad);
  border: 0;
  background: var(--rosso);
  color: var(--bianco);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-button);
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease;
}
.btn:hover { background: #C40000; }

.btn__arrow { width: clamp(23px, 2vw, 40px); height: auto; }

.form__disclaimer {
  margin: 0;
  color: var(--rosso);
  font-size: var(--fs-field);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.15;
}

@media (max-width: 767px) {
  /* Nel design mobile il bottone è a tutta larghezza, il disclaimer sotto,
     e la freccia non c'è. */
  .form__submit { flex-direction: column; align-items: stretch; gap: clamp(12px, 3vw, 20px); }
  .btn { width: 100%; justify-content: center; }
  .btn__arrow { display: none; }
  .form__disclaimer { text-align: center; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Il footer e' in Condensed Medium, non Extrabold. Non e' una scelta a occhio:
   con Extrabold le righe piu' lunghe misurano 351px contro i 315 del contenitore
   mobile e 1334 contro 1191 di somma colonne sul desktop, l'11% di troppo su
   entrambi i breakpoint; con Medium l'errore scende all'1% su entrambi. */
.footer {
  font-weight: 500;
  margin-top: var(--gap-cta-footer);
  padding-bottom: var(--pad-bottom);
  text-align: center;
  text-transform: uppercase;
}

.footer__logo {
  width: var(--logo-w);
  height: auto;
  margin-inline: auto;
}

/* Le tre colonne NON sono su una griglia regolare: nel Figma la esterne sono a
   filo del contenitore (85 e 1834) mentre la centrale è centrata sulla PAGINA
   (959.5), e i due vuoti fra loro sono diversi (231 e 327). `space-between`
   riprodurrebbe i bordi esterni ma spingerebbe la centrale fuori asse, perché
   ne farebbe dipendere la posizione dalla larghezza delle altre due (misurato:
   +50px). `1fr auto 1fr` centra la colonna di mezzo per costruzione. */
.footer__cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: min(var(--footer-container), calc(100% - 40px));
  margin: var(--gap-logo-cols) auto 0;
  color: var(--rosso);
}
.footer__col:first-child { justify-self: start; }
.footer__col:last-child  { justify-self: end; }

.footer__text,
.footer__link {
  margin: 0;
  font-size: var(--fs-footer);
  line-height: 1.088;   /* passo di design 30.9px / corpo 28.4 */
}
.footer__link { margin-top: var(--gap-col-link); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .footer__cols {
    /* A colonna unica il blocco vale quanto la sua riga piu' larga. Fissarlo ai
       315px del Figma lo taglia per 0.1px: quella riga, nel font di progetto,
       misura 315.1 ed e' proprio cio' che definisce i 315 del contenitore.
       Il tetto sul viewport resta, cosi' sotto i 355px il testo torna a andare
       a capo invece di sfondare. */
    width: max-content;
    max-width: calc(100% - 40px);
    grid-template-columns: 1fr;
    row-gap: clamp(74px, 25.2vw, 100px);
  }
  .footer__col:first-child,
  .footer__col:last-child { justify-self: center; }
}

/* ==========================================================================
   Versione italiana (index_it.html) — frame Figma 23:1004 / 23:3440

   Stessa struttura dell'inglese; cambiano solo le misure che il designer ha
   adattato ai testi italiani. Tutto il resto (card, form, footer) e' identico.
   ========================================================================== */

:root:lang(it) {
  /* Titolo piu' piccolo (cap 175.9 / 51.0 contro 180.2 / 53.4) perche'
     "UNISCITI ALLA" e' molto piu' largo di "BECOME". Sotto i 390px scende
     ancora in proporzione (18.87vw = 73.6 a 390): a 320 usciva dai due lati. */
  --fs-title: min(clamp(73.6px, 27.67px + 11.78vw, 253.8px), 18.87vw);
  --title-lh: 0.84;  /* DA TARARE */
  /* Il paragrafo ha sei righe in un box di 1471px (340 sul mobile). */
  --lead-width: clamp(350px, 64.25px + 73.27vw, 1471px);
  --lead-k: 27.75;   /* riga piu' lunga: 1471px a 53.1px di corpo */
  /* I titoli delle card ITA sono nodi TEXT, con tracking 2%. */
  --card-title-ls: .02em;

  /* Ritmo verticale del frame ITA, misurato a bande come l'inglese. Il
     designer ha stretto gli spazi per far stare il paragrafo piu' lungo:
     passo 64px invece di 64.7, e sul mobile il form parte a ridosso
     dell'ultima riga (da qui il minimo negativo: assorbe il leading). */
  --lead-lh: 1.203;
  --gap-title-cards: clamp(23px, 21.22px + .4575vw, 30px);
  --gap-cards-lead: clamp(25px, 19.9px + 1.307vw, 45px);
  --gap-lead-form: clamp(-2.7px, -13.58px + 2.791vw, 40px);
}