/* ============================================================
   DELTA PROTOTIPO COMPLETO — alt-artifact-led (dossier 20260915)
   Include il delta hero approvato + estensione a tutte le pagine:
   - home: split-hero + guscio demo (anche pannello Cura)
   - aziende: split business-hero + demo Studio Parola Data
   - listino/offerta: superficie scura "soldi" in entrambi i temi
   - concierge: stessa elevazione della cornice demo
   Niente font/colori/copy nuovi: variabili e classi del sito.
   ============================================================ */

/* ---- Hero home: testo a sinistra, artefatto reale a destra ---- */
@media (min-width: 961px) {
  .studio-opening--artifact {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: clamp(36px, 4.5vw, 80px);
    align-items: start;
  }
  .studio-opening--artifact .studio-opening-main { min-width: 0; }
  .studio-opening--artifact .studio-opening-details {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 26px;
  }
  .studio-opening--artifact .studio-artifact { padding-top: 4px; }
}

/* ---- Hero aziende: stessa composizione ---- */
@media (min-width: 961px) {
  .business-hero--artifact {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(36px, 4.5vw, 80px);
    align-items: start;
  }
  .business-hero--artifact .business-hero-main { min-width: 0; position: relative; z-index: 1; }
  .business-hero--artifact h1 { margin: 20px 0 26px; max-width: none; }
  .business-hero--artifact .hero-bottom {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 0;
  }
  .business-hero--artifact .studio-artifact { position: relative; z-index: 1; padding-top: 4px; }
}

/* ---- Guscio unico barra+riquadro: raggio 10px, elevazione a strati
   sul chiaro, anello + ombra nera sullo scuro ---- */
.artifact-frame {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.artifact-frame .browser-bar {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.artifact-frame .site-frame {
  border: 0;
  border-radius: 0;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema=scuro]) .artifact-frame {
    box-shadow: 0 1px 2px rgba(25,21,18,.05),
                0 10px 28px rgba(25,21,18,.07),
                0 30px 72px rgba(25,21,18,.09);
  }
}
:root[data-tema=chiaro] .artifact-frame {
  box-shadow: 0 1px 2px rgba(25,21,18,.05),
              0 10px 28px rgba(25,21,18,.07),
              0 30px 72px rgba(25,21,18,.09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema=chiaro]) .artifact-frame {
    box-shadow: 0 0 0 1px rgba(242,237,228,.05),
                0 24px 64px rgba(0,0,0,.45);
  }
}
:root[data-tema=scuro] .artifact-frame {
  box-shadow: 0 0 0 1px rgba(242,237,228,.05),
              0 24px 64px rgba(0,0,0,.45);
}

/* Altezza compatta dei riquadri demo */
.studio-artifact .site-frame { height: clamp(330px, 46vh, 470px); }

/* Stessa elevazione per la conversazione Concierge (demo viva) */
.conversation { border-radius: 10px; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema=scuro]) .conversation {
    box-shadow: 0 1px 2px rgba(25,21,18,.05),
                0 10px 28px rgba(25,21,18,.07),
                0 30px 72px rgba(25,21,18,.09);
  }
}
:root[data-tema=chiaro] .conversation {
  box-shadow: 0 1px 2px rgba(25,21,18,.05),
              0 10px 28px rgba(25,21,18,.07),
              0 30px 72px rgba(25,21,18,.09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema=chiaro]) .conversation {
    box-shadow: 0 0 0 1px rgba(242,237,228,.05),
                0 24px 64px rgba(0,0,0,.45);
  }
}
:root[data-tema=scuro] .conversation {
  box-shadow: 0 0 0 1px rgba(242,237,228,.05),
              0 24px 64px rgba(0,0,0,.45);
}

/* ---- Superficie scura "soldi" (dossier: solo il listino; nel tema
   scuro diventa banda definita da anello/bordo, non da ombra) ---- */
.chapter--soldi {
  --bg: #191512; --surface: #241e19; --paper: #302820;
  --ink: #f2ede4; --muted: #c2b7a6; --accent: #d9a62e;
  --line: #655544; --button: #d9a62e; --button-ink: #191512;
  color: var(--ink);
}
/* .chapter.alt usa --surface come sfondo (specificità 0-2-0):
   serve una regola altrettanto specifica perché la banda sia uniforme */
.chapter.chapter--soldi { background: var(--bg); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema=scuro]) .chapter--soldi { border-radius: 16px; }
}
:root[data-tema=chiaro] .chapter--soldi { border-radius: 16px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema=chiaro]) .chapter--soldi {
    --bg: #241e19; --surface: #302820;
    border: 1px solid var(--line);
    border-radius: 16px;
  }
}
:root[data-tema=scuro] .chapter--soldi {
  --bg: #241e19; --surface: #302820;
  border: 1px solid var(--line);
  border-radius: 16px;
}

/* ---- Mobile: artefatto sotto l'offerta, preambolo compattato ---- */
@media (max-width: 960px) {
  .studio-artifact { margin-top: 30px; }
  .studio-artifact .site-frame { height: clamp(300px, 42vh, 430px); }
}
@media (max-width: 600px) {
  .studio-artifact .work-info { margin-bottom: 10px; }
  .studio-artifact .example-paths { padding: 8px 0 12px; gap: 4px 18px; }
  .studio-artifact .example-paths a { min-height: 40px; font-size: 14px; }
  .studio-artifact .site-frame { height: 380px; }
}

/* ---- Fix QA 16/09/2026 ---- */

/* R2: il titolo della scheda demo prima dell'h1 passa a h2, ma con lo stesso
   aspetto dell'h3 precedente (21px Ronzino 500; 19px sotto i 600px).
   Senza la classe erediterebbe l'h2 display del sito (fino a 60px). */
.work-info .work-name {
  margin: 0;
  font-family: Ronzino, Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
@media (max-width: 600px) {
  .work-info .work-name { font-size: 19px; }
}

/* R6: il bordo del toggle tema usa --line (1,8-2,0:1 sui due fondi).
   --muted e' il token gia' previsto per i contorni leggibili. */
.theme { border-color: var(--muted); }