/*
 * Plugin „Blog" — Frontend (Übersicht via ShortCode und
 * Detailseite /{base_path}/{slug}). Nutzt die Design-Tokens des Themes
 * (style.css) und dessen Namenskonvention: kurze Block-Klassen mit einfachen
 * Kind-Selektoren (wie .event .place / .event .time im Theme), KEIN BEM-__.
 * Wird über die head-Region auf dem Template „blogbeitrag" geladen; die
 * Übersicht wird zusätzlich in Seiten eingebettet, die dieses Template nicht
 * tragen — die Kachel-Optik nutzt daher ausschließlich Tokens.
 */

/* ==================== Übersicht (ShortCode) ==================== */

/* Die Übersicht wird in .page-content eingebettet — dessen Theme-Regeln
   (page.css) treffen sonst unsere Karten-Bilder/Überschriften: img bekommt
   dort margin:1.2em + box-shadow (→ Lücke/Halo über dem Bild) und h3 ein
   margin:1.6em. Diese Regeln hier gezielt für die Übersicht neutralisieren
   (blog.css lädt nach page.css). */
.blog-overview img {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.blog-overview h3 { margin: 0; }
.blog-overview a { text-decoration: none; }

/* ----- Kategorie-Filter ----- */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(1.4rem, 1rem + 2vw, 2.2rem);
}
.blog-filter .item {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-mid);
  background: #fff;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.blog-filter .item:hover {
  color: var(--blue);
  border-color: var(--blue);
}
.blog-filter .item.is-active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

/* ----- Karten-Raster (Blog-Optik, Tokens wie .event im Theme) ----- */
/* Responsiv füllend: so viele Spalten wie passen (Mindestbreite ~300px).
   Breite Screens zeigen 3–4, mittlere 2, mobil 1 — ohne feste Spaltenzahl,
   sodass die Zeile immer sauber gefüllt wirkt, egal wie viele Einträge. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 1rem + 1vw, 26px);
}

.blog-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.18s;
}
.blog-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}
.blog-card .card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.blog-card .media {
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  overflow: hidden;
}
.blog-card .media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.blog-card:hover .media img { transform: scale(1.04); }

.blog-card .body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
}
/* Kopfzeile der Kachel: Datum (blau, versal) und die geschätzte Lesezeit
   (gedämpft, mit Uhr-Symbol) — der Kontrast hält die Rangfolge lesbar, ohne
   dass ein Trennzeichen nötig wäre. */
.blog-card .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 12px;
}
.blog-card .date {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}
/* Ans rechte Kachelende gerückt, damit die Lesezeit nicht am Datum klebt.
   In der Flex-Zeile wirkt float nicht — margin-left:auto schiebt das Element
   an den freien Rand und leistet genau das (wie bei .blog-audio oben). */
.blog-card .reading {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-mid);
}
.blog-card .reading svg { width: 14px; height: 14px; flex: none; }
.blog-card h3 {
  margin: 0;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.24rem;
  line-height: 1.25;
  color: var(--blue-ink);
  overflow-wrap: break-word;
  hyphens: auto;
}
.blog-card .teaser {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-mid);
}
.blog-card .more {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  color: var(--blue);
}

.blog-empty {
  padding: 22px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-mid);
  font-size: 1.02rem;
  margin: 0;
}

/* ----- Pagination ----- */
/* „Zurück/Weiter" plus anklickbare Seitenzahlen. Bei vielen Seiten kürzt
   paginationPages() mit „…“ ein, die Leiste bleibt also immer schmal. */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
}
.blog-pagination .step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 600;
  color: var(--blue-ink);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* Nur der echte Link reagiert — die ausgegraute Schaltfläche am Rand ist ein
   <span> und würde sonst beim Überfahren so tun, als ginge es weiter. */
.blog-pagination a.step:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--bg-soft);
}
.blog-pagination .step.is-disabled {
  color: var(--text-mid);
  border-color: var(--line-soft);
  opacity: 0.55;
  cursor: default;
  user-select: none;
}
.blog-pagination .step:focus-visible,
.blog-pagination .page:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Die Übersicht wird in .page-content eingebettet — dessen Listen-Regeln
   (padding-left, margin-bottom je <li>) müssen hier neutralisiert werden,
   sonst rutscht die Zahlenreihe ein und bekommt Abstände nach unten. */
.blog-pagination .pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-pagination .pages li { margin: 0; }
/* Quadratische Felder: gleiche Breite für ein- und zweistellige Zahlen, damit
   die Reihe beim Blättern nicht springt. */
.blog-pagination .page,
.blog-pagination .gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.blog-pagination .page {
  border: 1px solid var(--line);
  color: var(--blue-ink);
  background: #fff;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.blog-pagination a.page:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--bg-soft);
}
.blog-pagination .page.is-current {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  cursor: default;
}
.blog-pagination .gap {
  min-width: 22px;
  color: var(--text-mid);
}

/* Auf schmalen Displays: Zahlen in eine eigene Zeile nach oben, darunter
   „Zurück" und „Weiter" als zwei gleich breite, daumengerechte Flächen. */
