/* ==========================================================================
   Pagine Mondo — layout desktop (Bechstein/Heilmann/Fender/Servizi)
   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.
   ========================================================================== */

/* ==========================================================================
   Layout desktop — pagine Mondo (Multimarca & Servizi, Bechstein, Heilmann,
   Fender). Il sito è mobile-first: sotto i 1024px resta tutto invariato,
   queste regole si attivano solo dai breakpoint desktop in giù non toccati.
   ========================================================================== */

/* --- Hero: meno vuoto finché non c'è una foto reale, titolo più grande --- */
@media (min-width: 1024px) {
  .sacc-hero--mondo:not(.has-image) { min-height: 34vh; }
  .sacc-hero--mondo h1 { font-size: clamp(3rem, 2rem + 2vw, 4rem); }
}
/* Overlay "world-aware" pronto per quando arriva la foto reale (stessa
   formula gradiente già usata su .sacc-world-card in Home): richiede il
   wrapper <article class="world-*"> di page-mondo.php per --world-base/
   --world-accent, altrimenti ricade sul nero di sempre. */
.sacc-hero--mondo.has-image .sacc-hero-overlay {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--world-base, var(--sacc-black)) 70%, transparent),
    color-mix(in srgb, var(--world-accent, var(--sacc-black)) 40%, transparent));
}

/* --- Intro (the_content) + immagine editoriale, 50/50 da desktop --- */
.sacc-editorial-img { display: none; }
@media (min-width: 1024px) {
  .sacc-mondo-intro {
    display: flex; align-items: center; gap: 50px;
    max-width: var(--container-content); margin: 0 auto; padding: 70px var(--gutter);
  }
  .sacc-mondo-intro .sacc-narrative {
    flex: 1 1 50%; max-width: none; margin: 0; padding: 0; text-align: left;
  }
  .sacc-editorial-img {
    display: block; flex: 1 1 50%; align-self: stretch; min-height: 360px;
    border-radius: var(--radius);
    background-color: var(--world-base, var(--sacc-black));
    background-image: linear-gradient(135deg,
      color-mix(in srgb, var(--world-base) 55%, transparent),
      color-mix(in srgb, var(--world-accent) 65%, transparent));
  }
}

/* --- Blocco narrativo dedicato (Bechstein/Heilmann/Fender) e accordion
   servizi (Multimarca): più respiro orizzontale da desktop --- */
/* Da desktop la prosa dei mondi e l'accordion a 2 colonne salgono di un
   gradino: 760 -> 900 (--container-prose). Prima erano due scalini scritti a
   mano, 900px da 1024 e 960px da 1440, unici in tutto il sito ad avere una
   scala a tre livelli propria. */
@media (min-width: 1024px) {
  .sacc-world-block, .services-accordion { max-width: var(--container-prose); }
}

/* --- Accordion servizi: 2 colonne da desktop, 1 colonna invariata sotto --- */
@media (min-width: 1024px) {
  .services-accordion {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 40px; align-items: start;
  }
  .services-accordion h2 { grid-column: 1 / -1; }
}

/* --- Striscia galleria (2-3 placeholder), prima della CTA finale --- */
.sacc-mondo-gallery { display: none; }
@media (min-width: 1024px) {
  .sacc-mondo-gallery {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    max-width: var(--container-content); margin: 0 auto; padding: 20px var(--gutter) 70px;
  }
  .sacc-mondo-gallery-item {
    aspect-ratio: 4 / 3; border-radius: var(--radius);
    background-color: var(--world-base, var(--sacc-black));
    background-image: linear-gradient(135deg,
      color-mix(in srgb, var(--world-base) 55%, transparent),
      color-mix(in srgb, var(--world-accent) 65%, transparent));
  }
}

/* --- Pagina App: scheda download ufficiale Google Play --- */
.sacc-app-download {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  max-width: var(--container-prose);
  margin: 0 auto 64px;
  padding: 28px var(--gutter);
  color: var(--sacc-ivory);
  background: var(--sacc-black);
}
.sacc-app-download-icon {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 20%;
}
.sacc-app-download-copy h2 { margin: 0 0 8px; }
.sacc-app-download-copy p:not(.sacc-eyebrow) {
  margin: 0 0 20px;
  color: var(--ivory-secondary);
}
.sacc-app-store-link {
  display: inline-flex;
  flex-direction: column;
  min-width: 188px;
  padding: 10px 18px 11px;
  border: 1px solid color-mix(in srgb, var(--sacc-ivory) 35%, transparent);
  border-radius: var(--radius);
  color: var(--sacc-ivory);
  background: var(--gray-900);
  line-height: 1.05;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.sacc-app-store-link span { font-size: .7rem; }
.sacc-app-store-link strong { margin-top: 3px; font-size: 1.15rem; }
.sacc-app-store-link:hover {
  color: var(--sacc-black);
  background: var(--sacc-gold);
  border-color: var(--sacc-gold);
  opacity: 1;
}
@media (max-width: 560px) {
  .sacc-app-download {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 44px;
  }
  .sacc-app-download-icon { width: 64px; height: 64px; }
  .sacc-app-store-link { grid-column: 1 / -1; }
}

/* --- Pagina App: banner, schede funzione, screenshot, requisiti --- */
.sacc-app-download--closing { margin-top: 8px; }

.sacc-app-banner {
  max-width: var(--container-content);
  margin: 0 auto 56px;
  padding: 0 var(--gutter);
}
.sacc-app-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.sacc-app-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sacc-app-feature h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--world-accent, var(--sacc-gold-dark));
}
.sacc-app-feature p { margin: 0; }

.sacc-app-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.sacc-app-fact {
  display: grid;
  grid-template-columns: minmax(110px, 30%) minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--sacc-black) 12%, transparent);
}
.sacc-app-fact:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--sacc-black) 12%, transparent);
}
.sacc-app-fact dt { margin: 0; font-weight: 600; }
.sacc-app-fact dd { margin: 0; }

.sacc-app-shots {
  max-width: var(--container-content);
  margin: 0 auto;
  padding: 0 var(--gutter) 24px;
}
.sacc-app-shots h2 {
  color: var(--world-accent, var(--sacc-gold-dark));
  margin-bottom: 20px;
}
.sacc-app-shots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.sacc-app-shot { margin: 0; }
.sacc-app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.sacc-app-shot figcaption {
  margin-top: 8px;
  font-size: .85rem;
  color: var(--gray-600, inherit);
}

@media (min-width: 768px) {
  .sacc-app-features { grid-template-columns: 1fr 1fr; }
}