/* ==========================================================================
   Homepage — sezioni editoriali e portale istituzionale
   Estratto da variables.css il 18/08/2026: il file era un monolite di 1107
   righe con token, reset, layout, componenti e tre generazioni di homepage
   sovrapposte. Vedi functions.php per l'ordine di caricamento.
   ========================================================================== */

/* ==========================================================================
   Homepage — Sprint 01 (racconto editoriale)
   ========================================================================== */

/* --- Hero Home: composizione decentrata da desktop, doppia CTA --- */
@media (min-width: 1024px) {
  .sacc-hero--home {
    align-items: flex-end; justify-content: flex-start; text-align: left;
    padding-bottom: clamp(56px, 9vw, 110px);
  }
  /* Sprint 04: il blocco testuale deve allinearsi allo stesso margine
     sinistro dei container delle altre sezioni (var(--container-wide),
     centrato, non un padding fisso indipendente dalla larghezza viewport)
     — altrimenti su schermi molto larghi il testo risultava disallineato
     rispetto al resto della pagina. max()/calc() replica il margine del
     container centrato senza dover avvolgere il contenuto in un wrapper
     aggiuntivo lato PHP. */
  .sacc-hero--home .sacc-hero-content {
    margin: 0; max-width: 640px;
    padding-left: max(60px, calc((100vw - var(--container-wide)) / 2));
    padding-right: 40px;
  }
  /* Calibrato per restare a 3–4 righe reali nelle 4 lingue del sito entro
     i 640px del blocco testuale (verificato IT/EN/DE/ZH), non solo un
     valore "grande" scelto a occhio. */
  .sacc-hero--home h1 {
    font-size: clamp(3rem, 2rem + 2vw, 4rem);
    max-width: 9.5em; white-space: normal;
    margin-bottom: 20px; line-height: 1.08;
  }
}
.sacc-hero-lede {
  font-family: var(--font-ui); font-size: .96rem; line-height: 1.55;
  color: var(--ivory-secondary); max-width: 46ch; margin: 0 0 24px;
}
.sacc-hero-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sacc-hero-cta-primary {
  display: inline-block; background: var(--sacc-ivory); color: var(--sacc-black);
  font-family: var(--font-ui); font-size: .76rem; letter-spacing: .8px; text-transform: uppercase;
  padding: 11px 22px; border-radius: var(--radius); text-decoration: none;
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.sacc-hero-cta-primary:hover { background: var(--sacc-gold); color: var(--sacc-black); transform: translateY(-2px); }

/* --- Sezione Storia: colonna eyebrow/titolo stretta + testo largo --- */
.sacc-story { padding: var(--section-space-y) 20px; background: var(--sacc-ivory); }
.sacc-story-inner { max-width: var(--container-wide); margin: 0 auto; }
.sacc-story-eyebrow {
  display: block; font-family: var(--font-ui); font-size: .78rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sacc-gold-dark); margin-bottom: 14px;
}
.sacc-story-body { max-width: var(--container-text); font-size: 1.1rem; line-height: 1.85; }
.sacc-story-body p { margin: 0 0 1.1em; }
.sacc-story-body a { color: var(--sacc-gold-dark); font-family: var(--font-ui); font-size: .85rem; }
/* Sprint 04: nessuna foto reale (vedi inventario immagini) — placeholder a
   gradiente pronto per la sostituzione, stesso trattamento visivo di
   showroom/due mondi. Su mobile segue l'ordine richiesto (eyebrow, titolo,
   testo, immagine, statistiche) semplicemente perché è l'ordine nel DOM e
   sotto i 1024px la sezione non è ancora un grid esplicito. */
