/* home.css — stili dedicati alla homepage. Importato condizionalmente quando page-type=home. */

/* ---- HERO — homepage (1920×836 a desktop full)
   - Immagine background: 12 col edge-to-edge
   - 4 zone testuali: posizionate via grid-column della 12-col PRINCIPALE
     (badge 3/6, headline 6/11, tagline 3/8, CTA 9/11)
   ---- */
.hero--home {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: max(560px, 43.54vw);   /* 836px @ 1920px */
  overflow: hidden;
  color: var(--c-white);
  font-family: var(--font-sans);
}

/* ---- SLIDER: gli slide si impilano e fanno crossfade ----
   .hero--home dà già height/overflow/isolation. Il contenitore .hero__slider
   riempie la section; ogni .hero__slide è absolute inset:0 con opacity 0→1.
   Le zone testuali interne (.hero__badge/__headline/__tagline/__cta-box)
   restano invariate: vivono dentro lo .hero__layer di OGNI slide. */
.hero__slider {
  position: absolute; inset: 0;
  /* Crossfade hero DEDICATO: NON riusa --t-slow (360ms, condiviso da altre
     micro-transizioni) → dissolvenza più lunga e con easing ease-in-out
     simmetrico, per un passaggio fluido tra le slide senza alcuno
     spostamento. Le due custom-prop sono ereditate dalle .hero__slide.
     NB: la durata della visibility (sotto) DEVE restare = --hero-fade-t,
     o la slide uscente sparisce prima/dopo la fine della dissolvenza. */
  --hero-fade-t: 800ms;
  --hero-fade-e: cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hero-fade-t) var(--hero-fade-e),
              visibility 0s linear var(--hero-fade-t);
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--hero-fade-t) var(--hero-fade-e);
}
/* Un solo slide (o JS non eseguito): mostra sempre il primo (no-JS / fallback). */
.hero--home:not(.hero--slider) .hero__slide,
.hero__slider > .hero__slide:only-of-type { opacity: 1; visibility: visible; }

/* H1 canonico per la SEO: presente nel DOM, invisibile (i titoli visibili
   degli slide sono <p>). Pattern "visually hidden" accessibile. */
.hero__h1-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__overlay {
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.45) 100%);
}

.hero__layer {
  position: absolute; inset: 0;
  z-index: 1;
}
.hero__grid {
  height: 100%;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
}

/* Layer dedicato del badge logo GLOBALE (un solo elemento, sopra TUTTE le slide).
   z-index 2 = sopra il layer testi (z-index 1) e gli slide; pointer-events:none
   così l'area vuota non intercetta i click del CTA sottostante. */
.hero__layer--badge { z-index: 2; pointer-events: none; }

.hero__badge {
  grid-column: 3 / 6;
  grid-row: 2;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 260px;   /* il logo animato (video/embed) non deborda dalla cella */
}
.hero__badge-mark { width: 71px; height: 62px; flex-shrink: 0; }
/* Logo animato iniettato dal binder (data-pf-embed): Vimeo background / <video>
   / iframe → riempie la larghezza del badge mantenendo le proporzioni. */
.hero__badge > video,
.hero__badge > iframe { display: block; width: 100%; height: auto; border: 0; }
.hero__badge .embed-responsive { width: 100%; }
.hero__badge-text {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: var(--c-white);
}

.hero__headline {
  grid-column: 6 / 11;             /* 5 col: H1+sottotitolo restano dentro le 8 col centrali (right edge = linea 11) */
  grid-row: 2;
  align-self: center;
  position: relative;
}
.hero__deco {
  position: absolute;
  left: 0; top: -40px;
  width: 16px; height: 16px;
  border-top: 4px solid var(--c-white);
  border-left: 4px solid var(--c-white);
}
.hero__title {
  font-size: clamp(40px, 4.1666vw, 80px);
  font-weight: 700;
  line-height: 1.2125;
  color: var(--c-white);
  margin: 0;
  /* nowrap rimosso: la cella ora è 5 col (6/11) e il titolo può wrappare in 2 righe restando dentro le 8 col centrali */
}
.hero__subtitle {
  font-size: clamp(24px, 2.6vw, 50px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-white);
  margin-top: 16px;
}

