/*
 * gfp-news.css
 * Newsfilter (Shortcode [gfp_news_filter]) — Optik 1:1 identisch zum
 * Programm-Filter der Kurs-Übersicht, so wie er tatsächlich live aussieht:
 * NICHT das ursprüngliche dunkle Kartendesign weiter oben in gfp-kurse.css
 * (Zeile ~305-475), sondern der spätere Override-Block „KURS-SEITEN: WEISSER
 * HINTERGRUND" (gfp-kurse.css ab Zeile ~1237) gewinnt per CSS-Kaskade — die
 * echte /kurse/-Seite hat weißen Hintergrund, hellgraue Karten (#f5f5f3),
 * schwarzen Text, farbigen Rand je Kategorie. Genau diese finale Optik wird
 * hier repliziert (verifiziert per Screenshot von /kurse/ und /news/).
 *
 * Eigenständig gescoped unter .gfp-news statt .gfp-programm: gfp-kurse.css
 * wird nur auf den Kurs-Seiten selbst geladen (s. template-loader.php), der
 * News-Shortcode kann dagegen auf JEDER Lay-Seite sitzen — deshalb eigene,
 * lokale Variablen statt Abhängigkeit von .gfp-programms Root-Variablen
 * (gleiches Prinzip wie gfp-team.css).
 *
 * Typografie folgt Lays Textformaten wie die Kurs-/Team-Kacheln:
 * inc/shortcode-news.php ruft gfp_kurse_bind_textformate('.gfp-news', 'gfp-news')
 * auf und schreibt die --fs-*/--font-*/… Variablen aus Lays Format-Manager auf
 * .gfp-news. Rollen-Zuordnung wie in PROJECT.md:
 *   Überschrift → H2   Kartentitel → H2 (schwarz, User-Vorgabe)   Kategorie/Datum/Excerpt → Small/Xs   Filter-Button → FilterBtn
 *
 * .gfp-news--outline (Modifier, s. [gfp_news_neueste]): transparente Karte mit
 * weißem Rand + weißer Schrift + weißem Streifen oben statt gefüllter
 * #f5f5f3-Karte mit schwarzem Text + Lime-Streifen — für eine kompakte
 * "Neueste News"-Vorschau auf einem dunklen Lay-Zeilenhintergrund (z. B.
 * Startseite). Gleiche Struktur (Kategorie/Datum/Titel/Excerpt) bleibt
 * erhalten.
 */

.gfp-news, .gfp-news *, .gfp-news *::before, .gfp-news *::after { box-sizing: border-box; }

.gfp-news {
  --gfp-news-black:      #111111;
  --gfp-news-card-bg:    #f5f5f3;
  /* Lime ist seit 2026-08-18 nicht mehr an Rand/Streifen der Karten (User-
     Vorgabe: zu kontrastreich, jetzt zartes Grau); die Variable bleibt als
     Marken-Akzent stehen. */
  --gfp-news-lime:       #CAD55A;
  /* Rahmen + Streifen der hellen Karte — bewusst eine gemeinsame Variable:
     die beiden Linien stoßen oben aneinander und dürfen nicht in
     unterschiedlichen Grautönen auseinanderlaufen. */
  --gfp-news-linie:      rgba(0, 0, 0, .14);
  --gfp-news-max-width:  1600px;
  --gfp-news-section-px: 2%;
  padding: 2rem 0;
}

.gfp-news__title {
  font-family: var(--font-h2, var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif));
  font-size: var(--fs-h2, clamp(1.5rem, 3vw, 2.5rem));
  line-height: var(--lh-h2, 1.05);
  letter-spacing: var(--ls-h2, 0.01em);
  font-weight: var(--fw-h2, 400);
  text-transform: var(--tt-h2, uppercase);
  font-style: var(--fsty-h2, normal);
  font-variation-settings: var(--fvs-h2, normal);
  color: var(--gfp-news-black);
  margin: 0 0 1.5rem;
}

/* ── Filter-Leiste: wie .kurs-filter__btn im tatsächlichen (hellen)
   Override-Zustand — transparent/dunkler Text inaktiv. Anders als beim
   Kurs-Filter (Fachbereichs-Farbpalette) nutzt hier JEDE aktive Kategorie
   dieselbe Akzentfarbe Lime statt Farbenvielfalt — bewusste Vorgabe, da
   News-Kategorien frei vom User angelegt werden und kein Name→Farbe-Mapping
   möglich ist (s. gfp-news-filter.js). Nur "Alle" bleibt Schwarz. ── */
