/*
 * Plugin „Pressemitteilungen" — 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 „pressemitteilung" 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
   (press.css lädt nach page.css). */
.press-overview img {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.press-overview h3 { margin: 0; }
.press-overview a { text-decoration: none; }

/* ----- Kategorie-Filter ----- */
.press-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(1.4rem, 1rem + 2vw, 2.2rem);
}
.press-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;
}
.press-filter .item:hover {
  color: var(--blue);
  border-color: var(--blue);
}
.press-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. */
.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 1rem + 1vw, 26px);
}

.press-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;
}
.press-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}
.press-card .card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

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

.press-card .body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
}
.press-card .date {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}
.press-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;
}
.press-card .teaser {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-mid);
}
.press-card .more {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  color: var(--blue);
}

.press-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 ----- */
.press-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
}
.press-pagination a {
  display: inline-flex;
  align-items: center;
  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;
}
.press-pagination a:hover {
  color: var(--blue);
  border-color: var(--blue);
}
.press-pagination .status {
  font-size: 0.95rem;
  color: var(--text-mid);
}

/* 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) {
  .press-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. */
.press-detail .inner {
  max-width: 820px;
  margin: 0 auto;
}

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

.press-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);
}

.press-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;
}

.press-detail .media {
  margin: 0 0 24px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-soft);
}
.press-detail .media img {
  display: block;
  width: 100%;
  height: auto;
}
.press-detail .credit {
  padding: 7px 12px;
  font-size: 0.82rem;
  color: var(--text-mid);
  background: var(--bg-softer, var(--bg-soft));
  text-align: right;
}
.press-detail .credit .credit-label { font-weight: 600; }

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

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