/* Sezione Grid Card Immagine CTA
   Valori letti dal component set Figma `Sezione Grid Card Immagine CTA` (3298:6947) e da
   `Card Immagine CTA` (3276:6870), non stimati:

     sezione        1600 × 897, card grid a y=191
     card grande     784 × 706        card piccola   784 × 337
     gap             32  (`spacing/gap-xl`), su entrambi gli assi
     pannello        362 largo, 29 da sinistra, ancorato al fondo, #004278
                     padding 24 / 32 / 96 / 32  (gap-lg, gap-xl, gap-4xl, gap-xl)
                     gap interno 16 (`gap-md`), testo interno gap 8 (`gap-xs`)
     Accento         392 × 55, #C4C4C0 (`Gray 60`), in basso a sinistra

   La somma torna: 784 + 32 + 784 = 1600 in larghezza, 337 + 32 + 337 = 706 in altezza —
   la colonna di destra è alta esattamente quanto la card grande. (In Figma il container di
   destra dichiara 785 × 698 invece di 784 × 706: segnalato, qui usiamo i numeri veri.) */

/* --- Colori -----------------------------------------------------------------------------
   Come negli altri moduli: i valori vengono da Figma ma passano dalle variabili del tema di
   produzione `bluenergy2026`, con l'esadecimale come fallback per il tema di prova.

   `Gray 60` #c4c4c0 è l'unico senza controparte nel tema — il nome `gray` lì vale #747781,
   che è un altro colore. Lo puntiamo comunque a un `--color-gray-60` che oggi non esiste:
   il giorno che viene aggiunto, il modulo lo segue da solo. Stessa scelta fatta per
   `--color-tertiary`. */