.gfp-news__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.gfp-news__filter-btn {
  padding: 8px 18px 7px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .2);
  background: transparent;
  color: rgba(0, 0, 0, .6);
  /* is-active-Farben (Schwarz für "Alle", Lime für Kategorien) werden per
     JS-Inline-Style gesetzt (gfp-news-filter.js) — kein CSS-Fallback hier,
     weil die Textfarbe je nach Hintergrund wechselt (Weiß auf Schwarz, aber
     Schwarz auf Lime — kein einzelner fester Wert möglich). */
  font-family: var(--font-filter, var(--font-label, var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif)));
  font-size: var(--fs-filter, var(--fs-label, .95rem));
  letter-spacing: var(--ls-filter, var(--ls-label, 0.08em));
  font-weight: var(--fw-filter, var(--fw-label, 400));
  text-transform: var(--tt-filter, var(--tt-label, uppercase));
  font-style: var(--fsty-filter, var(--fsty-label, normal));
  font-variation-settings: var(--fvs-filter, var(--fvs-label, normal));
  cursor: pointer;
  transition: all 0.2s;
}

.gfp-news__filter-btn:hover {
  border-color: rgba(0, 0, 0, .5);
  color: var(--gfp-news-black);
}


.gfp-news__empty {
  text-align: center;
  padding: 4rem 0;
  color: rgba(0, 0, 0, .4);
}

/* ── Grid ── */
/* Max. 4 Spalten, auch auf sehr breiten Bildschirmen (reines
   auto-fill/minmax(300px,1fr) ließ auf breiten Screens 5 Spalten zu) — die
   Mindestbreite pro Spalte wird auf 1/4 der Containerbreite (abzüglich der
   3 Gaps dazwischen) hochgesetzt, sobald der Platz für eine 5. Spalte
   reichen würde; darunter greift weiterhin die 300px-Mindestbreite
   (Tablet/Mobil wie gehabt, s. Mobil-Media-Query unten).
   Bewusst auto-fill (nicht auto-fit): Karten sollen NIE auf die volle Breite
   gestreckt werden, egal wie viele sichtbar sind — auf der filterbaren
   Übersicht kann ein Kategorie-Filter die sichtbare Kartenzahl jederzeit auf
   1-2 senken, dort bleibt dann rechts Leerraum statt breit gezogener Karten.
   Gilt identisch für die kompakte [gfp_news_neueste]-Vorschau
   (.gfp-news--outline). Gleiche Grund-Technik wie .kurse-grid in
   gfp-kurse.css. */
.gfp-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 3 * 1.5rem) / 4)), 1fr));
  grid-auto-rows: 1fr;
  gap: 1.5rem;
}

/* ── Karte — wie .kurs-card im tatsächlichen (hellen) Override-Zustand:
   hellgraue Karte, schwarzer Text. Anders als bei den Kurs-Karten (Rand je
   Fachbereichs-Farbe) ist der Rand/Streifen hier fest Grau (keine
   Farbenvielfalt bei News-Kategorien, s. Kommentar bei .gfp-news__filter-btn).
   Titel bleibt auch im Hover schwarz (kein Lime-Wechsel — das hatte GfP für
   die Kurs-Karten bewusst per !important wieder zurückgenommen, vermutlich
   wegen Kontrast auf hellem Kartenhintergrund; hier identisch übernommen). ── */
.gfp-news-card {
  /* position:relative ist Pflicht, nicht nur Kosmetik: ohne einen
     positionierten Vorfahren orientiert sich ein absolut positioniertes
     Element (vermutlich Lays eigenes Bild-Lazyload-Overlay) am nächsten
     tatsächlich positionierten/transformierten Vorfahren weiter oben im Baum
     — sichtbar als riesiges, über die ganze Zeile gestrecktes Bild. Der
     :hover-Transform weiter unten hatte das zufällig "repariert" (transform
     erzeugt selbst einen Containing Block für position:absolute), aber nur
     während des Hovers — im Normalzustand fehlte die Eingrenzung. */
  position: relative;
  background: var(--gfp-news-card-bg);
  border-radius: 1rem;
  /* Rahmen + Streifen in zartem Grau (User-Vorgabe 2026-08-18: Lime und
     Schwarz waren beide zu kontrastreich). Stärken exakt wie bei .kurs-card
     der Programmübersicht (gfp-kurse.css): Rahmen 2 px, Streifen 4 px —
     User-Vorgabe, die beiden Übersichtsseiten sollen gleich gebaut wirken,
     nur die Farbe unterscheidet sich (Kurse: Fachbereichsfarbe). Die Farbe
     steht als Variable, damit Rahmen und Streifen nicht auseinanderlaufen. */
  border: 2px solid var(--gfp-news-linie);
  /* Ruheschatten identisch zu den Team-Kacheln der Über-uns-Seite
     (gfp-team.css, .gfp-team-card) — User-Vorgabe: gleiche Kachel-Anmutung
     über News, Kursübersicht und Team hinweg. Der kräftigere Hover-Schatten
     unten löst ihn ab, die transition oben deckt beides ab. */
  box-shadow: 0 2px 14px rgba(0, 0, 0, .09);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: var(--gfp-news-black);
}

