/* Stili dei widget "numeri della rivista" — definiti dagli shortcode nel
   functions.php del child theme. Pensati per Elementor: vivono dentro le
   pagine costruite con Elementor; il selector usa la classe `.ldf-` come
   prefisso per non collidere coi widget esistenti del tema/page builder.
   Allineati al mockup approvato (vedi assets/brand/sito-mockup/) e al
   linguaggio della newsletter Pagine di Fantasia. */

.ldf {
  font-family: 'EB Garamond', Garamond, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.6;
  color: #333;
  max-width: 980px;
  margin: 0 auto;
}
.ldf, .ldf * { box-sizing: border-box; }
.ldf a { color: inherit; text-decoration: none; }
.ldf a:hover { color: #5474A0; }

/* ----- box "titolo di sezione" ----- */
.ldf-titolo-section {
  background: #333;
  color: #fff;
  padding: 22px 34px;
}
.ldf-titolo-section .ts-occhiello {
  color: #ddd;
  font-size: 14px;
  font-style: italic;
  margin: 0 0 6px 0;
}
.ldf-titolo-section .ts-titolo {
  color: #fff;
  font-size: 28px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.15;
  margin: 0;
}
.ldf-titolo-section .ts-titolo .accento { color: #5474A0; }
.ldf-titolo-section .ts-info {
  color: #ddd;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 8px 0 0 0;
}

.ldf-pad { padding: 28px 34px; background: #fff; }

/* ----- HERO numero corrente (home) ----- */
.ldf-hero { display: grid; grid-template-columns: 320px 1fr; gap: 34px; align-items: start; }
.ldf-hero .cover img { width: 100%; border: 1px solid #ddd; }
.ldf-hero .meta .data { font-style: italic; color: #888; margin: 0 0 18px 0; }
.ldf-hero .meta .breve { margin: 0 0 6px 0; font-size: 15px; color: #888;
  text-transform: uppercase; letter-spacing: 0.1em; }
.ldf-hero .meta .breve-titolo { font-size: 22px; font-style: italic; margin: 0 0 4px 0; }
.ldf-hero .meta .breve-autore { color: #888; font-style: italic; margin: 0 0 22px 0; }
.ldf-hero .meta .cta a {
  display: inline-block; padding: 12px 22px; border: 1px solid #000;
  font-variant: small-caps; letter-spacing: 0.08em; font-size: 16px;
  transition: background .2s, color .2s;
}
.ldf-hero .meta .cta a:hover { background: #000; color: #fff; }

/* ----- indice del numero ----- */
.ldf-indice ul { list-style: none; margin: 0; padding: 0; }
.ldf-indice li { padding: 12px 0; border-bottom: 1px dotted #ddd; }
.ldf-indice li:last-child { border-bottom: none; }
.ldf-indice .tipo {
  display: inline-block; min-width: 110px;
  color: #888; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.ldf-indice .autore-teaser { color: #333; font-style: italic; }
.ldf-indice .puntata-info { color: #888; font-size: 13px; font-style: italic; margin-left: 4px; }

/* ----- griglia numeri ----- */
.ldf-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 36px 24px; padding: 32px 34px 40px 34px; background: #fff;
}
.ldf-card { display: block; text-align: center; }
.ldf-card .cover {
  position: relative; margin-bottom: 12px; background: #ddd;
  aspect-ratio: 1 / 1; border: 1px solid #ddd; overflow: hidden;
}
.ldf-card .cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease, opacity .25s;
}
.ldf-card:hover .cover img { transform: scale(1.04); opacity: .92; }
.ldf-card .numero {
  font-size: 20px; font-variant: small-caps;
  letter-spacing: 0.06em; color: #000; line-height: 1.1;
}
.ldf-card .numero .accento { color: #5474A0; }
.ldf-card .data { font-size: 13px; color: #888; font-style: italic; margin-top: 2px; }
.ldf-card .titolo-breve {
  margin-top: 8px; font-size: 15px; font-style: italic; color: #333;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ldf-card.hidden { display: none; }

/* ----- filtro anno ----- */
.ldf-anni-filter {
  background: #fff; padding: 18px 34px;
  border-bottom: 1px dotted #ddd; text-align: center;
}
.ldf-anni-filter .label {
  display: inline-block; font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: #888; margin-right: 10px;
}
.ldf-anni-filter a {
  display: inline-block; margin: 0 4px; padding: 4px 12px;
  border: 1px solid transparent; font-variant: small-caps;
  letter-spacing: 0.06em; font-size: 15px; cursor: pointer;
}
.ldf-anni-filter a.attivo { border-color: #5474A0; color: #5474A0; }
.ldf-anni-filter a:hover { border-color: #888; }

/* ----- "vedi tutti" ----- */
.ldf-vedi-tutti { text-align: center; padding: 4px 0 36px 0; }
.ldf-vedi-tutti a {
  border-bottom: 1px solid #000; padding-bottom: 2px;
  letter-spacing: 0.08em; font-variant: small-caps; font-size: 15px;
}

/* ----- responsive ----- */
@media (max-width: 720px) {
  .ldf { font-size: 16px; }
  .ldf-hero { grid-template-columns: 1fr; gap: 22px; }
  .ldf-hero .cover { max-width: 280px; margin: 0 auto; }
  .ldf-titolo-section { padding: 18px 22px; }
  .ldf-titolo-section .ts-titolo { font-size: 22px; }
  .ldf-pad { padding: 22px 22px; }
  .ldf-grid { padding: 26px 22px 32px 22px; gap: 28px 16px; }
  .ldf-anni-filter { padding: 14px 22px; }
  .ldf-indice .tipo { display: block; min-width: 0; margin-bottom: 2px; }
}