.icg {
  --icg-navy: var(--color-primary, #004278);
  --icg-text: var(--color-dark-gray, #434750);
  --icg-white: var(--color-white, #ffffff);
  --icg-accento: var(--color-gray-60, #c4c4c0);
  /* Il token `300` del file: e' il fondo **e** il bordo delle card link — nel disegno hanno
     lo stesso colore, quindi il bordo c'e' ma non si vede. Conservato com'e'. */
  --icg-azzurro: var(--color-light-blue, #e7ebf6);
  /* Il tratto delle illustrazioni da 112: `Secondary`, non navy. */
  --icg-corporate: var(--color-secondary, #467fbd);

  --icg-gap: 32px;
  --icg-max: 1600px;
  /* Orizzontale: `section/padding-xl`, 160 a 1920 → 24 a 390. Stessa clamp degli altri
     moduli: i due estremi disegnati sono i capi di una scala continua, non due stati. */
  --icg-gutter: clamp(24px, 8.889vw - 10.67px, 160px);
  /* Verticale: `section/padding-l`, 100 a 1920 → 30 a 390.

     In Figma il componente ha solo 30px sopra il titolo, perché il respiro fra le sezioni
     vive sulla pagina, fra un'istanza e l'altra. Qui quel livello non esiste: il modulo si
     tiene il proprio padding, come tutti gli altri. */
  --icg-pad-l: clamp(30px, 12.16px + 4.575vw, 100px);

  --icg-font: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--icg-font);
  color: var(--icg-text);
}

/* Il padding verticale sta qui e non su `.icg` per una ragione sola: **le due linee
   separatrici devono cadere sul bordo esterno del modulo e larghe quanto il contenuto.**
   Ancorandole a questo riquadro ottengono entrambe le cose da sé. */
.icg__inner {
  position: relative;
  box-sizing: border-box;
  max-width: calc(var(--icg-max) + 2 * var(--icg-gutter));
  margin: 0 auto;
  padding: var(--icg-pad-l) var(--icg-gutter);
}

/* Le due linee separatrici non vivono più in questo modulo: sono il modulo `separator`.
   Il motivo sta nel suo `module.html`, in breve: da qui non potevano cadere al centro del
   vuoto, perché il vuoto è la somma del nostro padding e di quello del vicino, e il vicino
   non lo conosciamo. Il `padding` verticale resta su `__inner` — ora non ancora nessuna linea, ma
   è lì che è sempre stato e spostarlo muoverebbe la gabbia. */

/* ---- Testata ---------------------------------------------------------------------- */
/* In Figma titolo e descrizione sono due blocchi posati in assoluto: il titolo largo 635 a
   sinistra, la descrizione larga 778 a partire da x=822, con 22px di sfasamento verticale
   fra i due. Lo sfasamento è il residuo di una composizione a mano — due caselle di una riga
   ciascuna — e non sopravvive a un testo di lunghezza diversa. Qui sono due colonne allineate
   in alto, che è ciò che quel disegno intende quando il testo cresce. */
/* **Le stesse due colonne della griglia sottostante, non due colonne proporzionali.**

   In Figma il titolo è una casella larga 635 a x=0 e la descrizione una larga 778 a x=822;
   la colonna destra delle card parte a 816. I 6px di scarto sono rumore di posa a mano — il
   fatto è che **la descrizione è incolonnata con le card di destra**.

   Prima qui c'erano due `flex` con basi 635 e 778: distribuendo lo spazio in proporzione, la
   descrizione partiva a 736 invece che a 816 e sembrava appiccicata al titolo. Le larghezze
   disegnate delle due caselle di testo non sono la struttura — la struttura è la griglia, e
   la testata ci si appoggia sopra. */
/* ⚠️ **`baseline` e non `start`, ed è una relazione che vale la pena capire.**

   Titolo e descrizione stanno affiancati con interlinee molto diverse — 60 su 52 e 30 su 20.
   Allineando i bordi superiori delle due scatole (`start`) le due **prime righe di testo** non
   si allineano affatto: misurato, la riga della descrizione cade **28px sopra** quella del
   titolo, e a occhio sembra partire più in alto invece che accanto.

   In Figma la descrizione è posata 22px più in basso del titolo (y 109,5 contro 87,5), e a
   lungo l'abbiamo letta come il residuo di una composizione a mano. Non lo è: è sopravvissuta
   alla componentizzazione, e misurandola si vede cosa fa — **allinea le prime linee di base**.
   Con le metriche di Figma quella relazione vale 22; con il modello di scatola del CSS ne vale
   28. Scrivere «22px» qui avrebbe lasciato le basi disallineate di 6.

   Quindi si dichiara la relazione e si lascia calcolare il numero al browser, che è anche
   l'unica forma che sopravvive a un cambio di corpo o di interlinea. */
.icg__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  gap: var(--icg-gap);
  /* 64 = dal fondo del blocco di testo (127) all'inizio delle card (191) nell'istanza. */
  margin-bottom: 64px;
}

/* Il tema dichiara font e dimensioni sugli heading e su `p`: qui vanno ridichiarati sulle
   classi, o li perde. `text-transform: none` esplicito perché il tema può applicarne uno. */
.icg__title {
  min-width: 0;
  margin: 0;
  font-family: var(--icg-font);
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.20833;
  color: var(--icg-navy);
  text-transform: none;
}

.icg__description { min-width: 0; }

/* Nella seconda disposizione la testata è impaginata diversamente, e non è un dettaglio: nel
   disegno a mano il titolo sta **su una riga a piena larghezza** e la descrizione **sotto, a
   sinistra**, larga 956 di 1600. La grafica ci era arrivata per errore ereditando lo schema
   dell'altra disposizione, e Cristina l'ha corretta — quindi qui la seguiamo.
   Ritmo verticale dall'originale: titolo 60, descrizione a +70 (10 di stacco), 42 prima
   delle card invece di 64. */
/* Qui i due blocchi sono impilati, non affiancati: l'allineamento delle basi non ha niente
   da allineare e tornerebbe a comportarsi come `start`. Lo si rimette esplicito perché la
   riga sopra non valga per caso anche dove non ha senso. */
.icg--quattro_piccole .icg__head {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
  margin-bottom: 42px;
}
.icg--quattro_piccole .icg__description { max-width: 59.75%; }

/* La terza disposizione impagina la testata come la seconda — titolo su una riga, descrizione
   sotto a sinistra — ma lo stacco prima delle card e' **48** invece di 42. Letto sull'istanza:
   titolo a 87,5, descrizione a 157,5 (10 di stacco), card a 236. E' lo stesso scarto che il
   contratto segnala al §20, «48 solo su questa disposizione, 132 sulle altre due»: i 132 di
   la' comprendono la linea separatrice, che da noi non c'e' piu'. */
.icg--due_piccole_tre_link .icg__head {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
  margin-bottom: 48px;
}
.icg--due_piccole_tre_link .icg__description { max-width: 59.75%; }
.icg__description,
.icg__description > p,
.icg__description > ul,
.icg__description > ol {
  margin: 0;
  font-family: var(--icg-font);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--icg-text);
}
.icg__description > * + * { margin-top: 16px; }

/* ---- La griglia -------------------------------------------------------------------- */
/* Due colonne uguali. La prima card occupa tutta l'altezza della colonna di sinistra; le
   altre si impilano a destra dividendosi lo spazio.

   L'altezza la decide la **colonna di destra**, non la card grande: le piccole hanno il loro
   rapporto 784:337 e la grande si allunga a coprire. È l'unico verso che regge anche con
   tre card a destra invece di due — al contrario, fissare l'altezza della grande farebbe
   schiacciare le altre. A 1600 di larghezza il risultato è esattamente il disegno. */
.icg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--icg-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.icg__cell { display: flex; margin: 0; }

/* **Le righe vanno dichiarate esplicitamente**, ed è il motivo per cui il markup emette
   `icg--nN` con il numero di card.

   `grid-row: 1 / -1` sembra dire «dalla prima all'ultima riga», ma `-1` è l'ultima linea
   della griglia **esplicita**: se le righe sono tutte implicite, quella linea è la prima, e
   la regola si riduce a una riga sola. La card grande resterebbe alta quanto la prima
   piccola. Non è un caso limite — è il comportamento normale con `grid-template-rows` non
   dichiarato, e non si vede finché non si guarda la pagina. */
.icg--n2 .icg__grid { grid-template-rows: auto; }
.icg--n3 .icg__grid { grid-template-rows: auto auto; }
.icg--n4 .icg__grid { grid-template-rows: auto auto auto; }

.icg--uno_grande_due_piccole .icg__cell--grande { grid-column: 1; grid-row: 1 / -1; }
/* Niente `aspect-ratio` qui: fisserebbe l'altezza della riga e riporterebbe il difetto che
   si è appena tolto. Il rapporto disegnato è diventato un **pavimento** sulla card, che la
   riga eredita quando il contenuto non lo supera — così a 1920 i conti restano quelli del
   disegno (337 + 32 + 337 = 706, l'altezza della card grande) e sotto la card cresce. */
.icg--uno_grande_due_piccole .icg__cell--piccola { grid-column: 2; }

/* ---- Disposizione «4 piccole» --------------------------------------------------------
   Quattro card uguali su due colonne, la destra sfalsata in basso. I numeri vengono dal
   disegno a mano da cui la grafica l'ha normalizzata: card 784×426, gap 32 in orizzontale e
   **40** in verticale, colonna destra giù di **60**.

   Il 40 non è un token del sistema — i vicini sono 32 e 48 — ed è stato tenuto così perché
   era il valore dell'originale. Lo teniamo anche noi: dove loro hanno scelto di seguire il
   disegno invece del sistema, seguirli è l'unico modo di restare allineati. */
.icg--quattro_piccole .icg__grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: none;
  column-gap: var(--icg-gap);
  row-gap: 40px;
  align-items: start;
}
.icg--quattro_piccole .icg__cell { grid-column: auto; grid-row: auto; }
/* 60 / 784 = 7,65%: lo sfalsamento della colonna destra, in proporzione alla card. */
.icg--quattro_piccole .icg__cell:nth-child(even) { margin-top: 7.65%; }
/* 426 / 784: queste card sono più alte delle piccole dell'altra disposizione. La grafica ci
   è arrivata **ridimensionando il master** invece di creare una terza variante — vedi §2.24
   del contratto — ed è la stessa cosa che facciamo qui cambiando un solo numero. */
.icg--quattro_piccole .icg__cell--piccola .icg__card::before { padding-top: 54.34%; }

/* ---- Disposizione «2 piccole + 3 link» -------------------------------------------------
   Due card affiancate — 784 ciascuna, gap 32, **altezza 374** — e sotto la riga dei tre link.
   374 / 784 = 47,7%: il rapporto sostituisce l'altezza, come nelle altre due disposizioni.

   ⚠️ **Qui il pannello si appoggia in basso, non in alto.** E' l'asse `Pannello` del
   componente (§41), e discende dalla disposizione esattamente come `Dimensione`: la stessa
   card `Piccola` ha il pannello in alto su «4 piccole» e in basso qui. Il rientro resta 29,
   cioe' il 3,7% della card, solo misurato dall'altro bordo — e in percentuale anche in
   verticale, perche' i margini in percentuale si risolvono sempre sulla larghezza. */
.icg--due_piccole_tre_link .icg__cell--piccola .icg__card::before { padding-top: 47.7%; }
.icg--due_piccole_tre_link .icg__cell--piccola .icg__panel {
  align-self: end;
  margin-top: 0;
  margin-bottom: 3.7%;
}
.icg--due_piccole_tre_link .icg__cell--piccola .icg__fondo { margin-top: 0; }

/* La riga dei link: nel disegno tre card uguali, gap 32, staccate di 40 dalla riga sopra — il
   `gap` del `Container` verticale in Figma.

   ⚠️ **`1fr` da solo faceva sbordare la pagina.** `1fr` è `minmax(auto, 1fr)`, e quell'`auto`
   è il **min-content** della card: una card di queste non scende sotto 96 di padding + 24 di
   stacco + 112 di icona + la parola più lunga del titolo — «Climatizzazione» a 28 bold sono
   ~230px, e non si spezza. Fanno ~460 a card, cioè ~1450 in tre: sopra i 1100 della vecchia
   soglia ma sotto la larghezza di molti schermi, quindi la griglia usciva dal contenitore e
   compariva una barra di scorrimento orizzontale. Misurato il 23/09 su una finestra da
   ~1180.

   `auto-fit` + `minmax` toglie **sia** la soglia sia il min-content: le colonne sono tante
   quante ne stanno a 420 (che è quella misura, arrotondata), e sotto scendono a due e poi a
   una. `min(100%, 420px)` perché su uno schermo più stretto di 420 il minimo dev'essere lo
   schermo, o si sborda di nuovo. Una relazione al posto di due numeri. */
.icg__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--icg-gap);
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
/* `min-width: 0` sulla cella: il `minmax` impedisce alla **traccia** di allargarsi, non alla
   card dentro di sbordarla. */
.icg__link-cell { display: flex; min-width: 0; margin: 0; }

/* Fondo e bordo dello stesso colore: e' il disegno, non una svista. Il bordo e' da 2 e
   resta scritto perche' il giorno che deve comparire basta cambiargli colore.

   Padding 8/48 dal 23/09, quando il componente ha adottato l'illustrazione in fila (§35 del
   contratto): con l'icona da 112 la card viene alta 128, che e' la misura letta sulle sei
   istanze. Prima era 24/48, scelto quando l'icona era ancora in `ABSOLUTE` e il padding
   verticale doveva reggere da solo l'altezza. */
.icg__link-card {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 48px;
  background: var(--icg-azzurro);
  border: 2px solid var(--icg-azzurro);
}

.icg__link-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* Senza, un titolo lungo allarga la card invece di andare a capo e spinge fuori l'icona. */
  min-width: 0;
  flex: 1 1 auto;
}