/* Tagline = box con stroke bianco, flush con bordo inferiore hero (come CTA) */
.hero__tagline {
  grid-column: 3 / 8;
  grid-row: 3;
  align-self: end;
  margin: 0; padding: 24px 38px;
  border: 1px solid var(--c-white);
  border-bottom: 0;               /* flush con bordo inferiore immagine hero */
  display: flex;
  align-items: center;
  min-height: 120px;
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-white);
  white-space: nowrap;            /* "Gli esperti nei servizi di pulizie" su una sola riga */
}

.hero__cta-box {
  grid-column: 8 / 11;
  grid-row: 3;
  align-self: end;
  margin: 0;                                       /* flush con bordo inferiore immagine hero */
  margin-left: calc(-1 * var(--grid-gutter));      /* annulla il gap della grid-12: il CTA si "attacca" alla tagline */
  border: 1px solid var(--c-white);
  border-bottom: 0;
  border-left: 0;                                  /* adiacente alla tagline: niente doppio bordo verticale */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px 38px;
  color: var(--c-white);
  font-size: 17px;        /* uniforme per tutti i pulsanti del sito */
  font-weight: 600;
  line-height: 1.2;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.hero__cta-box:hover { background: var(--c-white); color: var(--c-green-dark); }
.hero__cta-box span { display: inline-flex; align-items: center; gap: 12px; }
.hero__cta-box span::after { content: "→"; font-size: 1em; }

/* Hero "mobile": stack + niente badge. Soglia allineata al burger dell'header
   (header.css @media max-width:1400px) così "header mobile" e "hero mobile"
   scattano INSIEME → niente banda ibrida (burger + hero desktop col badge =
   doppio logo). */
@media (max-width: 1400px) {
  .hero--home {
    height: auto;
    min-height: 560px;
    padding: 0 0 60px;            /* il padding-top non posiziona il testo (le slide
                                      sono absolute e lo ignorano): la spaziatura per
                                      scavalcare l'header è sul .hero__layer, sotto. */
  }
  /* CLEARANCE HEADER: le slide sono position:absolute; inset:0 → coprono tutto il box
     hero (header compreso). Il testo vive in .hero__layer DENTRO la slide → senza
     questo padding-top partirebbe da y=0, finendo sotto al logo dell'header overlay.
     100px scavalca l'header (81px desktop / 72px ≤1024) con un margine d'aria. */
  .hero__layer { position: relative; min-height: 100%; padding: 100px 24px 0; }
  .hero__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
    grid-template-rows: none;
  }
  .hero__badge, .hero__headline, .hero__tagline, .hero__cta-box {
    grid-column: auto; grid-row: auto;
    align-self: stretch;
    padding-bottom: 0; margin-bottom: 0;
    margin-left: 0;               /* nello stack mobile non serve il negative margin del desktop */
    white-space: normal;          /* su mobile/tablet permetti il wrap naturale */
  }
  .hero__title { white-space: normal; }
  .hero__deco { display: none; }
  /* CTA su mobile/tablet: pulsante di dimensione NATURALE, non a tutta larghezza.
     (Ereditava align-self:stretch dalla regola condivisa sopra → si stirava da bordo
     a bordo sembrando enorme.) */
  .hero__cta-box {
    align-self: flex-start;
    min-height: 0;
    padding: 16px 32px;
    border: 1px solid var(--c-white);     /* box completo: in desktop era flush col bordo hero, qui è un bottone autonomo */
    margin-top: 8px;
  }
  /* Tagline su mobile: niente stroke, allineata orizzontalmente all'H1 (no padding inline)
     e nessun padding verticale (lo spacing è gestito solo dal gap del grid). */
  .hero__tagline {
    border: 0;
    padding: 0;
  }
  /* Logo animato del badge NASCOSTO su mobile/tablet: l'header porta già il logo
     del sito in alto a sinistra → evitiamo il doppio logo ravvicinato. Resta
     visibile da ≥1271px (centro-sinistra dell'hero). */
  .hero__badge { display: none; }
}

