/* Home — override layout contatori per una riga di KPI (5 voci).
   Da grid a 3 col -> flex centrato: 5 in fila su desktop, wrap centrato
   su schermi stretti, impilati su mobile. minmax-safe (no overflow orizz.). */
.contatori { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.5rem 1.25rem; max-width: 72rem; margin: 0 auto; padding: 0; list-style: none; }
.contatore { flex: 0 1 12.5rem; text-align: center; }

/* Mobile: contatori a 2 colonne + card compatte, per ridurre l'altezza totale.
   5 voci -> 2+2+1 (l'ultima resta a mezza larghezza, centrata). */
@media (max-width: 48rem) {
  .contatori { gap: 0.7rem; }
  .contatore { flex: 0 1 calc(50% - 0.4rem); padding: 1.1rem 0.6rem; border-radius: 1rem; }
  .contatore-valore { font-size: 2.1rem; }
  .contatore-label { font-size: 0.8125rem; margin-top: 0.3rem; line-height: 1.25; }
}

/* Hero home — foto team (soggetti a destra) come sfondo, allineata a destra;
   fascia chiara a sinistra (brand-bg) che sfuma sulla foto per "allungare" la
   parete e tenere leggibile il testo scuro. Il testo e centrato verticalmente. */
.hero-home {
  position: relative;
  min-height: clamp(34rem, 66vh, 46rem);
  display: flex;
  align-items: center;
  background-color: var(--brand-bg);
  overflow: hidden;
}
/* Foto confinata ai 2/3 destri; 1/3 sinistro = fascia brand-bg per il testo.
   Il bordo sinistro della foto e sfumato (mask) per raccordarsi alla fascia. */
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0 0 0 33.333%;
  background: url("../img/hero-home.webp") right 55% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  z-index: 0;
  pointer-events: none;
}
.hero-home > * { position: relative; z-index: 1; }
.hero-home .hero-copy { z-index: 30; }

/* Mobile: 1/3-2/3 non ha senso su colonna stretta. Testo in alto su fascia
   chiara, foto (gruppo) come banda inferiore sfumata dall'alto. */