.sacc-story-photo {
  margin-top: 32px; aspect-ratio: 4 / 3; border-radius: var(--radius);
  background-color: var(--sacc-black); background-size: cover;
  background-position: center; box-shadow: 0 24px 70px rgba(10,10,10,.12);
}
@media (min-width: 1024px) {
  /* 30% titolo / 30% testo / 40% fotografia, come richiesto dal brief. */
  .sacc-story-inner {
    display: grid; grid-template-columns: 3fr 3fr 4fr; gap: 56px; align-items: start;
  }
  .sacc-story-photo {
    /* aspect-ratio + align-self:stretch dentro una griglia va in conflitto:
       il browser calcola la larghezza dall'altezza "stretched" (quella
       della riga, spesso molto alta per via del testo), non dalla colonna
       — risultato: la foto sfondava a destra della pagina. width:100% la
       vincola sempre alla colonna del grid, aspect-ratio:auto disattiva il
       calcolo in conflitto. */
    margin-top: 0; align-self: stretch; width: 100%; aspect-ratio: auto; min-height: 420px;
  }
  .sacc-story-head h2 { font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1.15; }
}

/* --- Numeri e autorevolezza --- */
.sacc-stats { padding: var(--section-space-y) 20px; background: var(--sacc-ivory-alt); }
.sacc-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--container-wide); margin: 0 auto;
}
.sacc-stat { text-align: center; padding: 0 20px; border-left: 1px solid var(--hairline); }
.sacc-stat:first-child { border-left: none; }
.sacc-stat-num { font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); color: var(--sacc-gold-dark); line-height: 1; }
.sacc-stat-label { font-family: var(--font-ui); font-size: .88rem; color: var(--ink-secondary); margin-top: 10px; line-height: 1.5; }
@media (max-width: 700px) {
  .sacc-stats-grid { grid-template-columns: 1fr; gap: 32px; }
  .sacc-stat { border-left: none; border-top: 1px solid var(--hairline); padding: 28px 0 0; }
  .sacc-stat:first-child { border-top: none; padding-top: 0; }
}

/* --- Quattro mondi: intro + griglia editoriale asimmetrica --- */
.sacc-worlds-eyebrow {
  display: block; text-align: center; font-family: var(--font-ui); font-size: .78rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--sacc-gold-dark); margin-bottom: 14px;
}
.sacc-worlds-intro {
  max-width: 620px; margin: 16px auto 0; text-align: center; color: var(--ink-secondary); font-size: 1.02rem;
}
@media (min-width: 1024px) {
  .sacc-worlds-grid { grid-template-columns: repeat(12, 1fr); max-width: var(--container-wide); }
  .sacc-world-card { height: auto; min-height: 320px; }
  .sacc-world-card:nth-child(1) { grid-column: span 7; min-height: 420px; }
  .sacc-world-card:nth-child(2) { grid-column: span 5; }
  .sacc-world-card:nth-child(3) { grid-column: span 5; }
  .sacc-world-card:nth-child(4) { grid-column: span 7; min-height: 420px; }
}
.sacc-world-card-cta {
  display: inline-block; margin-top: 10px; font-family: var(--font-ui); font-size: .76rem;
  letter-spacing: .5px; text-transform: uppercase; opacity: .92;
}

/* --- Showroom: foto e testo affiancati da desktop --- */
@media (min-width: 1024px) {
  .sacc-showroom-inner {
    display: flex; align-items: center; gap: 56px; max-width: var(--container-wide); margin: 0 auto; text-align: left;
  }
  /* Sprint 04: 65/35 invece di 58/42 — la foto deve avere "presenza
     importante", non solo una lieve maggioranza. */
  .sacc-showroom-img { flex: 1 1 66%; max-width: none; margin: 0; align-self: stretch; min-height: 480px; }
  .sacc-showroom-img img { height: 100%; object-fit: cover; }
  .sacc-showroom-img--placeholder { aspect-ratio: auto; height: 100%; }
  .sacc-showroom-body { flex: 1 1 34%; }
  .sacc-showroom p { margin: 0 0 1.4em; max-width: 42ch; }
}
.sacc-showroom-eyebrow {
  display: block; font-family: var(--font-ui); font-size: .78rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sacc-gold); margin-bottom: 14px;
}
.sacc-showroom h2 { color: var(--sacc-ivory); font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); line-height: 1.1; margin-bottom: 20px; }
.sacc-showroom-cta {
  display: inline-block; font-family: var(--font-ui); font-size: .8rem; letter-spacing: 1px;
  color: var(--sacc-ivory); text-decoration: none; border-bottom: 1px solid var(--sacc-gold); padding-bottom: 4px;
}

