/* =========================================================
   Mystic Gens — Clean base
   ========================================================= */

:root{
    /* kleuren */
    --text:  #e9edf6;
    --muted: #a7b0c3;
    --ring:  rgba(255,255,255,0.08);

    /* ui accenten */
    --accent: #8a5cf6; /* purple */
    --teal:   #1fbfbf;
    --gold:   #ffb703;

    --color-main: #ec5df4; /* Vibrant mystic pink */
    --color-accent: #a63df0; /* Deep magenta-purple accent */
    --color-text-primary: #f8eafd; /* Soft, readable white with a pink tint */
    --color-text-secondary: #d9c7e6; /* Muted lavender-gray for subtler text */
    --color-green: #3df0a6; /* Mystic teal-green — contrasts well with pink */
    --color-red: #f05779; /* Warm rose red, fits pink theme */
    --color-blue: #6aa8f7; /* Soft sky-blue highlight */
    --color-purple: #c18dfb; /* Harmonious lavender for glow accents */
    --bg-0: #0b0710; /* Deep twilight base background */
    --bg-1: #14101b; /* Slightly lighter section background */
    --bg-2: #1f1a29; /* Card or container background */
    --container-width: 80%; /* Breder dan voorheen */
    --table-bg: #2a1a3a; /* Iets donkerder achtergrond voor de tabel */
    --f-bg:#16161B;        /* donkere, niet-pikzwarte achtergrond */
    --f-bg-2:#1C1C22;      /* iets lichter voor bar */
    --f-text:#E7E8EE;      /* hoofdtekst */
    --f-muted:#B9BDCA;     /* subtiele tekst */
    --f-ring:#2A2A33;      /* dunne borders */
    --f-chip:#242432;      /* chip background */
    --f-chip-hover:#2C2C3C;
    --f-accent:#8A5CF6;    /* paars accent voor kleine highlights */
}

