/* ==========================================================================
   Aktuell – News-Übersichtsseite
   Farben nach Figma "BaBeL DEF": Aktuell-Frame
   ========================================================================== */

/* Seitenstruktur – kein Padding nach aussen
   -------------------------------------------------------------------------- */
.view-aktuell {
    background-color: var(--babel-pink);
    padding: 0 0 3rem;
    position: relative;
}

/* Vollseite füllt den Viewport — nicht auf Blöcke anwenden */
.view-aktuell--page {
    min-height: 100vh;
}

/* Randfüllender Hintergrund auf /aktuell */
body.path-aktuell main[role="main"] {
    background-color: var(--babel-pink);
}

body.path-aktuell .layout-content {
    background-color: transparent;
    padding-bottom: 0;
}

/* Seitentitel der Listing-View
   -------------------------------------------------------------------------- */
.view-aktuell__title {
    scroll-margin-top: 40px;
    font-family: 'League Spartan', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--babel-darkred);
    padding: 2rem 2rem 1.5rem 0rem;
    margin: 0;
}

/* Masonry-Grid via JS (absolutes Positionierungsmodell)
   -------------------------------------------------------------------------- */
.aktuell-grid {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.aktuell-grid__item {
    box-sizing: border-box;
}

/* Gradient-Abschluss – auf .view-aktuell, damit der Pager im Normalfluss bleiben kann
   Sichtbar nur wenn noch mehr Cards geladen werden können
   -------------------------------------------------------------------------- */
.view-aktuell:has(.pager__item--next)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(180deg, rgba(255, 224, 223, 0) 0%, var(--babel-pink) 15%);
    pointer-events: none;
    z-index: 1;
}

/* Karte – Basis
   -------------------------------------------------------------------------- */
.news-card {
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    position: relative;
    margin-bottom: 0;
    box-shadow: none;
    /* Pico CSS --pico-card-box-shadow entfernen */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
    animation: card-pop 0.3s ease-out forwards;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

@keyframes card-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}

.news-card__body {
    padding: 1.25rem 2rem 3rem;
    text-align: center;
    flex: 1;
}

.news-card__title {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    /* 25px */
    font-weight: 400;
    line-height: 1;
    margin: 0 0 1.25rem;
    color: inherit;
}

.news-card__title a {
    text-decoration: none;
    color: inherit;
}

.news-card__title a:hover {
    text-decoration: underline;
}

.news-card__description {
    font-family: 'Bitter', serif;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 400;
    line-height: 1.25;
    color: inherit;
}

/* Bild – randfüllend mit Farbfilter
   -------------------------------------------------------------------------- */
.news-card__image {
    position: relative;
    overflow: hidden;
    line-height: 0;
    /* entfernt Lücke unter dem img-Element */
}

.news-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 0;
    /* Karte hat overflow:hidden + border-radius:16px */
    filter: grayscale(100%);
}

/* Media-Entity-Wrapper: Padding und Abstände entfernen für randfüllende Darstellung */
.news-card__image .media,
.news-card__image .field--name-field-media-image,
.news-card__image .field__item {
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Farbfilter: halbtransparentes Overlay in Kartenfarbe (mix-blend-mode: multiply) */
.news-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
}

[data-color-index="0"] .news-card__image::after {
    background: var(--babel-yellow);
}

[data-color-index="1"] .news-card__image::after {
    background: var(--babel-pink-card);
}

[data-color-index="2"] .news-card__image::after {
    background: var(--babel-pink-card);
}

[data-color-index="3"] .news-card__image::after {
    background: var(--babel-yellow);
}

/* Pfeil-Link
   -------------------------------------------------------------------------- */
.news-card__link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0.5rem 1rem 0.75rem;
    text-decoration: none;
    border-radius: 16px;
}

.news-card__arrow {
    display: block;
    width: 27px;
    height: 18px;
    flex-shrink: 0;
}

/* Farbvarianten – 4er-Zyklus via data-color-index (absolute Position in View-Resultat % 4)
   Gleiche Logik wie die Detailseite (PHP sort = View sort), damit Card- und Detailfarbe übereinstimmen.
   --------------------------------------------------------------------------
   0: Gelb-grün (#E6E079) / Rot (#D52600)
   1: Lachs (#EE9394) / Dunkelrot (#9A0809)
   2: Dunkelrot (#9A0809) / Lachs (#EE9394)
   3: Rot (#D52600) / Gelb-grün (#E6E079)
   -------------------------------------------------------------------------- */
