@charset "UTF-8";
/* ==========================================================================
   FARTEC — Card prodotto v3 (solo index3.html)

   Mosaico misurato su apple.com/it a 1440px di finestra: tessere 702×580
   (rapporto 0,83), fessura di 12px in orizzontale e in verticale, 12px di
   margine dal bordo dello schermo, fondo #f5f5f7, raggio 0. La pagina è
   divisa a metà a tutta larghezza, non dentro un contenitore centrato.

   Il punto che cambia tutto rispetto ai tentativi precedenti: **l'altezza è
   predefinita, non la detta il contenuto**. Il testo sta compatto in cima e
   il prodotto si prende esattamente ciò che resta — così le tessere non
   diventano mai colonne interminabili, qualunque sia la lunghezza del testo.

   Tutte le regole stanno sotto .products.v3, così la home attuale non è
   raggiungibile da questo file.
   ========================================================================== */

.section.products-v3-section { background: #fff; }

/* ---- Distacco dalla sezione successiva ---------------------------------
   Il mosaico è una fascia a filo schermo con 12px di fessura ai lati: sotto
   però ereditava i 150px di padding della sezione, più i 150px della
   sezione seguente — 300px di bianco fra due fasce colorate, che con quel
   ritmo orizzontale leggono come un buco.

   Sotto il mosaico resta la stessa fessura dei fianchi, e alla sezione
   successiva basta molto meno respiro perché la fascia sopra è già chiusa.
   Il `:empty` è la guardia: se dal page builder qualcuno inserisce un blocco
   nella zona "dopo i prodotti", quel blocco va separato per davvero e la
   regola smette di applicarsi da sola, restituendo i 150px di sempre. */
.section.products-v3-section { padding-bottom: 12px; }
.products-v3-section + [data-zone="after-products"]:empty + .section { padding-top: 72px; }

/* ---- Lavatura di colore sul mosaico ------------------------------------
   Le tessere non hanno tutte lo stesso fondo: percorrono una progressione
   dalla prima all'ultima, da quasi bianco a un verde tenue. Ogni tessera
   riceve `--t` (0 all'inizio, 1 alla fine) da renderProducts(), perché il
   passo dipende da quanti prodotti ci sono e in CSS non è conoscibile.

   La tinta poi deriva lentissimamente nel tempo, dal verde farmacia verso il
   blu del marchio e ritorno, su un giro di 72 secondi: abbastanza lento da
   non accorgersene guardando, abbastanza da non trovare mai la sezione
   identica a come la si era lasciata.

   `--wash-hue` va registrata con @property, altrimenti sarebbe un semplice
   testo sostituito e nessuna animazione potrebbe interpolarla. Dove
   @property non è supportata resta il valore iniziale e la deriva non parte,
   senza rompere nulla; dove non è supportato oklch() cade l'intera
   dichiarazione dell'immagine di sfondo e resta il colore pieno dichiarato
   prima. */
@property --wash-hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 152;
}

.products-v3-section {
  --wash-hue: 152;
  animation: wash-drift 72s ease-in-out infinite alternate;
}
@keyframes wash-drift { to { --wash-hue: 232; } }

/* La griglia esce dal contenitore centrato del sito e prende tutta la
   larghezza, con 12px di margine per lato come su apple.com. Il titolo di
   sezione resta centrato per conto suo (ha un max-width proprio). */
.products-v3-section .wrap { max-width: none; padding: 0 12px; }

.products.v3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Altezza predefinita e uguale per tutte: 40vw segue la proporzione 0,83
   delle tessere Apple (a 1440px dà 576px, loro ne hanno 580), con un tetto
   perché su schermi molto larghi non diventino monumentali e un minimo
   perché su schermi stretti restino guardabili. */
