/* ════════════════════════════════════════════════════════════════════
   operatori-risorse-batteria.css — Sotto-sezione "Lavoratori del sociale"
   Prefisso: .op-batteria-*  (estende operatori.css + operatori-risorse.css)

   Pagine coinvolte:
     - operatori-risorse-batteria-sociale.html (indice)
     - operatori-risorse-batteria-{slug}.html (8 schede test)
   ════════════════════════════════════════════════════════════════════ */

/* ── Riga meta (acronimo + autori) sotto al titolo ─────────────────── */
.op-batteria-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 0.86rem;
  color: var(--color-text-muted, #6b5a55);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}

.op-batteria-meta-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-primary-soft, rgba(192, 68, 40, 0.08));
  color: var(--color-primary, #c04428);
}

.op-batteria-meta-sep {
  opacity: 0.4;
}

/* ── Callout sobrio (disclaimer / nota / coming-soon) ──────────────── */
.op-batteria-callout {
  max-width: 680px;
  margin: clamp(24px, 3vw, 36px) 0;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 26px);
  background: var(--color-bg-soft, #f8f6f1);
  border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
  border-left: 3px solid var(--color-primary, #c04428);
  border-radius: 8px;
}

.op-batteria-callout-title {
  font-family: var(--font-heading, 'Fraunces', serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.op-batteria-callout p {
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 0.9em;
  color: var(--color-text);
}

.op-batteria-callout p:last-child {
  margin-bottom: 0;
}

.op-batteria-callout a {
  color: var(--color-primary, #c04428);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Variante "nota" — bordo neutro, fondo lievissimo */
.op-batteria-callout--note {
  border-left-color: var(--color-text-muted, #6b5a55);
}

/* Variante "coming-soon" — sotto la scheda, più discreta */
.op-batteria-callout--soon {
  border-left-color: var(--color-text-muted, #6b5a55);
  background: transparent;
  border: 1px dashed var(--color-border, rgba(0, 0, 0, 0.12));
  border-left-width: 3px;
  border-left-style: solid;
}

/* ── Sezione "Ricercatori italiani" ─────────────────────────────────── */
.op-batteria-poli {
  margin: 1.4em 0 0;
}

.op-batteria-polo {
  margin: 0 0 1.6em;
}

.op-batteria-polo-titolo {
  font-family: var(--font-heading, 'Fraunces', serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5em;
  color: var(--color-text);
}

.op-batteria-polo-titolo em {
  color: var(--color-primary, #c04428);
  font-style: italic;
}

.op-batteria-ricercatore {
  margin: 0 0 0.9em;
}

.op-batteria-ricercatore strong {
  font-weight: 600;
}

/* ── Cross-link tra test correlati ─────────────────────────────────── */
.op-batteria-cross {
  max-width: 680px;
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: clamp(16px, 2vw, 22px);
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.op-batteria-cross-icon {
  font-family: var(--font-heading, 'Fraunces', serif);
  font-size: 1.4rem;
  color: var(--color-primary, #c04428);
  line-height: 1;
  flex-shrink: 0;
}

.op-batteria-cross-body {
  flex: 1;
  min-width: 200px;
}

.op-batteria-cross-title {
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--color-text);
}

.op-batteria-cross-desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}

.op-batteria-cross-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary, #c04428);
  text-decoration: none;
}

.op-batteria-cross-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Footer scheda (link di ritorno + share opzionale) ─────────────── */
.op-batteria-back {
  max-width: 680px;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 0.92rem;
}

.op-batteria-back-link {
  color: var(--color-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.op-batteria-back-link:hover {
  color: var(--color-primary, #c04428);
}

/* ════════════════════════════════════════════════════════════════════
   Indice della batteria — Lista test e raggruppamento per area
   ════════════════════════════════════════════════════════════════════ */

.op-batteria-intro {
  max-width: 720px;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 clamp(20px, 3vw, 32px);
}

.op-batteria-areas {
  margin: clamp(24px, 3.4vw, 36px) 0;
}

.op-batteria-area {
  margin: 0 0 clamp(28px, 4vw, 44px);
}

.op-batteria-area-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary, #c04428);
  margin: 0 0 6px;
}

.op-batteria-area-title {
  font-family: var(--font-heading, 'Fraunces', serif);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--color-text);
}

.op-batteria-area-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0 0 18px;
  max-width: 680px;
  line-height: 1.55;
}

.op-batteria-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.op-batteria-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  padding: clamp(18px, 2.2vw, 24px);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  min-height: 170px;
}

.op-batteria-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary, #c04428);
  box-shadow: 0 10px 24px rgba(192, 68, 40, 0.08);
}

.op-batteria-card:focus-visible {
  outline: 2px solid var(--color-primary, #c04428);
  outline-offset: 2px;
  transform: translateY(-2px);
}

.op-batteria-card-num {
  font-family: var(--font-heading, 'Fraunces', serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--color-primary, #c04428);
  margin: 0 0 4px;
}

.op-batteria-card-title {
  font-family: var(--font-heading, 'Fraunces', serif);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--color-text);
}

.op-batteria-card-acron {
  font-style: italic;
  color: var(--color-text-muted);
  font-weight: 400;
}

.op-batteria-card-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 14px;
  flex: 1;
}

.op-batteria-card-cta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary, #c04428);
  margin-top: auto;
}

/* Sotto-sezione PERMA-Profiler (alternativa) */
.op-batteria-alt {
  margin: clamp(36px, 5vw, 52px) 0 0;
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px dashed var(--color-border, rgba(0, 0, 0, 0.12));
}

.op-batteria-alt-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}

.op-batteria-alt .op-batteria-card {
  max-width: 540px;
}

/* ── Mobile (375px target) ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .op-batteria-callout,
  .op-batteria-cross,
  .op-batteria-back,
  .op-batteria-intro {
    max-width: 100%;
  }

  .op-batteria-list {
    grid-template-columns: 1fr;
  }
}

/* ── Dark mode ─────────────────────────────────────────────────────── */
[data-theme='dark'] .op-batteria-callout {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] .op-batteria-callout--soon {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme='dark'] .op-batteria-cross,
[data-theme='dark'] .op-batteria-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}