/* ================================================================
   prodotti.css — Leonardo Edition
   Stili della pagina /prodotti: hero, griglia prodotti, card.
   Importa tokens.css e header.css (già linkati nell'HTML).
================================================================ */


/* ── SCROLL SMOOTH ──────────────────────────────────────────────
   Attivato SOLO sulla pagina prodotti (file incluso solo là).
   @media prefers-reduced-motion: mantiene il comportamento
   nativo del browser (no smooth) per chi lo preferisce.
─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* ── LAYOUT PRINCIPALE ──────────────────────────────────────────
   .prodotti-page     : <main> — nessun padding diretto, gestisce
                        il fondo pagina.
   .prodotti-inner    : contenitore centrato, gutter laterali.
─────────────────────────────────────────────────────────────── */
.prodotti-page {
  background-color: #FEFEFE; /* leggermente off-white vs nav #FFFFFF — separa visivamente la griglia */
  padding-block-start: 0;
}

.prodotti-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-24);
}


/* ── HERO ───────────────────────────────────────────────────────
   Intestazione della pagina. Titolo grande in Instrument Serif corsivo,
   allineato a sinistra come il resto del catalogo.
─────────────────────────────────────────────────────────────── */
.prodotti-hero {
  padding-block: var(--space-64) var(--space-48);
  border-bottom: 0;                  /* il separatore visivo è sulla section */
}

.prodotti-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--color-ink);

  /* Fluid: 36px (mobile) → 56px (desktop) */
  font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);

  margin: 0;
}


/* ── SEZIONI CATEGORIE ──────────────────────────────────────────
   Ogni categoria (Divani, Divani Letto, Poltrone) è una <section>
   con id per l'anchor dal megamenu.
   scroll-margin-top : compensa header sticky + respiro visivo.
─────────────────────────────────────────────────────────────── */
.prodotti-section {
  padding-block: var(--space-64) var(--space-48);

  /* Offset anchor: header espanso + spazio respiro */
  scroll-margin-top: calc(var(--header-height-expanded) + var(--space-32));
}

/* Compensazione per l'header compatto (classe aggiunta da JS) */
.site-header.is-compact ~ main .prodotti-section {
  scroll-margin-top: calc(var(--header-height-compact) + var(--space-32));
}


/* ── INTESTAZIONE SEZIONE ───────────────────────────────────────
   H2 nome categoria + contatore prodotti.
   Hairline in fondo tramite pseudo-element scaleY per true subpixel.
─────────────────────────────────────────────────────────────── */
.prodotti-section__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  padding-block-end: var(--space-24);
  margin-block-end: var(--space-40);
  position: relative;
}

/* Hairline — true subpixel su Retina */
.prodotti-section__header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-hairline);
  transform: scaleY(0.5);
  transform-origin: bottom;
}

.prodotti-section__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-36);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-ink);
  margin: 0;
}

.prodotti-section__count {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  white-space: nowrap;
  padding-block-start: 0.2em;   /* allineamento ottico baseline */
}


/* ── GRIGLIA PRODOTTI ───────────────────────────────────────────
   Mobile-first: 2 colonne.
   700px →  3 colonne.
   1000px → 4 colonne.
─────────────────────────────────────────────────────────────── */
.prodotti-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24) var(--space-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .prodotti-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32) var(--space-24);
  }
}

@media (min-width: 1000px) {
  .prodotti-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-40) var(--space-24);
  }
}


/* ── CARD PRODOTTO ──────────────────────────────────────────────
   .product-card__link    : wrapper <a> — imposta il contesto
                            hover per il crossfade.
   .product-card__media   : box 4:5, stacking context per le immagini.
   .product-card__picture--cutout : <picture> in absolute, tutta
                            l'area media. Visibile solo su desktop.
   .product-card__img--cutout     : fill dell'area, object-fit cover.
   .product-card__img--ambient    : sopra la cutout in absolute,
                            opacity 1 su mobile (unica immagine),
                            opacity 0 su desktop (crossfade su hover).
   .product-card__name    : nome in Instrument Serif, sotto la media.
─────────────────────────────────────────────────────────────── */
.product-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Toglie il tap highlight su touch device */
.product-card__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: #ECECEA;   /* fallback mentre le immagini caricano */
}

/* ── <picture> cutout — posizionata sotto l'ambient ── */
.product-card__picture--cutout {
  position: absolute;
  inset: 0;
  display: block;             /* <picture> è inline di default */
}

.product-card__img--cutout {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Ambient — strato superiore ── */
.product-card__img--ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  /* Mobile (<700px): ambient è l'UNICA immagine visibile.
     Nessuna transizione — mostrala subito, stabile. */
  opacity: 1;
}

/* ── Desktop (≥700px): ambient nascosta, crossfade su hover ── */
@media (min-width: 700px) {
  .product-card__img--ambient {
    opacity: 0;
    transition: opacity 400ms ease-out;
  }
}

/* Attiva crossfade solo se il dispositivo supporta hover
   (esclude touch screen che simulano hover al primo tap) */
@media (min-width: 700px) and (hover: hover) {
  .product-card__link:hover .product-card__img--ambient {
    opacity: 1;
  }
}

/* ── Ambient mancante (.no-ambient aggiunto via onerror) ─────────
   Desktop: disabilita il crossfade — la card resta cutout statica.
   Mobile:  non applicato (l'onerror fa già il fallback su Picsum).
─────────────────────────────────────────────────────────────── */
@media (min-width: 700px) and (hover: hover) {
  .product-card.no-ambient .product-card__link:hover .product-card__img--ambient {
    opacity: 0;
  }
}


/* ── Nome prodotto ── */
.product-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-20);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: var(--space-12) 0 0 0;
  line-height: 1.2;

  /* Transizione colore su hover per feedback sottile */
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .product-card__link:hover .product-card__name {
    color: var(--color-accent);
  }
}


/* ── RESPONSIVE — AGGIUSTAMENTI TIPOGRAFICI ─────────────────── */
@media (min-width: 700px) {
  .prodotti-hero {
    padding-block: var(--space-64) var(--space-48);
  }
}

@media (min-width: 1000px) {
  .prodotti-hero {
    padding-block-end: var(--space-64);
  }

  .prodotti-inner {
    padding-inline: var(--space-40);
  }

  .prodotti-section__title {
    font-size: var(--text-40);
  }
}