/* ============================================================
   ESEMPI — stile del pannello che ESPANDE l'esempio di un modulo
   sotto la sua riga (come le macrosezioni), dentro l'intervista.

   I TOKEN e i componenti condivisi (tag, tema) stanno in
   `style.css`, caricato prima; l'apri/chiudi del pannello
   (`.mod-example`, chevron) sta lì. Qui c'è solo la cornice
   «esempio» e il vestito dei blocchi renderizzati.

   Regola del progetto: nei componenti solo variabili, mai valori
   a mano (C2). Un blocco per tema.
   ============================================================ */

/* un passo tipografico più grande, solo per gli hero d'esempio */
:root { --step-4: 2.4rem; }

.ex-cap { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 var(--space-2); }

/* --- più esempi dello stesso modulo: separati da una riga, senza cornice --- */
.ex-item + .ex-item {
  margin-top: var(--space-6); padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* ============================================================
   BLOCCHI D'ESEMPIO (un sito neutro) — elementi comuni
   ============================================================ */
.ex-eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-strong); margin: 0; }
.ex-block-title { font-size: var(--step-1); margin: 0 0 var(--space-3); }
.ex-muted { color: var(--ink-soft); }
.ex-small { font-size: var(--step--1); }
.ex-ic { width: 26px; height: 26px; color: var(--brand-strong); }
.ex-center { text-align: center; }

.ex-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff; font-weight: 600;
  padding: 12px 22px; border-radius: var(--radius); white-space: nowrap;
}
:root[data-theme="dark"] .ex-btn { color: #0e1512; }
.ex-btn-sm { padding: 8px 14px; font-size: var(--step--1); }
.ex-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.ex-btn-warn { background: var(--warn); color: #fff; }
:root[data-theme="dark"] .ex-btn-warn { color: #1a1405; }

.ex-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.ex-chips span { font-size: var(--step--1); color: var(--ink-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; }

.ex-wordmark { font-weight: 800; letter-spacing: -.01em; }

/* --- header (barra alta) --- */
.ex-nav { display: flex; align-items: center; gap: var(--space-4); }
.ex-navlinks { display: flex; gap: var(--space-4); margin-left: var(--space-4); }
.ex-navlinks a { color: var(--ink-soft); font-size: var(--step--1); text-decoration: none; }
.ex-nav .ex-btn-sm { margin-left: auto; }

/* --- hero --- */
.ex-hero .ex-h1 { font-size: var(--step-4); line-height: 1.1; margin: var(--space-3) 0; letter-spacing: -.02em; max-width: 18ch; }
.ex-hero .ex-lead { color: var(--ink-soft); max-width: 46ch; margin: 0 0 var(--space-5); }
.ex-hero.ex-center .ex-h1, .ex-hero.ex-center .ex-lead { margin-left: auto; margin-right: auto; }

/* --- emergenze (banda urgenze) --- */
.ex-emerg {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--warn-tint); border-radius: var(--radius); padding: var(--space-4) var(--space-5);
}
.ex-emerg-txt { display: flex; flex-direction: column; }
.ex-emerg-txt strong { color: var(--warn); }
.ex-emerg-txt span { font-size: var(--step--1); color: var(--ink-soft); }
.ex-emerg .ex-btn-warn { margin-left: auto; }

/* --- filosofia (manifesto) --- */
.ex-manifesto { max-width: 54ch; }
.ex-quote { font-size: var(--step-2); line-height: 1.4; margin: 0 0 var(--space-4); }
.ex-sign { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }

/* --- spiegone (3 concetti) --- */
.ex-spieg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.ex-spieg-item .ex-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-strong); font-weight: 700;
}
.ex-spieg-item h4 { margin: var(--space-3) 0 var(--space-2); font-size: var(--step-1); }
.ex-spieg-item p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.ex-caution {
  margin-top: var(--space-4); font-size: var(--step--1); color: var(--ink-soft);
  border-left: 3px solid var(--warn); padding-left: var(--space-3);
}

/* --- confronto (due colonne) --- */
.ex-conf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ex-conf-col { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface-2); }
.ex-conf-col h4 { margin: 0 0 var(--space-3); font-size: var(--step-1); }
.ex-conf-col ul { margin: 0; padding-left: var(--space-4); color: var(--ink-soft); font-size: var(--step--1); }
.ex-conf-col li { margin-bottom: var(--space-2); }
.ex-conf-close { margin: var(--space-4) 0 0; text-align: center; color: var(--ink-soft); font-size: var(--step--1); }

