/* ==========================================================================
   Hero — 14:523 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, non una misura di Figma. Quando arriveranno i frame
   mobile questo file si sostituisce in blocco.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (1480px di altezza, Title 1432x231, media 1432x800,
   Pattern 1512/1012/512/12 centrati a top 1168.1454).

   Struttura desktop:
     padding-top 171           compensa l'Header alto 91, sovrapposto
     .hero__title   1432 x 231 h1 782 + Description 476, allineati sulla base
     .hero__media   1432 x 800 radius 16
     .hero__footnote 1432      paragrafo centrato
     .hero__patterns           4 quadrati ruotati -45deg, dietro al contenuto

   Il padding-top di 171 NON si tocca a nessun breakpoint: l'Header mantiene
   i suoi 91px di altezza ovunque, quindi la compensazione resta valida.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1280-1511 · Desktop compresso
   Title e Description restano affiancati e allineati sulla base: si sciolgono
   solo le larghezze fisse (1432, 782, 476) e le altezze fisse (231, 800).
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  /* 1432 -> tutta la larghezza utile della sezione */
  .hero__title,
  .hero__media,
  .hero__footnote {
    width: 100%;
  }

  /* 231px vale solo al wrapping di 1432: appena l'h1 prende una riga in piu
     l'altezza deve seguirlo. gap MIO: in Figma i due blocchi sono a filo dei
     1432 con space-between, qui serve un minimo perche non si tocchino. */
  .hero__title {
    height: auto;
    gap: var(--space-5);
  }

  /* 476 -> quota della riga Title (476/1432 = 33.24%). L'h1 in Figma e 782
     (54.61%) ma il suo box e a filo del testo: la riga "Bridging the gap
     between" a 64px misura 778px su 782 di box, margine zero. Gli do 57%,
     prendendoli dal vuoto dello space-between (che passa da 11.86% a 9.76%):
     la posizione dei due blocchi non cambia di un pixel, cambia solo di
     quanto puo respirare il titolo. Valore MIO. */
  .hero__h1          { width: 57%; }
  .hero__description { width: 33.24%; height: auto; }

  /* L'h1 ha 3 interruzioni di riga hard-wrap tarate su un box da 782px a 64px.
     Se il box si stringe e il corpo resta 64px la riga piu lunga va a capo e
     il titolo passa da 3 a 5-6 righe. Scala MIA, proporzionale al viewport:
     64/1512 = 4.2328vw sarebbe la proporzione esatta, ma con margine zero
     basterebbe l'arrotondamento a mandare a capo. Tenuta a 4.10vw, che a 1512
     darebbe 62px: lo scarto e sotto la soglia percettiva e garantisce ~3% di
     margine sulla riga lunga a ogni larghezza. */
  .hero__h1 {
    font-size: clamp(40px, 4.10vw, 64px);
    line-height: 1.21;
  }

  /* 1432x800 -> larghezza fluida, proporzione conservata con aspect-ratio */
  .hero__media {
    height: auto;
    aspect-ratio: 1432 / 800;
  }

  /* --- Pattern -----------------------------------------------------------
     I 4 quadrati sono dimensionati sulla tela da 1512 (lati 1512/1012/512/12)
     e sbordano di proposito: ruotati di -45deg la diagonale del piu grande
     misura 2138px, cioe 313px oltre il bordo per lato.

     SCELTA MIA: invece di lasciarli in px assoluti li riscalo con il viewport,
     cioe lato = side/1512 espresso in vw. Cosi:
       - a 1512 il valore coincide al pixel con quello di Figma (continuita);
       - la composizione concentrica resta leggibile a ogni larghezza;
       - lo sbordo resta proporzionale (sempre 20.7vw per lato sul piu grande),
         quindi l'intenzione grafica "il pattern esce dalla sezione" sopravvive.
     Se restassero in px, a 375px il quadrato da 1512 diventerebbe due bande
     diagonali che attraversano tutto lo schermo e gli altri tre sparirebbero
     fuori campo: la figura concentrica non si leggerebbe piu.

     I lati sono dichiarati inline con --side, che non posso ridefinire senza
     toccare il markup: uso quindi :nth-child(), che dipende dall'ordine dei
     4 span nel partial (1512, 1012, 512, 12).

     Il centro va riancorato di conseguenza. Il numero 1168.1454 di Figma non
     e arbitrario: la semi-diagonale del quadrato da 1512 ruotato vale
     1512 * sqrt(2)/2 = 1069.145, quindi il vertice alto della figura cade a
     1168.1454 - 1069.145 = 99px esatti dal bordo della sezione, cioe 8px
     sotto l'Header. E quello il punto che regge la composizione: il pattern
     si apre a ventaglio da li verso il basso, dietro al Title.
     Tenendolo fermo e ricalcolando il centro dalla dimensione scalata:
       centro = 99 + sqrt(2)/2 * 100vw = calc(99px + 70.7107vw)
     che a 1512 restituisce 1168.145, di nuovo il valore di Figma.

     (Una percentuale dell'altezza di sezione qui NON funziona: sotto i 768 il
     testo si riflowa molto e l'immagine pesa proporzionalmente meno, quindi il
     centro finirebbe sotto l'immagine e il pattern sparirebbe dietro di essa.) */
  .hero__pattern { top: calc(99px + 70.7107vw); }

  .hero__pattern:nth-child(1) { width: 100vw;      height: 100vw;      }  /* 1512/1512 */
  .hero__pattern:nth-child(2) { width: 66.931vw;   height: 66.931vw;   }  /* 1012/1512 */
  .hero__pattern:nth-child(3) { width: 33.862vw;   height: 33.862vw;   }  /*  512/1512 */
  .hero__pattern:nth-child(4) { width: 0.7937vw;   height: 0.7937vw;   }  /*   12/1512 */
}