*{ box-sizing: border-box; }
html, body{ height:100%; margin:0; padding:0; }
body{
    min-height:100vh;
    display:flex;
    flex-direction:column;

    background: linear-gradient(180deg, #30242f 0%, #30242f 30%, #262626 70%, #262626 100%);
    color:#fff;
    font-family:'Poppins', sans-serif;
    background-attachment:fixed;
}

/* =========================================================
   Layout
   ========================================================= */

/* page = hero boven + rij eronder */
.page{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    flex: 1 0 auto;
}

/* ===== HERO & LOGO ===== */
.hero-wrap{
    position: relative;
    margin-top: 40px;
    z-index: 1;
    width: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    transform: translateY(-2vh);
}

.hero{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero__logo,
.hero img{
    width: 450px;
    height: auto;
    filter: drop-shadow(0 18px 60px rgba(122,97,255,.28));
    user-select: none;
    pointer-events: none;
}
.hero-banner{
    position: absolute;
    inset: -40px 0 auto;          /* iets extra hoogte boven */
    height: 520px;                 /* bannerhoogte */
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Eigenlijke afbeelding */
.hero-banner__img{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1600px;                 /* schaal mid content */
    max-width: none;
    height: auto;
    filter: contrast(1.02) saturate(1.05) brightness(.95);
}

/* Zachte vignettes links/rechts en topglow */
.hero-banner::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* zijkant-vignettes */
        radial-gradient(100% 80% at 0% 50%, rgba(7,7,12,.75) 0%, rgba(7,7,12,0) 60%) left / 50% 100% no-repeat,
        radial-gradient(100% 80% at 100% 50%, rgba(7,7,12,.75) 0%, rgba(7,7,12,0) 60%) right / 50% 100% no-repeat,
            /* top glow achter logo */
        radial-gradient(60% 50% at 50% 0%, rgba(160,120,255,.25) 0%, rgba(160,120,255,0) 70%);
    pointer-events: none;
}

/* Bottom fade naar je pagina-achtergrond */
.hero-banner::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px; height: 220px;
    background: linear-gradient(180deg, rgba(12,11,20,0) 0%, rgba(12,11,20,.75) 60%, rgba(12,11,20,1) 100%);
    pointer-events: none;
}


/* ===== PRO CARDS (Discord / Play) ===== */
.hero-card{
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    width: 320px;
    min-height: 94px;
    padding: 18px 20px 18px 56px; /* ruimte voor icon */
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    box-shadow:
        0 14px 28px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);
    outline: none;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* gradients */
.hero-card--discord{
    margin-right: auto;
    background: linear-gradient(135deg, #5865f2 0%, #7a5cff 55%, #8aa4ff 100%);
}
.hero-card--play{
    margin-left: auto;
    background: linear-gradient(135deg, #ff88ca 0%, #ff6fd8 45%, #f3a1ff 100%);
}

.hero-card--discord:hover,
.hero-card--discord:focus-visible {
    filter: drop-shadow(0 0 10px #8A7CFF26) drop-shadow(0 0 20px #8A7CFF1A);
    box-shadow:
        0 12px 24px #00000060,
        inset 0 1px 0 #ADC8FF26;
    transform: translateY(-4px);
}

.hero-card:focus-visible {
    box-shadow:
        0 0 0 3px #FFFFFF40,
        0 18px 34px #0000006B,
        inset 0 1px 0 #FFFFFF1F;
}

/* icon */
.hero-card__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
}

.hero-card__icon--discord {
    left: 16px;
}

.hero-card__icon--discord img {
    width: auto;
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0,0,0,.3));
    opacity: 1.5;
}

.hero-card__icon--server {
    left: 30px;
}

.hero-card__icon--server i {
    margin-top: 3px;
    font-size: 27px;
    color: #fff;
    opacity: 0.85;
}

/* tekst */
.hero-card__title{
    margin-left: 20px;
    margin-bottom: 2px;
    font-weight: 800;
    letter-spacing: .4px;
    font-size: 18px;
    line-height: 1.1;
}
.hero-card__subtitle{
    margin-left: 20px;
    font-weight: 700;
    letter-spacing: .3px;
    font-size: 13px;
    color: #eef1f9;
    opacity: .9;
}

/* in-card IP slide effect (play only) */
.hero-card__front{
    display: flex;
    flex-direction: column;
    align-items: center;   /* horizontaal centreren */
    justify-content: center;
    gap: 6px;
    text-align: center;
}
.hero-card__ip-layer{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    left: 30px;
    opacity: 0;
    transform: translateY(12px);
    transition: transform .22s ease, opacity .22s ease;
}
.hero-card__ip-title{
    margin-left: 25px;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .4px;
    text-transform: lowercase;
}
.hero-card__ip-helper{
    margin-left: 100px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    opacity: .9;
}
.hero-card--play:hover .hero-card__front,
.hero-card--play:focus-visible .hero-card__front{
    transform: translateY(-12px);
    opacity: 0;
}
.hero-card--play:hover .hero-card__ip-layer,
.hero-card--play:focus-visible .hero-card__ip-layer{
    opacity: 1;
    transform: translateY(-2px);
}
.hero-card--play{ cursor: pointer; }
.hero-card--play:hover{ filter: drop-shadow(0 0 20px rgba(255,120,255,.25)); transform: translateY(-4px)}

/* ===== Responsive ===== */
@media (max-width: 1100px){
    .hero-card{ width: 300px; }
    .hero-wrap{ gap: 36px; }
}
@media (max-width: 860px){
    .hero-wrap{
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }
    .hero-card--discord,
    .hero-card--play{
        margin: 0;            /* geen auto push op mobile */
        width: min(420px, 92vw);
    }
}

/* rij met sidebar + content */
.row{
    display:flex;
    gap:24px;
}

/* sidebar */
.sidebar{
    width: 250px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    padding: 18px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ring);
    backdrop-filter: blur(10px);

    /* behave like the wiki navbar: just wrap content, no forced full height */
    display: block;
}

/* nav inside sidebar – normal flow, no internal scroll */
.sidebar nav{
    overflow: visible;
    padding-right: 0;
}

@media (max-width: 980px){
    .row{ flex-direction: column; }

    .sidebar{
        width:100%;
        position: static;
        max-height: none;   /* no fixed height on mobile */
        overflow: visible;  /* let it grow normally */
    }

    .sidebar nav{
        overflow: visible;  /* no internal scroll on small screens */
    }
}