.icg__link-title {
  margin: 0;
  /* Ultima rete: una parola più lunga della card si spezza invece di uscirne. */
  overflow-wrap: break-word;
  font-family: var(--icg-font);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--icg-navy);
  text-transform: none;
}

/* L'illustrazione: 112 nel disegno, `flex: none` perche' non deve mai restringersi — un
   tratto sottile ridotto sparisce. Sotto la soglia scende a 80, che e' quello che fa la
   mobile reference della sezione. */
.icg__link-icon { display: inline-flex; flex: none; color: var(--icg-corporate); }
.icg__link-icon svg { display: block; width: 112px; height: 112px; }

/* Stessa costruzione di `.icg__cta`, ma navy: questa CTA sta su azzurro chiaro, non sul
   pannello navy. Una classe propria invece di un discendente — due regole a pari
   specificita' che si contendono il colore sono il modo di sbagliare. */
.icg__link-cta,
.icg__link-cta:link,
.icg__link-cta:visited,
.icg__link-cta:hover,
.icg__link-cta:focus,
.icg__link-cta:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--icg-font);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--icg-navy);
}
.icg__link-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* **La card è una griglia a una cella sola, e tutto ci sta dentro sovrapposto.**

   Prima il pannello era in posizione assoluta: fuori dal flusso, quindi incapace di
   influenzare l'altezza della card. L'altezza la dettava il rapporto d'aspetto, e quando il
   testo cresceva — stringendo la finestra, il pannello si restringe ma i caratteri no — il
   pannello sfondava la card e `overflow: hidden` lo tagliava. Misurato prima della
   correzione: a 1600 di viewport una card perdeva 32px di testo, a 769 ne perdeva 325.

   Con la griglia il pannello è **nel flusso**: la riga è alta quanto il più alto fra il
   rapporto disegnato e il contenuto reale. La card cresce invece di tagliare, e il rapporto
   resta un pavimento — che è la stessa forma già usata su `magazine`.

   Lo pseudo-elemento è quel pavimento: `padding-top` in percentuale si risolve sulla
   **larghezza**, ed è l'unico modo di dire «alto almeno quanto il rapporto» lasciando che il
   contenuto lo superi. */
