/* ═══════════════════════════════════════════════════════════
   BLOG — archivio, articolo singolo, ricerca, 404
   .ec-prose stilizza tutto ciò che il block editor può produrre.
   ═══════════════════════════════════════════════════════════ */

/* ═══════ ARCHIVIO ═══════ */

.ec-blog-archivio {
  padding: clamp(30px, 5vw, 50px) var(--ec-gutter) clamp(40px, 6vw, 60px);
  background: var(--ec-bianco);
}

/* auto-fit: 3 → 2 → 1 colonne senza breakpoint da mantenere */
.ec-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(20px, 3vw, 30px);
  max-width: var(--ec-larga);
  margin: 0 auto;
}

/* position: relative perché il link del titolo si allarga sopra tutta
   la card (vedi .ec-card-titolo a::after): così è cliccabile ovunque,
   "Leggi" compreso, ma il link resta uno solo. Tre link identici sulla
   stessa card verrebbero letti tre volte da uno screen reader. */
.ec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ec-bianco);
  border: 1px solid var(--ec-bordo);
  border-radius: var(--ec-raggio);
  overflow: hidden;
  transition: box-shadow var(--ec-transizione), transform var(--ec-transizione);
}

.ec-card:hover,
.ec-card:focus-within {
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.ec-card:hover .ec-card-leggi,
.ec-card:focus-within .ec-card-leggi {
  color: var(--ec-teal);
  border-bottom-color: var(--ec-teal);
}

/* Il contorno di focus va sulla card, non sul solo titolo */
.ec-card:focus-within { outline: 2px solid var(--ec-oro); outline-offset: 3px; }
.ec-card-titolo a:focus-visible { outline: none; }

/* aspect-ratio fisso: le card restano allineate anche con immagini
   di proporzioni diverse caricate dalla copy */
.ec-card-img {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--ec-beige);
  overflow: hidden;
}

.ec-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ec-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.ec-card-data {
  margin-bottom: 8px;
  color: var(--ec-testo-chiaro);
  font-size: 0.8125rem;
}

.ec-card-titolo {
  margin-bottom: 10px;
  font-family: var(--ec-serif);
  font-size: 1.1875rem;
  line-height: 1.35;
}

.ec-card-titolo a {
  color: var(--ec-teal);
  text-decoration: none;
}

.ec-card-titolo a:hover,
.ec-card-titolo a:focus-visible { text-decoration: underline; }

.ec-card-estratto {
  flex: 1;
  margin-bottom: 16px;
  color: var(--ec-testo-med);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* Il riquadro invisibile che rende cliccabile tutta la card */
.ec-card-titolo a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ec-card-leggi {
  align-self: flex-start;
  transition: color var(--ec-transizione), border-color var(--ec-transizione);
  padding-bottom: 2px;
  border-bottom: 2px solid var(--ec-oro);
  color: var(--ec-oro-scuro);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* ═══════ PAGINAZIONE ═══════ */

.ec-paginazione {
  max-width: var(--ec-larga);
  margin: clamp(30px, 5vw, 50px) auto 0;
}

.ec-paginazione .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ec-paginazione .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ec-tocco);
  min-height: var(--ec-tocco);
  padding: 0 12px;
  border: 1px solid var(--ec-bordo);
  border-radius: 4px;
  color: var(--ec-teal);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color var(--ec-transizione), background var(--ec-transizione);
}

.ec-paginazione a.page-numbers:hover,
.ec-paginazione a.page-numbers:focus-visible { border-color: var(--ec-oro); }

.ec-paginazione .page-numbers.current {
  background: var(--ec-oro);
  border-color: var(--ec-oro);
  color: var(--ec-bianco);
  font-weight: 700;
}

.ec-paginazione .page-numbers.dots {
  border-color: transparent;
  color: var(--ec-testo-chiaro);
}


/* ═══════ HERO ARTICOLO / RICERCA / 404 ═══════ */

.ec-post-hero {
  padding: clamp(40px, 7vw, 60px) var(--ec-gutter);
  background: var(--ec-teal);
  text-align: center;
}

.ec-post-hero-pretitle {
  margin-bottom: 12px;
  color: var(--ec-oro);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.ec-post-hero h1 {
  max-width: 24ch;
  margin: 0 auto 10px;
  font-family: var(--ec-serif);
  font-size: clamp(1.625rem, 4.5vw, 2.375rem);
  font-style: italic;
  line-height: 1.25;
  color: var(--ec-bianco);
}

.ec-post-meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9375rem;
}


/* ═══════ ARTICOLO ═══════ */

.ec-post {
  padding: clamp(30px, 5vw, 50px) var(--ec-gutter);
}