.brand{
    display:flex; align-items:center; gap:12px;
    margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--ring);
}
.brand img{ height:70px; width:auto; }
.brand .t{ font-weight: 900; letter-spacing: .3px; }
.brand .sub{ font-size:12px; color:var(--muted); }

/* nav in sidebar (main navbar only) */
.sidebar nav a{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; margin:6px 0;
    color:var(--text); text-decoration:none;
    border-radius:12px; border:1px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.sidebar nav a:hover{
    background: rgba(255,255,255,0.05);
    border-color: var(--ring);
    transform: translateY(-1px);
}
.sidebar nav a.primary{
    background: linear-gradient(180deg, #ffd56a, var(--gold));
    color:#2b2200; font-weight:800; justify-content:center;
    box-shadow: 0 8px 28px rgba(255,183,3,0.25);
    border:none;
}


/* Algemene navbar styling */
.navbar-item {
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: block;
    z-index: 1;
}

.navbar-item:hover {
    background-color: #444;
}

.navbar-item.active {
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(255, 111, 216, 0.45),
        rgba(138, 92, 246, 0.85)
    );

    color: #fff;
    font-weight: 800;

    border-radius: 12px;
    border: 1px solid rgba(255, 200, 255, 0.75);

    backdrop-filter: blur(6px);
    box-shadow:
        0 0 14px rgba(138, 92, 246, 0.7),
        0 10px 20px rgba(0, 0, 0, 0.45);

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease,
        border-color 0.25s ease;
}

.navbar-item.active:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 18px rgba(138, 92, 246, 0.85),
        0 12px 24px rgba(0, 0, 0, 0.5);
}


/* Dropdown container */
.nav-dropdown {
    position: relative;
    z-index: 40;
}

.nav-dropdown__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

/* Het pijltje dat het dropdown-menu aan geeft */
.dropdown-arrow {
    margin-left: 8px;
}

/* Dropdown menu (standaard verborgen) */
.nav-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;

    background-color: #333;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);

    display: none;
    z-index: 50; /* HOGER dan de sidebar-items */
}

/* Bij hover moet de dropdown zichtbaar worden */
.nav-dropdown:hover .nav-dropdown__menu {
    display: block;
}

/* Tussendoor separator */
.nav-dropdown__sep {
    border-top: 1px solid #444;
}

/* Logout knop styling */
.logout-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    width: 100%;
    padding: 10px 15px;
    text-align: left;
    cursor: pointer;
}

.logout-btn:hover {
    background-color: #444;
}
.dropdown-item.logout-btn {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 12px;
    margin:6px 0;
    background: transparent;
    border-radius:12px;
    border:1px solid transparent;
    color:var(--text);
    text-align:left;
    cursor:pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.dropdown-item.logout-btn:hover{
    background: rgba(255,255,255,0.05);
    border-color: var(--ring);
    transform: translateY(-1px);
}


/* content rechts */
.content{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 8px;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* home-secties */
.home-wrapper{ width:100%; max-width: 900px; }
.home-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
    gap: 16px;
}

/* =========================================================
   UI blokken
   ========================================================= */

.card{
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--ring);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(6px);
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.25); }

.muted{ color: var(--muted); }

