/* ==========================================================================
   CISL SIENA — CARD NOTIZIE (componente condiviso)
   File: wp-content/mu-plugins/cisl-siena/assets/css/cisl-cards.css
   Usato da: home (sezione News), archivio /news/, pagina singola (correlate).
   Markup prodotto da cisl_news_card() in inc/news.php.
   ========================================================================== */

.cisl-magazine__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cisl-sp-4);
}

.cisl-post {
  border-radius: var(--cisl-r-lg);
  overflow: hidden;
  background: var(--cisl-bg);
  border: 1px solid var(--cisl-line);
  transition: transform 0.35s var(--cisl-ease), box-shadow 0.35s var(--cisl-ease);
}
.cisl-post:hover { transform: translateY(-6px); box-shadow: var(--cisl-shadow-md); }

.cisl-post__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--cisl-ink);
}
.cisl-post__link:focus-visible { outline: 3px solid var(--cisl-red); outline-offset: -3px; }

.cisl-post__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cisl-green-soft);
}
.cisl-post__media img,
.cisl-post__ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--cisl-ease);
}
.cisl-post:hover .cisl-post__media img { transform: scale(1.05); }

.cisl-post__body {
  display: flex;
  flex-direction: column;
  gap: var(--cisl-sp-3);
  padding: clamp(18px, 2vw, 26px);
  flex: 1 1 auto;
}

.cisl-post__meta {
  display: flex;
  align-items: center;
  gap: var(--cisl-sp-3);
  font-size: var(--cisl-fs-xs);
  color: var(--cisl-muted);
  font-weight: 600;
}

.cisl-post__title {
  font-size: var(--cisl-fs-lg);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.015em;
}

.cisl-post__excerpt {
  font-size: var(--cisl-fs-sm);
  line-height: 1.6;
  color: var(--cisl-ink-2);
}

.cisl-post__more {
  margin-top: auto;
  padding-top: var(--cisl-sp-3);
  font-size: var(--cisl-fs-xs);
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cisl-green);
}

.cisl-post--lead {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--cisl-green-deep);
  border-color: var(--cisl-green-deep);
}
.cisl-post--lead .cisl-post__link { color: var(--cisl-white); }
.cisl-post--lead .cisl-post__media { aspect-ratio: 16 / 9; }
.cisl-post--lead .cisl-post__excerpt,
.cisl-post--lead .cisl-post__meta { color: rgba(255, 255, 255, 0.78); }
.cisl-post--lead .cisl-post__title { font-size: var(--cisl-fs-h3); }
.cisl-post--lead .cisl-post__more { color: var(--cisl-white); }
.cisl-post--lead .cisl-tag { background: var(--cisl-red); color: var(--cisl-white); }

.cisl-magazine__empty {
  padding: var(--cisl-sp-6);
  border: 1px dashed var(--cisl-line);
  border-radius: var(--cisl-r-md);
  color: var(--cisl-muted);
  text-align: center;
}

