/* =====================================================================
   media-pattaro.css — livello fotografico (foto e video reali, ott. 2026)
   Regolazioni di layout legate ai media. Non modifica copy o colori.
   ===================================================================== */

/* Immagini: niente ritagli "da template", il soggetto resta in quadro */
.media picture { display: block; }
.media img { background: var(--brina); }
.media--dark img { background: #3a1019; }

/* HERO home: la foto resta piena in alto, il testo poggia su una velatura bordeaux
   (colore del marchio, non nero) per leggibilità e continuità con il resto del sito */
.hero { background: var(--radicchio-2); }
.hero__media .media img { object-position: 50% 40%; }
.hero .hero__shade {
  background:
    linear-gradient(180deg,
      rgb(69 12 26 / .55) 0%,
      rgb(69 12 26 / .10) 16%,
      rgb(91 17 35 / .18) 30%,
      rgb(91 17 35 / .78) 46%,
      rgb(91 17 35 / .93) 60%,
      rgb(69 12 26 / .97) 100%);
}

/* Prodotti in home: leggero zoom solo al passaggio (già previsto), nessun bordo */
.prod__media .media { border-radius: 0; }

/* Sezione "La qualità richiede attenzione": la foto della mano è verticale,
   quindi colonna più stretta invece di forzarla in un 16:9 */
@media (min-width: 64rem) {
  .quality .split--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr); }
}
@media (max-width: 63.99rem) {
  .quality .split__media { max-width: 30rem; }
}

/* Michele: nessuna foto disponibile -> sezione solo testo, impaginata in asimmetria */
@media (min-width: 64rem) {
  .michele__grid:not(:has(.michele__media)) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .michele__grid:not(:has(.michele__media)) .michele__text { grid-column: 4 / 12; }
  .michele__grid:not(:has(.michele__media)) .michele__text .lead { max-width: 34ch; font-size: var(--fs-h3); }
}

/* B2B home: foto verticale delle cassette, allineata al bordo */
.b2b__media { max-width: 30rem; }
@media (min-width: 64rem) { .b2b__media { justify-self: end; width: 100%; } }

/* Split senza immagine (pagina Azienda): testo su colonna sfalsata */
.split:not(:has(.split__media)) { grid-template-columns: minmax(0, 1fr) !important; }
.split:not(:has(.split__media)) .split__text { grid-column: 1 !important; grid-row: auto !important; }
@media (min-width: 64rem) {
  .split:not(:has(.split__media)) .split__text { margin-inline-start: calc(100% / 12 * 2); max-width: 44rem; }
  .split--rev:not(:has(.split__media)) .split__text { margin-inline-start: calc(100% / 12 * 5); }
}

/* Fasi di lavorazione senza foto: corpo più ampio, nessun vuoto */
@media (min-width: 64rem) {
  .step:not(:has(.step__media)) .step__body { grid-column: 2 / 4; max-width: 40rem; }
}

/* Bande a tutta larghezza: su mobile formato più alto con crop dedicato
   (l'aspect-ratio inline del componente altrimenti prevale) */
@media (max-width: 47.99rem) {
  .media--m43 { aspect-ratio: 4 / 3 !important; }
  .media--m45 { aspect-ratio: 4 / 5 !important; }
}
/* Hero mobile: il primo schermo è tutto foto + titolo;
   descrizione e pulsanti arrivano scorrendo, su bordeaux pieno */
@media (max-width: 47.99rem) {
  .hero { display: block; min-height: 0; }
  .hero__media { inset: 0 0 auto 0; height: 100vh; height: 100svh; }
  .hero__media .media img { object-position: 50% 30%; }
  .hero .hero__shade {
    inset: 0 0 auto 0; height: 100vh; height: 100svh;
    background: linear-gradient(180deg,
      rgb(69 12 26 / .55) 0%,
      rgb(69 12 26 / 0) 16%,
      rgb(69 12 26 / 0) 46%,
      rgb(91 17 35 / .72) 72%,
      rgb(69 12 26 / 1) 100%);
  }
  .hero .hero__content { padding-top: 0; }
  .hero__top {
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: var(--header-h); padding-bottom: var(--sp-6);
  }
  .hero__title { text-shadow: 0 1px 24px rgb(40 6 14 / .35); }
  .hero .hero__foot { margin-top: 0; }
}

