/* ==========================================================================
   Navigation — Footer · istanza 85:4590 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, non una misura di Figma.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 il footer resta
   identico al mockup: 1512 x 491 (80 + 56 + 40 + 240 + 40 + 15 + 20).

   Struttura desktop:
     .foot__top    1432 x 56  — logo 229.6 + CTA 192, space-between
     .foot__cols   1432 x 240 — border-top/bottom + 40 di padding verticale
       .foot__cols-inner      — 3 colonne da 200, space-between
     .foot__legal  1432 x 15  — rights (524, nowrap) + policy (176)

   Percorso di riflusso: colonne 3 -> 2 -> 1, riga legale in colonna,
   testa logo/CTA impilata sotto il tablet.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1280-1511 · Desktop compresso
   Struttura invariata. Si sciolgono i 1432 fissi e le altezze di riga, che
   valgono solo finche il contenuto sta su una riga sola.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .foot__top,
  .foot__cols,
  .foot__legal {
    width: 100%;
  }
  .foot__top,
  .foot__legal {
    height: auto;
  }

  /* Logo e CTA sono hug sul proprio contenuto: non devono comprimersi
     quando lo space-between si stringe. */
  .foot__logo,
  .foot__cta {
    flex: 0 0 auto;
  }

  /* Un respiro minimo fra i due estremi delle righe che restano orizzontali.
     Valore MIO: in Figma i blocchi sono a filo dei 1432. */
  .foot__top,
  .foot__legal {
    gap: var(--space-4);
  }
}


/* --------------------------------------------------------------------------
   1024-1279 · Laptop
   Le tre colonne da 200 (600 in tutto) stanno comodamente in 944-1199px:
   nulla da cambiare, lo space-between si limita a ridurre i vuoti.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — 3 colonne -> 2, e la riga legale si impila

   Colonne: lo space-between su tre blocchi da 200 fissi funziona finche c'e
   spazio, ma sotto il tablet i vuoti diventano piu larghi del contenuto.
   Si passa a una griglia 2 x N: le colonne si dividono lo spazio invece di
   galleggiare. QUICK LINKS e CONTACT US in riga, SOCIAL sotto.

   Riga legale: il testo dei rights e una riga sola di ~510px (nowrap di
   Figma) piu i 176 della policy. A 768 restano 688px utili: passerebbe per
   pochi pixel, cioe non passerebbe con nessun altro font o traduzione.
   Si impila e si rilascia il nowrap.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .foot__cols-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);     /* 32, valore MIO */
    row-gap: var(--space-5);        /* 40, valore MIO */
  }
  /* I 200px sono la larghezza dichiarata della colonna in Figma; dentro una
     griglia a due tracce diventano un minimo, non una misura. */
  .foot-col {
    width: 100%;
    min-width: 0;
  }

  .foot__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);            /* 8, valore MIO */
  }
  .foot__rights {
    white-space: normal;            /* Figma lo tiene su una riga: qui non ci sta */
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile — anche la testa si impila
   Logo 229.6 + CTA 192 = 421.6 su 432px utili a 480: tecnicamente passa,
   ma con 10px fra i due blocchi. Meglio in colonna.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .foot {
    padding-block: 48px 20px;       /* 80 -> 48 in alto, valore MIO */
    gap: var(--space-4);            /* 40 -> 32 fra le tre righe, valore MIO */
  }

  .foot__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);            /* 16, valore MIO */
  }

  .foot__cols {
    padding-block: var(--space-4);  /* 40 -> 32, valore MIO */
  }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto — 2 colonne -> 1
   A 375 restano 343px: due colonne da ~155 spezzerebbero "Monitoring &
   Reporting" e l'indirizzo su tre-quattro righe ciascuno.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .foot__cols-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);        /* 40 -> 32, valore MIO */
  }

  /* 172 x 42 — larghezza MIA, ratio 229.6/56 conservato da Figma. */
  .foot__logo {
    width: 172px;
    height: auto;
    aspect-ratio: 229.6 / 56;
  }

  /* I 192px del CTA non stanno comodi accanto al gutter: il pulsante prende
     tutta la colonna, coerentemente con quanto fa il core ai .btn-group. */
  .foot__cta {
    width: 100%;
  }
}