@media (max-width: 520px) {
  .blog-pagination { gap: 12px 10px; }
  .blog-pagination .pages { order: -1; width: 100%; justify-content: center; }
  .blog-pagination .step { flex: 1 1 0; justify-content: center; }
  .blog-pagination .page,
  .blog-pagination .gap { min-width: 34px; height: 34px; }
}

/* Auf sehr schmalen Screens die Mindest-Kachelbreite lockern, damit auf sehr
   kleinen Displays keine horizontale Überbreite entsteht (auto-fill regelt die
   Spaltenzahl ansonsten selbst). */
@media (max-width: 340px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ==================== Detailseite ==================== */

/* Wrapper: bewusst KEINE .card-Klasse — das Theme definiert .card global
   (Karten-Chrome mit Rand/Schatten); der Detail-Artikel ist nur ein
   zentrierter Container. Daher eigener Name .inner. */
.blog-detail .inner {
  max-width: 820px;
  margin: 0 auto;
}

.blog-detail .head { margin-bottom: 22px; }
.blog-detail .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 12px;
}
.blog-detail .date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-mid);
}
.blog-detail .date svg { width: 17px; height: 17px; flex: none; color: var(--blue); }

/* Geschätzte Lesezeit — gleiche Optik wie das Datum (nur eine weitere Angabe). */
.blog-detail .reading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-mid);
}
.blog-detail .reading svg { width: 17px; height: 17px; flex: none; color: var(--blue); }

/* ----- Vorlesen (Web Speech API, siehe blog-read-aloud.js) ----- */
/* Startet hidden und wird nur von JS freigegeben — ohne Sprachausgabe des
   Browsers erscheint hier nichts. */
.blog-detail .blog-audio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-detail .blog-audio[hidden] { display: none; }

/* Auf breiten Zeilen ans Ende rücken: links die Angaben zum Artikel, rechts die
   Bedienung. Schmale Zeilen umbrechen ohnehin und laufen dann normal mit. */
@media (min-width: 720px) {
  .blog-detail .blog-audio { margin-left: auto; }
}

.blog-detail .blog-audio button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--blue-ink);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.blog-detail .blog-audio button:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--bg-soft);
}
.blog-detail .blog-audio button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.blog-detail .blog-audio button[hidden] { display: none; }
.blog-detail .blog-audio svg { width: 17px; height: 17px; flex: none; }
.blog-detail .blog-audio .audio-stop { padding: 7px 9px; }

/* Lautsprecher- bzw. Pause-Symbol — wie beim Kopieren über die Klasse
   gesteuert, weil hidden an <svg> wirkungslos ist. */
.blog-detail .blog-audio .icon-pause { display: none; }
.blog-detail .blog-audio.is-playing .icon-play { display: none; }
.blog-detail .blog-audio.is-playing .icon-pause { display: block; }

/* Während des Vorlesens (auch pausiert) ist die Hauptschaltfläche gefüllt —
   der Zustand bleibt so auch beim Scrollen durch den Artikel ablesbar. */
.blog-detail .blog-audio.is-active .audio-toggle,
.blog-detail .blog-audio.is-active .audio-toggle:hover {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.blog-detail .blog-audio.is-active .audio-toggle:hover {
  background: var(--blue-ink);
  border-color: var(--blue-ink);
}

/* Der gerade vorgelesene Absatz. Der Rahmen entsteht per box-shadow statt
   Innenabstand, damit die Hervorhebung den Textfluss nicht verschiebt. */
.blog-detail .is-reading {
  background: var(--bg-softer);
  box-shadow: 0 0 0 6px var(--bg-softer);
  border-radius: 3px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .blog-detail .blog-audio button,
  .blog-detail .share-list .item,
  .blog-detail .is-reading { transition: none; }

  /* Ohne Animation erscheint der Haken einfach fertig — die Ruhelage oben ist
     genau darauf ausgelegt (stroke-dashoffset: 0). */
  .blog-detail .share-list .is-done .icon-done,
  .blog-detail .share-list .is-done .icon-done path { animation: none; }
}

.blog-detail .category {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
}

.blog-detail .page-title {
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem);
  line-height: 1.15;
  color: var(--blue-ink);
  overflow-wrap: break-word;
  hyphens: auto;
}

.blog-detail .media {
  margin: 0 0 24px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-soft);
}
.blog-detail .media img {
  display: block;
  width: 100%;
  height: auto;
  /* Höhendeckel fürs Titelbild. Die Artikelspalte ist 820px breit (.inner), das
     Bild füllt sie — bei einem hochformatigen oder quadratischen Foto wurde es
     damit auch 820px HOCH und schob den Text komplett unter die Falz.
     620px ist die Höhe, die das höchste gängige QUERformat in dieser Spalte
     ohnehin erreicht (4:3 → 615px). Alle Querformate bleiben dadurch exakt wie
     bisher (21:9 → 351, 16:9 → 461, 3:2 → 547, 4:3 → 615); gedeckelt werden nur
     quadratische und hochformatige Bilder — die stehen dann zentriert vor dem
     weichen Hintergrund der figure.
     object-fit ist dabei PFLICHT: Die Box ist weiterhin 100% breit, mit
     gedeckelter Höhe würde das Bild sonst auf 820x620 verzerrt. */
  max-height: 620px;
  object-fit: contain;
}
/* Bildunterschrift unter dem Titelbild: Beschreibung links (wie bei Bildern
   üblich), darunter IMMER eine eigene Zeile mit der Quelle unten rechts —
   auch wenn beides nebeneinander passen würde. Bewusst Block-Layout statt
   Flex: die feste Zeilenaufteilung ist so unabhängig von Textlänge und
   Bildschirmbreite. Steht die Quelle allein (kein Beschreibungstext), sieht
   die Leiste genau aus wie vor der Bildbeschreibung. */
