/* =========================================
   THEME TOKENS (safe to tweak)
========================================= */
:root {
    --accent: #7a0f1b; /* Bordeaux */
    --bg: #f8fafc;
    --text-main: #111827;
    --text-muted: #6b7280;
    --radius: 16px;
    --glass-bg: rgba(255,255,255,0.14);
    --glass-border: rgba(255,255,255,0.28);
    --glass-blur: 18px;
    --glass-shadow: 0 20px 50px rgba(0,0,0,0.18);
    --container-gradient: radial-gradient(900px 600px at 8% -10%, rgba(161,33,47,0.30) 0%, rgba(161,33,47,0.10) 40%, rgba(161,33,47,0.00) 70%), radial-gradient(800px 520px at 100% 0%, rgba(97,18,27,0.28) 0%, rgba(97,18,27,0.12) 40%, rgba(97,18,27,0.00) 70%), linear-gradient(180deg, rgba(17,17,17,0.06), rgba(17,17,17,0.06));
}

/* =========================================
   BODY stays as-is
========================================= */
body {
    background: var(--bg);
    color: var(--text-main);
}

/* =========================================
   NEWS CONTAINER: Glass + tint (only here)
========================================= */
/*.news-container {
    height: 100vh;
    position: relative;
    isolation: isolate;*/ /* keeps backdrop effects contained */
    /*background-image: var(--container-gradient);
    background-size: cover;
    background-position: center;
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: visible;*/
    /* Nice breathing room for header */
    /*padding-top: 18px;
}*/

/* =========================================
   REORDER with GRID AREAS – no HTML changes
========================================= */
.news-row {
    display: grid;
    gap: 28px;
    /* Desktop default: feature | list | events (sticky) */
    grid-template-columns: 2.5fr 3fr 1.5fr;
    grid-template-areas: "feature list events";
    align-items: start;
}

/* Assign areas to existing classes */
.left-news {
    grid-area: feature;
    margin-left: 20px;
}

.right-news-container {
    grid-area: list;
}

.events-section {
    grid-area: events;
}

/* Medium: bring events to the middle column between feature and list */
@media (max-width: 1199.98px) {
    .news-row {
        grid-template-columns: 1.5fr 1.2fr 1.5fr;
        grid-template-areas:
            "feature events list";
    }
}

/* Mobile: stack → events → feature → list */
@media (max-width: 767.98px) {
    .news-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "events"
            "feature"
            "list";
    }
}

/* Make events panel sticky on large screens only */
@media (min-width: 1200px) {
    .events-section {
        position: sticky;
        top: 24px;
    }
}

/* =========================================
   HEADER polish (appearance)
========================================= */
.news-header {
    display: grid !important;
    grid-template-columns: 1fr auto;
/*    align-items: center;*/
}

    .news-header a {
        text-decoration: none;
    }

    .news-header h1 {
        color: #760e26;
        text-align: center !important;
        margin: 0 auto;
        width: 100%;
        grid-column: 1 font-size: 2.4rem;
        line-height: 1.1;
        letter-spacing: .2px;
        background-clip: text;
        text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    }

/* =========================================
   BUTTONS (appearance)
========================================= */
.news-actions {
    display: flex;
    gap: 6px;
    margin-right: 100px;
}

/*.btn {
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    color: #ffe6ea;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    box-shadow: 0 2px 0 rgba(0,0,0,0.12) inset;
}*/

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.20);
    }

.btn-solid {
    background: linear-gradient(180deg, #8a1422, #6e0f1a);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

.btn-outline {
    color: #ffe6ea;
}

/* =========================================
   FEATURED (LEFT) CARD – readability overlay
========================================= */
.left-news .card {
    min-height: 520px; /* ensure it reads as the hero block */
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    box-shadow: 0 16px 38px rgba(0,0,0,0.25);
}

    .left-news .card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.20) 40%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.55) 100%);
    }

.left-news .card-body,
.left-news .card-footer {
    position: relative;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.card-body img {
    width: 300px;
    height: auto;
}

.left-news .card-body {
    padding: 18px;
}

.left-news .card-title {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.left-news .card-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.55);
    border-top: 1px solid rgba(255,255,255,0.25);
}

/* =========================================
   RIGHT NEWS LIST – consistent tiles
========================================= */
.right-news-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    align-content: start;
}


/* =========================================
   RIGHT CARDS: structure fix (footer always visible)
   (Based on your snippet, extended and hardened)
========================================= */

