/* Piede: frase grande a sinistra, contatti a destra, link e note legali sotto. Uno solo per tutte le pagine. */

@layer components {
  .site-foot {
    margin-top: var(--section);
    background: var(--tint);

    & .inner {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gap);
      row-gap: 40px;
      padding-block: 64px 32px;
    }

    & .claim {
      grid-column: 1 / span 7;
      font-family: var(--display);
      font-size: var(--step-head);
      line-height: var(--lh-head);
      letter-spacing: var(--track-head);
      text-wrap: balance;
    }
    & .claim span { color: var(--ink-soft); }

    & .contact { grid-column: 8 / span 5; display: grid; gap: 14px; align-content: start; }
    & .cta-row { display: flex; flex-wrap: wrap; gap: 8px; }

    & .cols {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px var(--gap);
      padding-top: 24px;
      box-shadow: inset 0 1px 0 var(--line);
    }
    & .cols h2 { margin-bottom: 10px; font-family: var(--font); font-size: var(--step-small); font-weight: 600; letter-spacing: 0; color: var(--ink-soft); }
    & .cols ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
    & .cols a { text-decoration: none; }
    & .cols a:hover { color: var(--accent); }

    & .legal { grid-column: 1 / -1; display: grid; gap: 6px; font-size: var(--step-small); color: var(--ink-soft); }
  }

  @media (max-width: 1080px) {
    .site-foot :is(.claim, .contact) { grid-column: 1 / -1; }
  }
  @media (max-width: 640px) {
    .site-foot .claim { font-size: var(--step-lead); }
  }
}