@media (max-width: 980px) {
  .cisl-magazine__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cisl-post--lead { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 640px) {
  .cisl-magazine__grid { grid-template-columns: 1fr; }
  .cisl-post--lead { grid-column: span 1; }
}

/* Variante griglia uniforme (archivio): niente card "lead" grande */
.cisl-magazine__grid--even .cisl-post--lead {
  grid-column: auto;
  grid-row: auto;
}

/* Data evento sopra l'immagine */
.cisl-post__media { position: relative; }
.cisl-post__date {
  position: absolute;
  top: var(--cisl-sp-4);
  left: var(--cisl-sp-4);
  display: grid;
  place-items: center;
  min-width: 58px;
  padding: 8px 10px;
  border-radius: var(--cisl-r-sm);
  background: var(--cisl-white);
  color: var(--cisl-ink);
  box-shadow: var(--cisl-shadow-sm);
  line-height: 1;
  text-align: center;
}
.cisl-post__date strong { font-size: 1.45rem; font-weight: 900; color: var(--cisl-red); }
.cisl-post__date span { margin-top: 4px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.cisl-post__date--past { opacity: 0.75; }

/* Segnaposto senza immagine: bandierina CISL */
.cisl-post__ph {
  background:
    linear-gradient(90deg, var(--cisl-green) 0 33.3%, var(--cisl-white) 33.3% 66.6%, var(--cisl-red) 66.6%) center / 64px 40px no-repeat,
    var(--cisl-green-soft);
}

/* ==========================================================================
   PIÙ FOTO NELLO STESSO RIQUADRO (.cisl-fade) — v1.9.0
   Markup di cisl_news_fade() in inc/news.php: <span class="cisl-fade cisl-fade--N">
   con N immagini, ciascuna con --cisl-fade-i (0, 1, 2…).
   La prima foto resta sempre sotto; le altre le passano sopra a turno in
   dissolvenza. Solo CSS: funziona senza JavaScript e nell'anteprima della
   Redazione. Ogni foto resta --cisl-fade-step secondi (4 s, come
   cisl_news_fade_step() in PHP: se cambi uno, cambia anche l'altro).
   ========================================================================== */
.cisl-fade {
  --cisl-fade-step: 4s;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cisl-fade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cisl-fade img + img {
  opacity: 0;
  animation: cisl-fade-2 calc(var(--cisl-fade-step) * 2) linear infinite backwards;
  animation-delay: calc(var(--cisl-fade-step) * var(--cisl-fade-i, 1));
}
.cisl-fade--3 img + img { animation-name: cisl-fade-3; animation-duration: calc(var(--cisl-fade-step) * 3); }
.cisl-fade--4 img + img { animation-name: cisl-fade-4; animation-duration: calc(var(--cisl-fade-step) * 4); }
.cisl-fade--5 img + img { animation-name: cisl-fade-5; animation-duration: calc(var(--cisl-fade-step) * 5); }
.cisl-fade--6 img + img { animation-name: cisl-fade-6; animation-duration: calc(var(--cisl-fade-step) * 6); }

/* Una foto: entra in dissolvenza, resta per il suo turno, esce quando la
   successiva è già sopra (così non si vede mai il fondo). */
@keyframes cisl-fade-2 { 0% { opacity: 0; } 10% { opacity: 1; } 60% { opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
@keyframes cisl-fade-3 { 0% { opacity: 0; } 6.667% { opacity: 1; } 40% { opacity: 1; } 46.667% { opacity: 0; } 100% { opacity: 0; } }
@keyframes cisl-fade-4 { 0% { opacity: 0; } 5% { opacity: 1; } 30% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } }
@keyframes cisl-fade-5 { 0% { opacity: 0; } 4% { opacity: 1; } 24% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
@keyframes cisl-fade-6 { 0% { opacity: 0; } 3.333% { opacity: 1; } 20% { opacity: 1; } 23.333% { opacity: 0; } 100% { opacity: 0; } }

/* Chi ha chiesto "riduci movimento" vede solo la prima foto. */
@media (prefers-reduced-motion: reduce) {
  .cisl-fade img + img { animation: none; }
}

/* Righe con icona: data e luogo di un evento (primo piano e scheda larga). */
.cisl-facts {
  display: grid;
  gap: var(--cisl-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cisl-fs-sm);
  font-weight: 700;
  line-height: 1.4;
}
.cisl-facts li { display: flex; align-items: flex-start; gap: var(--cisl-sp-2); }
.cisl-facts .cisl-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--cisl-red); }
.cisl-facts .cisl-icon svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   SCHEDA LARGA (.cisl-feature) — v1.9.0
   La prima notizia della pagina iniziale, se ha più foto: a sinistra
   tipologia, titolo, riassunto, data e luogo; a destra le foto che si
   alternano. Markup di cisl_news_feature() in inc/news.php.
   ========================================================================== */
.cisl-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  margin-bottom: var(--cisl-sp-4);
  border-radius: var(--cisl-r-lg);
  overflow: hidden;
  background: var(--cisl-green-deep);
  color: var(--cisl-white);
}
.cisl-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--cisl-sp-4);
  padding: clamp(24px, 4vw, 56px);
}
.cisl-feature__meta,
.cisl-feature__lead,
.cisl-feature__title { margin: 0; }
.cisl-feature .cisl-tag { background: var(--cisl-red); color: var(--cisl-white); }
.cisl-feature__title {
  font-size: var(--cisl-fs-h3);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.cisl-feature__title a { color: inherit; text-decoration: none; }
.cisl-feature__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cisl-feature__title a:focus-visible { outline: 3px solid var(--cisl-white); outline-offset: 4px; border-radius: 4px; }
.cisl-feature__lead { font-size: var(--cisl-fs-base); line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.cisl-feature__facts .cisl-icon { color: var(--cisl-white); }
.cisl-feature__cta { margin: var(--cisl-sp-2) 0 0; }
.cisl-feature__media {
  position: relative;
  display: block;
  min-height: 360px;
  background: var(--cisl-green-dark);
}
.cisl-feature__media > img,
.cisl-feature__media > .cisl-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .cisl-feature { grid-template-columns: 1fr; }
  .cisl-feature__media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   LOCANDINE (.cisl-posters) — v1.10.0
   Notizie fatte di immagini con il testo dentro. Markup di cisl_news_posters():
   la prima locandina fissa a sinistra, le altre che si alternano a destra,
   intere (il riquadro ha la forma della prima immagine). Sul telefono un solo
   riquadro in cui passano tutte. Tempo più lungo (6 s): c'è da leggere.
   ========================================================================== */
.cisl-fade--slow { --cisl-fade-step: 6s; }
/* Chi sta leggendo una locandina ferma l'alternanza tenendo il mouse sopra.
   Solo le locandine: le foto normali continuano a girare (nella pagina della
   notizia il mouse è quasi sempre sopra la foto e sembrava bloccata). */
.cisl-fade--slow:hover img { animation-play-state: paused; }

.cisl-posters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cisl-sp-4);
}
.cisl-posters > span {
  display: block;
  aspect-ratio: var(--cisl-poster-ratio, 4 / 5);
  border-radius: var(--cisl-r-lg);
  overflow: hidden;
  background: var(--cisl-green-soft);
  box-shadow: var(--cisl-shadow-md);
}
.cisl-posters img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cisl-posters .cisl-posters__solo { display: none; }