@media (max-width: 48rem) {
  /* Volti in alto (parete vuota tagliata, foto nitida), testo in basso su
     sfumatura verso bianco. */
  .hero-home { align-items: flex-end; min-height: 46rem; }
  .hero-home::before {
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(246, 248, 246, 0) 0%,
        rgba(246, 248, 246, 0) 26%,
        rgba(246, 248, 246, .6) 40%,
        rgba(246, 248, 246, .97) 52%,
        var(--brand-bg) 60%),
      url("../img/hero-mobile.webp");
    background-repeat: no-repeat, no-repeat;
    background-position: center top;
    background-size: auto, 100% auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Home — giunzione hero → sezione "Terreno vivo": uno stacco voluto invece del
   vuoto piatto. Bordo sottile + fascia superiore appena più tinta, così le curve
   si staccano e la transizione sembra progettata, non casuale. */
.section-intro.section--terrain {
  border-top: .0625rem solid rgba(34, 45, 89, .10);
  background: linear-gradient(180deg, #e7eee8 0%, #f1f5f1 32%, #eef3ef 100%);
}
@media (max-width: 48rem) {
  /* meno spazio morto: la sezione curve sale più vicino all'hero */
  .section-intro.section--terrain {
    min-height: clamp(17rem, 40vh, 23rem);
    padding-top: 2.5rem;
    padding-bottom: 2.75rem;
  }
}

/* Home — scroll-cue canonica (design-quality.md): tripla freccetta con onda di
   opacità, niente cerchio/badge. Sovrascrive la vecchia versione "chevron nel
   cerchio" di output.css; su mobile dà respiro sotto le CTA così non è schiacciata. */
.hero-home .hero-scrollcue {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 40;
  display: flex; flex-direction: column; align-items: center;
  width: auto; height: auto; padding: .5rem .75rem;
  background: none; border: 0; border-radius: 0;
  color: var(--brand-primary); text-decoration: none;
  animation: none;
  transition: color .2s ease;
}
.hero-home .hero-scrollcue .cue-chevron { width: 1.8rem; height: .8rem; display: block; }
.hero-home .hero-scrollcue .cue-chevron + .cue-chevron { margin-top: -.3rem; }
.hero-home .hero-scrollcue .cue-chevron:nth-child(1) { opacity: .5; }
.hero-home .hero-scrollcue .cue-chevron:nth-child(2) { opacity: .3; }
.hero-home .hero-scrollcue .cue-chevron:nth-child(3) { opacity: .16; }
.hero-home .hero-scrollcue:focus-visible { outline: .125rem solid var(--brand-accent); outline-offset: .125rem; }
@media (hover: hover) {
  .hero-home .hero-scrollcue:hover { color: var(--brand-accent-strong); }
}
@media (max-width: 48rem) {
  /* respiro sotto le CTA così la freccetta non è incollata ai pulsanti */
  .hero-home .hero-copy { padding-bottom: clamp(4.5rem, 13vh, 6.5rem); }
  .hero-home .hero-scrollcue { bottom: 1.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-home .hero-scrollcue .cue-chevron { animation: cue-wave 1.6s ease infinite; }
  .hero-home .hero-scrollcue .cue-chevron:nth-child(1) { animation-delay: 0s; }
  .hero-home .hero-scrollcue .cue-chevron:nth-child(2) { animation-delay: .16s; }
  .hero-home .hero-scrollcue .cue-chevron:nth-child(3) { animation-delay: .32s; }
  @keyframes cue-wave { 0%, 100% { opacity: .1; } 50% { opacity: .55; } }
}

/* Home — texture natura di sfondo sulla sezione Certificazioni (stesso SVG e resa
   delle pagine interne, che lo applicano via pages.css su tutto il main).
   Opacità gestita per-glifo dentro l'SVG (7%–15%). */
.section-certificazioni { position: relative; max-width: none; }
.section-certificazioni::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/nature-texture.svg") repeat;
  background-size: 28.8rem 28.8rem;
}
.section-certificazioni > * { position: relative; z-index: 1; max-width: 72rem; margin-inline: auto; }

/* Home — divisorio elegante identico alle pagine interne (pages.css): sottile
   linea verde sfumata in cima alla fascia colorata contatori, dove cambia lo
   sfondo dopo la girandola. */
.section-contatori { position: relative; }
.section-contatori::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: .0625rem;
  background: linear-gradient(90deg,
    transparent 4%,
    color-mix(in srgb, var(--brand-accent) 55%, transparent) 50%,
    transparent 96%);
}

/* Home — girandola: la decelerazione dolce all'hover/focus è gestita da
   js/girandola.js (ramp del playbackRate). Disattiviamo la pausa CSS istantanea
   così il JS può far scivolare la ruota fino a fermarsi invece di bloccarla di colpo. */
@media (prefers-reduced-motion: no-preference) {
  .girandola:hover .girandola-card,
  .girandola:focus-within .girandola-card { animation-play-state: running; }
}

/* Home desktop (≥64rem) — asimmetria voluta: la copy della hero va a sinistra
   (nella fascia chiara accanto alla foto), mentre titolo + descrizione della
   prima sezione "Terreno vivo" si spostano a destra. Zigzag di lettura. */
@media (min-width: 64rem) {
  /* metà spostamento: partiamo dal centro e trasliamo di 1/4 della larghezza
     eccedente (= metà della distanza che avrebbe il blocco pinnato al bordo). */
  .hero-home .hero-copy {
    margin-inline: auto;
    transform: translateX(calc((60rem - 100vw) / 4));
  }
  /* La prima sezione usa i MARGINI (non transform): il suo <h2> ha già
     l'animazione d'ingresso succol-reveal-up che occupa la proprietà transform,
     quindi un translateX verrebbe ignorato sul titolo (si spostava solo il
     sottotitolo). Coi margini, titolo e descrizione si spostano insieme. */
  .section-intro.section--terrain > :not(.terrain-bg) {
    margin-left: auto;
    margin-right: calc((100vw - 50rem) / 4);
  }
}


/* ---- Banner promo (home) — striscia sottile sopra l'header, chiudibile.
   Statico (scorre via con la pagina; l'header sotto resta sticky).
   Colori dai token brand con fallback navy/verde del brand-book. ---- */
.promo-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--brand-primary, #222D59);
  color: var(--brand-on-dark, #FFFFFF);
  padding: 0.55rem 3rem;
  text-align: center;
}
.promo-banner-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.promo-banner-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.promo-banner-link:hover { opacity: 0.85; }
.promo-banner-close {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.375rem;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.promo-banner-close:hover { opacity: 0.8; }
.promo-banner-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.25rem;
}
@media (max-width: 48rem) {
  .promo-banner { padding: 0.5rem 2.6rem 0.5rem 0.9rem; }
  .promo-banner-text { font-size: 0.875rem; }
}