/* Tardivo: il titolo "Sorprendentemente dolce." non deve spezzarsi a metà parola */
.intro h2 { overflow-wrap: normal; word-break: normal; }
@media (min-width: 64rem) {
  .intro h2 { font-size: clamp(3rem, 1rem + 4.2vw, 5.6rem); max-width: none; }
}
@media (max-width: 47.99rem) {
  .intro h2 { font-size: clamp(2.2rem, 10.5vw, 3.4rem); }
}

/* Video in loop: poster visibile subito, nessun salto di layout */
.video video { background: #2a0b12; display: block; }

@media (prefers-reduced-motion: reduce) {
  .prod__link img { transition: none; }
}

/* Pulsanti su fondo bordeaux: il pulsante "contorno" deve restare leggibile
   anche su iOS (niente stato :hover "appiccicato" dopo il tocco) */
.on-dark .btn--ghost,
.cta .btn--ghost {
  background: transparent !important;
  color: var(--costa-on-dark) !important;
  border-color: rgb(241 230 227 / .65) !important;
}
@media (hover: hover) {
  .on-dark .btn--ghost:hover, .cta .btn--ghost:hover {
    background: var(--costa-on-dark) !important; color: var(--radicchio-2) !important; border-color: var(--costa-on-dark) !important;
  }
}
.btn svg { flex-shrink: 0; }

/* CTA: su mobile i pulsanti hanno tutti la stessa larghezza, in colonna ordinata */
@media (max-width: 47.99rem) {
  .cta__body > p > .btn,
  .cta__body .btn-row .btn,
  .hero .btn-row .btn,
  .b2b .btn-row .btn,
  .privati .btn-row .btn { width: 100%; max-width: 24rem; }
  .cta__body .btn-row,
  .hero .btn-row,
  .privati .btn-row { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .cta__body .btn-row .text-link,
  .privati .btn-row .text-link { margin-top: var(--sp-2); }
  .cta__body > p + .btn-row { margin-top: var(--sp-3); }
}

/* ---------------------------------------------------------------------
   Banner cookie (consenso Google Maps)
   --------------------------------------------------------------------- */
.consenso {
  position: fixed; z-index: 60;
  left: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  width: min(26rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--radicchio-2); color: var(--costa-on-dark);
  border: 1px solid rgb(241 230 227 / .18);
  box-shadow: 0 18px 48px rgb(20 6 9 / .35);
  font-family: var(--font-sans);
}
.consenso__titolo { font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.1; margin: 0 0 var(--sp-3); }
.consenso__testo { font-size: var(--fs-sm); line-height: 1.55; margin: 0; color: rgb(241 230 227 / .88); }
.consenso__testo a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.consenso__azioni { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); }
.consenso__btn { width: 100%; }
.consenso .btn:not(.btn--ghost) { --btn-bg: var(--costa-on-dark); --btn-fg: var(--radicchio-2); }
.consenso .btn--ghost { background: transparent !important; color: var(--costa-on-dark) !important; border-color: rgb(241 230 227 / .65) !important; }
.consenso__stato { margin: var(--sp-4) 0 0; color: rgb(241 230 227 / .7); }
.consenso__x {
  position: absolute; top: .4rem; right: .5rem; width: 2.75rem; height: 2.75rem;
  background: none; border: 0; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: .75;
}
.consenso__x:hover, .consenso__x:focus-visible { opacity: 1; }
.consenso__link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (max-width: 47.99rem) {
  .consenso { left: 0; right: 0; bottom: 0; width: auto; padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); border-left: 0; border-right: 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .consenso { animation: consenso-in .5s var(--ease-out, ease-out) both; }
  @keyframes consenso-in { from { opacity: 0; transform: translateY(12px); } }
}