/* ============================================================
   Monarch Hoard - LE SEZIONI DELLA HOME
   DOVE VA:  static/css/home-sezioni.css   (sostituisce il file)
   Lo carica solo templates/public/home.html.
   ------------------------------------------------------------
   v2: niente piu' 4 riquadri. Ogni sezione e' larga quanto la
   pagina, con testo e immagine affiancati:
       Introduzione  immagine a destra    (blu)
       Vetrina       immagine a sinistra  (oro)
       App           immagine a destra    (azzurro)
       Contatti      immagine a sinistra  (viola)
   Su telefono l'immagine va sempre sopra e il testo sotto.

   Le immagini (vetrina-trio, app-schermo, canali) e i pezzi
   .hs__accento / .hs__chip / .hs__punti sono quelli del
   carosello: lo stile sta in hero-slider.css, qui si sceglie
   solo il colore con --hs-colore / --hs-rgb.

   COMPARSA: home-sezioni.js aggiunge .hsez--anima a ogni
   sezione e poi .is-visibile quando entra nello schermo.
   Senza JavaScript le sezioni si vedono comunque, ferme.
   ============================================================ */

/* Carosello con una sola novita': niente barre, meno spazio sotto */
.hs--singola .hs__slide { padding-bottom: 70px; }

/* ---------- La sezione ---------- */
.hsez {
  --hs-colore: #7fb4ff;
  --hs-rgb: 46, 125, 255;
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(620px 340px at 78% 50%, rgba(var(--hs-rgb), 0.13), transparent 70%);
}
.hsez--rovescia {
  background:
    radial-gradient(620px 340px at 22% 50%, rgba(var(--hs-rgb), 0.13), transparent 70%);
}
.hsez--vetrina  { --hs-colore: #ffd166; --hs-rgb: 255, 209, 102; }
.hsez--app      { --hs-colore: #7fd8ff; --hs-rgb: 90, 200, 255; }
.hsez--contatti { --hs-colore: #c58bff; --hs-rgb: 168, 92, 255; }

/* Introduzione in cima alla pagina (quando non ci sono novita') */
.hsez--in-cima {
  padding-top: 100px;
  background:
    radial-gradient(760px 360px at 18% 0%, rgba(var(--accent-rgb), 0.20), transparent 65%),
    radial-gradient(620px 320px at 88% 12%, rgba(120, 200, 255, 0.10), transparent 60%),
    var(--bg);
}

.hsez__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
}
.hsez--rovescia .hsez__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.hsez--rovescia .hsez__visual { order: -1; }

/* ---------- Il testo ---------- */
.hsez__titolo {
  margin: .5rem 0 1rem;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.08;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
.hsez .eyebrow {
  color: var(--hs-colore);
  text-shadow: 0 0 12px rgba(var(--hs-rgb), 0.5);
}
.hsez__sotto {
  max-width: 580px;
  margin: 0 0 1.8rem;
  padding-left: 14px;
  border-left: 2px solid rgba(var(--hs-rgb), 0.7);
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.65;
}
.hsez__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1rem;
}

/* ---------- L'immagine ---------- */
.hsez__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.hsez__logo {
  max-height: 240px;
  width: auto;
  filter: drop-shadow(0 0 40px rgba(var(--hs-rgb), 0.6));
}

/* ---------- Ultimi articoli aggiunti ---------- */
.hsez-ultimi { border-bottom: 1px solid var(--border); }

/* ============================================================
   COMPARSA ALLO SCORRIMENTO
   ============================================================ */
.hsez--anima .hsez__testo > * {
  opacity: 0;
  transform: translateY(26px);
}
.hsez--anima .hsez__visual {
  opacity: 0;
  transform: translateX(60px);
}
.hsez--anima.hsez--rovescia .hsez__visual { transform: translateX(-60px); }

.hsez--anima.is-visibile .hsez__testo > *,
.hsez--anima.is-visibile .hsez__visual {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.hsez--anima.is-visibile .hsez__testo > *:nth-child(2) { transition-delay: .08s; }
.hsez--anima.is-visibile .hsez__testo > *:nth-child(3) { transition-delay: .16s; }
.hsez--anima.is-visibile .hsez__testo > *:nth-child(4) { transition-delay: .24s; }
.hsez--anima.is-visibile .hsez__visual { transition-delay: .15s; }

/* Ultimi articoli: sale tutto il blocco */
.hsez-ultimi.hsez--anima > .container {
  opacity: 0;
  transform: translateY(30px);
}
.hsez-ultimi.hsez--anima.is-visibile > .container {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

/* Le entrate dei pezzi del carosello, qui alla comparsa */
.hsez.is-visibile .vetrina-trio__pezzo {
  animation: trio-entra .8s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.35s + var(--i) * .1s);
}
.hsez.is-visibile .canale { animation: canale-entra .6s cubic-bezier(.2, .8, .2, 1) both; }
.hsez.is-visibile .canale:nth-child(1) { animation-delay: .30s; }
.hsez.is-visibile .canale:nth-child(2) { animation-delay: .38s; }
.hsez.is-visibile .canale:nth-child(3) { animation-delay: .46s; }
.hsez.is-visibile .canale:nth-child(4) { animation-delay: .54s; }
.hsez.is-visibile .canale:nth-child(5) { animation-delay: .62s; }
.hsez.is-visibile .canale:nth-child(6) { animation-delay: .70s; }

/* ============================================================
   TELEFONO E TABLET: immagine sopra, testo sotto
   ============================================================ */
@media (max-width: 820px) {
  .hsez { padding: 56px 0; }
  .hsez--in-cima { padding-top: 48px; }
  .hsez__inner,
  .hsez--rovescia .hsez__inner { grid-template-columns: 1fr; gap: 28px; }
  .hsez__visual,
  .hsez--rovescia .hsez__visual { order: -1; }
  .hsez--contatti .hsez__visual { order: 0; }   /* i canali stanno meglio sotto il testo */
  .hsez__logo { max-height: 160px; }

  .hsez--anima .hsez__visual,
  .hsez--anima.hsez--rovescia .hsez__visual { transform: translateY(30px); }
}

/* ---------- Chi ha chiesto meno animazioni ---------- */
@media (prefers-reduced-motion: reduce) {
  .hsez--anima .hsez__testo > *,
  .hsez--anima .hsez__visual,
  .hsez-ultimi.hsez--anima > .container {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hsez.is-visibile .vetrina-trio__pezzo,
  .hsez.is-visibile .canale { animation: none !important; }
}