.btn{
    padding:10px 18px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    border:1px solid transparent;
    transition: transform .2s, box-shadow .2s;
}
.btn:hover{ transform: translateY(-2px); }
.btn.purple{
    background: linear-gradient(180deg, #8a5cf6, #6b3ff3);
    color:#fff; box-shadow: 0 4px 12px rgba(138,92,246,.3);
}
.btn.gold{
    background: linear-gradient(180deg, #ffd56a, #ffb703);
    color:#2b2200; box-shadow: 0 4px 12px rgba(255,183,3,.25);
}

h2, h3{ margin: 0 0 8px 0; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
    .row{ flex-direction: column; }

    .sidebar{
        width:100%;
        position: static;
        max-height: none;   /* no fixed height on mobile */
        overflow: visible;  /* let it grow normally */
    }

    .sidebar nav{
        overflow: visible;  /* no internal scroll on small screens */
    }
}

/* full-width balk */
.footer{
    width: 100%;
    background:var(--f-bg);
    border-top:1px solid var(--f-ring);
    margin-top:32px;

    flex-shrink: 0;
}

/* gecentreerde content binnen max-width */
.footer__inner{
    max-width:1200px;
    margin:0 auto;
    padding:32px 16px 24px;
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap:32px;
    color:var(--f-text);
}

/* kolommen */
.footer__col h4{
    margin:0 0 10px 0;
    font-size:16px;
    font-weight:800;
}
.footer__col p{
    margin:0 0 12px 0;
    color:var(--f-muted);
    line-height:1.6;
    font-size:14px;
}

/* socials / chips */
.footer__chips{
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;
}
.chip{
    display:inline-flex; align-items:center;
    padding:8px 12px; border-radius:8px;
    background:var(--f-chip); color:var(--f-text);
    text-decoration:none; font-weight:700; font-size:14px;
    border:1px solid var(--f-ring);
    transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.chip:hover{ background:var(--f-chip-hover); transform:translateY(-1px); border-color:#363647; }

/* inline links */
.footer__links{ display:flex; flex-wrap:wrap; gap:12px; }
.footer__links a{
    color:var(--f-muted); text-decoration:none; font-weight:600; font-size:14px;
    border-bottom:1px dashed transparent; transition:color .15s ease, border-color .15s ease;
}
.footer__links a:hover{ color:var(--f-text); border-color:var(--f-text); }

/* IP box */
.ip{
    display:flex; align-items:center; gap:8px;
    background:#20202A; border:1px solid var(--f-ring);
    border-radius:10px; padding:10px 12px; width:100%;
}
.ip code{
    color:var(--f-text); font-weight:800; letter-spacing:.3px; font-size:14px;
}
.ip button{
    margin-left:auto; padding:8px 10px; border-radius:8px;
    background:var(--f-accent); color:white; font-weight:900; font-size:13px;
    border:1px solid #6f48d9; cursor:pointer;
    transition:filter .15s ease, transform .15s ease;
}
.ip button:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* onderbalk full-width */
.footer__bar{
    width:100%;
    border-top:1px solid var(--f-ring);
    background:var(--f-bg-2);
}
.footer__bar-inner{
    max-width:1200px; margin:0 auto; padding:12px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    color:var(--f-muted); font-size:13px;
}
.footer__legal{ display:inline-flex; align-items:center; gap:8px; }
.footer__legal a{
    color:var(--f-muted); text-decoration:none; border-bottom:1px dashed transparent;
}
.footer__legal a:hover{ color:var(--f-text); border-color:var(--f-text); }

/* responsive */
@media (max-width: 900px){
    .footer__inner{ grid-template-columns:1fr; gap:20px; }
    .footer__bar-inner{ flex-direction:column; align-items:flex-start; }
}

/* ============================
   HOME — MAIN GRID
   ============================ */

.home-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1.4fr);
    gap: 22px;
    align-items: flex-start;
}

@media(max-width: 960px) {
    .home-main-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================
   HOME — SIDEBAR
   ============================ */

.home-side-card {
    padding: 16px;
    border-radius: 18px;
    background: radial-gradient(circle at top left, rgba(138,92,246,0.24), transparent 70%),
    rgba(18,14,30,0.96);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 18px 46px rgba(0,0,0,0.55);
}

.home-side-card__title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
}

.home-side-card__text {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: var(--muted);
}

.home-side-card__list {
    margin: 0;
    padding-left: 16px;
    color: var(--text);
    font-size: 13px;
}

.home-side-card__list li + li {
    margin-top: 4px;
}

/* ============================
   Home - Latest News
   ============================ */

.home-news-card {
    padding: 18px 20px 20px;
    /* eigen shadow zodat we hover op .card overrulen */
    box-shadow: 0 18px 40px rgba(0,0,0,0.7);
    transform: none;
    transition: box-shadow 0.2s ease;
}

/* wrapper mag GEEN hover-effect hebben */
.home-news-card:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,0.7);
    transform: none;
}

.home-news-card__header h2 {
    margin: 0 0 4px 0;
    font-size: 20px;
}

.home-news-card__subtitle {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--muted);
}

.home-news__empty {
    margin: 10px 0 0 0;
    font-size: 14px;
    color: var(--muted);
}

/* ===== Layout: main + side ===== */