/* ==========================================================================
   Homepage — Sprint 03 (portale istituzionale, ecosistema esterno)
   ========================================================================== */

/* Utility: nasconde visivamente ma resta letto dagli screen reader. Usata
   per segnalare "si apre in una nuova scheda" sui link esterni senza
   introdurre icone decorative (vedi docs/DESIGN_SYSTEM.md, regola 5). */
.sacc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Marcatore visivo minimo (una freccia diagonale tipografica, non un'icona
   decorativa) per distinguere i link che portano fuori dall'ecosistema
   staging.saccuman.it — richiesto esplicitamente dal brief ("collegamenti
   esterni chiaramente distinguibili nel codice"). */
.sacc-link-external::after {
  content: '\2197';
  display: inline-block;
  margin-left: .35em;
  font-size: .85em;
  opacity: .7;
}

/* Titoli su più righe (hero, storia, showroom, perché scegliere): i testi
   passano già gli "\n" dal PHP, qui si traducono in interruzioni di riga
   reali senza spezzare la struttura tipografica esistente. */
.sacc-hero--home h1,
.sacc-story-head h2,
.sacc-showroom h2,
.sacc-why-inner h2,
.sacc-two-worlds-body h2 {
  white-space: pre-line;
}
@media (min-width: 1024px) {
  .sacc-hero--home h1 { white-space: normal; }
}

/* --- Header: CTA "Prenota una visita" + toggle mobile ------------------- */
.sacc-header-cta {
  display: inline-block; margin-left: 10px; padding: 8px 16px;
  background: var(--sacc-ivory); color: var(--sacc-black) !important;
  font-family: var(--font-ui); font-size: .72rem; letter-spacing: .8px; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius);
  transition: background-color var(--duration) var(--ease);
}
.sacc-header-cta::after { content: none; } /* è un link interno, non "esterno" */
.sacc-header-cta:hover { background: var(--sacc-gold); color: var(--sacc-black) !important; }

