/* ============================================================
   raffaelescaglione.com — foglio di stile del Blog
   Elenco articoli, archivi di categoria e fascia titolo.
   I colori arrivano da rshm-tokens.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. FASCIA TITOLO
   Il colore di fondo e l'altezza sono impostazioni del tema
   (Personalizza > Blog). Qui aggiungiamo solo la sfumatura,
   che il pannello di Blocksy non permette di comporre.
   ------------------------------------------------------------ */

[data-prefix="blog"] .hero-section[data-type="type-2"],
[data-prefix="categories"] .hero-section[data-type="type-2"],
[data-prefix="single_page"] .hero-section[data-type="type-2"]{
  background-image:linear-gradient(180deg,
      var(--rs-green-900) 0%,
      #1E4028 100%) !important;
}

.hero-section .page-title{
  font-family:var(--rs-font);
  font-weight:800;
  letter-spacing:-.01em;
}

/* la riga di presentazione sotto il titolo */
.hero-section .page-description,
.hero-section .entry-header > p{
  color:var(--rs-on-dark-2);
  font-size:1rem;
  line-height:1.68;
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}

/* briciole di pane: leggibili sul verde bosco */
.hero-section .ct-breadcrumbs{color:var(--rs-on-dark-3)}
.hero-section .ct-breadcrumbs a{color:var(--rs-green-300)}
.hero-section .ct-breadcrumbs a:hover{color:var(--rs-on-dark)}

/* ------------------------------------------------------------
   2. ELENCO ARTICOLI
   Due colonne invece di tre: con titoli lunghi come i tuoi,
   tre colonne costringono a righe di tre o quattro parole.
   ------------------------------------------------------------ */

.entries[data-layout]{
  --grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:32px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:800px){
  .entries[data-layout]{
    --grid-template-columns:1fr;
    grid-template-columns:1fr;
    gap:24px;
  }
}

/* la scheda: stessa grammatica delle colonne della home */
.entries .entry-card{
  background:var(--rs-paper);
  border:1px solid var(--rs-line);
  border-radius:var(--rs-radius);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.entries .entry-card:hover{
  transform:translateY(-4px);
  border-color:var(--rs-green-300);
  box-shadow:0 14px 32px rgba(22,33,26,.12);
}

.entries .entry-card .ct-media-container{background:var(--rs-green-100)}

.entries .entry-card .entry-title{
  font-family:var(--rs-font);
  font-weight:700;
  line-height:1.35;
}
.entries .entry-card .entry-title a{color:var(--rs-ink)}
.entries .entry-card:hover .entry-title a{color:var(--rs-green-700)}
.entries .entry-card .entry-excerpt{
  color:var(--rs-ink-2);
  line-height:1.65;
}

/* ------------------------------------------------------------
   3. ETICHETTE DI CATEGORIA
   Verde, non terracotta: il terracotta e' riservato ai pulsanti
   che fanno partire un'azione, e un'etichetta non lo e'.
   ------------------------------------------------------------ */

.entry-meta [class*="ct-term-"]{
  background:var(--rs-green-100) !important;
  color:var(--rs-green-700) !important;
  font-weight:700;
  letter-spacing:.02em;
  border-radius:5px;
}
.entry-meta [class*="ct-term-"]:hover{
  background:var(--rs-green-300) !important;
  color:var(--rs-green-900) !important;
}

/* "Francais" segnala la lingua, non l'argomento: percio' e' un
   contorno invece di un pieno, e si distingue a colpo d'occhio
   dalle etichette di argomento. */
.entry-meta .ct-term-33{
  background:transparent !important;
  color:var(--rs-ink-3) !important;
  box-shadow:inset 0 0 0 1px var(--rs-line);
}
.entry-meta .ct-term-33:hover{
  background:transparent !important;
  color:var(--rs-green-700) !important;
  box-shadow:inset 0 0 0 1px var(--rs-green-300);
}

.entry-meta{color:var(--rs-ink-3)}

/* ------------------------------------------------------------
   4. ARTICOLO SINGOLO
   ------------------------------------------------------------ */

.single .entry-content a:not(.wp-block-button__link){
  color:var(--rs-green-700);
  text-decoration-color:var(--rs-green-300);
}
.single .entry-content a:hover{color:var(--rs-green-600)}

/* rispetta chi ha chiesto meno animazioni */
@media (prefers-reduced-motion:reduce){
  .entries .entry-card{transition:none}
  .entries .entry-card:hover{transform:none}
}

/* ------------------------------------------------------------
   4bis. FASCIA TITOLO DELLE PAGINE (Blocksy "Single Page")
   E' un'impostazione UNICA per tutte le pagine: Blocksy la tiene
   in Personalizza > Impostazioni Header > Single Page, non pagina
   per pagina. Il colore del titolo (bianco, --theme-palette-color-8)
   ha contrasto buono da solo sul fondo verde scuro; la sottotitolo
   invece eredita di default un grigio chiaro pensato per sfondi
   neutri, che sul nostro verde bosco (--rs-green-900) risulta poco
   leggibile. Qui lo alliniamo al tono gia' usato per i sottotitoli
   su fondo scuro altrove nel sito (l'occhiello dell'hero in home).
   Vale solo per le pagine (non tocca l'archivio del blog, che ha
   un altro fondale). ------------------------------------------ */
.page.wp-singular .page-description p{
  color:var(--rs-on-dark-2) !important;
}

/* ------------------------------------------------------------
   5. PAGINE DI APPROFONDIMENTO
   L'illustrazione grande in testa alla pagina, accanto al testo
   di apertura: e' la composizione che avevano nella prima
   versione della home, quella per cui sono state disegnate.
   Qui hanno lo spazio per funzionare davvero.
   ------------------------------------------------------------ */

.rshm-page-intro{
  display:grid;
  grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:44px;
  align-items:center;
  margin:0 0 44px;
  padding:0 0 40px;
  border-bottom:1px solid var(--rs-line);
}

.rshm-page-fig{
  margin:0 !important;
  padding:28px;
  background:var(--rs-green-050);
  border:1px solid var(--rs-line);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rshm-page-fig img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}

.rshm-page-intro-text > *:first-child{margin-top:0}

/* la prima riga era il sottotitolo in corsivo: diventa un occhiello */
.rshm-page-intro-text > p:first-child{
  color:var(--rs-green-700);
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 10px;
}
.rshm-page-intro-text > p:first-child em{font-style:normal}

.rshm-page-intro-text h2{
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.01em;
  margin:0 0 16px;
  color:var(--rs-ink);
}
.rshm-page-intro-text p{
  color:var(--rs-ink-2);
  font-size:1.0625rem;
  line-height:1.68;
}

@media (max-width:820px){
  .rshm-page-intro{
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:32px;
    margin-bottom:32px;
  }
  .rshm-page-fig{padding:20px}
}