/* L'immagine in evidenza non compare più nell'articolo: serve solo
   come copertina nelle card dell'archivio. Le immagini dentro il testo
   le mette la copy dal block editor, e le stila .ec-prose. */


/* ═══════ .ec-prose — output del block editor ═══════ */

.ec-prose {
  max-width: var(--ec-colonna-testo);
  margin: 0 auto;
  font-size: clamp(1rem, 2vw, 1.0625rem);
  line-height: 1.8;
  color: var(--ec-testo-med);
}

.ec-prose > *:first-child { margin-top: 0; }

.ec-prose p { margin: 0 0 1.125em; }

.ec-prose h2,
.ec-prose h3,
.ec-prose h4 {
  font-family: var(--ec-serif);
  color: var(--ec-teal);
  line-height: 1.3;
}

.ec-prose h2 {
  position: relative;
  margin: 2.2em 0 0.6em;
  padding-top: 18px;
  font-size: clamp(1.5rem, 4vw, 1.875rem);
}

/* Filetto oro sopra ogni sezione: lo stesso .ec-sep del resto del sito */
.ec-prose h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--ec-oro);
}

/* L'h3 scende e va in corsivo: così si vede a colpo d'occhio che sta
   dentro l'h2 e non allo stesso livello. */
.ec-prose h3 {
  margin: 1.7em 0 0.5em;
  font-size: clamp(1.0625rem, 2.6vw, 1.1875rem);
  font-style: italic;
}
.ec-prose h4 { margin: 1.5em 0 0.5em; font-size: 1.125rem; }

/* Primo paragrafo come occhiello, senza che la copy debba fare niente */
.ec-prose > p:first-of-type {
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
  line-height: 1.75;
  color: var(--ec-testo);
}

.ec-prose strong,
.ec-prose b { color: var(--ec-testo); font-weight: 700; }

.ec-prose em,
.ec-prose i { font-style: italic; }

/* I link nel testo li governa .ec-link-testo in main.css */

.ec-prose ul,
.ec-prose ol { margin: 0 0 1.125em; padding-left: 1.4em; }

.ec-prose ul { list-style: none; padding-left: 1.2em; }

.ec-prose ul li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.1em;
}

.ec-prose ul li::before {
  content: '';
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--ec-oro);
  border-radius: 50%;
}

.ec-prose ol li { margin-bottom: 0.5em; padding-left: 0.2em; }

.ec-prose ol li::marker { color: var(--ec-oro-scuro); font-weight: 700; }

.ec-prose blockquote {
  margin: 2em 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--ec-oro);
  font-family: var(--ec-serif);
  font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--ec-teal);
}

.ec-prose blockquote p:last-child { margin-bottom: 0; }

.ec-prose blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--ec-sans);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--ec-testo-chiaro);
}

.ec-prose img,
.ec-prose figure img { border-radius: var(--ec-raggio); }

.ec-prose figure { margin: 2em 0; }

.ec-prose figcaption {
  margin-top: 10px;
  color: var(--ec-testo-chiaro);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

.ec-prose hr {
  width: 60px;
  height: 2px;
  margin: 2.5em auto;
  border: 0;
  background: var(--ec-oro);
}

.ec-prose code {
  padding: 2px 6px;
  background: var(--ec-beige);
  border-radius: 3px;
  font-size: 0.875em;
}

/* Le tabelle scrollano invece di sfondare la colonna su mobile */
.ec-prose .wp-block-table,
.ec-prose figure.wp-block-table { overflow-x: auto; }

.ec-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.ec-prose th,
.ec-prose td {
  padding: 10px 14px;
  border: 1px solid var(--ec-bordo);
  text-align: left;
}

.ec-prose th { background: var(--ec-beige); color: var(--ec-testo); font-weight: 600; }

.ec-prose .wp-block-embed iframe { max-width: 100%; }


/* ═══════ NAVIGAZIONE TRA ARTICOLI ═══════ */

.ec-post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  max-width: var(--ec-larga);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 50px) var(--ec-gutter);
}

.ec-post-nav-link {
  display: block;
  padding: 20px 24px;
  background: var(--ec-card);
  border: 1px solid var(--ec-bordo);
  border-radius: var(--ec-raggio);
  text-decoration: none;
  transition: border-color var(--ec-transizione);
}

.ec-post-nav-link:hover,
.ec-post-nav-link:focus-visible { border-color: var(--ec-oro); }

.ec-post-nav-next { text-align: right; }

.ec-post-nav-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ec-testo-chiaro);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ec-post-nav-titolo {
  display: block;
  font-family: var(--ec-serif);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ec-teal);
}


/* ═══════ RICERCA ═══════ */

.ec-ricerca-form {
  max-width: 480px;
  margin: 0 auto clamp(30px, 5vw, 40px);
}