[data-color-index="0"] .news-card {
    background-color: var(--babel-yellow);
    color: var(--babel-red);
}

[data-color-index="0"] .news-card__link {
    color: var(--babel-red);
}

[data-color-index="1"] .news-card {
    background-color: var(--babel-pink-card);
    color: var(--babel-darkred);
}

[data-color-index="1"] .news-card__link {
    color: var(--babel-darkred);
}

[data-color-index="2"] .news-card {
    background-color: var(--babel-darkred);
    color: var(--babel-pink-card);
}

[data-color-index="2"] .news-card__link {
    color: var(--babel-pink-card);
}

[data-color-index="3"] .news-card {
    background-color: var(--babel-red);
    color: var(--babel-yellow);
}

[data-color-index="3"] .news-card__link {
    color: var(--babel-yellow);
}

/* "Mehr Beiträge" – Startseiten-Block (view-aktuell--latest)
   -------------------------------------------------------------------------- */

/* Footer-Container: trägt jetzt selbst den Gradient (statt eines separaten
   ::after) und deckt die volle Breite/Höhe der Fade-Zone ab. So überdeckt ein
   einzelnes, gewöhnliches Element (kein Pseudo-Element, kein eigener
   Compositing-Layer durch die Hover-Animation der Karten) zuverlässig den
   Hover-Schatten/Rand der letzten Zeile – unabhängig von Stacking-Kontext-
   Eigenheiten des Browsers. Der Button bleibt dank pointer-events:auto klickbar. */
.view-aktuell__footer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    /* Breiter als der Grid-Container: die Karten werfen ihren Hover-Schatten
       (box-shadow, ~24px Blur) auch seitlich über den Grid-Rand hinaus. Mit
       left/right:0 würde dieser Überstand aussen nicht mehr abgedeckt. */
    left: -40px;
    right: -40px;
    bottom: 0;
    height: 220px;
    z-index: 2;
    padding-bottom: 2rem;
    background: linear-gradient(180deg, rgba(255, 224, 223, 0) 0%, var(--babel-pink) 15%);
    pointer-events: none;
}

.view-aktuell__footer .aktuell-more-btn {
    pointer-events: auto;
}

/* "Mehr Beiträge" Button — gleicher Stil wie "Mehr laden" */
.aktuell-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--babel-darkred);
    text-decoration: none;
    border: 1.3px solid var(--babel-darkred);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s, color 0.2s;
}

.aktuell-more-btn:hover {
    background-color: var(--babel-darkred);
    color: var(--babel-pink);
}

.aktuell-more-btn::after {
    content: '';
    display: inline-block;
    width: 21px;
    height: 27px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,<svg width='21' height='27' viewBox='0 0 21 27' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.0249 14.8407L7.5249 20.517L13.0249 26.1933' stroke='%239A0809' stroke-width='1.3'/><path d='M1.93941 15.5503C0.848939 13.601 0.432252 11.3273 0.757609 9.10162C1.08297 6.87597 2.13108 4.83034 3.73023 3.29984C5.32939 1.76935 7.38479 0.84474 9.5597 0.677487C11.7346 0.510233 13.9001 1.11025 15.7014 2.37925C17.5026 3.64824 18.8329 5.51097 19.4743 7.66228C20.1157 9.81359 20.0301 12.1259 19.2316 14.2205C18.4331 16.315 16.969 18.0676 15.0792 19.1911C13.1893 20.3146 10.9858 20.7424 8.82961 20.4044' stroke='%239A0809' stroke-width='1.3' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

.aktuell-more-btn:hover::after {
    transform: rotate(25deg);
    background-image: url("data:image/svg+xml,<svg width='21' height='27' viewBox='0 0 21 27' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.0249 14.8407L7.5249 20.517L13.0249 26.1933' stroke='%23FFE0DF' stroke-width='1.3'/><path d='M1.93941 15.5503C0.848939 13.601 0.432252 11.3273 0.757609 9.10162C1.08297 6.87597 2.13108 4.83034 3.73023 3.29984C5.32939 1.76935 7.38479 0.84474 9.5597 0.677487C11.7346 0.510233 13.9001 1.11025 15.7014 2.37925C17.5026 3.64824 18.8329 5.51097 19.4743 7.66228C20.1157 9.81359 20.0301 12.1259 19.2316 14.2205C18.4331 16.315 16.969 18.0676 15.0792 19.1911C13.1893 20.3146 10.9858 20.7424 8.82961 20.4044' stroke='%23FFE0DF' stroke-width='1.3' stroke-linecap='round'/></svg>");
}

/* "Mehr laden" – Pager
   -------------------------------------------------------------------------- */
.aktuell-pager {
    display: flex;
    justify-content: center;
    margin-top: 0;
    position: relative;
    z-index: 2;
    padding-bottom: 2rem;
}

/* Negativer Einzug ins Grid nur wenn "Mehr laden" sichtbar ist */
.aktuell-pager:has(.pager__item--next) {
    margin-top: -120px;
}

/* Abschluss-Padding wenn kein "Mehr laden" Button vorhanden */
.view-aktuell:not(:has(.pager__item--next)) {
    padding-bottom: 4rem;
}

.aktuell-pager nav {
    display: flex;
    justify-content: center;
}

.aktuell-pager .pager__item--next a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--babel-darkred);
    text-decoration: none;
    border: 1.3px solid var(--babel-darkred);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s, color 0.2s;
}

