/* Ricette — archivio, categoria e scheda.
   Si carica su archive-ricette.php, taxonomy-categoria_ricetta.php e
   single-ricette.php (vedi l'enqueue in functions.php). */

/* ---- Archivio ---- */
.rc-intro {
  background: var(--bg-alt); padding: 76px 40px;
  display: flex; flex-direction: column; gap: 18px;
}
.rc-intro h1 { font-size: 56px; line-height: 1.06; }
.rc-intro .lead { font-size: 18px; max-width: 700px; }

/* L'accordion dei filtri. Su desktop non esiste: la linguetta è nascosta e le
   pillole stanno dove sono sempre state. Il `<details>` arriva già `open` dal
   template, quindi qui non c'è niente da forzare. */
.rc-filtri-toggle { display: none; }
.rc-filtri { padding: 40px 40px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.rc-filtro {
  padding: 10px 18px; font-size: 14px;
  border: 1px solid var(--border); color: var(--ink-soft);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.rc-filtro:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.rc-filtro.attivo {
  background: var(--accent); border-color: var(--accent);
  color: var(--bg); font-weight: 700;
}

.rc-grid {
  padding: 34px 40px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.rc-card a { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.rc-card a:hover { text-decoration: none; }
.rc-card a:hover .card-titolo { color: var(--accent); }
.rc-img { width: 100%; height: 250px; object-fit: cover; }

.rc-vuoto { padding: 60px 40px 80px; color: var(--ink-soft); }

/* La paginazione sta in sv-base.css: la stampa anche l'archivio del blog, dove
   questo foglio non si carica — e li' usciva come numerini nudi. */
.rc-paginazione { padding: 0 40px 80px; }

/* ---- Scheda ricetta ----
   Le briciole e la fascia newsletter stanno in sv-base.css (`.sv-briciole`,
   `.sv-newsletter`): le usa anche l'articolo del blog, dove questo foglio non
   si carica. */
.rs-testata-split {
  padding: 24px 40px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.rs-testata-testo { display: flex; flex-direction: column; gap: 16px; }
.rs-testata-testo h1 { font-size: 48px; line-height: 1.08; }
.rs-foto { width: 100%; height: 460px; object-fit: cover; }

.rs-meta {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.rs-meta li { display: flex; flex-direction: column; gap: 2px; }
.rs-meta-etichetta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.rs-meta-valore { font-size: 16px; color: var(--ink); }

.rs-corpo-split {
  padding: 64px 40px 0;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start;
}
.rs-colonna { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
/* ⚠️ `padding: 0` annulla i 96px verticali che sv-base.css da' a ogni
   <section>. Qui i <section> non sono fasce di pagina ma blocchi dentro una
   griglia: si prendevano 96px sopra e sotto ciascuno, e fra l'ultimo passo del
   procedimento e la nota finale restava un buco di quasi trecento pixel che
   nel CSS di questa pagina non era scritto da nessuna parte. Lo stacco fra i
   blocchi lo da' il `gap` della colonna. */
.rs-sezione { padding: 0; }
.rs-sezione h2 { font-size: 30px; margin-bottom: 18px; }

.rs-ingredienti ul, .rs-alternative ul { display: flex; flex-direction: column; gap: 10px; }
.rs-ingredienti li, .rs-alternative li {
  font-size: 16px; line-height: 1.6; color: var(--ink-soft);
  padding: 10px 0 10px 18px; position: relative;
  border-bottom: 1px solid var(--border-soft);
}
.rs-ingredienti li::before, .rs-alternative li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 5px; height: 5px; background: var(--accent);
}
.rs-alternative { background: var(--bg-alt); padding: 28px; }
.rs-alternative li { border-bottom: 0; padding: 6px 0 6px 18px; }
.rs-alternative li::before { top: 15px; }

.rs-passi { display: flex; flex-direction: column; }
.rs-passi li {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 22px 0; border-top: 1px solid var(--border);
}
.rs-passi li:last-child { border-bottom: 1px solid var(--border); }
.rs-passo-n { font-family: var(--font-serif); font-size: 30px; color: var(--accent); font-weight: 300; }
.rs-passo-corpo { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.rs-passo-corpo p { margin: 0 0 10px; }
.rs-passo-foto { width: 100%; max-height: 320px; object-fit: cover; }

.rs-testo { font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.rs-testo p { margin: 0 0 16px; }

.rs-nota-split {
  margin: 56px 40px 0; padding: 28px;
  background: var(--bg-alt);
  display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start;
}
/* Il logo e' un marchio orizzontale, non un ritratto: dentro un cerchio da
   64px resterebbe una miniatura illeggibile. Come `.ar-avatar` sull'articolo,
   si mostra intero. Il formato e' `medium` perche' `thumbnail` e' un ritaglio
   quadrato: del marchio terrebbe solo le lettere centrali. */
.rs-avatar { width: auto; height: 34px; object-fit: contain; }
.rs-nota-split p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.rs-nota-split .eyebrow { margin-bottom: 8px; }

/* La fascia newsletter sopra porta gia' i suoi 56px di margine: i 96px di
   <section> ne aggiungevano altrettanti e il titolo restava staccato. */
.rs-correlate { padding: 24px 0 40px; }
.rs-correlate h2 { font-size: 34px; padding: 0 40px; }

/* ===== "Salva la ricetta" =====
   Lo stampa il plugin sv-prenotazioni dentro la testata della scheda, ma il
   vestito sta qui: e' l'unico punto del sito dove compare, e `area.css` su una
   scheda ricetta non si carica. */
.svp-salva-form { display: block; margin-top: 4px; }
.svp-salva-ricetta {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong); background: transparent;
  padding: 10px 16px; font-family: inherit; font-size: 14px; color: var(--ink);
  border-radius: var(--radius-s); cursor: pointer;
}
.svp-salva-ricetta::before { content: "\2661"; font-size: 16px; line-height: 1; color: var(--accent); }
.svp-salva-ricetta:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.svp-salva-ricetta.salvata { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.svp-salva-ricetta.salvata::before { content: "\2665"; color: var(--bg); }