/* ==================================================
   NECROLOGIO — PAGE LAYER (PULITO)
   Dipende ESCLUSIVAMENTE da theme.css
   Qui SOLO struttura e componenti specifici
================================================== */


/* ==================================================
   1. LAYOUT — COLONNA EDITORIALE
================================================== */

.page-necrologio {
  padding: var(--space-lg) var(--space-md);
}

.page-necrologio .page-content {
  max-width: 720px;
  margin: 0 auto;
}


/* ==================================================
   2. HEADER NECROLOGIO (SOLO SPAZIATURA)
================================================== */

.necrologio-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.necrologio-header h1 {
  margin-bottom: .35rem;
}

.necrologio-header .luogo,
.necrologio-header .visite {
  font-size: .85rem;
  color: var(--text-muted);
}


/* ==================================================
   3. PUBLISHER — MICRO CARD
================================================== */

.necrologio-publisher {
  max-width: 420px;
  margin: var(--space-md) auto;
  padding: var(--space-sm) var(--space-md);

  text-align: center;
  background: var(--bg-soft);
  border-radius: var(--radius);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 6px 18px rgba(0,0,0,.08);
}

.necrologio-publisher a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.necrologio-publisher a:hover {
  text-decoration: underline;
}

.necrologio-publisher .publisher-category {
  margin-top: .25rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ==================================================
   4. MANIFESTO
================================================== */

.necrologio-manifesto {
  display: flex;
  justify-content: center;
  margin: var(--space-lg) 0;
}

.necrologio-manifesto img {
  max-width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


/* ==================================================
   5. TESTO NECROLOGIO (EDITORIALE PURO)
================================================== */

.necrologio-testo {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: var(--space-lg);
  text-align: left;
}


/* ==================================================
   6. OFFERTE
   (griglia e card in offerte.css)
================================================== */

.necrologio-offerte {
  text-align: center;
  margin: var(--space-lg) 0;
}


/* ==================================================
   7. CONDOGLIANZE — FORM
   (usa il FORM SYSTEM del theme)
================================================== */

.condoglianze {
  margin-top: var(--space-lg);
}

.condoglianze h2 {
  text-align: center;
  margin-bottom: var(--space-md);
}

.condoglianze form {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-sm);
}

.condoglianza-personalizzata,
.condoglianza-anonima {
  display: grid;
  gap: .4rem;
}

.condoglianze button {
  width: 100%;
  margin-top: var(--space-sm);
}


/* ==================================================
   8. CONDOGLIANZE — LIBRO FIRME
================================================== */

.condoglianze-list {
  max-width: 640px;
  margin: var(--space-lg) auto 0;
}

.condoglianza {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
}

.condoglianza strong {
  font-weight: 600;
}

.condoglianza small {
  font-size: .75rem;
  color: var(--text-muted);
}

.condoglianza p {
  margin-top: .25rem;
  font-size: .95rem;
  line-height: 1.6;
}


/* ==================================================
   9. AUDIO TOGGLE — COMPONENTE ISOLATO
   (non usa .btn per scelta)
================================================== */

.offerte-audio-toggle {
  text-align: center;
  margin: var(--space-md) 0;
}

.audio-toggle {
  all: unset;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .45rem 1.1rem;

  border-radius: 999px;
  border: 1px solid rgba(122,30,43,.35);
  background: rgba(122,30,43,.08);

  font-family: inherit;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: var(--accent);
  cursor: pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}

.audio-toggle:hover {
  background: rgba(122,30,43,.14);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.audio-toggle.is-on {
  background: rgba(122,30,43,.18);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122,30,43,.18);
}

.audio-toggle.is-off {
  background: transparent;
  border-color: rgba(0,0,0,.25);
  color: var(--text-muted);
  box-shadow: none;
}

.audio-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(201,162,77,.35);
}