@media (max-width: 700px) {
  .cisl-posters { grid-template-columns: 1fr; }
  .cisl-posters .cisl-posters__cover,
  .cisl-posters .cisl-posters__turn { display: none; }
  .cisl-posters .cisl-posters__solo { display: block; }
}

/* Una sola locandina: intera, al centro, alta al massimo 520 px
   (--cisl-poster-n = larghezza / altezza, scritto da cisl_news_posters()). */
.cisl-posters--one {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, calc(520px * var(--cisl-poster-n, 0.8)));
  margin-inline: auto;
}
@media (max-width: 700px) {
  .cisl-posters--one .cisl-posters__cover { display: block; }
}
/* Nelle schede piccole (anteprime) anche le locandine riempiono tutta la
   larghezza del riquadro, partendo dall'alto, dove di solito c'è il titolo
   (richiesta di Alessandro, 2026-11-03: vale per tutte le anteprime). */
.cisl-post--poster .cisl-post__media img { object-fit: cover; object-position: center top; }

/* Scheda larga con le locandine: immagini al centro, sotto una riga con
   tipologia, titolo e pulsante. */
.cisl-feature--poster {
  display: block;
  padding: clamp(20px, 3vw, 40px);
}
.cisl-feature__posters {
  display: block;
  max-width: 820px;
  margin-inline: auto;
}
.cisl-feature__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cisl-sp-5);
  max-width: 820px;
  margin: var(--cisl-sp-5) auto 0;
}
.cisl-feature__bar > div { display: grid; gap: var(--cisl-sp-3); }
.cisl-feature--poster .cisl-feature__cta { margin: 0; flex: 0 0 auto; }

@media (max-width: 700px) {
  .cisl-feature__bar { flex-direction: column; align-items: flex-start; }
}