.products.v3 .product-card {
  height: clamp(420px, 40vw, 580px);
  position: relative; overflow: hidden;
  border-radius: 0; border: none; box-shadow: none;
  padding: clamp(32px, 3vw, 48px) clamp(20px, 2.5vw, 36px) 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--ink);
  min-height: 0;

  /* Colore pieno dichiarato per primo: è il ripiego se oklch() non è
     supportato. Poi la lavatura, che va dal quasi bianco dell'angolo alto al
     tono della tessera in basso, così anche la singola tessera ha una
     direzione e non è un rettangolo di tinta piatta. */
  --t: 0;
  background-color: var(--bg-alt);
  background-image: linear-gradient(155deg,
    oklch(0.988 0.003 var(--wash-hue, 152)) 0%,
    oklch(calc(0.978 - var(--t) * 0.072) calc(0.004 + var(--t) * 0.058) var(--wash-hue, 152)) 100%);
}

/* In evidenza non significa più "doppia": con cinque prodotti la tessera
   larga toccava sempre a un oggetto verticale, ed è lì che nascevano i vuoti
   laterali. Tutte uguali. */
.products.v3 .product-card.feature { grid-column: auto; }

/* Con un numero dispari di prodotti l'ultima tessera resterebbe spaiata
   accanto a un buco: prende tutta la riga. Restando alta uguale diventa
   larga il doppio, quindi lì il contenuto si dispone in orizzontale (vedi
   più sotto) invece di lasciare il prodotto solo al centro. */
.products.v3 .product-card:last-child:nth-child(odd) { grid-column: span 2; }

/* style.css alza la card all'hover e le mette un'ombra: qui va spenta, o il
   "niente sollevamento" del trattamento non regge. La specificità di questa
   regola (0,4,0) batte quella di `.product-card:hover` (0,2,0). */
.products.v3 .product-card:hover { transform: none; box-shadow: none; }

/* ----- Blocco di testo: compatto, in cima ----- */
.products.v3 .product-card .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  /* ripiego semplice per i browser senza color-mix(): stesso schema di
     style.css (dichiarazione semplice prima, color-mix dopo) */
  color: var(--brand);
  color: color-mix(in srgb, var(--acc, var(--brand)) 45%, var(--ink));
}
.products.v3 .product-card .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc, var(--brand));
}
.products.v3 .product-card h3 {
  font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.02em; margin: 10px 0 6px;
}
/* Il grigio tenue di sistema (#6e6e73) reggeva sul nebbia piatto — 4,66:1 —
   ma sulla tessera più tinta scende a 3,86:1, sotto la soglia di 4,5 che il
   progetto si è dato. Qui si scende di un gradino sulla scala dell'inchiostro:
   misurato 5,57:1 nel caso peggiore, per ogni tinta della deriva. */
.products.v3 .product-card p {
  color: #56565a; font-size: 17px; line-height: 1.4; max-width: 34ch;
}

/* ----- Azioni: due pillole affiancate, come sulle tessere di apple.com ----- */
.products.v3 .product-card .card-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px;
}
.products.v3 .product-card .card-actions .btn { font-size: 15px; padding: 10px 20px; }
/* Seconda azione: pillola contornata invece del solo testo blu, così le due
   hanno lo stesso peso di oggetto e diverso peso di gerarchia. */
/* Il testo prende il blu profondo, non quello vivo: il blu vivo dava 3,48:1
   sulla tessera più tinta — e già solo 4,19:1 sul nebbia piatto di prima,
   quindi era sotto soglia anche senza la lavatura. Il contorno resta sul blu
   vivo: è un elemento di interfaccia, non testo, e gli bastano 3:1. */
