/* Medien.Bayern News (DOC_ID 12020) - Struktur-CSS v0.18.3
   Farben ausschliesslich ueber Theme-Root-Variablen (--mb-*).
   Schriften erbt das Theme. */

/* Raster: Abstaende wie bei den Events (48px zwischen den Karten). */
.mb-news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.mb-news--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mb-news--cols-3 { grid-template-columns: repeat(3, 1fr); }
.mb-news--cols-4 { grid-template-columns: repeat(4, 1fr); }

.mb-news__item {
    display: flex;
    flex-direction: column;
}

/* --- Bild + Datums-Badge (Event-Optik) --- */
.mb-news__media {
    position: relative;
    display: block;
}

.mb-news__media-link {
    display: block;
    line-height: 0;
}

.mb-news__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Bildformat-Zuschnitt: einheitliches Seitenverhaeltnis per object-fit cover */
.mb-news--ratio-16-9 .mb-news__media img { aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.mb-news--ratio-3-2 .mb-news__media img  { aspect-ratio: 3 / 2;  object-fit: cover; height: auto; }
.mb-news--ratio-4-3 .mb-news__media img  { aspect-ratio: 4 / 3;  object-fit: cover; height: auto; }
.mb-news--ratio-1-1 .mb-news__media img  { aspect-ratio: 1 / 1;  object-fit: cover; height: auto; }
.mb-news--ratio-3-4 .mb-news__media img  { aspect-ratio: 3 / 4;  object-fit: cover; height: auto; }

/* Hover-Effekt Bild -- Zoom (Events-Optik): Bild vergroessert sich, Bild-Link clippt.
   Clip liegt auf dem Link (nicht auf .mb-news__media), damit die ueberlappende
   Badge-Variante (date-overlap) nicht abgeschnitten wird. */
.mb-news--hover-zoom .mb-news__media-link { overflow: hidden; }
.mb-news--hover-zoom .mb-news__media-link img { transition: transform .5s ease-in-out; }
.mb-news--hover-zoom .mb-news__media-link:hover img { transform: scale(1.1); }

/* Hover-Effekt Bild -- Verkleinern (KI-Kompetenz-Optik): Bild zieht sich zusammen */
.mb-news--hover-shrink .mb-news__media-link img { transition: transform .3s ease; }
.mb-news--hover-shrink .mb-news__media-link:hover img { transform: scale(0.9); }

/* Zweifarbige Badge wie bei den Events: Tag hellblau / Monat navy */
.mb-news__date-badge {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    min-width: 50px;
    line-height: 1.1;
    z-index: 1;
}

.mb-news__date-day {
    background: var(--mb-bluelight);
    color: var(--mb-bluedark);
    font-weight: 700;
    font-size: 20px;
    padding: 6px 8px 4px;
}

.mb-news__date-month {
    background: var(--mb-bluedark);
    color: var(--mb-bluelight);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .03em;
    padding: 3px 8px 5px;
}

/* Datum-Badge Varianten (Position/Groesse); Basis = buendig top:0/left:0 */
/* Events-Standard: Badge ueberlappt nach oben (top -26), Abstand nach links, Groesse wie Events (15/15).
   padding-top gibt der ersten Reihe Platz; row-gap wird um den Hellblau-Ueberstand (26px) erhoeht,
   damit der sichtbare Abstand zwischen den Teasern trotz ueberstehender Badge 48px bleibt. */
.mb-news--date-overlap { padding-top: 27px; row-gap: 74px; }
.mb-news--date-overlap .mb-news__date-badge { top: -26px; left: 24px; }
.mb-news--date-overlap .mb-news__date-day   { font-size: 15px; }
.mb-news--date-overlap .mb-news__date-month { font-size: 15px; }
/* Im Bild, mit Abstand oben + links */
.mb-news--date-inset .mb-news__date-badge { top: 12px; left: 12px; }

/* --- Body ---
   Fuellt die Kartenhoehe (flex:1). Abstaende ueber Margins statt gap, damit
   sich Text + Button unten ausrichten: die Headline schiebt den unteren Block
   per margin-bottom:auto nach unten -> der flexible Abstand liegt zwischen
   Headline und Text (kein festes margin). Ist die Headline kuerzer, waechst er. */
.mb-news__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0;
    padding-top: 24px;
}

.mb-news__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

/* Pills im Stil der Kategorie-Buttons (Pressemitteilungen), nur kleiner:
   hellblau / Navy, eckig, fett, Hover invertiert. Farben rein via --mb-*. */
.mb-news__pill {
    display: inline-block;
    background: var(--mb-bluelight);
    color: var(--mb-bluedark);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    padding: 4px 8px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.mb-news__pill:hover,
.mb-news__pill:focus {
    background: var(--mb-bluedark);
    color: var(--mb-bluelight);
}

/* Tag-Pills leicht abgesetzt (gedaempftes Blaugrau) */
.mb-news__pill--tag {
    background: var(--mb-greyblue);
}

.mb-news__pill--tag:hover,
.mb-news__pill--tag:focus {
    background: var(--mb-bluedark);
    color: var(--mb-white);
}

/* A11y: gleiche Theme-Override-Problematik wie beim Button. Bei :hover/:focus wird
   der Pill-Hintergrund navy; der helle Text wuerde sonst vom Theme
   (#qodef-page-content a) navy-auf-navy gesetzt -> unlesbar. Nur hier, nur die Pills,
   nur :hover/:focus -> per Modul-Spezifitaet (1,5,0, ohne !important) auf die hellen
   Kontrastfarben erzwingen (Kategorie = hellblau, Tag = weiss). */
#qodef-page-content .mb-news .mb-news__body .mb-news__pills .mb-news__pill:hover,
#qodef-page-content .mb-news .mb-news__body .mb-news__pills .mb-news__pill:focus {
    color: var(--mb-bluelight);
}
#qodef-page-content .mb-news .mb-news__body .mb-news__pills .mb-news__pill--tag:hover,
#qodef-page-content .mb-news .mb-news__body .mb-news__pills .mb-news__pill--tag:focus {
    color: var(--mb-white);
}