/* --------------------------------------------------------------------------
   1024-1279 · Laptop
   Nessun cambio di struttura: Title e Description reggono ancora affiancati
   (l'h1 scala col viewport). Si accorcia solo il ritmo verticale.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* 80 -> 56: gap MIO fra Title, media e paragrafo */
  .hero { gap: 56px; }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — la riga Title si impila
   A 1024 il box dell'h1 scende sotto i 515px: l'allineamento sulla base fra
   titolo e Description, che e il senso della riga Title, non ha piu spazio.
   Titolo sopra, Description sotto, entrambi a piena larghezza.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero__title {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);              /* 32, valore MIO */
  }
  .hero__h1,
  .hero__description {
    width: 100%;
  }

  /* impilato l'h1 ha tutta la larghezza: torna alla scala fluida del core,
     che qui e piu generosa della mia 4.2328vw */
  .hero__h1 {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-lh);
  }

  /* a piena larghezza il paragrafo farebbe righe di 900px: misura leggibile */
  .hero__lead { max-width: 62ch; }

  /* Il tratto dei Pattern e un valore assoluto (5px) dentro una composizione
     che ora scala: mantenendolo, a queste larghezze la figura diventa una
     serie di bande spesse invece che di contorni. Assottigliato di conseguenza. */
  .hero__pattern { border-width: 4px; }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero { gap: var(--space-5); }      /* 40 */

  .hero__pattern {
    border-width: 3px;
    opacity: .22;                     /* .25 -> .22: MIO */
  }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   Il pattern viene letto a distanza ravvicinata e passa dietro al titolo:
   tratto minimo e opacita ulteriormente ridotta perche non competa col testo.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .hero__pattern {
    border-width: 2px;
    opacity: .18;                     /* MIO */
  }

  /* il pulsante della Description e a 195px fissi: su 343px di larghezza
     utile sta, ma con la label a capo (regola del core) conviene liberarlo */
  .hero__description .btn {
    width: auto;
    max-width: 100%;
  }
}