/* Mobile: H1 hero più piccolo. La slide col titolo più lungo ("Casa Vacanze" →
   4 righe a 40px) faceva sforare il contenuto oltre i 560px dell'hero → la CTA in
   fondo veniva CLIPPATA (le slide sono position:absolute, l'hero non cresce con il
   testo, e overflow:hidden taglia l'eccesso). Riducendo il titolo il contenuto rientra. */
@media (max-width: 768px) {
  .hero__title { font-size: clamp(28px, 7vw, 40px); }
}

/* ==========================================================================
   SLIDER CONTROLS — frecce ‹ › + dots. Iniettati dall'helper generico initSlider
   del binder (contratto data-pf-slider, template 1.80.0), solo se 2+ slide →
   ASSENTI nell'HTML statico/no-JS (niente controlli morti). Classi pf-slider__*.
   Stanno sopra .hero__layer (z-index:1) → z-index:3.
   ========================================================================== */
.pf-slider__nav { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pf-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.22);
  color: var(--c-white);
  font-size: 30px; line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pf-slider__arrow:hover { background: var(--c-white); color: var(--c-green-dark); border-color: var(--c-white); }
.pf-slider__arrow:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }
.pf-slider__arrow--prev { left: 24px; }
.pf-slider__arrow--next { right: 24px; }

.pf-slider__dots {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3;
  display: flex; justify-content: center; gap: 12px;
}
.pf-slider__dot {
  width: 12px; height: 12px; padding: 0;
  border: 1px solid var(--c-white);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.pf-slider__dot:hover { background: rgba(255,255,255,0.5); }
.pf-slider__dot.is-active { background: var(--c-white); transform: scale(1.15); }
.pf-slider__dot:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }

/* Frecce slider nascoste quando l'hero è IMPILATO (≤1400px, come il burger header):
   in stack i testi sono full-width e le frecce (top:50%, bordi a 24px) ci finiscono
   SOPRA (il sottotitolo/tagline passa sotto la freccia) → si cambia slide coi dots. */
@media (max-width: 1400px) {
  .pf-slider__nav { display: none; }
}
@media (max-width: 768px) {
  .pf-slider__dots { bottom: 12px; }
}

/* Utenti con prefers-reduced-motion: niente crossfade animato. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* ==========================================================================
   BTN PILL (riusato anche da service-sub.css ma replicato qui per evitare
   dipendenza CSS cross-page).
   ========================================================================== */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 17px;        /* uniforme per tutti i pulsanti del sito */
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-pill::after { content: "→"; }
.btn-pill--dark { background: var(--c-green-dark); color: var(--c-white); }
.btn-pill--dark:hover { background: var(--c-green); }
/* Mobile: il pulsante resta SEMPRE su una riga (mai a capo). Le label lunghe
   ("Scopri i Nostri Servizi di Pulizia Speciali") a 17px andavano a 2 righe →
   font ridotto (clamp) + padding più stretto + nowrap. Verificato fino a 320px:
   anche la label più lunga sta su una riga dentro la larghezza del contenuto. */
@media (max-width: 768px) {
  .btn-pill {
    font-size: clamp(12px, 3.6vw, 17px);
    padding: 12px 16px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   SEZIONE COMUNE — deco corner top-left riutilizzata in tutte le sezioni
   ========================================================================== */
.services-intro__deco,
.feature-block__deco,
.feature-stack__deco,
.special-block__deco {
  position: absolute; top: -31px; left: 0;
  width: 16px; height: 16px;
  border-top: 4px solid var(--c-green);
  border-left: 4px solid var(--c-green);
  display: block;
}

/* ==========================================================================
   SEZIONE 1 — Una soluzione professionale (eyebrow + H2 + lead + 2 card)
   ========================================================================== */
.section-services-intro {
  padding-block: var(--section-py);
  background: var(--c-white);
}

.services-intro__head {
  position: relative;
  margin-bottom: 56px;
}
@media (min-width: 1025px) {
  .services-intro__head { margin-bottom: 96px; }
}
.services-intro__head-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;       /* paragrafo dx centrato verticalmente al titolo sx */
}
.section-h2 {
  font-size: clamp(28px, 2.6vw, 50px);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--c-title);
  margin: 0;
}
.services-intro__lead {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-body);
  margin: 0;
}