/* Headline: schiebt den unteren Block (Text/Meta/Button) ans Karten-Ende.
   Der flexible Abstand entsteht dadurch zwischen Headline und Text. */
.mb-news__title {
    margin: 0 0 auto;
}

/* Teaser: kein festes margin zur Headline (Abstand kommt aus dem auto oben). */
.mb-news__excerpt {
    margin: 0;
}

/* Teaser optional auf 3 bzw. 5 Zeilen begrenzen (CSS line-clamp) */
.mb-news__excerpt--clamp-3,
.mb-news__excerpt--clamp-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mb-news__excerpt--clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.mb-news__excerpt--clamp-5 { -webkit-line-clamp: 5; line-clamp: 5; }

.mb-news__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    margin: 8px 0 0;
}

/* Button "Weiterlesen" im Stil des umrandeten Brand-Buttons (Event-Content):
   transparent + 3px Navy-Rahmen, uppercase; Hover fuellt Navy, Text weiss.
   Hover ist im Theme nur pro Sub-Brand definiert -> hier modul-eigen. */
.mb-news__button {
    align-self: flex-start;
    display: inline-block;
    margin: 16px 0 0;
    background: transparent;
    color: var(--mb-bluedark);
    border: 3px solid var(--mb-bluedark);
    border-radius: 0;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.mb-news__button:hover,
.mb-news__button:focus {
    background: var(--mb-bluedark);
    color: var(--mb-white);
}

/* A11y: das Theme faerbt alle Content-Links navy (#qodef-page-content a, ID-Spezifitaet),
   wodurch der Button-Text bei :focus navy-auf-navy unlesbar wird. Nur hier, nur die
   Buttons, nur :focus -> per Modul-Spezifitaet (1,5,0, ohne !important) auf Weiss. */
#qodef-page-content .mb-news .mb-news__item .mb-news__body .mb-news__button:focus {
    color: var(--mb-white);
}

/* Responsive: Spaltenzahl + Abstaende wie bei den Events (Breakpoints 991/767) */
@media (max-width: 991px) {
    .mb-news,
    .mb-news--cols-3,
    .mb-news--cols-4 { grid-template-columns: repeat(2, 1fr); }
    .mb-news { gap: 24px; }
    .mb-news--date-overlap { row-gap: 50px; }
}

@media (max-width: 767px) {
    .mb-news,
    .mb-news--cols-2,
    .mb-news--cols-3,
    .mb-news--cols-4 { grid-template-columns: 1fr; }
    .mb-news { gap: 24px; }
    .mb-news--date-overlap { row-gap: 50px; }
}

/* --- Paginierung: aktive Seite in Marken-Hellblau ---
   Die reinen qodef--standard-Klassen erben die komplette Presse-Optik
   (MediaSquare-Zahlen + Pfeile, navy, Hover-Hellblau). Nur die aktive ZAHL muss
   erzwungen werden: das Theme faerbt alle Content-Links navy (#qodef-page-content a),
   daher hier per ID-Spezifitaet (ohne !important) auf das aktive <a> gesetzt. */
#qodef-page-content .mb-news + .qodef-m-pagination.qodef--standard .qodef-m-pagination-item.qodef--active a {
    color: var(--mb-bluelight);
}

/* --- Infinity Scroll: Lade-Sentinel + Spinner --- */
.mb-news__infinity {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    min-height: 1px;
}
.mb-news__infinity-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--mb-greyblue);
    border-top-color: var(--mb-bluedark);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .2s ease;
    animation: mbnews-spin .8s linear infinite;
}
.mb-news__infinity.is-loading .mb-news__infinity-spinner { opacity: 1; }
@keyframes mbnews-spin { to { transform: rotate(360deg); } }

/* --- Archiv-Integration: Abstand zum Seitenende analog News-Seite (60px = WPBakery-Row) ---
   Das Theme setzt das Grid-Item-Padding (Gutter) mit hoher Spezifitaet auf 0
   (`.medienbayern .qodef-grid > .qodef-grid-inner > .qodef-grid-item`, padding-Shorthand),
   daher NICHT am Container, sondern als margin-bottom am letzten Element der Spalte
   (MB-eigene Klassen, vom Theme unangetastet). Greift mit UND ohne Pager.
   Nur Archiv/Blog-Kontext, damit die News-Seite (Page) nichts erbt. */
.archive .mb-news:last-child,
.blog .mb-news:last-child {
    margin-bottom: 60px;   /* kein Pager -> Grid ist letztes Kind */
}
.archive .mb-news + .qodef-m-pagination.qodef--standard,
.blog .mb-news + .qodef-m-pagination.qodef--standard {
    margin-bottom: 60px;   /* Pager vorhanden -> Abstand unter dem Pager */
}

/* Archiv: 32px Abstand nach dem Seitentitel ueber dem Grid (Titel sitzt sonst buendig). */
.archive .mb-news,
.blog .mb-news {
    margin-top: 32px;
}