/* --- storia (linea del tempo) --- */
.ex-time { display: grid; gap: var(--space-4); }
.ex-time-row { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-4); align-items: start; }
.ex-year { font-weight: 800; color: var(--brand-strong); font-size: var(--step-1); }
.ex-time-txt h4 { margin: 0 0 var(--space-1); font-size: var(--step-0); }
.ex-time-txt p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* --- servizi (griglia) --- */
.ex-serv { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.ex-card { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface-2); }
.ex-card h4 { margin: var(--space-3) 0 var(--space-2); font-size: var(--step-1); }
.ex-card p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.ex-serv .ex-chips { grid-column: 1 / -1; }

/* --- persona (chi è) --- */
.ex-persona { display: flex; gap: var(--space-5); align-items: center; }
.ex-avatar {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--step-2); color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
}
:root[data-theme="dark"] .ex-avatar { color: #0e1512; }
.ex-persona-txt h4 { margin: 0; font-size: var(--step-1); }
.ex-role { color: var(--ink-soft); font-size: var(--step--1); margin: var(--space-1) 0 var(--space-2); }
.ex-persona-txt p:last-child { margin: 0; font-size: var(--step--1); color: var(--ink-soft); max-width: 48ch; }

/* --- disponibilità (orari) --- */
.ex-hours { max-width: 30rem; }
.ex-hours-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.ex-hours-row:first-of-type { border-top: 0; }
.ex-hours-row span:first-child { font-weight: 600; }
.ex-hours-row span:last-child { color: var(--ink-soft); text-align: right; }

/* --- zona coperta --- */
.ex-zona p { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 var(--space-2); max-width: 48ch; }
.ex-zona .ex-block-title { margin-bottom: var(--space-2); }

/* --- contatti --- */
.ex-contatti p { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 var(--space-4); }
.ex-cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* --- footer --- */
.ex-footer { text-align: center; }
.ex-footer .ex-wordmark { font-size: var(--step-1); }
.ex-foot-legal { color: var(--ink-soft); font-size: var(--step--1); margin: var(--space-3) 0 var(--space-2); }

/* --- faq --- */
.ex-faq { border-bottom: 1px solid var(--border); }
.ex-faq summary { cursor: pointer; list-style: none; padding: var(--space-4) 0; font-weight: 600; display: flex; justify-content: space-between; gap: var(--space-3); }
.ex-faq summary::-webkit-details-marker { display: none; }
.ex-faq summary::after { content: "+"; color: var(--brand-strong); font-weight: 400; font-size: var(--step-2); line-height: 1; }
.ex-faq[open] summary::after { content: "–"; }
.ex-faq p { color: var(--ink-soft); padding-bottom: var(--space-4); margin: 0; max-width: 60ch; }

/* --- blog (indice articoli) --- */
.ex-blog { display: grid; gap: var(--space-4); }
.ex-post { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface-2); }
.ex-post-date { font-size: var(--step--1); color: var(--ink-soft); }
.ex-post h4 { margin: var(--space-2) 0; font-size: var(--step-1); }
.ex-post p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* --- eventi (bacheca) --- */
.ex-eventi { display: grid; gap: var(--space-4); }
.ex-event { display: flex; gap: var(--space-4); align-items: center; }
.ex-date-badge {
  flex: none; width: 60px; text-align: center; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
}
.ex-date-badge .ex-d { display: block; font-weight: 800; font-size: var(--step-2); padding-top: 4px; }
.ex-date-badge .ex-m { display: block; font-size: var(--step--1); color: #fff; background: var(--brand); padding: 2px 0; }
:root[data-theme="dark"] .ex-date-badge .ex-m { color: #0e1512; }
.ex-event-txt h4 { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.ex-event-txt p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* ============================================================ RIDOTTO
   Container query: gli esempi reagiscono alla larghezza della COLONNA dei
   moduli (contenitore `.mods`), non della finestra — così collassano anche
   quando il pannello è stretto su schermo largo. */
@container (max-width: 560px) {
  .ex-serv, .ex-spieg-grid, .ex-conf-cols { grid-template-columns: 1fr; }
  .ex-hero .ex-h1 { font-size: var(--step-3); }
  .ex-nav { flex-wrap: wrap; }
  .ex-navlinks { margin-left: 0; }
  .ex-persona { flex-direction: column; text-align: center; align-items: center; }
}