.icg__card {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--icg-navy);
}
.icg__card > *,
.icg__card::before { grid-area: 1 / 1; }
.icg__card::before { content: ""; }
.icg__cell--grande .icg__card::before { padding-top: 90.05%; }  /* 706 / 784 */
.icg__cell--piccola .icg__card::before { padding-top: 42.98%; } /* 337 / 784 */

/* La foto riempie la card: il ritaglio è suo, non del contenitore di pagina. Il fondo navy
   sotto non è decorativo — è quello che tiene leggibile il testo se la foto manca o non
   carica, e senza il pannello resterebbe un riquadro trasparente. */
.icg__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Il pannello navy --------------------------------------------------------------- */
/* 362 di 784 = 46,17%; 29 di 784 = 3,7%. In percentuale invece che in pixel perché la card
   si ridimensiona con la griglia e il pannello deve seguirla.

   **`min-height` e non `height`.** In Figma il pannello dichiara 298 (grande) e 308
   (piccola) con `justify-between`, cioè un'altezza fissa che distanzia testo e CTA. Un
   contenitore di testo ad altezza fissa però taglia il contenuto quando qualcuno forza
   interlinea e spaziatura (criterio 1.4.12), e qui il testo lo scrive un redattore. Il
   `min-height` tiene la proporzione disegnata come **pavimento** e lascia crescere il
   pannello verso l'alto — è ancorato al fondo — quando il testo è più lungo. */
/* Il pannello non è più assoluto: sta nella cella della griglia e ne detta l'altezza quando
   il testo lo richiede. `justify-self: start` lo tiene a sinistra, largo quanto il disegno.

   **I due ancoraggi vengono dal file, e sono diversi.** Sulla `Grande` il pannello è a
   `bottom: 0`; sulla `Piccola` è a `top: 29` — e il 15/09 la grafica ha cambiato il vincolo
   verticale di quel master da `MAX` a `MIN` proprio per questo, così che allungando la card
   «il pannello resta in cima e la foto cresce sotto». Qui sono `align-self: end` e
   `align-self: start` con un margine in percentuale, che è la stessa relazione. */