.services-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.service-pair-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 28px;                /* spazio per il deco corner */
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-fast);
}
.service-pair-card:hover { transform: translateY(-3px); }
.service-pair-card__deco {
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 4px solid var(--c-green);
  border-left: 4px solid var(--c-green);
  display: block;
}
.service-pair-card__title {
  font-size: var(--fs-h3);             /* H3 reale: 35px @1920 */
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-title);
  margin: 0;
}
.service-pair-card__text {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-body);
  margin: 0;
}
.service-pair-card__media {
  /* margin-top: auto spinge l'immagine al fondo del flex container →
     le immagini delle 2 card adiacenti si allineano in basso anche se i
     paragrafi sopra hanno lunghezze diverse. Il gap di 16px del flex
     parent garantisce comunque lo stacco minimo dal testo. */
  margin-top: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.service-pair-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   SEZIONE 2 + 4 — Sezione background soft (per studi prof e servizi speciali)
   ========================================================================== */
.section-feature { padding-block: var(--section-py); background: var(--c-white); }
.section-feature--soft { background: var(--c-bg-soft); }

/* ----- feature-block (Studi Professionali):
   2 col → sx: deco + titolo solo (~35%) | dx: immagine + testo + CTA pill (~65%) ----- */
.feature-block {
  display: grid;
  grid-template-columns: 7fr 13fr;        /* 35% / 65% rispetto al gap */
  gap: 56px;
  align-items: start;                     /* titolo allineato in alto con il top dell'immagine */
}
.feature-block__heading {
  position: relative;
  /* Riserva lo spazio del deco DENTRO il heading (era position: absolute
     top: -31px → protrudeva fuori dal top, disallineando il blocco rispetto
     al top dell'immagine adiacente). Con padding-top: 31 + deco top: 0
     l'intero row "deco + titolo" parte dallo stesso top dell'immagine. */
  padding-top: 31px;
}
.feature-block__deco {
  top: 0;
}
.feature-block__title {
  font-size: var(--fs-h3);           /* 35px @1920, è un H3 reale (non un H2) */
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-title);
  margin: 0;
}
.feature-block__right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.feature-block__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.feature-block__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.feature-block__p {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-body);
  margin: 0;
}

/* ==========================================================================
   SEZIONE 3 — Cura del verde (titolo+CTA sopra, immagine full-width sotto)
   ========================================================================== */
.section-feature--stacked { background: var(--c-white); }

.feature-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.feature-stack__head {
  position: relative;
}
.feature-stack__title {
  font-size: var(--fs-h3);          /* H3 del design system (35px @1920) */
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--c-title);
  margin: 0 0 20px;
}
.feature-stack__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.feature-stack__p {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-body);
  margin: 0;
}
.feature-stack__cta {
  justify-self: end;
}
.feature-stack__media {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.feature-stack__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   SEZIONE 4 — Servizi di Pulizia Speciali (titolo+CTA sx + lista 7 voci dx)
   ========================================================================== */
.special-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.special-block__text {
  /* niente deco corner — questa sezione non lo ha (richiesta utente) */
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.special-block__title {
  font-size: var(--fs-h3);          /* H3 del design system (35px @1920) */
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--c-title);
  margin: 0;
}
.special-block__p {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-body);
  margin: 0;
}

