/* ==========================================================================
   CATALOGO — apertura di pagina
   Stessa impostazione della sezione catalogo in home: resta la sola parola
   «Catalogo», a corpo di titolo, e subito sotto le due schede. Su desktop
   la sezione sta in una schermata: le fotografie prendono l'altezza che
   avanza invece di un 4:3 fisso, che a meta' pagina le faceva alte il
   doppio dello spazio disponibile.
   ========================================================================== */
.cat-hero__title { margin: 0 0 var(--s-5); }

/* A corpo pieno il display arriva a 150px e da solo si mangia un sesto
   della schermata: qui la parola e' un'insegna, non l'apertura di pagina. */
@media (min-width: 861px) { .cat-hero__title { font-size: clamp(2.5rem, 6vw, 5.5rem); } }

@media (min-width: 861px) and (min-height: 640px) {
  .cat-hero {
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: calc(var(--nav-h) + var(--s-4)) var(--s-5);
  }
  .cat-hero > .container { width: 100%; }
  .cat-hero__title { margin-bottom: var(--s-4); }
  .cat-hero__grid .card__media,
  .cat-hero__grid .card__media--draw {
    aspect-ratio: auto;
    height: clamp(130px, calc(100svh - var(--nav-h) - 38rem), 280px);
  }
  .cat-hero__grid .card__media img { height: 100%; }
  /* Le specifiche dentro la scheda: piu' strette, cosi' la scheda resta
     dentro la schermata anche con quattro righe di dati. */
  .cat-hero__grid .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
  .cat-hero__grid .specs > div { padding-block: .45rem; }
  .cat-hero__grid .card__body { gap: var(--s-2); padding: clamp(1rem, 1.6vw, 1.4rem); }
  .cat-hero__grid .card__body > p { font-size: var(--fs-small); }
}