.sacc-nav-toggle {
  display: none; align-items: center; gap: 8px; background: none; border: none;
  color: var(--sacc-ivory); font-family: var(--font-ui); font-size: .78rem;
  letter-spacing: .5px; text-transform: uppercase; cursor: pointer; padding: 8px;
}
.sacc-nav-toggle-bar,
.sacc-nav-toggle-bar::before,
.sacc-nav-toggle-bar::after {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.sacc-nav-toggle-bar { position: relative; }
.sacc-nav-toggle-bar::before, .sacc-nav-toggle-bar::after { content: ''; position: absolute; left: 0; }
.sacc-nav-toggle-bar::before { top: -7px; }
.sacc-nav-toggle-bar::after { top: 7px; }
.sacc-nav-toggle[aria-expanded="true"] .sacc-nav-toggle-bar { background: transparent; }
.sacc-nav-toggle[aria-expanded="true"] .sacc-nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.sacc-nav-toggle[aria-expanded="true"] .sacc-nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .sacc-nav-toggle { display: inline-flex; }
  .sacc-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); height: 100vh;
    background: var(--sacc-black); padding: 100px 32px 40px; transform: translateX(100%);
    transition: transform .3s var(--ease); overflow-y: auto;
  }
  .sacc-nav.is-open { transform: translateX(0); }
  .sacc-menu { flex-direction: column; gap: 22px; }
  .sacc-header-cta { display: block; margin: 28px 0 0; text-align: center; }
}
@media (max-width: 600px) {
  .sacc-header { padding: 16px 18px; }
  .sacc-header-inner { gap: 12px; }
  .sacc-logo {
    flex: 1 1 auto; min-width: 0; max-width: calc(100vw - 88px); overflow: hidden;
    font-size: clamp(1.05rem, 4.8vw, 1.2rem); line-height: 1.15;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .sacc-nav-toggle {
    display: inline-flex !important; flex: 0 0 36px; width: 36px; height: 40px;
    padding: 8px 7px; justify-content: center; color: var(--sacc-ivory);
    visibility: visible; opacity: 1; z-index: 2;
  }
  .sacc-nav-toggle-bar,
  .sacc-nav-toggle-bar::before,
  .sacc-nav-toggle-bar::after { background-color: var(--sacc-ivory); visibility: visible; opacity: 1; }
  .sacc-nav-toggle-bar { flex: 0 0 22px; }
  .sacc-nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .sacc-hero--home .sacc-hero-content {
    width: 100%; max-width: 100%; padding-inline: 24px;
  }
  .sacc-hero--home h1 {
    max-width: 100%; font-size: clamp(1.9rem, 8.5vw, 2.2rem);
    line-height: 1.18; overflow-wrap: anywhere;
  }
  .sacc-hero-lede { max-width: 100%; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sacc-nav, .sacc-nav-toggle-bar, .sacc-nav-toggle-bar::before, .sacc-nav-toggle-bar::after { transition: none; }
}

/* --- Fascia istituzionale: 4 riconoscimenti, sfondo scuro --------------- */
/* Sprint 04: padding verticale aumentato (era 40px, sembrava un componente
   "appoggiato" invece che il completamento naturale della Hero) e icone/
   testo leggermente più grandi (30→38px, .7/1.05rem→.75/1.15rem). */
.sacc-institutional { background: var(--sacc-black); color: var(--sacc-ivory); padding: 56px 20px; }
.sacc-institutional-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px 0;
  max-width: var(--container-wide); margin: 0 auto;
}
@media (min-width: 500px) {
  .sacc-institutional-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
.sacc-institutional-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding-top: 28px; border-top: 1px solid var(--hairline-on-dark);
}
@media (min-width: 500px) {
  /* Separatori verticali sottili da tablet in su (sopra: solo orizzontali
     impilati su mobile, come richiesto). */
  .sacc-institutional-item { padding-top: 0; border-top: none; }
}
.sacc-institutional-icon {
  width: 38px; height: 38px; margin-bottom: 8px; color: var(--sacc-gold);
}
.sacc-institutional-icon svg { width: 100%; height: 100%; }
.sacc-institutional-eyebrow {
  font-family: var(--font-ui); font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ivory-secondary);
}
.sacc-institutional-label { font-family: var(--font-display); font-size: 1.15rem; }
@media (min-width: 700px) {
  .sacc-institutional-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .sacc-institutional-item {
    padding: 0 24px; border-top: none; border-left: 1px solid var(--hairline-on-dark);
  }
  .sacc-institutional-item:first-child { border-left: none; }
}
@media (min-width: 1024px) {
  .sacc-institutional { padding: 64px 40px; }
  .sacc-institutional-icon { width: 42px; height: 42px; }
  .sacc-institutional-label { font-size: 1.22rem; }
}

/* --- Storia: statistiche integrate a fine sezione ------------------------ */
.sacc-story-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: var(--container-wide); margin: 56px auto 0; padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.sacc-story-stats .sacc-stat { text-align: center; padding: 0 20px; border-left: 1px solid var(--hairline); }
.sacc-story-stats .sacc-stat:first-child { border-left: none; }
/* Sprint 04: "i valori devono essere visivamente protagonisti" — più
   grandi della scala base di .sacc-stat-num, solo in questo contesto. */
.sacc-story-stats .sacc-stat-num { font-size: clamp(3rem, 2.2rem + 3vw, 4.6rem); }
@media (max-width: 700px) {
  .sacc-story-stats { grid-template-columns: 1fr; gap: 28px; }
  .sacc-story-stats .sacc-stat { border-left: none; border-top: 1px solid var(--hairline); padding: 24px 0 0; }
  .sacc-story-stats .sacc-stat:first-child { border-top: none; padding-top: 0; }
}

/* --- I due mondi: due blocchi, pianoforte prioritario -------------------- */
.sacc-two-worlds { display: flex; flex-direction: column; }
/* Sprint 04: "fotografia a tutta superficie" + overlay scuro + contenuto
   sovrapposto, invece di un rettangolo a fondo colorato piatto. La foto/
   gradiente vive in ::before (unico livello che si scala leggermente in
   hover, mai il testo), l'overlay scuro in ::after (si schiarisce appena
   in hover), il contenuto sta sopra entrambi. Nessuna foto reale
   disponibile in questo sprint (vedi inventario immagini): gradiente
   multi-stop più ricco al posto del diagonale a due tinte precedente, per
   restituire una sensazione di profondità/luce più fotografica — struttura
   pronta per sostituire ::before con una vera `background-image` non
   appena la foto sarà disponibile. */