.products.v3 .product-card .btn-outline {
  border: 1px solid var(--brand); color: var(--brand-deep); background: none;
}
.products.v3 .product-card .btn-outline:hover { background: var(--azzurro-velo, #eaf2ff); }
.products.v3 .product-card .card-actions .btn:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}

/* ----- Prodotto: si prende ciò che resta dell'altezza fissa -----
   `flex: 1` con `min-height: 0`: dentro una tessera di altezza data,
   l'immagine occupa lo spazio lasciato libero dal testo e nient'altro.
   È questo che impedisce alla tessera di allungarsi. */
.products.v3 .product-card .card-photo {
  position: static; flex: 1 1 auto; min-height: 0;
  width: 100%; max-width: none; height: auto; margin: 18px 0 0;
  transition: transform .5s var(--ease);
  /* style.css mette un `filter: drop-shadow(...)` su `.product-card
     .card-photo` (0,2,0) per staccare la foto dal fondo della v1: qui non lo
     ridichiareremmo mai, quindi resterebbe attivo e lascerebbe un'ombra sotto
     il prodotto. Azzerato (0,4,0, vince su style.css). */
  filter: none;
}
.products.v3 .product-card .card-photo img {
  width: 100%; height: 100%; object-fit: contain;
  /* Appoggiato in basso: senza bordo, il prodotto che tocca il margine
     inferiore si legge come immagine a vivo, non come ritaglio. */
  object-position: bottom center;
}
.products.v3 .product-card:hover .card-photo { transform: scale(1.02); }

/* ----- Tessera a tutta riga: contenuto in orizzontale -----
   Larga il doppio e alta uguale, la composizione impilata lascerebbe il
   prodotto solo al centro con due vuoti ai lati. Testo a bandiera a sinistra,
   prodotto in una colonna sua a destra. */
@media (min-width: 901px) {
  .products.v3 .product-card:last-child:nth-child(odd) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 24%, 340px);
    grid-template-rows: repeat(4, auto);
    align-content: center; justify-items: start; text-align: left;
    column-gap: clamp(40px, 5vw, 80px);
    padding: 40px clamp(40px, 5vw, 72px) 0;
  }
  .products.v3 .product-card:last-child:nth-child(odd) > .eyebrow      { grid-area: 1 / 1; }
  .products.v3 .product-card:last-child:nth-child(odd) > h3            { grid-area: 2 / 1; }
  .products.v3 .product-card:last-child:nth-child(odd) > p             { grid-area: 3 / 1; }
  .products.v3 .product-card:last-child:nth-child(odd) > .card-actions { grid-area: 4 / 1; justify-content: flex-start; }
  /* Le quattro righe della griglia si dimensionano sul testo, quindi da sole
     lascerebbero alla foto solo l'altezza del testo (~210px in una tessera da
     576). Il min-height la fa crescere e trascina con sé le righe, senza mai
     superare l'altezza data della tessera. */
  .products.v3 .product-card:last-child:nth-child(odd) > .card-photo {
    grid-area: 1 / 2 / 5 / 3; align-self: stretch; justify-self: stretch; margin: 0;
    min-height: clamp(240px, 26vw, 400px);
  }
  .products.v3 .product-card:last-child:nth-child(odd) > .card-art {
    grid-area: 1 / 2 / 5 / 3; align-self: center; justify-self: center; margin: 0;
  }
}

/* L'alone d'accento serviva a illuminare il prodotto su fondo scuro, che non
   esiste più: su tessera chiara sarebbe una foschia colorata negli angoli,
   cioè la decorazione che questo trattamento toglie. Il colore del prodotto
   sopravvive nel pallino dell'occhiello e nelle azioni. */
.products.v3 .product-card .card-glow { display: none; }

/* Segnaposto a icona per un prodotto senza foto: misura sua, centrato, non
   stirato come farebbe la regola della foto. */
.products.v3 .product-card .card-art {
  position: static; width: 120px; height: 120px; margin: 18px auto 32px;
}
/* style.css ruota e ingrandisce `.card-art` all'hover (0,3,0), in contrasto
   col "niente sollevamento". Azzerato qui (0,5,0). */
.products.v3 .product-card:hover .card-art { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .products.v3 .product-card:hover .card-photo { transform: none; }
  /* La deriva del colore è lentissima ma resta movimento: chi ne ha chiesto
     meno tiene la progressione fra le tessere e perde solo il cambio nel
     tempo. */
  .products-v3-section { animation: none; }
}

/* Una colonna sola quando la finestra si stringe. L'altezza resta comunque
   data, non dettata dal contenuto: è il punto di tutto il trattamento. */
@media (max-width: 900px) {
  .products.v3 { grid-template-columns: 1fr; }
  .products.v3 .product-card,
  .products.v3 .product-card:last-child:nth-child(odd) { grid-column: auto; height: clamp(380px, 78vw, 520px); }
  .products.v3 .product-card { padding: 32px 20px 0; }
}