.icg__panel {
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* HUG: il pannello e' alto quanto il suo contenuto, e i due numeri che ci vanno insieme
     sono `gap 24` e `padding-bottom 32` — lo dice la description del master. La `Grande`
     fa eccezione e se li riprende nella propria regola. */
  gap: 24px;
  justify-self: start;
  /* 29 / 784 = 3,7%: il rientro da sinistra del disegno. In percentuale perché segue la
     card quando si ridimensiona. */
  margin-left: 3.7%;
  /* La larghezza disegnata è il 46,17%, ma sotto una certa misura quel rapporto non regge
     più: i caratteri non si restringono con la finestra. Il `max` tiene la proporzione
     finché la card è larga e passa a una misura assoluta quando non lo è più — 260px è
     quanto serve al titolo ridotto a 24px per non spezzare «Amministrazione». */
  width: max(46.17%, min(92.6%, 260px));
  padding: 24px 32px 32px;
  background: var(--icg-navy);
}
/* **Il pannello ha un'altezza sua, e i due ancoraggi non sono simmetrici.**

   `Grande`: 298 di altezza, ancorato in fondo — sopra c'è la foto.
   `Piccola`: 308 di altezza, ancorato **in alto a 29**.

   Sulla card piccola da 337 i due numeri fanno 29 + 308 = 337, quindi il pannello *sembra*
   ancorato anche in basso. Non lo è: su una card più alta — le 426 della disposizione a
   quattro — resta in cima e lascia **89px di foto sotto**. La grafica ha cambiato il vincolo
   verticale di quel master da `MAX` a `MIN` il 15/09 proprio per ottenere questo, e averlo
   letto come «ancorato a entrambi» avrebbe dato un pannello che si allunga invece di una
   foto che respira.

   **Il pavimento è un `aspect-ratio`, non un `min-height`.** Prima c'erano due `min-height`
   in percentuale che non hanno mai avuto effetto: su un elemento di griglia la percentuale si
   risolve sull'altezza dell'area, che è a sua volta dettata dal contenuto — riferimento
   circolare, trattato come `auto`. Il rapporto invece si risolve sulla **larghezza**, che è
   definita, e lascia crescere il pannello quando il testo lo supera (è lo stesso meccanismo
   usato su `magazine`). 362×308 e 362×298 sono le due misure disegnate. */
.icg__cell--grande .icg__panel {
  align-self: end;
  /* La sola `Grande` tiene l'altezza fissa del disegno: 298 con `space-between`, cioe' testo
     in alto e CTA in fondo distanziati dallo spazio che avanza. Il rapporto e' il pavimento —
     se il testo cresce, il pannello cresce con lui invece di tagliare. */
  aspect-ratio: 362 / 298;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 96px;
}
.icg__cell--piccola .icg__panel {
  align-self: start;
  margin-top: 3.7%;   /* 29 / 784 */
}

/* Il fondo esteso: un rettangolo navy che parte dove parte il pannello e arriva al fondo
   della card. E' un elemento a se' e non un'altezza del pannello perche' lo e' anche in
   Figma, e perche' l'altezza del pannello deve restare quella del testo: se il testo cresce
   il pannello cresce, ma il fondo arriva in basso comunque.

   Griglia e non assoluto: cosi' il rientro si scrive `margin-left` in percentuale come sul
   pannello — le percentuali dei margini si risolvono sulla **larghezza** anche in verticale,
   che e' quello che serve per tenere i 29 del disegno proporzionali alla card. `top` di un
   assoluto si risolverebbe invece sull'altezza, e il rientro cambierebbe con essa. */
.icg__fondo {
  z-index: 2;
  justify-self: start;
  align-self: stretch;
  width: max(46.17%, min(92.6%, 260px));
  margin-left: 3.7%;
  background: var(--icg-navy);
}
.icg__cell--piccola .icg__fondo { margin-top: 3.7%; }

.icg__text { display: flex; flex-direction: column; gap: 8px; }

.icg__card-title {
  margin: 0;
  font-family: var(--icg-font);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--icg-white);
  text-transform: none;
}

.icg__card-description {
  margin: 0;
  font-family: var(--icg-font);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.55556;
  color: var(--icg-white);
}

/* ---- La CTA secondaria --------------------------------------------------------------- */
/* Tutti gli stati dichiarati insieme e uguali: il tema emette `a:hover, a:focus` con
   `anchor_font.style`, che vale (0,1,1) e batte una classe singola (0,1,0). Senza, al
   passaggio del mouse la CTA cambierebbe font e prenderebbe una sottolineatura.
   È lo stesso meccanismo già documentato su `text-image` e `card-grid`. */
.icg__cta,
.icg__cta:link,
.icg__cta:visited,
.icg__cta:hover,
.icg__cta:focus,
.icg__cta:active {
  /* Dal 29/09 la CTA è un link esteso (vedi in fondo): il suo `::after` si deve misurare sulla
     card, e un `a { position: relative }` del tema lo richiuderebbe sul link. Successo il 25/09
     su tre moduli — vedi la trappola nel README dei moduli. */
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--icg-font);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--icg-white);
}
.icg__cta-arrow {
  display: inline-flex;
  flex: none;
}
.icg__cta-arrow svg { display: block; width: 16px; height: 16px; }