.special-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;                            /* spazio fra le 7 voci */
}
.special-list__item a {
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  align-items: center;
  gap: 14px;
  min-height: 83px;
  padding: 14px 20px;
  text-decoration: none;
  color: var(--c-title);
  background: var(--c-white);               /* fill bianco, senza stroke (richiesta utente) */
  border: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.special-list__item a:hover {
  background: var(--c-green-dark);
  color: var(--c-white);
}
.special-list__item a:hover .special-list__icon { filter: none; }
.special-list__icon {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block;
}
.special-list__label {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
}
.special-list__arrow {
  font-size: 18px;
  color: var(--c-green);
  text-align: right;
  transition: color var(--t-fast);
}
.special-list__item a:hover .special-list__arrow { color: var(--c-white); }

/* ==========================================================================
   SEZIONE 5 — Perché scegliere noi
   Layout corretto: immagine bg VISIBILE sopra/sotto + "fascia" orizzontale
   semi-trasparente dark-teal nel mezzo che racchiude (titolo sx | pillole dx).
   3ª pillola "Copertura territoriale capillare" è la highlighted (solid green-mid).
   ========================================================================== */
.section-why-dark {
  position: relative;
  isolation: isolate;
  padding-block: 0;                 /* fascia totale = 880px (= height dell'inner), niente padding-block */
  color: var(--c-white);
  overflow: hidden;
  /* Parallasse: il background-image arriva da inline style del template (asset path).
     background-attachment: fixed ancora l'immagine alla viewport → effetto parallasse allo scroll. */
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.section-why-dark__overlay {
  /* overlay molto leggero: l'immagine deve restare ben leggibile sopra/sotto la fascia */
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.18);
}
.section-why-dark__layer { /* niente position: relative — il containing block delle why-pills absolute è la section */ }

/* L'__inner è stato eliminato dal template: titolo e pillole vivono ora come figli
   diretti rispettivamente del grid-12 (head) e del layer (pillole absolute). */
/* linea orizzontale bianca full viewport width, allineata al bordo superiore del 1° box.
   pila pillole = 4*120px = 480px, ancorata a bottom: 0 → bordo top 1° box = 880 - 480 = 400px da top section. */
.section-why-dark::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 400px;
  height: 1px;
  background: var(--c-white);
  z-index: 0;
  pointer-events: none;
}

/* Titolo a sinistra: riempie 3 colonne della grid-12 del sito (col 3-5), height 880 = fascia.
   Padding-top 400 = altezza della metà superiore: il contenuto sta SOTTO la linea orizzontale. */
.section-why-dark__head {
  position: relative;
  grid-column: 3 / 6;
  height: 880px;
  padding: 400px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section-why-dark__title {
  font-size: var(--fs-h2);            /* H2 design-system: 50px @1920 / 57 @2560 */
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--c-white);
  margin: 0;
}

/* Pila pillole: estratta dal grid dell'inner, ancorata in basso a destra della section
   per arrivare al bordo destro del sito (--grid-margin: 0). 4 box attaccati 960x120.
   Grid 4-col su .why-pills + subgrid sui .why-pill: la colonna del label ha la stessa
   larghezza per tutte e 4 le righe → le frecce cadono allineate verticalmente. */
.why-pills {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 60px auto auto 1fr;   /* icona | label max-content | freccia | spazio residuo */
  column-gap: 16px;
  position: absolute;
  right: 0;
  bottom: 0;
  /* Larghezza FLUIDA (non più 960px fissi): il blocco è ancorato a destra mentre il
     titolo vive nelle col 3/6 a sinistra. Con i 960px fissi, sotto ~1350px di viewport
     le pillole scivolavano SOPRA il titolo (la fascia 1024–1270px restava col layout
     desktop). min(960px, 56vw) le fa restringere col viewport → resta sempre un margine
     dal titolo fino a quando, sotto 1270px, passano comunque a layout impilato. */
  width: min(960px, 56vw);
  z-index: 1;
}
.why-pill {
  display: grid;
  grid-template-columns: subgrid;          /* eredita le 4 colonne da .why-pills → frecce allineate */
  grid-column: 1 / -1;
  align-items: center;
  height: 120px;
  background: rgba(255, 255, 255, 0.20);   /* 1ª e 2ª pillola: fill bianco 20% */
  border: 1px solid var(--c-white);        /* stroke bianco su tutte */
  padding: 16px 22px;
  color: var(--c-white);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.why-pill + .why-pill { border-top: 0; }   /* attaccate fra loro: niente doppio bordo */
.why-pill a {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.why-pill:hover { background: rgba(255, 255, 255, 0.30); }

/* 2ª e 3ª pillola: niente freccia (Personale di fiducia, Copertura territoriale) */
.why-pill:nth-child(2) .why-pill__arrow,
.why-pill:nth-child(3) .why-pill__arrow { display: none; }

/* 3ª pillola "Copertura territoriale capillare" = fill #008F85 al 50%, stroke bianco */
.why-pill:nth-child(3) {
  background: rgba(0, 143, 133, 0.5);
  border-color: var(--c-white);
}
.why-pill:nth-child(3):hover {
  background: rgba(0, 143, 133, 0.75);
}

/* 4ª pillola "Prenota un servizio di pulizia" = fill #00423E pieno, stroke bianco */
.why-pill:last-child {
  background: #00423E;
  border-color: var(--c-white);
}
.why-pill:last-child:hover {
  background: var(--c-green);
}

.why-pill__icon {
  width: 60px; height: 60px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.why-pill__label {
  font-size: var(--fs-h4);          /* H4 design-system: 30px @1920 / 30 @2560 */
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-white);
  margin: 0;                        /* reset h4 default margin */
}
.why-pill__arrow {
  width: 20px;
  height: 17px;
  /* posizionata nella 3ª colonna del subgrid → allineata verticalmente con la freccia delle altre pillole */
}

/* ==========================================================================
   SEZIONE 6 — Recensioni (titolo + lead + avatar row + stars)
   ========================================================================== */
.section-reviews-row { padding-block: var(--section-py); background: var(--c-white); }
.reviews-row__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 56px;
}
.reviews-row__title {
  font-size: clamp(28px, 2.6vw, 50px);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--c-title);
  margin: 0;
}
.reviews-row__lead {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-body);
  margin: 0;
}