.sacc-two-worlds-block {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; min-height: 460px; padding: 40px 24px;
  color: #fff; text-decoration: none;
}
.sacc-two-worlds-block::after { content: none; } /* la freccia esterna vive nella CTA testuale interna, non sul blocco intero */
.sacc-two-worlds-block::before {
  content: ''; position: absolute; inset: -4%; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1); transition: transform .6s var(--ease);
}
.sacc-two-worlds-block:hover::before,
.sacc-two-worlds-block:focus-visible::before { transform: scale(1.045); }
.sacc-two-worlds-block .sacc-two-worlds-body { position: relative; z-index: 2; }
.sacc-two-worlds-piano::before {
  background-color: var(--world-base, var(--world-piano-base));
  background-image:
    linear-gradient(180deg, transparent 25%, rgba(3,5,12,.58) 72%, rgba(3,5,12,.88) 100%),
    url('../img/home-demo/world-piano.webp');
  background-position: center;
}
.sacc-two-worlds-chitarra::before {
  background-color: var(--world-chitarra-base);
  background-image:
    linear-gradient(180deg, transparent 25%, rgba(8,5,3,.58) 72%, rgba(8,5,3,.9) 100%),
    url('../img/home-demo/world-guitar.webp');
  background-position: center;
}
/* Overlay scuro indipendente, si schiarisce appena in hover (richiesto
   esplicitamente: "overlay appena più trasparente" in hover). */
.sacc-two-worlds-block {
  --sacc-tw-overlay: rgba(6,5,4,.32);
}
.sacc-two-worlds-block:hover,
.sacc-two-worlds-block:focus-visible {
  --sacc-tw-overlay: rgba(6,5,4,.22);
}
.sacc-two-worlds-block::before { box-shadow: inset 0 0 0 999px var(--sacc-tw-overlay); transition: transform .6s var(--ease), box-shadow .4s var(--ease); }
.sacc-two-worlds-body { max-width: 460px; }
.sacc-two-worlds-eyebrow {
  display: block; font-family: var(--font-ui); font-size: .78rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sacc-gold); margin-bottom: 6px;
}
.sacc-two-worlds-body h2 { font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem); line-height: 1.05; margin: 0 0 14px; }
.sacc-two-worlds-body p { font-family: var(--font-ui); font-size: 1.05rem; color: rgba(255,255,255,.85); margin: 0 0 16px; max-width: 40ch; }
.sacc-two-worlds-tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 22px; padding: 0;
  font-family: var(--font-ui); font-size: .78rem; letter-spacing: .3px; color: rgba(255,255,255,.78);
}
.sacc-two-worlds-tags li { padding-right: 14px; border-right: 1px solid rgba(255,255,255,.3); }
.sacc-two-worlds-tags li:last-child { border-right: none; padding-right: 0; }
.sacc-two-worlds-cta {
  display: inline-block; font-family: var(--font-ui); font-size: .84rem; letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 1px solid var(--sacc-gold);
}
@media (min-width: 1024px) {
  .sacc-two-worlds { flex-direction: row; }
  .sacc-two-worlds-piano { flex: 0 1 58%; }
  .sacc-two-worlds-chitarra { flex: 0 1 42%; }
  .sacc-two-worlds-block { min-height: 620px; padding: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .sacc-two-worlds-block::before { transition: box-shadow .4s var(--ease); }
  .sacc-two-worlds-block:hover::before, .sacc-two-worlds-block:focus-visible::before { transform: none; }
}

/* --- Collegamenti dei due mondi: liste testuali sotto ai blocchi -------- */
.sacc-two-worlds-links {
  display: flex; flex-direction: column; gap: 40px; padding: var(--section-space-y) 20px;
  max-width: var(--container-wide); margin: 0 auto; background: var(--sacc-ivory);
}
.sacc-two-worlds-links-title {
  display: block; font-family: var(--font-ui); font-size: .78rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sacc-gold-dark); margin-bottom: 14px;
}
.sacc-two-worlds-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sacc-two-worlds-links li { font-family: var(--font-display); font-size: 1.05rem; }
.sacc-two-worlds-links-note { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-secondary); margin: 14px 0 0; max-width: 46ch; }
@media (min-width: 1024px) {
  .sacc-two-worlds-links { flex-direction: row; gap: 80px; }
  .sacc-two-worlds-links-col { flex: 1 1 42%; }
  .sacc-two-worlds-links-col:first-child { flex: 1 1 58%; }
  .sacc-two-worlds-links ul { flex-direction: row; flex-wrap: wrap; column-gap: 32px; row-gap: 10px; }
}

