/* ============================================================================
   FOOTER — piede della pagina
   ============================================================================

   Quattro colonne su schermo largo, due su schermo medio, una in verticale sul
   telefono. Le colonne che non hanno dati non vengono proprio scritte nella
   pagina (se ne occupa il template): la griglia si ridistribuisce da sola
   sulle colonne rimaste, senza buchi.
   ========================================================================= */

.site-footer {
  background: var(--deep-2);
  padding-top: clamp(56px, 7vw, 86px);
}

.footer-grid {
  display: grid;
  /* `auto-fit` + `minmax` invece di un numero fisso di colonne: così il piede
     resta equilibrato sia con tutte le colonne sia con le sole due che ci sono
     finché la compagnia non fornisce i recapiti. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

/* --- Colonna del marchio ---------------------------------------------------- */

.f-brand {
  /* Il blocco con nome e descrizione occupa il doppio di una colonna normale. */
  grid-column: span 2;

  & p {
    max-width: 32ch;
    margin: 16px 0 22px;
    color: var(--ink-dim);
    font-size: var(--text-meta);
  }
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  & a {
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ice);
    font-size: 12px;
    letter-spacing: var(--track-nav);
    transition:
      background var(--motion),
      border-color var(--motion);

    &:hover {
      background: var(--ultra);
      border-color: var(--ultra);
    }
  }
}

/* --- Colonne di collegamenti e recapiti ------------------------------------- */

.f-col {
  /* L'intestazione di colonna è un titolo di struttura, ma visivamente è
     un'etichetta minuscola: non deve sembrare un titolo di sezione. */
  & h2 {
    margin-bottom: 18px;
    color: var(--ultra-text);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: var(--weight-ui);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  & a,
  & span {
    display: block;
    padding: 6px 0;
    color: var(--ink-dim);
    font-size: var(--text-meta);
  }

  & a:hover {
    color: var(--ice);
  }
}

/* --- Riga finale ------------------------------------------------------------ */

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(44px, 5vw, 68px);
  padding-block: 26px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 12px;

  & a {
    color: var(--ink-dim);
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover,
    &:focus-visible {
      color: var(--ice);
    }
  }
}

@media (max-width: 640px) {
  .f-brand {
    grid-column: span 1; /* in colonna singola non ha più senso occuparne due */
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
  }
}