.avatar-row {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.avatar-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.avatar-row__circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-green) 0%, var(--c-green-dark) 100%);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.5px;
}
.avatar-row__name {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-title);
}

.reviews-row__stars {
  text-align: center;
  font-size: 28px;
  color: #f5b800;
  letter-spacing: 4px;
}

/* ==========================================================================
   SEZIONE 7 — Blog teaser (titolo + lead + 2 card immagine)
   ========================================================================== */
.section-blog-teaser { padding-block: var(--section-py); background: var(--c-white); }
.blog-teaser__head { margin-bottom: 40px; }
.blog-teaser__head-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 12px;
}
.blog-teaser__title {
  font-size: var(--fs-h3);            /* H3 reale: 35px @1920 */
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-title);
  margin: 0;
}
.blog-teaser__lead {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-body);
  margin: 0;
}
.blog-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.blog-teaser-grid--two { grid-template-columns: repeat(2, 1fr); }
.blog-teaser-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.blog-teaser-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.blog-teaser-card__media img,
.blog-teaser-card__media .img-placeholder {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.blog-teaser-card__body { padding: 0; }
.blog-teaser-card h3 {
  font-size: clamp(18px, 1.1vw, 21px);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-title);
  margin: 0 0 8px;
}
.blog-teaser-card p {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-body);
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE INTERMEDIO — fascia tablet/desktop ridotto (≤1270px)
   Coerente col breakpoint dell'hero. Risolve la "terra di nessuno" 1024–1640px
   in cui il layout desktop (geometrie in px fissi) girava senza adattarsi:
   (1) Sezione 5: pillole da absolute/larghe → impilate sotto il titolo (no overlap);
   (2) sezioni a 2 colonne: gap ridotti + rapporti ammorbiditi così scalano in modo
       graduale invece di restare rigide fino al collasso a 1 colonna (1024px).
   ========================================================================== */