/* --- Perché scegliere Saccuman: divisori sottili, niente card ----------- */
.sacc-why { padding: var(--section-space-y) 20px; background: var(--sacc-ivory-alt); }
.sacc-why-inner { max-width: var(--container-wide); margin: 0 auto; }
.sacc-why-inner h2 { font-size: clamp(2.1rem, 1.5rem + 1.8vw, 2.9rem); margin-bottom: 40px; }
.sacc-why-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.sacc-why-list li {
  display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--hairline);
}
.sacc-why-label { font-family: var(--font-display); font-size: 1.2rem; color: var(--sacc-gold-dark); }
.sacc-why-detail { font-family: var(--font-ui); font-size: .95rem; color: var(--ink-secondary); line-height: 1.6; }
/* Sprint 04: griglia a 2 colonne (3+3 righe) invece di 6 righe a piena
   larghezza da sole — la larghezza del container era sfruttata male,
   troppo spazio vuoto a destra di ogni riga. Nessuna card/sfondo/ombra
   aggiunta, solo i divisori esistenti riorganizzati su una griglia. */
@media (min-width: 1024px) {
  .sacc-why-list {
    border-top: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px;
  }
  .sacc-why-list li {
    flex-direction: row; align-items: baseline; gap: 24px; padding: 22px 0;
    border-top: 1px solid var(--hairline); border-bottom: none;
  }
  .sacc-why-label { flex: 0 0 190px; }
  .sacc-why-detail { flex: 1 1 auto; }
}

/* --- Ecosistema digitale: blocco testuale elegante, no loghi finti ------ */
/* Sprint 04: "chiaramente distinto dalla sezione Marchi" — fascia con
   tinta propria (stessa tinta chiaro-scuro già usata da Numeri/Perché
   scegliere, mai un nuovo colore) e hairline superiore, invece di
   continuare sullo stesso sfondo ivory dei Marchi appena sopra. */
.sacc-ecosystem {
  padding: 44px 20px calc(var(--section-space-y) * .5); text-align: center;
  background: var(--sacc-ivory-alt); border-top: 1px solid var(--hairline);
}
.sacc-ecosystem-eyebrow {
  display: block; font-family: var(--font-ui); font-size: .78rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--sacc-gold-dark); margin-bottom: 20px;
}
.sacc-ecosystem-list {
  list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 0; max-width: var(--container-wide);
}
.sacc-ecosystem-list li {
  font-family: var(--font-display); font-size: 1.1rem;
  padding: 0 28px; border-left: 1px solid var(--hairline);
}
.sacc-ecosystem-list li:first-child { border-left: none; }
@media (max-width: 600px) {
  .sacc-ecosystem-list li { border-left: none; padding: 0 16px; }
}

/* --- Footer: colonne aggiornate (Sprint 03) ------------------------------ */
.sacc-footer-logo {
  display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--sacc-ivory);
  text-decoration: none; margin-bottom: 10px;
}
.sacc-footer-social-note { color: var(--gray-300); font-size: .78rem; }

/* Desktop ampi e monitor ultrawide: la homepage non deve restare una
   colonna da 1240px sospesa al centro di fotografie a tutta superficie.

   29/08/2026: le due righe che qui ridefinivano --container-wide e
   .sacc-header-inner SOLO per la home sono state spostate in tokens.css e
   rese valide per tutto il sito. Erano la causa del menu che si spostava
   passando dalla home a qualsiasi altra pagina (header e footer usano quel
   contenitore). Restano qui sotto le sole regole davvero specifiche della
   home, che agiscono su classi .sacc-hero--home/.sacc-story-*/
   .sacc-two-worlds-*/.sacc-showroom-*/.sacc-why-* esistenti solo qui. */