.blog-detail .media-caption {
  padding: 7px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-mid);
  background: var(--bg-softer, var(--bg-soft));
}
.blog-detail .media-caption .caption {
  display: block;
  overflow-wrap: break-word;
}
.blog-detail .media-caption .credit {
  display: block;
  text-align: right;
}
/* Abstand nur, wenn eine Beschreibung darübersteht. */
.blog-detail .media-caption .caption + .credit { margin-top: 3px; }
.blog-detail .media-caption .credit-label { font-weight: 600; }

.blog-detail .body { margin: 0; }

/* ----- Teilen-Leiste am Fuß des Artikels ----- */
/* Steht bewusst AUSSERHALB von .page-content, damit die Theme-Regeln für
   Fließtext-Listen und -Links (Aufzählungspunkte, Unterstreichung) sie nicht
   treffen. Optik wie die übrigen Pillen der Seite (Kategorien, Vorlesen). */
.blog-detail .share {
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  padding-top: clamp(1.2rem, 0.9rem + 1vw, 1.7rem);
  border-top: 1px solid var(--line);
}
.blog-detail .share-title {
  margin: 0 0 14px;
  font-family: var(--ff-head);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.blog-detail .share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-detail .share-list .item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--blue-ink);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.blog-detail .share-list .item:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--bg-soft);
}
.blog-detail .share-list .item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.blog-detail .share-list .item[hidden] { display: none; }
.blog-detail .share-list svg { width: 17px; height: 17px; flex: none; }

/* Die native Teilen-Auswahl ist der bequemste Weg — entsprechend hervorgehoben. */
.blog-detail .share-list .is-primary,
.blog-detail .share-list .is-primary:hover {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.blog-detail .share-list .is-primary:hover {
  background: var(--blue-ink);
  border-color: var(--blue-ink);
}

/* „Link kopiert" — kurze Bestätigung an der Schaltfläche selbst. */
.blog-detail .share-list .is-done,
.blog-detail .share-list .is-done:hover {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

/* Symbolwechsel beim Kopieren.
   Bewusst über die Klasse und nicht über das hidden-Attribut: Das wirkt an
   einem <svg> NICHT — die Regel [hidden]{display:none} des Browser-Stylesheets
   gilt nur im HTML-Namensraum. Genau deshalb war der Haken sonst dauerhaft zu
   sehen. Als Klassenregel ist der Wechsel zugleich animierbar. */
.blog-detail .share-list .icon-done { display: none; }
.blog-detail .share-list .is-done .icon-copy { display: none; }
.blog-detail .share-list .is-done .icon-done { display: block; }

/* Der Haken zeichnet sich beim Erscheinen selbst (Strich läuft durch) und
   setzt kurz auf. Die Ruhelage ist der FERTIGE Haken — die Animation läuft
   nur von ihrem „from"-Zustand dorthin. So bleibt er auch dann sichtbar,
   wenn Animationen abgeschaltet sind (s. prefers-reduced-motion unten). */
.blog-detail .share-list .icon-done path {
  stroke-dasharray: 22;
  stroke-dashoffset: 0;
}
.blog-detail .share-list .is-done .icon-done {
  animation: blog-copy-pop 260ms cubic-bezier(0.2, 0.9, 0.3, 1.45);
}
.blog-detail .share-list .is-done .icon-done path {
  animation: blog-copy-draw 340ms ease-out;
}

@keyframes blog-copy-pop {
  from { transform: scale(0.5); opacity: 0; }
}
@keyframes blog-copy-draw {
  from { stroke-dashoffset: 22; }
}

/* Live-Region. Den Erfolg quittiert die Schaltfläche selbst — die Meldung hier
   richtet sich dann nur an Screenreader und bleibt unsichtbar. Sie darf dafür
   NICHT display:none bekommen, sonst liest sie niemand vor; deshalb der
   klassische „nur für Screenreader"-Kniff. Fehler werden eingeblendet. */
.blog-detail .share-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.blog-detail .share-status.is-error {
  position: static;
  width: auto;
  height: auto;
  margin: 14px 0 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font-size: 0.88rem;
  color: var(--text-mid);
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  /* Auf sehr schmalen Displays die Pillen etwas kompakter setzen. */
  .blog-detail .share-list { gap: 8px; }
  .blog-detail .share-list .item { padding: 8px 13px; font-size: 0.86rem; }
}

@media (max-width: 620px) {
  .blog-detail .page-title { font-size: 1.55rem; }
}