/* Ensure right-news tiles stack body + footer vertically and footer is not clipped */
.right-news {
    display: flex; /* stack children */
    flex-direction: column;
    /* If you previously set aspect-ratio, it may clip the footer. Cancel it here. */
    aspect-ratio: auto;
    min-height: 280px; /* safety min-height; a bit taller for footer room */
    position: relative;
    box-shadow: 0 10px 26px rgba(0,0,0,0.22);
    transform: translateZ(0);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    background-color: #ffffff; /* visible when no image */
}

    /* Polished hover effect */
    .right-news:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 34px rgba(0,0,0,0.30);
    }

    /* Decorative soft sheen; stays behind content */
    .right-news::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(600px 120px at 20% 0%, rgba(255,255,255,0.25), transparent 70%);
        z-index: 0;
        pointer-events: none;
    }

    /* Gentle dark overlay for text readability on any image */
    .right-news::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.38) 100% );
        z-index: 0;
        pointer-events: none;
    }

    /* Let the body take the remaining space so footer stays anchored at bottom */
    .right-news .card-body {
        flex: 1 1 auto;
        position: relative;
        z-index: 1;
        padding: 12px 14px;
        color: #ffffff;
        background: rgba(0,0,0,0.25);
/*        backdrop-filter: blur(10px) saturate(130%);*/
        -webkit-backdrop-filter: blur(10px) saturate(130%);
        
    }

        /* Clamp long text so the footer can’t be pushed off-screen */
        .right-news .card-body .card-text {
            padding: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

    /* Footer must sit above the overlay and be fully visible */
    .right-news .card-footer {
        position: relative;
        z-index: 2; /* above ::after overlay */
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 12px 5px;
        border-top: 1px solid rgba(255,255,255,0.45);
        background: linear-gradient( to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0.12) );
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        /* keep all three buttons on ONE row (no wrap); allow horizontal scroll on tiny screens */
        flex-wrap: nowrap;
        white-space: nowrap;
        scrollbar-width: thin; /* Firefox */
    }

        .right-news .card-footer::-webkit-scrollbar {
            height: 8px;
        }

        .right-news .card-footer::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.4);
            border-radius: 999px;
        }

    /* Make sure content layers over the overlays */
    .right-news .card-body,
    .right-news .card-footer {
        z-index: 1;
    }

        /* =========================================
   BUTTONS inside card footers – tidy single row
========================================= */
        .right-news .card-footer .btn,
        .left-news .card-footer .btn {
            padding: 8px 14px; /* comfy touch target */
            font-size: 0.82rem;
            line-height: 1;
            border-radius: 999px;
            margin-right: 10px; /* crisp spacing */
            border: 1px solid rgba(255,255,255,0.35);
            background: rgba(255,255,255,0.92);
            color: var(--accent, #7a0f1b);
            box-shadow: 0 2px 8px rgba(0,0,0,0.10);
            flex: 0 0 auto; /* prevents stretching; keeps single row feel */
        }

            .right-news .card-footer .btn:last-child,
            .left-news .card-footer .btn:last-child {
                margin-right: 0;
            }

        /* Harmonize variant colors for the glassy context */
        .right-news .card-footer .btn-info,
        .left-news .card-footer .btn-info {
            background: #ffffff;
            color: var(--accent, #7a0f1b);
            border-color: rgba(122,15,27,0.25);
        }

        .right-news .card-footer .btn-warning,
        .left-news .card-footer .btn-warning {
            background: linear-gradient(180deg,#ffd08a,#ffb85c);
            color: #4c2d00;
            border-color: rgba(0,0,0,0.05);
        }

        .right-news .card-footer .btn-danger,
        .left-news .card-footer .btn-danger {
            background: linear-gradient(180deg,#e05262,#bd2032);
            color: #fff;
            border-color: rgba(255,255,255,0.25);
        }

/* =========================================
   SHOW / FIT IMAGES RELIABLY
   (applies even if inline style only sets url)
========================================= */

/* Featured (left) card: ensure cover + correct positioning if only URL was set */
.left-news .card {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Right cards: handle inline background-image reliably */
.right-news {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

    /* For items without image, keep a neutral base so text is readable */
    .right-news[style*="background-color"] .card-body,
    .right-news[style*="background-color"] .card-footer {
        color: #111827;
        background: rgba(255,255,255,0.9);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: rgba(0,0,0,0.05);
        .right-news .card-title

{
    font-size: 1rem;
    margin-bottom: 6px;
}

.right-news .card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   EVENTS PANEL – elevated & clean
========================================= */
.events-section {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
}

    .events-section h3 {
        margin-bottom: 14px;
        text-align: center;
        font-weight: 800;
        color: #ffe2e6;
    }

.event-card {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.22);
}

    .event-card:last-child {
        border-bottom: none;
    }

.event-title {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

    .event-title:hover {
        text-decoration: underline;
    }

.event-date {
    color: #e6ecf3;
    font-size: .86rem;
}

.see-more-btn {
    display: block;
    margin: 18px auto 6px;
    text-align: center;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.06);
    color: #ffe6ea;
    text-decoration: none;
}

    .see-more-btn:hover {
        background: rgba(255,255,255,0.12);
    }

/* =========================================
   ACCESSIBILITY / PREFS & FALLBACKS
========================================= */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .news-container,
    .right-news .card-body,
    .right-news .card-footer,
    .events-section {
        background: #fff !important;
        color: #111827 !important;
        border: 1px solid rgba(0,0,0,0.10) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        text-shadow: none !important;
    }

    .see-more-btn, .btn {
        color: #111827 !important;
        background: #f3f4f6 !important;
        border-color: #e5e7eb !important;
    }
}

/* When blur unsupported, increase fill opacity slightly */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .news-container,
    .right-news .card-body,
    .right-news .card-footer,
    .events-section {
        background: rgba(255,255,255,0.88);
        border-color: rgba(0,0,0,0.08);
    }
}