.home-news-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr);
    gap: 18px;
    margin-top: 6px;
}

.home-news-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Side panel (season info) ===== */

.home-news-side {
    align-self: flex-start;
}

.side-card {
    background: radial-gradient(circle at top left, rgba(138,92,246,0.22), transparent 55%),
    var(--bg-2);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 12px 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.6);
}

.side-card__title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px 0;
}

.side-card__text {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 8px 0;
}

.side-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.side-card__list li + li {
    margin-top: 3px;
}

/* ===== News cards ===== */

/* container voor featured + grid */
.home-news {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* algemene card-look, kleur wat lichter / meer in lijn met site */
.news-card {
    background:
        radial-gradient(circle at top left, rgba(138,92,246,0.25), transparent 55%),
        var(--bg-2);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 14px 30px rgba(0,0,0,0.6);
    overflow: hidden;
    color: var(--text);
}

/* featured card – GEEN hover hier */
.news-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 18px;
    padding: 14px 16px 16px;
}

/* afbeelding */
.news-card__image-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
}

.news-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: none;
    filter: none;
    transition: none;
}

/* body */
.news-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.news-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.news-card__title--lg {
    font-size: 20px;
}

.news-card__meta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.news-card__dot {
    margin: 0 4px;
}

.news-card__excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}

.news-card__excerpt--lg {
    font-size: 14px;
}

/* grid voor overige items onder featured */
.home-news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* kleine varianten (met hover) */
.news-card--small {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    background:
        radial-gradient(circle at top left, rgba(138,92,246,0.18), transparent 55%),
        rgba(25, 20, 40, 0.98);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

/* subtiele hover alleen op de kleine kaarten */
.news-card--small:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.7);
    border-color: rgba(244,199,93,0.7); /* kleine gouden edge */
}

.news-card__image-wrap--small {
    border-radius: 12px;
}

.news-card__body--small {
    justify-content: flex-start;
}

/* responsive tweaks */
@media (max-width: 1100px) {
    .home-news-layout {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.9fr);
    }
}

@media (max-width: 900px) {
    .home-news-layout {
        grid-template-columns: 1fr;
    }

    .news-card--featured {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .home-news__grid {
        grid-template-columns: 1fr;
    }

    .news-card--small {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

/* === 1. Géén hover op de grote Latest News-kaart === */
/* jouw kaart heeft class="card home-news-card" */
.card.home-news-card,
.card.home-news-card:hover {
    transform: none !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.7) !important;
}

/* Featured news zelf ook geen hover-effect */
.news-card--featured {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr); /* bredere afbeelding */
    gap: 16px;
    padding: 16px 18px;
    background:
        radial-gradient(circle at top left, rgba(138,92,246,0.22), transparent 55%),
        rgba(25, 20, 40, 0.98);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 14px 30px rgba(0,0,0,0.60);
    cursor: default;
    transition: transform 0.18s ease-out,
                box-shadow 0.18s ease-out,
                background 0.18s ease-out;

}

.news-card--featured:hover {
    transform: translateY(-2px); /* véél subtieler */
    box-shadow: 0 16px 36px rgba(0,0,0,0.72);
    background:
        radial-gradient(circle at top left, rgba(138,92,246,0.28), transparent 55%),
        rgba(28, 22, 46, 0.98); /* iets lichtere tint, maar minimaal */
    border-color: rgba(255,255,255,0.08);
}

/* === 2. Kleine nieuws-kaartjes: rustige hover === */

.news-card--small {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    background:
        radial-gradient(circle at top left, rgba(138,92,246,0.18), transparent 55%),
        rgba(25, 20, 40, 0.98);
    cursor: pointer;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 10px 22px rgba(0,0,0,0.55);
    transition: transform 0.18s ease-out,
                box-shadow 0.18s ease-out,
                background 0.18s ease-out;
}

/* subtiele hover: klein tikje omhoog, iets sterkere shadow, géén oranje rand */
.news-card--small:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(0,0,0,0.75);
    background:
        radial-gradient(circle at top left, rgba(138,92,246,0.3), transparent 55%),
        rgba(30, 24, 50, 0.98);
    border-color: rgba(255,255,255,0.06); /* neutraal houden */
}