/* Neutralizzando il colore di focus del tema serve un anello esplicito, o la CTA diventa
   irraggiungibile da tastiera. `currentColor` è bianco: sul pannello navy sta a 12,94:1. */
.icg__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .icg__cta-arrow { transition: none; }
}

/* ---- Accento ------------------------------------------------------------------------- */
/* `M0 0 V55 H392 L0 0 Z`: un triangolo rettangolo con l'ipotenusa dall'angolo in alto a
   sinistra al fondo a destra. Banale da ottenere in CSS — a differenza dei cunei degli hero,
   che sono vettori mascherati e vanno incorporati come SVG.

   Sta **sopra** il pannello, come in Figma, e compare su **tutte** le card: non copre la CTA
   perché il pannello ha 96px di padding in basso e il triangolo non arriva mai a 55.

   ⚠️ **Correzione del 18/09, dalle linee guida grafiche.** Un cuneo del marchio è un
   rettangolo inclinato di **8 gradi**: l'angolo è l'identità della forma, non una
   conseguenza delle sue misure. E quando il triangolo è uno solo — questo caso — occupa
   **sempre metà** della card.

   Qui c'erano due valori fissi che rompevano entrambe le regole appena la card cambiava
   misura: `height: 55px` e, sotto la soglia, `width: 70%; height: 40px`. La larghezza
   scalava, l'altezza no, quindi l'angolo si apriva man mano che la card si stringeva —
   `atan(55/392) = 8,0°` sulla card grande, ma `atan(40/239) = 9,5°` su una card da 342 con
   il 70%. Su mobile il cuneo era più grande **e** più ripido.

   Ora si dichiara solo la larghezza e l'altezza viene dall'angolo. La seconda
   `aspect-ratio` è la regola scritta come regola; la prima sono i numeri del file
   (392 × 55 = 7,99°) e serve ai browser senza `tan()`, che prendono l'ultima dichiarazione
   che sanno leggere. */