.gfp-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

/* Kategorie/Datum bleiben auch im Hover in ihrer Normalfarbe (User-Vorgabe,
   analog zum Titel bei .kurs-card, s. gfp-kurse.css Zeile ~1429). */
.gfp-news-card:hover .gfp-news-card__kategorie {
  color: rgba(0, 0, 0, .55) !important;
}

.gfp-news-card:hover .gfp-news-card__datum {
  color: rgba(0, 0, 0, .4) !important;
}

/* Farbstreifen oben in derselben Grautönung wie der Rahmen (s. dort). */
.gfp-news-card__stripe {
  height: 4px;
  width: 100%;
  background-color: var(--gfp-news-linie);
}

/* ── Modifier .gfp-news--outline: kompakte "Neueste News"-Vorschau
   ([gfp_news_neueste]) — transparente Karte mit weißem Rand + weißer Schrift
   statt gefüllter Karte + schwarzem Text (User-Vorgabe: läuft typischerweise
   auf einem dunklen Lay-Zeilenhintergrund, s. Startseiten-Screenshot, daher
   Weiß statt Schwarz). Lime-Streifen oben bleibt wie bei der vollen
   Übersicht erhalten. Restliche Struktur (Kategorie/Datum/Titel/Excerpt)
   bleibt unverändert, nur die Farben werden hier überschrieben. ── */
.gfp-news--outline .gfp-news-card {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  /* Kein Ruheschatten: die Karte ist transparent und steht auf dunklem
     Grund — ein schwarzer Schatten wäre dort unsichtbar bis schmutzig. */
  box-shadow: none;
}

.gfp-news--outline .gfp-news-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}

.gfp-news--outline .gfp-news-card__title {
  color: #ffffff;
}

.gfp-news--outline .gfp-news-card__kategorie {
  color: rgba(255, 255, 255, .8);
}

.gfp-news--outline .gfp-news-card__datum {
  color: rgba(255, 255, 255, .6);
}

.gfp-news--outline .gfp-news-card:hover .gfp-news-card__kategorie {
  color: rgba(255, 255, 255, .8) !important;
}

.gfp-news--outline .gfp-news-card:hover .gfp-news-card__datum {
  color: rgba(255, 255, 255, .6) !important;
}

.gfp-news--outline .gfp-news-card__desc {
  color: rgba(255, 255, 255, .75);
}

.gfp-news--outline .gfp-news-card__stripe {
  background-color: #ffffff;
}

/* ── .gfp-news--outline: feste Spaltenzahl + Kartenanzahl je Breakpoint
   (Startseiten-Vorschau [gfp_news_neueste]) — User-Vorgabe: Mobil 1, Tablet 3,
   Desktop 4 News. Bewusst NICHT die auto-fill-Technik der vollen Übersicht
   (.gfp-news__grid ohne --outline, s. o.): dort ist die Kartenzahl variabel
   (Filter kann sie auf 1-2 senken), hier ist sie exakt fix, also feste
   Spaltenzahl wie bei .gfp-team__grid--home (PROJECT.md Architektur-Punkt 15).
   Die Query lädt weiterhin bis zu "anzahl" Beiträge (Default 4,
   shortcode-news.php) — überzählige Karten werden hier per :nth-child
   ausgeblendet statt serverseitig weniger zu laden, damit ein Breakpoint-
   Wechsel (Resize) ohne Reload sofort die richtige Anzahl zeigt.
   Breakpoints an Lays eigene Tablet-Schwelle angelehnt (Standard 1024px,
   s. misc_options_textformats_tablet_breakpoint) bzw. den sonst im Plugin
   verwendeten Mobil-Breakpoint 600px. ── */
