/* ==================================================================
   SLIDER DELLA HERO (home)
   Il markup sta nel contenuto della pagina Home: ogni slide contiene una
   .cover gia' esistente. Qui solo impilamento, dissolvenza e comandi.
   Senza JavaScript resta visibile la prima slide e i comandi non compaiono.
   ================================================================== */

.slider-hero {
  position: relative;
}

.slider-hero__viewport {
  display: grid;
}

.slider-hero__slide {
  grid-area: 1 / 1;
  min-width: 0;
}

.slider-hero:not(.is-pronto) .slider-hero__slide + .slider-hero__slide {
  display: none;
}

.slider-hero.is-pronto .slider-hero__slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-media) var(--easing), visibility 0s linear var(--t-media);
}

.slider-hero.is-pronto .slider-hero__slide.is-attiva {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-media) var(--easing), visibility 0s;
}

/* Comandi: frecce, punti e pausa, in basso a destra sopra la foto. */
.slider-hero__comandi {
  display: none;
}

.slider-hero.is-pronto .slider-hero__comandi {
  position: absolute;
  z-index: 5;
  right: var(--gutter);
  bottom: var(--sp-s);
  display: flex;
  align-items: center;
  gap: 6px;
}

.slider-hero__freccia,
.slider-hero__pausa {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--crema-su-scuro);
  background: rgba(35, 18, 22, 0.45);
  border: 1px solid rgba(251, 246, 236, 0.45);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--t-breve) var(--easing), border-color var(--t-breve) var(--easing), color var(--t-breve) var(--easing);
}

.slider-hero__freccia:hover,
.slider-hero__pausa:hover {
  color: var(--nero-vinaccia);
  background: var(--oro-chiaro);
  border-color: var(--oro-chiaro);
}

.slider-hero__freccia svg,
.slider-hero__pausa svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-hero__pausa .icona-avvia { display: none; fill: currentColor; stroke: none; }
.slider-hero__pausa[aria-pressed="true"] .icona-pausa { display: none; }
.slider-hero__pausa[aria-pressed="true"] .icona-avvia { display: block; }

.slider-hero__punti {
  display: flex;
  align-items: center;
}

.slider-hero__punto {
  display: grid;
  place-items: center;
  width: 24px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.slider-hero__punto::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--crema-su-scuro);
  border-radius: 50%;
  transition: background-color var(--t-breve) var(--easing), border-color var(--t-breve) var(--easing);
}

.slider-hero__punto[aria-current="true"]::before {
  background: var(--oro-chiaro);
  border-color: var(--oro-chiaro);
}

.slider-hero__freccia:focus-visible,
.slider-hero__pausa:focus-visible,
.slider-hero__punto:focus-visible {
  outline: 2px solid var(--oro-chiaro);
  outline-offset: 3px;
}

/* Sotto i 980px i comandi starebbero sopra il bottone: si lascia loro una fascia. */
.slider-hero.is-pronto .cover__contenuto {
  padding-bottom: calc(var(--sp-l) + 56px);
}

@media (min-width: 981px) {
  .slider-hero.is-pronto .cover__contenuto {
    padding-bottom: var(--sp-l);
  }
}


/* ------------------------------------------------------------------
   Slide della collezione di Natale
   La foto ha i prodotti a destra (dal 40% in poi) e lo spazio vuoto a sinistra
   per il testo: si centra in verticale, cosi' bottiglie e confezioni non
   vengono tagliate, e il testo resta nella parte libera.
   ------------------------------------------------------------------ */

.cover--natale {
  min-height: clamp(560px, 62vh, 780px);
}

.cover--natale .cover__media img {
  object-position: 50% 50%;
}

/* Velo piu' leggero: serve solo a sinistra, dove sta il testo; i prodotti restano luminosi. */
.cover--natale .cover__media::after {
  background:
    linear-gradient(to right, rgba(35, 18, 22, 0.66) 0%, rgba(35, 18, 22, 0.42) 32%, rgba(35, 18, 22, 0) 58%),
    linear-gradient(to top, rgba(35, 18, 22, 0.40) 0%, rgba(35, 18, 22, 0) 42%);
}

@media (min-width: 981px) {
  /* La foto occupa l'86% a destra e sfuma a sinistra nel suo stesso colore:
     cosi' il testo, allineato al contenitore, sta tutto nello spazio libero e
     nessun prodotto viene tagliato ne' coperto. */
  .cover--natale {
    align-items: center;
    min-height: clamp(560px, 48vw, 760px);
  }

  .cover--natale .cover__media {
    background: linear-gradient(to bottom, #F4E5D7 0%, #FDEEDD 30%, #F8E8D4 55%, #D7B78B 80%, #755728 100%);
  }

  .cover--natale .cover__media img {
    display: block;
    width: 86%;
    margin-left: auto;
    object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%);
    mask-image: linear-gradient(to right, transparent 0, #000 18%);
  }

  .cover--natale .cover__contenuto > * {
    max-width: 28vw;
  }

  .cover--natale .hero__titolo {
    font-size: clamp(38px, 3.1vw, 60px);
  }
}

/* Sotto i 980px la foto si vede intera in alto (16:9, nessun ritaglio) e il testo
   sta sotto, su fondo scuro: sul telefono il testo sopra la foto copriva i prodotti. */
@media (max-width: 980px) {
  .cover--natale {
    display: block;
    min-height: 0;
    background: var(--nero-vinaccia);
  }

  .cover--natale .cover__media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
  }

  .cover--natale .cover__media img {
    object-position: 50% 50%;
  }

  .cover--natale .cover__media::after {
    background: linear-gradient(to bottom, rgba(35, 18, 22, 0) 62%, var(--nero-vinaccia) 100%);
  }

  .cover--natale .cover__contenuto {
    padding-top: var(--sp-xs);
  }
}