@media (max-width: 1270px) {
  /* --- Sezione 5: il titolo torna in flusso e le pillole si impilano sotto ---
     (era gestito a 1024px, ma a 1270px le pillole absolute 960px coprivano il titolo). */
  .section-why-dark__head {
    grid-column: 1 / -1;        /* full width: con `auto` finiva in 1 sola traccia (~133px)
                                   → il titolo si spezzava parola-per-parola ("viene fuori"). */
    height: auto;
    padding-top: 0;
    display: block;
  }
  .section-why-dark::after { display: none; }
  .why-pills {
    position: static;
    width: auto;
    max-width: 600px;       /* impilate NON a tutta larghezza: blocco contenuto allineato
                               a sinistra sotto il titolo (non coprono l'intera fascia). */
    gap: 10px;
    margin-top: 32px;       /* respiro tra titolo "Perché scegliere noi?" e cards */
  }
  .why-pill { height: auto; }
  .why-pill + .why-pill { border-top: 1px solid var(--c-white); }

  /* --- Sezioni a 2 colonne: gap più stretto + rapporti verso 1:1 --- */
  .services-intro__head-row,
  .feature-block,
  .special-block,
  .reviews-row__head,
  .blog-teaser__head-row { gap: 32px; }
  .feature-block { grid-template-columns: 1fr 1.4fr; }
  .feature-stack__row { grid-template-columns: 1fr 1fr; }
  /* Blog teaser: da 3 → 2 colonne prima del collasso a 1 (a 1024px). */
  .blog-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   RESPONSIVE — sotto 1024px collasso a stack
   ========================================================================== */
@media (max-width: 1024px) {
  .services-intro__head-row,
  .feature-block,
  .feature-stack__row,
  .special-block,
  .reviews-row__head,
  .blog-teaser__head-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* head-row di services-intro: gap stretto perché titolo+paragrafo sono testo
     consecutivo (non due "isole" come heading vs media-block) → coerenza con il
     gap di 16px delle service-pair-card sotto. */
  .services-intro__head .services-intro__head-row { gap: 15px; }
  /* Su mobile riportiamo il deco DENTRO l'heading (top: 0) + padding-top: 31px
     per il gap deco→titolo. Così la fascia conserva padding-top intatto (compreso
     nello sfondo) e visivamente il "grigio sopra" = "grigio sotto". */
  .services-intro__head,
  .feature-block__heading,
  .feature-stack__head {
    padding-top: 31px;
  }
  .services-intro__deco,
  .feature-block__deco,
  .feature-stack__deco,
  .special-block__deco {
    top: 0;
  }
  /* NB: il reflow della Sezione 5 "Perché scegliere noi?" (head + pillole impilate)
     è gestito nel blocco @media (max-width:1270px) qui sopra, NON a 1024px: a 1270px
     le pillole erano ancora absolute/larghe e si sovrapponevano al titolo. */
  .feature-stack__cta { justify-self: start; }
  .services-pair { grid-template-columns: 1fr; }
  .blog-teaser-grid,
  .blog-teaser-grid--two { grid-template-columns: 1fr; }
  .avatar-row { gap: 20px; }
  .avatar-row__circle { width: 56px; height: 56px; font-size: 16px; }
}

@media (max-width: 768px) {
  /* le sezioni standard prendono il padding da --section-py (tokens.css);
     .section-why-dark resta gestita qui perché è esclusa dalla regola globale. */
  .section-why-dark {
    padding-block: 64px;
    background-attachment: scroll;   /* mobile: il parallasse fixed causa zoom strani su iOS, lo disattivo */
  }
}

/* Slot immagine opzionale fascia "Servizi Speciali" (data-pf-img="special_image").
   Default vuoto = collassato (nessun blocco grigio). Quando il binder setta
   style.backgroundImage (foto caricata in admin) la regola :not non matcha più
   → si rivela. */
.special-block__media--bg {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  margin-top: 24px;
}
.special-block__media--bg:not([style*="background-image"]) {
  display: none;
}

/* ==========================================================================
   ULTRA-SMALL (≤430px) — telefoni piccoli: riduco le geometrie in px fissi che
   restavano sovradimensionate (icone/label pillole, righe lista servizi speciali).
   La tipografia globale è già in clamp(); qui tocco solo i valori hardcoded.
   ========================================================================== */
@media (max-width: 430px) {
  /* Sezione 5 — pillole (già impilate da ≤1270px): icona/label/padding più compatti */
  .why-pill { padding: 12px 16px; }
  .why-pill__icon { width: 44px; height: 44px; }
  .why-pills { grid-template-columns: 44px auto auto 1fr; }
  .why-pill__label { font-size: 19px; line-height: 1.25; }

  /* Sezione 4 — lista servizi speciali: icona/freccia/altezza/padding ridotti */
  .special-list__item a {
    grid-template-columns: 32px 1fr 20px;
    gap: 10px;
    min-height: 64px;
    padding: 12px 14px;
  }
  .special-list__icon { width: 26px; height: 26px; }
}