.icg__accento {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 50%;   /* 392 / 784 */
  aspect-ratio: 392 / 55;
  aspect-ratio: calc(1 / tan(8deg));
  background: var(--icg-accento);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

/* ---- Sotto la soglia ----------------------------------------------------------------- */
/* ---- Il titolo delle card si riduce prima che la disposizione ceda -------------------- */
/* È la leva più economica per tenere in vita la sovrapposizione: il pannello ha bisogno di
   larghezza **perché il testo dentro non si restringe**, quindi restringendo il testo il
   pannello può essere più stretto e la griglia sopravvive più a lungo. Con 28px la
   sovrapposizione cedeva a 1280; con 24 arriva a 1100.

   **A gradini e non con una `clamp` su `vw`**, di proposito: un `font-size` in `vw` non
   cresce con lo zoom del browser — è il rischio di 1.4.4 che avevamo verificato non correre
   da nessuna parte in questi moduli (§33). I gradini lo tengono fuori.

   I due valori non sono inventati: 32 è `H3` (era 28 fino al 24/09), 22 è `H3 mobile`,
   e 27 sta in mezzo. */
@media (max-width: 1600px) {
  .icg__card-title { font-size: 2.7rem; line-height: 1.25; }
}

/* ---- Sotto i 1100: la disposizione cede tutta insieme --------------------------------- */
/* **Una soglia sola, e ci sono voluti due tentativi per capirlo.**

   Il primo tentativo separava le due cose: la card si scomponeva, la griglia restava a
   due colonne fino a 768. Misurandolo, il risultato era peggiore del difetto di partenza —
   la card grande attraversa due righe, quindi resta alta quanto le due piccole impilate
   (1189px a quella larghezza), ma il suo contenuto scomposto ne occupa 579: **610px di
   vuoto** fra la foto e il pannello.

   La ragione è che «1 grande + 2 piccole» non è una griglia di tre card: è **una card che
   vale due**, e quel rapporto esiste solo finché la grande è alta il doppio. Scomponendola,
   il rapporto sparisce e la disposizione con lui. Le due cose non sono separabili.

   Quindi sotto la soglia cede tutto insieme. **Ma non in una colonna sola**: a 1100 una card
   a piena larghezza sarebbe alta più di 700px, un cartellone. Restano **due colonne uguali**
   — si perde la gerarchia «una grande e due piccole», che a quella larghezza non si leggeva
   più comunque, e si tiene una misura di card sensata. La colonna unica arriva a 768. È anche ciò che la description del component set dichiara come
   convergenza voluta — «le due disposizioni convergono sotto il breakpoint in una colonna
   sola di card a tutta larghezza» — quindi non stiamo inventando una disposizione nuova,
   solo scegliendo dove comincia.

   **1100 l'abbiamo scelto misurando**, non per convenzione: lì la card scende a ~440px e il
   pannello ridotto a 260 ne lascia 180 alla foto. È l'ultimo punto in cui la foto è ancora
   una foto e non una striscia.

   ⚠️ **Niente di tutto questo è disegnato**, e non lo sarà: il contratto della grafica
   dichiara `MOBILE: da definire con Cristina` e nessuna mobile reference esiste (verificato
   sul contratto del 16/09, §5 e §20). Ma le soglie intermedie non sono disegnabili in
   generale — stanno fra i due estremi che un file Figma contiene, e si trovano solo
   guardando. */
@media (max-width: 1100px) {
  /* Due colonne uguali: le righe esplicite e la campata della card grande vanno sciolte,
     perché «una card che ne vale due» esiste solo in forma sovrapposta. */
  .icg__grid { grid-template-rows: none; }
  .icg--uno_grande_due_piccole .icg__cell--grande,
  .icg--uno_grande_due_piccole .icg__cell--piccola {
    grid-column: auto;
    grid-row: auto;
  }
  /* Lo sfalsamento della colonna destra non sopravvive alla scomposizione: le card non sono
     più affiancate, quindi non c'è niente rispetto a cui essere sfalsate. */
  .icg--quattro_piccole .icg__cell:nth-child(even) { margin-top: 0; }
  .icg--quattro_piccole .icg__cell--piccola .icg__card::before { padding-top: 0; }
  /* Niente regola per `.icg__links`: le colonne se le conta da sola, vedi sopra. */
  .icg--due_piccole_tre_link .icg__cell--piccola .icg__card::before { padding-top: 0; }

  /* Da cella sovrapposta a due righe in fila: la foto è alta quanto è alta, il pannello si
     prende **tutto il resto**.

     `1fr` e non `auto` sulla seconda riga: quando due card affiancate hanno testi di
     lunghezza diversa, la più corta viene stirata all'altezza dell'altra, e con due righe
     `auto` quello spazio in più finisce **fra la foto e il pannello** — il box blu staccato
     da sopra e staccato da sotto. Con `1fr` lo assorbe il pannello, che resta attaccato al
     fondo. */
  /* Impilata, la card ha due righe: foto e pannello. Il fondo esteso ne diventerebbe una
     terza — e non serve, perche' il pannello si prende gia' tutto lo spazio sotto la foto,
     cioe' e' esteso per costruzione. */
  .icg__fondo { display: none; }

  .icg__card { grid-template-rows: auto 1fr; }
  .icg__card::before { display: none; }
  .icg__card > * { grid-area: auto; }

  /* La foto torna un blocco, invece di riempire la card.

     È la correzione del secondo difetto: sovrapposta, la foto è alta quanto la card e
     `object-fit: cover` la ritaglia al centro — su un verticale da 1568×2100 dentro un
     riquadro stretto si vede una fascia centrale, e il pannello ne copre metà. Il soggetto
     sparisce non per un errore di misura, ma perché lì non c'è posto per due cose
     sovrapposte. Da blocco, la foto prende tutta la larghezza e un ritaglio poco profondo.

     **Altezza fissa a 200px, non un rapporto.** Con un rapporto d'aspetto le foto seguono la
     larghezza della card, e card di larghezza diversa danno bande di altezza diversa: la
     fascia di foto smette di essere un ritmo e diventa rumore. 200 è la misura che le tiene
     tutte uguali a qualunque larghezza, e `object-fit: cover` fa il resto. */
  .icg__image {
    position: static;
    aspect-ratio: auto;
    width: 100%;
    height: 200px;
  }

  /* `margin-left` va azzerato insieme al resto: impilato il pannello è largo quanto la card,
     e un rientro che resta lo fa sbordare a destra della stessa misura — invisibile, perché
     la card ritaglia, ma il testo dentro si sposta. */
  /* Impilato il pannello non ha più un rapporto da rispettare: si prende la riga `1fr` e
     basta. L'`aspect-ratio` va spento esplicitamente, o continuerebbe a imporre un'altezza
     calcolata su una larghezza che nel frattempo è diventata quella della card. */
  .icg__panel {
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    margin: 0;
    padding: 24px 32px 64px;
  }
  .icg__cell--grande .icg__panel,
  .icg__cell--piccola .icg__panel {
    align-self: stretch;
    aspect-ratio: auto;
    margin: 0;
  }
}

/* `max-width: 768px`, in fase con `md` del tema di produzione. Qui le due colonne diventano
   una; le foto restano alte 200 come sopra. */
@media (max-width: 768px) {
  /* Sotto la soglia le due colonne diventano una: niente più da allineare in orizzontale. */
  .icg__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
    margin-bottom: 32px;
  }
  .icg__title { font-size: 3.2rem; line-height: 1.1875; }
  .icg__description,
  .icg__description > p { font-size: 1.8rem; line-height: 1.55556; }

  .icg__panel { padding: 24px 24px 56px; }

  .icg__grid,
  .icg--quattro_piccole .icg__grid { grid-template-columns: 1fr; }
  .icg--quattro_piccole .icg__head { margin-bottom: 32px; }
  .icg--quattro_piccole .icg__description { max-width: none; }
  .icg--due_piccole_tre_link .icg__head { margin-bottom: 32px; }
  .icg--due_piccole_tre_link .icg__description { max-width: none; }

  /* Dalla mobile reference della sezione: card link impilate a tutta larghezza, padding da
     48 a **24** e icona da 112 a **80**. Il motivo e' misurato nel contratto (§40): a 294 di
     contenuto, l'icona a 112 lascia 182 al titolo e «Climatizzazione» non ci sta. */
  .icg__links { margin-top: 32px; }
  .icg__link-card { padding: 24px; gap: 16px; }
  .icg__link-icon svg { width: 80px; height: 80px; }
  .icg__link-title { font-size: 2.2rem; line-height: 1.27273; }

  .icg__card-title { font-size: 2.2rem; line-height: 1.27273; }
  .icg__card-description { font-size: 1.6rem; line-height: 1.625; }
  /* Niente override del cuneo: metà card a ogni larghezza, e l'altezza la decide l'angolo.
     Vedi la correzione del 18/09 sopra `.icg__accento`. */
}