.gfp-news--outline .gfp-news__grid {
  grid-template-columns: repeat(4, 1fr);
}

.gfp-news--outline .gfp-news-card:nth-child(n+5) {
  display: none;
}

@media (max-width: 1024px) {
  .gfp-news--outline .gfp-news__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gfp-news--outline .gfp-news-card:nth-child(n+4) {
    display: none;
  }
}

@media (max-width: 600px) {
  .gfp-news--outline .gfp-news__grid {
    grid-template-columns: 1fr;
  }

  .gfp-news--outline .gfp-news-card:nth-child(n+2) {
    display: none;
  }
}

/* ── Bild: eingerückt statt randlos (Weißraum ringsum innerhalb der Karte,
   wie bei .gfp-news-card__body), fest im 16:9-Format zugeschnitten. Breite
   UND Seitenverhältnis sind zusätzlich mit !important abgesichert — Lay lädt
   Beitragsbilder teils mit eigenen, sehr breiten Inline-/Lazyload-Maßen
   (ähnliches Problem wie beim Hero-Carousel, s. PROJECT.md Architektur-Punkt
   17), die sonst die Karte sprengen und auf voller Fensterbreite rendern
   konnten. position:relative engt die Eingrenzung zusätzlich auf genau
   diese Box statt die ganze Karte ein (s. Kommentar bei .gfp-news-card). ── */
.gfp-news-card__photo {
  position: relative;
  width: calc(100% - 3rem) !important;
  max-width: calc(100% - 3rem) !important;
  aspect-ratio: 16 / 9 !important;
  margin: 1.5rem 1.5rem 0;
  border-radius: .5rem;
  background: #e5e5e2;
  overflow: hidden;
}

.gfp-news-card__photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.gfp-news-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.gfp-news-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
}

.gfp-news-card__kategorie {
  font-family: var(--font-label, var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif));
  text-transform: var(--tt-label, uppercase);
  letter-spacing: var(--ls-label, 0.15em);
  /* +2pt gegenüber dem Datum (User-Vorgabe: Kategorie soll größer/prominenter
     wirken) — bewusst per calc() auf die gebundene Xs-Größe draufgesetzt,
     statt eine eigene feste Größe zu setzen, damit Änderungen am Lay-Format
     "Xs" weiterhin durchschlagen. */
  font-size: calc(var(--fs-xs, 0.8rem) + 2pt);
  /* Bewusst neutral statt Lime als Textfarbe: Lime als Fließtext auf der
     hellen Karte hätte zu wenig Kontrast — der Akzent bleibt auf Rand/Streifen
     (Flächen) beschränkt, s. .gfp-news-card. */
  color: rgba(0, 0, 0, .55);
}

.gfp-news-card__datum {
  font-size: var(--fs-xs, 0.8rem);
  color: rgba(0, 0, 0, .4);
  text-transform: var(--tt-xs, uppercase);
  letter-spacing: var(--ls-xs, 0.1em);
}

.gfp-news-card__title {
  font-family: var(--font-h2, var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif));
  font-size: var(--fs-h2, 1.75rem);
  line-height: var(--lh-h2, 1.1);
  letter-spacing: var(--ls-h2, 0.01em);
  font-weight: var(--fw-h2, 400);
  text-transform: var(--tt-h2, uppercase);
  font-style: var(--fsty-h2, normal);
  font-variation-settings: var(--fvs-h2, normal);
  color: var(--gfp-news-black);
  margin: 0;
  /* Lange (zusammengesetzte) Wörter sonst bündig bis an den Kartenrand statt
     an einer erlaubten Stelle umzubrechen — automatische Silbentrennung nach
     Rechtschreibregeln der Seitensprache (lang="de" am <html>-Tag). */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.gfp-news-card__desc {
  font-family: var(--font-small, var(--font-body, 'Host Grotesk', system-ui, sans-serif));
  font-size: var(--fs-small, 0.9rem);
  line-height: var(--lh-small, 1.6);
  letter-spacing: var(--ls-small, 0);
  color: rgba(0, 0, 0, .65);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* ── Mobil: eine Spalte, wie bei den Kurs-/Team-Kacheln ── */
@media (max-width: 600px) {
  .gfp-news__grid { grid-template-columns: 1fr; }
}