/**
 * catalogo-figma.css - schermate SPECIALI, SUSHI e BIBITE (vista app/views/catalogo.php).
 *
 * Tutte le misure vengono dal file Figma (canvas 1512) tradotte in percentuali,
 * cosi' le proporzioni reggono a ogni larghezza:
 *
 *   pagina    titolo 70px a (118,347) - sottotitolo 30px a (125,444), testo 718 di larghezza
 *   griglia   due colonne di schede 491x464, colonne a x=195 e x=787 (passo 101),
 *             righe a y=680 / 1226 / 1783 (passo 546 -> 88 di stacco)
 *   scheda    491x464 r=58 su #FDFDFD; foto 469 quadrata che parte a -34 sopra il
 *             bordo superiore; "8 pz" 30px rosso a (232,720); nome 45px rosso a
 *             (232,993); prezzo 40px rosso a destra; ingredienti 30px NERI a (233,1061)
 *   pill      368x62 r=20 rossa, testo 40px bianco (nel file solo su BIBITE:
 *             "Soft drink" e "Birra", qui i due blocchi di categoria reali)
 *
 * Dentro la scheda le misure sono in cqw sul contenitore .cat-cella: 1cqw = 1%
 * della larghezza della scheda, quindi 45px su 491 = 9.16cqw restano 45px alla
 * misura del file e scalano da soli su schermo stretto.
 */

/* ============================ intestazione pagina ============================ */

.cat-pagina {
  /* 347 (titolo) - 191 (fondo dell'header) = 156 sopra, 233 sotto l'ultima riga */
  padding-top: clamp(1.75rem, 10.32vw, 9.75rem);
  padding-bottom: clamp(2.5rem, 15.41vw, 14.5rem);
}