.aktuell-pager .pager__item--next a:hover {
    background-color: var(--babel-darkred);
    color: var(--babel-pink);
}

.aktuell-pager .pager__item--next a::after {
    content: '';
    display: inline-block;
    width: 21px;
    height: 27px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,<svg width='21' height='27' viewBox='0 0 21 27' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.0249 14.8407L7.5249 20.517L13.0249 26.1933' stroke='%239A0809' stroke-width='1.3'/><path d='M1.93941 15.5503C0.848939 13.601 0.432252 11.3273 0.757609 9.10162C1.08297 6.87597 2.13108 4.83034 3.73023 3.29984C5.32939 1.76935 7.38479 0.84474 9.5597 0.677487C11.7346 0.510233 13.9001 1.11025 15.7014 2.37925C17.5026 3.64824 18.8329 5.51097 19.4743 7.66228C20.1157 9.81359 20.0301 12.1259 19.2316 14.2205C18.4331 16.315 16.969 18.0676 15.0792 19.1911C13.1893 20.3146 10.9858 20.7424 8.82961 20.4044' stroke='%239A0809' stroke-width='1.3' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

.aktuell-pager .pager__item--next a:hover::after {
    transform: rotate(60deg);
    background-image: url("data:image/svg+xml,<svg width='21' height='27' viewBox='0 0 21 27' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.0249 14.8407L7.5249 20.517L13.0249 26.1933' stroke='%23FFE0DF' stroke-width='1.3'/><path d='M1.93941 15.5503C0.848939 13.601 0.432252 11.3273 0.757609 9.10162C1.08297 6.87597 2.13108 4.83034 3.73023 3.29984C5.32939 1.76935 7.38479 0.84474 9.5597 0.677487C11.7346 0.510233 13.9001 1.11025 15.7014 2.37925C17.5026 3.64824 18.8329 5.51097 19.4743 7.66228C20.1157 9.81359 20.0301 12.1259 19.2316 14.2205C18.4331 16.315 16.969 18.0676 15.0792 19.1911C13.1893 20.3146 10.9858 20.7424 8.82961 20.4044' stroke='%23FFE0DF' stroke-width='1.3' stroke-linecap='round'/></svg>");
}

.aktuell-pager .pager__item--previous,
.aktuell-pager .pager__item--first,
.aktuell-pager .pager__item--last,
.aktuell-pager .pager__item.is-active {
    display: none;
}

.aktuell-pager .pager__item--next a.is-loading {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
}

/* ==========================================================================
   Aktuell – Detail-Seite (node--news--full)
   Figma "BaBeL DEF – Aktuell: Detail"
   Layout: [← zurück] · [H1] · [Bilder links | Lead + Text rechts]
   ========================================================================== */

/* Layout-Content-Wrapper zurücksetzen: volle Breite für den Hintergrund
   -------------------------------------------------------------------------- */
body.page-node-type-news main .layout-content {
    max-width: 100%;
    padding-inline: 0;
    padding-block: 0;
    background: transparent;
}

/* Seitentitel-Block ausblenden (Titel wird im Template gerendert)
   -------------------------------------------------------------------------- */
body.page-node-type-news .block-page-title-block {
    display: none;
}

/* Farbvarianten – zyklisch analog Listing (nid % 4)
   --------------------------------------------------------------------------
   0 → schema 4: Rot bg / Gelb-grün text
   1 → schema 1: Gelb-grün bg / Rot text
   2 → schema 2: Lachs bg / Dunkelrot text
   3 → schema 3: Dunkelrot bg / Lachs text
   -------------------------------------------------------------------------- */
.news-detail--color-0 {
    --detail-bg: var(--babel-yellow);
    --detail-color: var(--babel-red);
}

.news-detail--color-1 {
    --detail-bg: var(--babel-pink-card);
    --detail-color: var(--babel-darkred);
}

.news-detail--color-2 {
    --detail-bg: var(--babel-darkred);
    --detail-color: var(--babel-pink-card);
}

.news-detail--color-3 {
    --detail-bg: var(--babel-red);
    --detail-color: var(--babel-yellow);
}

/* Randfüllender Hintergrund via Body-Klasse */
body.news-color-0 main[role="main"] {
    background-color: var(--babel-yellow);
}

body.news-color-1 main[role="main"] {
    background-color: var(--babel-pink-card);
}

body.news-color-2 main[role="main"] {
    background-color: var(--babel-darkred);
}

body.news-color-3 main[role="main"] {
    background-color: var(--babel-red);
}

body[class*="news-color-"] .layout-content {
    background-color: transparent;
    padding-bottom: 0;
}

/* Basis
   -------------------------------------------------------------------------- */
.news-detail {
    background-color: var(--detail-bg, var(--babel-yellow));
    color: var(--detail-color, var(--babel-red));
    min-height: 100vh;
    padding: 0 0 3rem;
    max-width: 1400px;
    margin: 0 auto;
    box-shadow: none;
}

.news-detail__container {
    max-width: 1430px;
    margin: 0 auto;
    padding: 2rem var(--babel-gutter) 0;
}

/* «zurück»-Button – oben
   -------------------------------------------------------------------------- */
.news-detail__back {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
}

.news-detail__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    /* 25px */
    font-weight: 300;
    line-height: 1;
    color: var(--detail-color, #D52600);
    text-decoration: none;
    border: 1.3px solid currentColor;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.news-detail__back-link:hover {
    background-color: var(--detail-color, #D52600);
    color: var(--detail-bg, #E6E079);
}


.news-detail__back-link svg {
    flex-shrink: 0;
    display: block;
    will-change: transform;
    transform: translateZ(0);
}

.news-detail__back-link svg path {
    shape-rendering: crispEdges;
}

/* Tags
   -------------------------------------------------------------------------- */
.news-detail__tags {
    margin-bottom: 0.75rem;
}

.news-detail__tags a,
.news-detail__tags .field__item {
    display: inline-block;
    font-family: 'League Spartan', sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--detail-color, #D52600);
    border: 1.3px solid currentColor;
    border-radius: 8px;
    padding: 0.2rem 0.75rem;
    margin: 0 0.35rem 0.35rem 0;
    text-decoration: none;
}

/* Titel (H1)
   -------------------------------------------------------------------------- */
.news-detail__title {
    font-family: 'League Spartan', sans-serif;
    font-size: 2.5rem;
    /* 40px */
    font-weight: 400;
    line-height: 1;
    color: var(--detail-color, #D52600);
    margin: 0 0 2rem;
}

/* Zweispalten-Layout: Bilder links | Text rechts
   -------------------------------------------------------------------------- */
.news-detail__layout {
    display: grid;
    grid-template-columns: 396px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.news-detail__layout--no-image {
    grid-template-columns: 1fr;
}

/* Linke Spalte – Bilder
   -------------------------------------------------------------------------- */
.news-detail__left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.news-detail__figure {
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.news-detail__figure > article {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.news-detail__figure .media--type-image {
    position: relative;
    overflow: hidden;
    border-radius: 14px !important;
}

.news-detail__figure .media--type-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--detail-filter, var(--detail-bg));
    mix-blend-mode: multiply;
    pointer-events: none;
}

.news-detail--color-2 { --detail-filter: var(--babel-pink-card); }
.news-detail--color-3 { --detail-filter: var(--babel-yellow); }

.news-detail__figure .media--type-image {
    padding: 0;
    margin-bottom: 0;
    background: none;
}

.news-detail__figure img,
.news-detail__figure .media--type-image img {
    width: 100%;
    height: 201px;
    object-fit: cover;
    display: block;
    border-radius: 0;
    filter: grayscale(100%);
}

.news-detail__caption {
    font-family: 'Bitter', serif;
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 400;
    line-height: 1.667;
    color: var(--detail-color, #D52600);
    margin-top: 0.4rem;
}

/* Rechte Spalte – Lead + Text
   -------------------------------------------------------------------------- */
.news-detail__right {
    min-width: 0;
}

.news-detail__description {
    font-family: 'Bitter', serif;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
    line-height: 1.25;
    color: var(--detail-color, #D52600);
    margin-bottom: 1.5rem;
}

.news-detail__body {
    font-family: 'Bitter', serif;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
    line-height: 1.25;
    color: var(--detail-color, #D52600);
}

.news-detail__body p,
.news-detail__description p {
    margin: 0 0 1em;
    color: var(--detail-color, #D52600);
}

.news-detail__body h1,
.news-detail__body h2,
.news-detail__body h3,
.news-detail__body h4,
.news-detail__body h5,
.news-detail__body h6,
.news-detail__body ul,
.news-detail__body ol,
.news-detail__body li {
    color: var(--detail-color, #D52600);
}

.news-detail__body a,
.news-detail__description a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.news-detail__body a:hover,
.news-detail__description a:hover {
    color: inherit;
    border-bottom-width: 2px;
}

/* Responsive – ab ≤ 800px einspaltig
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .news-detail__layout {
        grid-template-columns: 1fr;
    }

    .news-detail__figure img,
    .news-detail__figure .media--type-image img {
        height: auto;
        aspect-ratio: 396 / 201;
    }

    /* News-Latest Block: nur 3 Einträge auf Mobile */
    .block-views-blocknews-latest .aktuell-grid__item:nth-child(n+4) {
        display: none;
    }

    .news-detail__back {
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    .aktuell-more-btn {
        width: 100%;
        justify-content: center;
    }

    .news-detail__back-link {
        width: 100%;
    }

    .aktuell-pager,
    .aktuell-pager nav,
    .aktuell-pager .pager__items,
    .aktuell-pager .pager__item--next {
        width: 100%;
    }

    .aktuell-pager .pager__item--next {
        padding: 0px;
    }

    .aktuell-pager .pager__item--next a {
        width: 100%;
        justify-content: center;
        margin: 0px;

    }
}

.news-card__datum,
.news-detail__datum {
    font-size: 0.875rem;
    font-weight: 300;
    margin: -0.75rem 0 1rem;
    color: inherit;
    opacity: 0.75;
}

/* Klickbares Bild – Zoom-Hinweis
   -------------------------------------------------------------------------- */
.news-detail__figure--zoomable {
    cursor: zoom-in;
}

.news-detail__figure--zoomable:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 14px;
}

/* Lightbox – Overlay
   -------------------------------------------------------------------------- */
body.news-lightbox--open {
    overflow: hidden;
}

.news-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.news-lightbox[hidden] {
    display: none;
}

.news-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: pointer;
    animation: lightbox-fade-in 0.2s ease;
}

@keyframes lightbox-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.news-lightbox__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: min(90vw, 1000px);
    max-height: 90vh;
    animation: lightbox-scale-in 0.2s ease;
}

@keyframes lightbox-scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.news-lightbox__close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 0;
    transition: color 0.15s ease;
}

.news-lightbox__close:hover {
    color: #fff;
}

.news-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 5rem);
    object-fit: contain;
    border-radius: 14px;
    filter: grayscale(100%);
}

.news-lightbox__caption {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Bitter', serif;
    font-size: 0.9375rem;
    text-align: center;
    margin: 0;
}