/* ---- Stati interattivi — §70 del contratto (28/09) --------------------------------------
   Le regole valgono per tutti i controlli: transizione 150 ms su fondo, bordo e colore;
   focus da tastiera = contorno 2px a 2px, Primary su chiaro e bianco su navy; la freccia dei
   controlli con etichetta trasla di 4px **solo in hover**; ogni movimento dentro
   `prefers-reduced-motion`. `Primary scuro` (#031B3B) nel tema non c'è ancora: la variabile
   `--color-primary-scuro` è chiesta al team tema, e intanto vale il fallback.

   Stanno in fondo al file di proposito: i blocchi che elencano tutti gli stati valgono
   (0,2,0), e queste regole li battono per ordine a pari specificità. */
/* `cta secondaria` sulle card link azzurre: `Primary scuro` e sottolineatura. */
.icg__link-cta:hover,
.icg__link-cta:active { color: var(--color-primary-scuro, #031b3b); }
.icg__link-cta:hover .icg__cta-label { text-decoration: underline; text-underline-offset: 3px; }
/* La stessa CTA sul pannello navy delle card immagine resta bianca: il §70 la definisce su
   fondo chiaro, e il `Primary scuro` sul navy sparirebbe. Qui il segnale è la sottolineatura
   più la freccia — il colore da solo non lo è mai. */
.icg__cta:hover .icg__cta-label { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .icg__link-cta { transition: color 0.15s ease; }
  .icg__cta-arrow { transition: transform 0.15s ease; }
  .icg__cta:hover .icg__cta-arrow,
  .icg__link-cta:hover .icg__cta-arrow { transform: translateX(4px); }
}

/* ---- La card immagine è il bersaglio (§72, «perimetro del clic», 28/09) ------------------
   Tutta la card, non la sola `cta secondaria`. Hover: sollevamento della card e CTA
   sottolineata, con la freccia che trasla come sulla CTA da sola.

   Il link resta **uno**, la CTA: il suo `::after` si stende su tutta la card, come la banda
   di `configuratore-offerte`. `.icg__card` è il primo antenato posizionato; il pannello ha uno
   `z-index` ma non una `position`, quindi non fa da contenitore. L'accento sta sopra (z 3) e
   senza `pointer-events: none` il suo triangolo resterebbe un angolo morto. */
.icg__card--link .icg__cta::after { content: ""; position: absolute; inset: 0; }
.icg__card--link .icg__accento { pointer-events: none; }
.icg__card--link:hover .icg__cta-label { text-decoration: underline; text-underline-offset: 3px; }

/* Il sollevamento è quello della `card offerta generica` del team tema (`.ao-card`, in
   `_offer-card.css`): 6px, la stessa ombra, 0,22 s. Il contratto dice che su quella card «è
   già implementato» e non dà numeri propri: due card cliccabili sullo stesso sito si sollevano
   uguale. Come da loro, **solo con un hover vero** — su touch lo stato resterebbe appiccicato
   dopo il tap — e il movimento solo senza la riduzione del movimento. L'ombra da sola resta: è
   il riscontro anche per chi il movimento l'ha tolto. */
@media (hover: hover) {
  .icg__card--link:hover { box-shadow: 0 28px 56px -12px rgba(0, 27, 68, 0.22); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .icg__card--link { transition: transform 0.22s ease, box-shadow 0.22s ease; }
  .icg__card--link:hover { transform: translateY(-6px); }
  .icg__card--link:hover .icg__cta-arrow { transform: translateX(4px); }
}

/* Focus: il contorno va **attorno alla card**, che è l'area cliccabile (§70: «contorno Primary
   su tutta la riga»). Non sull'`::after`: la card ha `overflow: hidden` e lo taglierebbe. Sulla
   card stessa l'outline non viene tagliato, ed è `Primary` perché cade sul fondo della pagina.
   Dentro `@supports`: senza `:has()` resta il contorno bianco sulla sola CTA, di sopra. */
@supports selector(:has(*)) {
  .icg__card--link .icg__cta:focus-visible { outline: none; }
  .icg__card--link:has(.icg__cta:focus-visible) {
    outline: 2px solid var(--icg-navy);
    outline-offset: 2px;
  }
}