.cat-titolo {
  margin: 0 0 clamp(.35rem, .86vw, .8125rem);   /* 444 - 347 - 84 = 13 */
  color: var(--amore-rosso, #DC0C21);
  font-size: clamp(2.1rem, 4.63vw, 4.375rem);   /* 70 */
  line-height: 1.2;                             /* 70 x 1,2 = 84, l'altezza del blocco */
  text-transform: uppercase;
}

.cat-sottotitolo {
  max-width: min(100%, 44.875rem);              /* 718 */
  margin: 0;
  color: var(--amore-rosso, #DC0C21);
  font-size: clamp(1.05rem, 1.98vw, 1.875rem);  /* 30 */
  font-weight: 500;
  line-height: 1.25;
}

/* Gli a capo del file valgono sul disegno largo: su schermo stretto il testo va
   a capo da solo e la riga forzata lascerebbe orfane due parole. */
.cat-sottotitolo br { display: none; }

/* =============================== blocchi/gruppi ============================== */

.cat-gruppi { margin-top: clamp(3.25rem, 10.65vw, 10.0625rem); }   /* 680 - 519 = 161 */

/* Con le pill il primo blocco comincia piu' in alto: 611 - 519 = 92 */
.cat-gruppi--titolate { margin-top: clamp(2rem, 6.09vw, 5.75rem); }

.cat-gruppo + .cat-gruppo { margin-top: clamp(3rem, 16.27vw, 15.375rem); }  /* 3996 - 3750 = 246 */

.cat-gruppo__titolo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 23rem);                        /* 368 */
  min-height: clamp(2.4rem, 4.1vw, 3.875rem);     /* 62 */
  margin: 0 auto clamp(2.75rem, 9.59vw, 9.0625rem); /* 832 - 673 = 159, meno lo sbordo della foto */
  padding: .1em 1.25em;                           /* l'altezza la da' min-height: 62 */
  border-radius: clamp(.6rem, 1.32vw, 1.25rem);   /* 20 */
  background: var(--amore-rosso, #DC0C21);
  color: var(--amore-bianco, #FDFDFD);
  font-size: clamp(1.15rem, 2.65vw, 2.5rem);      /* 40 */
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}

/* ================================= griglia =================================== */

.cat-griglia {
  --cat-gap: clamp(1.25rem, 6.68vw, 6.3125rem);   /* 787 - 686 = 101 fra le colonne */
  display: grid;
  grid-template-columns: 1fr;                      /* mobile-first: una colonna */
  gap: clamp(3.5rem, 5.82vw, 5.5rem) var(--cat-gap);
  max-width: 67.6875rem;                           /* 195 -> 1278 = 1083 */
  margin-inline: auto;
}

@media (min-width: 46rem) {
  .cat-sottotitolo br { display: inline; }

  .cat-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Blocco con un prodotto solo: nel file (la birra) sta al centro, non a sinistra.
     Larghezza DEFINITA, non max-width con margini auto: la cella e' un
     contenitore inline-size, quindi con una larghezza da contenuto collasserebbe
     a zero (il contenuto non viene misurato). */
  .cat-griglia > .cat-cella:only-child {
    grid-column: 1 / -1;
    width: calc(50% - var(--cat-gap) / 2);
    justify-self: center;
  }
}

/* ================================== scheda =================================== */

/* La cella e' il contenitore di riferimento: dentro la scheda 1cqw = 1% della
   larghezza della scheda (491 nel file). */
.cat-cella {
  display: flex;
  container-type: inline-size;
}

.cat-card {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 94.50cqw;                       /* 464 / 491 */
  /* 313 sopra (spazio della foto) - 33 destra - 34 sotto - 37 sinistra */
  padding: var(--cat-top, 63.75cqw) 6.72cqw 6.92cqw 7.54cqw;
  border-radius: 11.81cqw;                    /* 58 */
  background: var(--amore-bianco, #FDFDFD);
  transition: transform .28s ease, box-shadow .28s ease;
}

/* Senza foto lo spazio riservato in alto resterebbe un vuoto bianco a meta' scheda */
.cat-card--senza-foto { --cat-top: 12.22cqw; }                      /* 60 */
.cat-card--senza-foto.cat-card--con-qta { --cat-top: 18.94cqw; }    /* 93: sotto la quantita' */

.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombra-alta, 0 18px 40px rgba(220, 12, 33, .18));
}

/**
 * La foto sborda 34px sopra il bordo superiore, come nel file (469 di larghezza
 * su scheda 491, a partire da x=9). Nel file il riquadro e' quadrato e arriva a
 * coprire il nome perche' le immagini sono scontornate su fondo trasparente; qui
 * le foto arrivano dalla cassa e possono essere piene, quindi il riquadro si
 * ferma dove comincia il nome (313 + 34 = 347) e l'immagine ci sta dentro
 * intera, ancorata in alto: lo sbordo sopra resta identico, il testo non finisce
 * mai coperto.
 */
.cat-card__foto {
  position: absolute;
  z-index: 0;
  top: -6.92cqw;                              /* -34 */
  left: 1.83cqw;                              /* 9 */
  width: 95.52cqw;                            /* 469 */
  height: 70.67cqw;                           /* 347 */
  max-width: none;                            /* site.css limita le img al 100%: qui deve sporgere */
  object-fit: contain;
  object-position: center top;
  /* Stesso raggio della scheda: sulle foto scontornate non si vede nulla, su una
     foto piena evita che la parte che sborda sia un rettangolo a spigolo vivo
     appoggiato su un angolo arrotondato. */
  border-radius: 11.81cqw;
  pointer-events: none;
}

.cat-card__qta {
  position: absolute;
  z-index: 1;
  top: 8.15cqw;                               /* 40 */
  left: 7.54cqw;                              /* 37 */
  color: var(--amore-rosso, #DC0C21);
  font-size: 6.11cqw;                         /* 30 */
  font-weight: 600;
  line-height: 1.2;
}

.cat-card__testo {
  position: relative;
  z-index: 1;
}

/* Prezzo SOTTO il nome (nota Marco 11/08): sulla stessa riga, coi nomi
   lunghi, il prezzo sbordava dal bianco della card. */
.cat-card__nome {
  margin: 0;
  color: var(--amore-rosso, #DC0C21);
  font-size: 9.16cqw;                         /* 45 */
  font-weight: 600;
  line-height: 1;
  overflow-wrap: break-word;                  /* mai a meta' parola: "anywhere" spezzerebbe "Thunderbowl" */
}

.cat-card__prezzo {
  display: block;
  margin-top: 2.4cqw;
  color: var(--amore-rosso, #DC0C21);
  font-size: 8.15cqw;                         /* 40 */
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.cat-card__desc {
  margin: 4.68cqw 0 0;                        /* 1061 - (993 + 45) = 23 */
  color: #000;
  font-size: 6.11cqw;                         /* 30 */
  line-height: 1.25;
}

/* Pulsante VISIBILE in fondo alla card (nota Marco 11/08): pill rossa,
   stessa delega di cart.js (.js-add-cart) o link al builder. */
.cat-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4.5cqw;
  padding: 2.2cqw 5.5cqw;
  border: 0;
  border-radius: 999px;
  background: var(--amore-rosso, #DC0C21);
  color: #FDFDFD;
  font: inherit;
  font-size: 5.5cqw;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cat-card__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(220, 12, 33, .3); }
.cat-card__cta:focus-visible { outline: 3px solid var(--amore-rosso, #DC0C21); outline-offset: 3px; }
.cat-card__cta[disabled] { cursor: progress; opacity: .7; }

/* Etichetta per i lettori di schermo (la scheda mostra gia' nome e prezzo) */
.cat-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cat-card { transition: none; }
  .cat-card:hover { transform: none; }
}

/* Il pulsante della card era alto 35px: sotto i 44 comodi al tocco. Sta qui
   e non in brand.css perche' le pagine di catalogo caricano questo foglio
   dopo, e a parita' di specificita' vincerebbe comunque questo. */
@media (max-width: 700px) {
  .cat-card__cta { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   Pulsante allineato in fondo alla card
   Le card di una riga sono gia' alte uguali (griglia), ma il pulsante seguiva
   il testo: dove c'e' la descrizione stava piu' in basso, dove manca piu' in
   alto, e in fila si vedevano "un po' su un po' giu'".
   La card diventa una colonna, il blocco di testo si prende lo spazio che
   avanza e il pulsante ci si appoggia in fondo.
   Foto e badge quantita' sono in position:absolute, quindi restano dove sono.
--------------------------------------------------------------------------- */
.cat-card {
  display: flex;
  flex-direction: column;
}

.cat-card__testo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.cat-card__cta {
  margin-top: auto;        /* spinto in fondo: e' questo che li allinea */
  align-self: flex-start;  /* larghezza sul contenuto, com'era prima */
}

/* Stacco minimo dal testo quando la card e' piena e non avanza spazio: lo da'
   l'elemento che precede il pulsante, qualunque sia (descrizione o prezzo). */
.cat-card__desc:has(+ .cat-card__cta),
.cat-card__prezzo:has(+ .cat-card__cta) {
  margin-bottom: 4.5cqw;
}