@media (min-width: 1600px) {
  .sacc-hero--home .sacc-hero-content {
    width: min(900px, 45vw); max-width: none; padding-left: 0;
    margin-left: calc((100vw - var(--container-wide)) / 2);
  }
  .sacc-hero--home h1 {
    max-width: 10.5em; font-size: clamp(4rem, 3.5vw, 5.4rem); line-height: 1.04;
  }
  .sacc-hero-lede { max-width: 52ch; font-size: 1.12rem; }
  .sacc-story-inner { gap: clamp(64px, 5vw, 112px); }
  .sacc-story-head h2 { font-size: clamp(3.4rem, 3vw, 4.8rem); }
  .sacc-story-body { font-size: 1.16rem; max-width: 52ch; }
  .sacc-story-photo { min-height: 560px; }
  .sacc-two-worlds-block { min-height: clamp(680px, 48vw, 880px); padding: clamp(64px, 5vw, 112px); }
  .sacc-two-worlds-piano {
    padding-left: max(64px, calc((100vw - var(--container-wide)) / 2));
  }
  .sacc-two-worlds-body { max-width: 620px; }
  .sacc-two-worlds-body h2 { font-size: clamp(4rem, 3.4vw, 5.4rem); }
  .sacc-showroom-inner { gap: clamp(64px, 5vw, 112px); }
  .sacc-showroom-img { min-height: 620px; }
  .sacc-showroom-body { max-width: 560px; }
  .sacc-why-inner h2 { font-size: clamp(3rem, 2.6vw, 4.2rem); }
}

/* ==========================================================================
   Home — "I prossimi concerti". Fascia editoriale autonoma a tutta larghezza:
   prima il max-width era applicato alla section stessa e, con un solo evento,
   la griglia blog a tre colonne sembrava occupare uno spazio avanzato.
   ========================================================================== */
.sacc-blog-preview { padding: var(--section-space-y) var(--gutter); background: var(--sacc-ivory-alt); }
.sacc-blog-preview-inner { max-width: var(--container-wide); margin: 0 auto; }
.sacc-blog-preview-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid var(--hairline);
}
.sacc-blog-preview h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); margin: 0; }
.sacc-blog-preview .sacc-blog-grid { margin-top: 40px; }
.sacc-blog-preview-cta {
  display: inline-block; font-family: var(--font-ui); font-size: .8rem; letter-spacing: 1px;
  color: var(--sacc-black); text-decoration: none; border-bottom: 1px solid var(--sacc-gold-dark); padding-bottom: 4px;
}
.sacc-home-concert-grid--1 { grid-template-columns: minmax(0, 760px); }
.sacc-home-concert-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sacc-home-concert-card { border-top: 1px solid var(--hairline); padding-top: 20px; }
.sacc-home-concert-grid--1 .sacc-home-concert-card {
  display: grid; grid-template-columns: minmax(240px, 42%) 1fr; align-items: stretch;
}
.sacc-home-concert-grid--1 .sacc-blog-item-img img { height: 100%; aspect-ratio: 4 / 3; }
.sacc-home-concert-grid--1 .sacc-blog-item-body { padding: 8px 0 8px 32px; align-self: center; }
.sacc-home-concert-card h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); line-height: 1.2; }
@media (max-width: 700px) {
  .sacc-blog-preview-head { display: block; padding-bottom: 24px; }
  .sacc-blog-preview-head .sacc-blog-preview-cta { margin-top: 20px; }
  .sacc-blog-preview .sacc-blog-grid { margin-top: 32px; }
  .sacc-home-concert-grid--1,
  .sacc-home-concert-grid--2 { grid-template-columns: 1fr; }
  .sacc-home-concert-grid--1 .sacc-home-concert-card { display: block; }
  .sacc-home-concert-grid--1 .sacc-blog-item-body { padding: 16px 0 0; }
}