/* Pagina /manutenzione-tetti: tipi di copertura e motto. Caricato solo qui ($page['css']). */
@layer components {
  .roof-types {
    display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-block-start: clamp(1.75rem, 4vw, 2.75rem);
  }
  @media (min-width: 48em) { .roof-types { grid-template-columns: 1fr 1fr; } }
  .roof-type {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    & .roof-type__img img { aspect-ratio: 16 / 9; inline-size: 100%; object-fit: cover; }
  }
  .roof-type__body {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    & h3 { margin-block-end: 0.5rem; }
    & p { color: var(--c-text); }
  }

  .motto {
    display: grid; justify-items: center; gap: 0.75rem; margin: 0 auto; max-inline-size: 44rem; text-align: center;
    & blockquote { margin: 0; }
    & blockquote p {
      font-size: var(--step-3); line-height: 1.15; font-weight: 760; letter-spacing: -0.02em; color: var(--c-ink);
      text-wrap: balance;
    }
    & figcaption { font: 500 var(--step--2)/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-primary); }
  }
  .motto__icon { color: var(--c-primary); }
}

@layer components {
  /* Galleria lavori: 2 colonne su mobile, 4 su desktop (8 foto, righe complete) */
  #lavori .gallery { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 64em) { #lavori .gallery { grid-template-columns: repeat(4, 1fr); } }
}