/* Geen margin-bottom op p binnen cards */
.player-compact__name,
.player-compact__meta,
.player-hero__name,
.player-hero__meta,
.club-card__name,
.club-card__province,
.article-card__date,
.article-card__author {
    margin-bottom: 0;
}

/* ============================================================
   badmintonline.nl — Components
   ============================================================ */

/* --------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------- */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-3) var(--space-5);
    font-size:       var(--font-size-sm);
    font-weight:     var(--font-weight-medium);
    line-height:     1;
    border-radius:   var(--radius-md);
    border:          1px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--transition-fast),
                     color var(--transition-fast),
                     border-color var(--transition-fast),
                     transform var(--transition-fast);
    white-space:     nowrap;
}

.btn:active {
    transform: translateY(1px);
}

/* Primaire knop (neutraal — zwart) */
.btn--primary {
    background: var(--color-brand);
    color:      var(--color-white);
    border-color: var(--color-brand);
}

.btn--primary:hover {
    background:   var(--color-brand-dark);
    border-color: var(--color-brand-dark);
    color:        var(--color-white);
}

/* CTA knop (oranje — spaarzaam) */
.btn--cta {
    background:   var(--color-cta);
    color:        var(--color-cta-text);
    border-color: var(--color-cta);
}

.btn--cta:hover {
    background:   var(--color-cta-dark);
    border-color: var(--color-cta-dark);
    color:        var(--color-cta-text);
}

/* Outline knop */
.btn--outline {
    background:   transparent;
    color:        var(--color-text);
    border-color: var(--color-border-strong);
}

.btn--outline:hover {
    background:   var(--color-bg-secondary);
    border-color: var(--color-brand);
    color:        var(--color-text);
}

/* Ghost knop */
.btn--ghost {
    background:   transparent;
    color:        var(--color-text-secondary);
    border-color: transparent;
}

.btn--ghost:hover {
    background: var(--color-bg-secondary);
    color:      var(--color-text);
}

/* Grootte varianten */
.btn--sm {
    padding:   var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

.btn--lg {
    padding:   var(--space-4) var(--space-8);
    font-size: var(--font-size-base);
}

/* --------------------------------------------------------------
   Badges / labels
   -------------------------------------------------------------- */
.badge {
    display:        inline-flex;
    align-items:    center;
    padding:        2px var(--space-2);
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-medium);
    border-radius:  var(--radius-sm);
    line-height:    1.4;
    white-space:    nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge--nieuws     { background: var(--color-accent-nieuws-light); color: var(--color-accent-nieuws); }
.badge--video      { background: var(--color-accent-video-light);  color: var(--color-accent-video);  }
.badge--kennisbank { background: var(--color-accent-kennisbank-light); color: var(--color-accent-kennisbank); }
.badge--spelers    { background: var(--color-accent-spelers-light); color: var(--color-accent-spelers); }
.badge--clubs      { background: var(--color-accent-clubs-light);  color: var(--color-accent-clubs);  }
.badge--cta        { background: var(--color-cta-light);           color: var(--color-cta);           }

/* --------------------------------------------------------------
   Sectieheader
   -------------------------------------------------------------- */
.section-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--space-4);
    margin-bottom:   var(--space-6);
    padding-bottom:  var(--space-3);
}

.section-header__title {
    font-size:   var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color:       var(--color-text);
    line-height: var(--line-height-tight);
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

/* Gekleurde streep links van de titel */
.section-header__title::before {
    content:      '';
    display:      inline-block;
    width:        4px;
    height:       1.1em;
    border-radius:var(--radius-sm);
    flex-shrink:  0;
    background:   var(--section-accent, var(--color-brand));
}

.section-header__link {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color:       var(--color-text-tertiary);
    white-space: nowrap;
    transition:  color var(--transition-fast);
}

.section-header__link:hover {
    color: var(--color-text);
}

/* Accentkleuren per sectie */
.section--nieuws     { --section-accent: var(--color-accent-nieuws); }
.section--video      { --section-accent: var(--color-accent-video); }
.section--kennisbank { --section-accent: var(--color-accent-kennisbank); }
.section--spelers    { --section-accent: var(--color-accent-spelers); }
.section--clubs      { --section-accent: var(--color-accent-clubs); }

/* --------------------------------------------------------------
   Artikelkaart
   -------------------------------------------------------------- */
.article-card {
    display:        flex;
    flex-direction: column;
    background:     var(--color-card-bg);
    border:         1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    overflow:       hidden;
    transition:     border-color var(--transition-fast),
                    box-shadow var(--transition-fast),
                    transform var(--transition-fast);
    text-decoration:none;
    color:          inherit;
    height:         100%;
}

.article-card:hover {
    border-color: var(--color-border-strong);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-2px);
    color:        inherit;
}


.article-card__image {
    position:       relative;
    aspect-ratio:   3 / 2;
    overflow:       hidden;
    background:     var(--color-bg-tertiary);
    display:        block;
}

.article-card__image img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    transition: transform 400ms ease;
}

.article-card:hover .article-card__image img {
    transform: scale(1.04);
}

.article-card__body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        var(--space-4);
    gap:            var(--space-2);
}

.article-card__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-2);
    flex-wrap:       wrap;
}

.article-card__source {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-tertiary);
    white-space:nowrap;
    margin-left:auto;
}

.article-card__date {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-tertiary);
    white-space:nowrap;
}

.article-card__author {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-tertiary);
}

.article-card__author::before {
    content: '·';
    margin-right: var(--space-2);
}

.article-card__title {
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color:       var(--color-text);
    margin:      0;
    transition:  color var(--transition-fast);
}

.article-card:hover .article-card__title {
    color: var(--color-text-link-hover);
}

.article-card__intro {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin:      0;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* Hero artikelkaart (groot, horizontaal op desktop) */
.article-card--hero {
    flex-direction: row;
    max-height:     480px;
}

.article-card--hero .article-card__image {
    flex:        0 0 55%;
    aspect-ratio:unset;
    max-height:  480px;
}

.article-card--hero .article-card__body {
    padding:     var(--space-8);
    justify-content: flex-end;
}

.article-card--hero .article-card__title {
    font-size:    var(--font-size-2xl);
    line-height:  var(--line-height-tight);
}

.article-card--hero .article-card__intro {
    font-size:    var(--font-size-base);
    -webkit-line-clamp: 4;
}

/* Compacte artikelkaart (lijst zonder afbeelding) */
.article-card--compact {
    flex-direction: row;
    align-items:    center;
    border-radius:  var(--radius-md);
    gap:            var(--space-4);
}

.article-card--compact .article-card__image {
    flex:         0 0 80px;
    width:        80px;
    aspect-ratio: unset;
    align-self:   stretch;
    border-radius:var(--radius-sm) 0 0 var(--radius-sm);
    overflow:     hidden;
    position:     relative;
}

.article-card--compact .article-card__image img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.article-card--compact .article-card__body {
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
}

.article-card--compact .article-card__title {
    font-size: var(--font-size-sm);
    -webkit-line-clamp: 2;
    display:   -webkit-box;
    -webkit-box-orient: vertical;
    overflow:  hidden;
}

/* --------------------------------------------------------------
   Artikel grid
   -------------------------------------------------------------- */
.article-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
}

.article-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.article-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
    .article-grid     { grid-template-columns: repeat(2, 1fr); }
    .article-grid--4  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .article-grid,
    .article-grid--4,
    .article-grid--2  { grid-template-columns: 1fr; }
    .article-card--hero { flex-direction: column; max-height: none; }
    .article-card--hero .article-card__image { flex: none; aspect-ratio: 3/2; }
    .article-card--hero .article-card__body  { padding: var(--space-5); }
    .article-card--hero .article-card__title { font-size: var(--font-size-xl); }
}

/* --------------------------------------------------------------
   Spelerkaart
   -------------------------------------------------------------- */
.player-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    background:     var(--color-card-bg);
    border:         1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    padding:        var(--space-5);
    text-decoration:none;
    color:          inherit;
    transition:     border-color var(--transition-fast),
                    box-shadow var(--transition-fast),
                    transform var(--transition-fast);
}

.player-card:hover {
    border-color: var(--color-accent-spelers);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-2px);
    color:        inherit;
}

.player-card__photo {
    width:         80px;
    height:        80px;
    border-radius: var(--radius-full);
    object-fit:    cover;
    background:    var(--color-accent-spelers-light);
    margin-bottom: var(--space-3);
    border:        2px solid var(--color-border);
    transition:    border-color var(--transition-fast);
}

.player-card:hover .player-card__photo {
    border-color: var(--color-accent-spelers);
}

.player-card__name {
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-text);
    margin-bottom: var(--space-1);
    line-height:   var(--line-height-snug);
}

.player-card__brand {
    font-size: var(--font-size-xs);
    color:     var(--color-text-tertiary);
}

.player-card__ranking {
    margin-top:  var(--space-2);
    font-size:   var(--font-size-xs);
    color:       var(--color-accent-spelers);
    font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------
   Clubkaart
   -------------------------------------------------------------- */
.club-card {
    display:        flex;
    flex-direction: column;
    background:     var(--color-card-bg);
    border:         1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    overflow:       hidden;
    text-decoration:none;
    color:          inherit;
    transition:     border-color var(--transition-fast),
                    box-shadow var(--transition-fast),
                    transform var(--transition-fast);
}

.club-card:hover {
    border-color: var(--color-accent-clubs);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-2px);
    color:        inherit;
}

.club-card__image {
    position:     relative;
    aspect-ratio: 3 / 2;
    overflow:     hidden;
    background:   var(--color-accent-clubs-light);
    display:      block;
    flex-shrink:  0;
}

.club-card__image img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    transition: transform 400ms ease;
}

.club-card:hover .club-card__image img {
    transform: scale(1.04);
}

.club-card__body {
    padding: var(--space-4);
}

.club-card__name {
    font-size:     var(--font-size-base);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-text);
    margin-bottom: var(--space-1);
}

.club-card__city {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-tertiary);
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    margin:      0;
}

.club-card__locations {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-tertiary);
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    margin-top:  var(--space-1);
}

/* --------------------------------------------------------------
   Kennisbank kaart
   -------------------------------------------------------------- */
/* knowhow-card: zie volledige definitie verderop */

/* --------------------------------------------------------------
   CTA blok (oranje — spaarzaam)
   -------------------------------------------------------------- */
.cta-block {
    background:    var(--color-cta-light);
    border:        1px solid rgba(255,102,0,.3);
    border-radius: var(--radius-md);
    padding:       var(--space-8) var(--space-10);
    text-align:    center;
    margin:        var(--space-12) 0;
}

.cta-block__title {
    font-size:     var(--font-size-xl);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-cta-dark);
    margin-bottom: var(--space-3);
}

.cta-block__text {
    font-size:     var(--font-size-base);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-5);
    max-width:     480px;
    margin-left:   auto;
    margin-right:  auto;
}

/* CTA compact (voor naast kennisbank) */
.cta-block--compact {
    padding:       var(--space-5);
    margin:        0;
    text-align:    left;
    border-radius: var(--radius-md);
    align-self:    start;
}

.cta-block--compact .cta-block__text {
    text-align:  left;
    margin-left: 0;
    max-width:   none;
    font-size:   var(--font-size-sm);
}

/* Club provincie label */
.club-card__province {
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-medium);
    color:          var(--color-accent-clubs);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom:  var(--space-1);
}

/* --------------------------------------------------------------
   Paginering
   -------------------------------------------------------------- */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    margin-top:      var(--space-10);
    flex-wrap:       wrap;
}

.pagination__item {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   var(--radius-md);
    font-size:       var(--font-size-sm);
    font-weight:     var(--font-weight-medium);
    color:           var(--color-text-secondary);
    border:          1px solid var(--color-border);
    text-decoration: none;
    transition:      background var(--transition-fast),
                     border-color var(--transition-fast),
                     color var(--transition-fast);
}

.pagination__item:hover {
    background:   var(--color-bg-secondary);
    border-color: var(--color-border-strong);
    color:        var(--color-text);
}

.pagination__item--active {
    background:   var(--color-brand);
    border-color: var(--color-brand);
    color:        var(--color-white);
}

.pagination__item--active:hover {
    background:   var(--color-brand-dark);
    border-color: var(--color-brand-dark);
    color:        var(--color-white);
}

.pagination__item--disabled {
    opacity: .4;
    pointer-events: none;
}

/* --------------------------------------------------------------
   Fotocredit
   -------------------------------------------------------------- */
.photo-credit {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-tertiary);
    margin-top: var(--space-1);
    font-style: italic;
}

/* --------------------------------------------------------------
   Sectie wrapper
   -------------------------------------------------------------- */
.section {
    padding-top:    var(--space-10);
    padding-bottom: var(--space-10);
}

.section--first { padding-top: 0; }

.section + .section { /* geen border */ }

.section--shaded {
    background: var(--color-bg-secondary);
}

/* Mobile: article-card automatisch compact */
@media (max-width: 600px) {
    .article-grid .article-card:not(.article-card--hero) {
        flex-direction: row;
        align-items:    stretch;
    }

    .article-grid .article-card:not(.article-card--hero) .article-card__image {
        flex:         0 0 80px;
        width:        80px;
        aspect-ratio: unset;
        align-self:   stretch;
        border-radius:var(--radius-sm) 0 0 var(--radius-sm);
        position:     relative;
        min-height:   72px;
    }

    .article-grid .article-card:not(.article-card--hero) .article-card__image img {
        position:   absolute;
        inset:      0;
        width:      100%;
        height:     100%;
        object-fit: cover;
    }

    .article-grid .article-card:not(.article-card--hero) .article-card__intro {
        display: none;
    }

    .article-grid .article-card:not(.article-card--hero) .article-card__body {
        padding: var(--space-3);
    }

    .article-grid .article-card:not(.article-card--hero) .article-card__title {
        font-size: var(--font-size-sm);
        -webkit-line-clamp: 2;
        display:   -webkit-box;
        -webkit-box-orient: vertical;
        overflow:  hidden;
    }
}


/* Merk badge op speler foto */
.player-compact__wrap {
    position:      relative;
    flex-shrink:   0;
    width:         48px;
    height:        48px;
    min-width:     48px;
    border-radius: var(--radius-full);
    display:       block;
}

.player-compact__brand-badge {
    position:        absolute;
    bottom:          -3px;
    right:           -3px;
    width:           20px;
    height:          20px;
    border-radius:   var(--radius-full);
    background:      var(--color-bg);
    border:          1.5px solid var(--color-border);
    overflow:        hidden;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      var(--shadow-sm);
}

.player-compact__brand-badge img {
    width:      14px;
    height:     14px;
    object-fit: contain;
}


/* Club eredivisie badge */
.club-card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-2);
}

.club-card__eredivisie {
    height:      42px;
    width:       42px;
    flex-shrink: 0;
    object-fit:  contain;
    opacity:     .85;
    transition:  opacity var(--transition-fast);
}

/* Zorg dat logo-light-mode/dark-mode werkt binnen club-card */
.club-card .logo-light-mode { display: block; }
.club-card .logo-dark-mode  { display: none;  }

[data-theme="dark"] .club-card .logo-light-mode { display: none;  }
[data-theme="dark"] .club-card .logo-dark-mode  { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .club-card .logo-light-mode { display: none;  }
    :root:not([data-theme="light"]) .club-card .logo-dark-mode  { display: block; }
}

.club-card:hover .club-card__eredivisie {
    opacity: 1;
}

.club-card:hover .club-card__eredivisie {
    opacity: 1;
}


/* ==============================================================
   Cookie banner & modal
   ============================================================== */
.cookie-banner {
    position:      fixed;
    bottom:        var(--space-4);
    left:          var(--space-4);
    right:         var(--space-4);
    max-width:     560px;
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-lg);
    padding:       var(--space-5) var(--space-6);
    z-index:       var(--z-toast);
    display:       flex;
    flex-direction:column;
    gap:           var(--space-4);
}

@media (min-width: 600px) {
    .cookie-banner {
        bottom: var(--space-6);
        left:   var(--space-6);
        right:  auto;
    }
}

.cookie-banner__title {
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color:       var(--color-text);
    margin:      0;
}

.cookie-banner__text {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-secondary);
    margin:      0;
    line-height: var(--line-height-base);
}

.cookie-banner__text a {
    color:           var(--color-text-link);
    text-decoration: underline;
}

.cookie-banner__actions {
    display:  flex;
    gap:      var(--space-3);
    flex-wrap:wrap;
}

.cookie-banner__actions .btn {
    flex: 1;
    min-width: 120px;
}

.cookie-banner__settings-link {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-tertiary);
    text-align: center;
    text-decoration: underline;
    cursor:     pointer;
    background: none;
    border:     none;
    font-family:inherit;
    width:      100%;
}

.cookie-banner__settings-link:hover {
    color: var(--color-text-secondary);
}

/* Cookie modal */
.cookie-modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.5);
    z-index:    calc(var(--z-toast) + 10);
    display:    flex;
    align-items:center;
    justify-content:center;
    padding:    var(--space-4);
    backdrop-filter: blur(4px);
}

/* hidden attribuut heeft altijd voorrang */
.cookie-modal-overlay[hidden] {
    display: none !important;
}

.cookie-modal {
    background:    var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-lg);
    max-width:     500px;
    width:         100%;
    max-height:    90vh;
    overflow-y:    auto;
    display:       flex;
    flex-direction:column;
}

.cookie-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--space-5) var(--space-6);
    border-bottom:   1px solid var(--color-border);
    position:        sticky;
    top:             0;
    background:      var(--color-bg);
    z-index:         1;
}

.cookie-modal__title {
    font-size:   var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color:       var(--color-text);
    margin:      0;
}

.cookie-modal__close {
    width:         36px;
    height:        36px;
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content:center;
    color:         var(--color-text-secondary);
    background:    none;
    border:        none;
    cursor:        pointer;
    transition:    background var(--transition-fast);
}

.cookie-modal__close:hover {
    background: var(--color-bg-secondary);
}

.cookie-modal__body {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap:     var(--space-5);
}

.cookie-modal__intro {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin:      0;
}

.cookie-category {
    display:      flex;
    gap:          var(--space-4);
    align-items:  flex-start;
    padding:      var(--space-4);
    border-radius: var(--radius-md);
    background:   var(--color-bg-secondary);
}

.cookie-category__info {
    flex: 1;
}

.cookie-category__name {
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-text);
    margin-bottom: var(--space-1);
}

.cookie-category__desc {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-secondary);
    margin:     0;
    line-height:var(--line-height-base);
}

/* Toggle switch */
.cookie-toggle {
    position:   relative;
    flex-shrink:0;
}

.cookie-toggle input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.cookie-toggle__track {
    display:        block;
    width:          44px;
    height:         24px;
    background:     var(--color-border-strong);
    border-radius:  var(--radius-full);
    cursor:         pointer;
    transition:     background var(--transition-fast);
    position:       relative;
}

.cookie-toggle__track::after {
    content:       '';
    position:      absolute;
    top:           2px;
    left:          2px;
    width:         20px;
    height:        20px;
    border-radius: var(--radius-full);
    background:    #ffffff;
    transition:    left var(--transition-fast);
    box-shadow:    var(--shadow-sm);
}

.cookie-toggle input:checked + .cookie-toggle__track {
    background: var(--color-accent-clubs);
}

.cookie-toggle input:checked + .cookie-toggle__track::after {
    left: 22px;
}

.cookie-toggle input:disabled + .cookie-toggle__track {
    opacity: .6;
    cursor:  not-allowed;
}

.cookie-modal__footer {
    padding:     var(--space-5) var(--space-6);
    border-top:  1px solid var(--color-border);
    display:     flex;
    gap:         var(--space-3);
    flex-wrap:   wrap;
    position:    sticky;
    bottom:      0;
    background:  var(--color-bg);
}

.cookie-modal__footer .btn {
    flex: 1;
    min-width: 120px;
}



/* Mobile: club-card compact */
@media (max-width: 600px) {
    .club-card {
        flex-direction: row;
        align-items:    stretch;
    }

    .club-card__image {
        flex:         0 0 80px;
        width:        80px;
        aspect-ratio: unset;
        align-self:   stretch;
        border-radius:var(--radius-sm) 0 0 var(--radius-sm);
        overflow:     hidden;
        position:     relative;
    }

    .club-card__image img {
        position:   absolute;
        inset:      0;
        width:      100%;
        height:     100%;
        object-fit: cover;
    }

    .club-card__body {
        padding: var(--space-3);
    }
}

/* ==============================================================
   Kennisbank kaart — identiek patroon als article-card
   ============================================================== */
.knowhow-card {
    display:         flex;
    flex-direction:  column;
    background:      var(--color-card-bg);
    border:          1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    overflow:        hidden;
    text-decoration: none;
    color:           inherit;
    height:          100%;
    transition:      border-color var(--transition-fast),
                     box-shadow var(--transition-fast),
                     transform var(--transition-fast);
}

.knowhow-card:hover {
    border-color: var(--color-accent-kennisbank);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-2px);
    color:        inherit;
}

.knowhow-card__image {
    position:     relative;
    aspect-ratio: 3 / 2;
    overflow:     hidden;
    background:   var(--color-accent-kennisbank-light);
    flex-shrink:  0;
}

.knowhow-card__image img {
    position:         absolute;
    inset:            0;
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center;
    transition:       transform 400ms ease;
    display:          block;
}

.knowhow-card:hover .knowhow-card__image img {
    transform: scale(1.04);
}

.knowhow-card__body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        var(--space-4);
    gap:            var(--space-2);
}

.knowhow-card__category {
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-medium);
    color:          var(--color-accent-kennisbank);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin:         0;
}

.knowhow-card__title {
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color:       var(--color-text);
    line-height: var(--line-height-snug);
    margin:      0;
}



.knowhow-card__intro {
    font-size:          var(--font-size-sm);
    color:              var(--color-text-secondary);
    line-height:        var(--line-height-base);
    margin:             0;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Mobile: compact layout */
@media (max-width: 900px) {
    .knowhow-card {
        flex-direction: row;
        align-items:    stretch;
    }

    .knowhow-card__image {
        flex:         0 0 80px;
        width:        80px;
        aspect-ratio: unset;
        align-self:   stretch;
        border-radius:var(--radius-sm) 0 0 var(--radius-sm);
        overflow:     hidden;
        position:     relative;
    }

    .knowhow-card__image img {
        position:   absolute;
        inset:      0;
        width:      100%;
        height:     100%;
        object-fit: cover;
    }

    .knowhow-card__body {
        padding: var(--space-3);
        flex:    1;
    }

    .knowhow-card__intro {
        display: none;
    }
}

/* ==============================================================
   Player compact kaart
   ============================================================== */
.player-compact {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    padding:         var(--space-3);
    border-radius:   var(--radius-md);
    border:          1px solid var(--color-card-border);
    background:      var(--color-card-bg);
    text-decoration: none;
    color:           inherit;
    transition:      border-color var(--transition-fast),
                     background var(--transition-fast);
}

.player-compact:hover {
    border-color: var(--color-accent-spelers);
    color:        inherit;
}

.player-compact__wrap {
    position:    relative;
    flex-shrink: 0;
    width:       48px;
    height:      48px;
    min-width:   48px;
    /* overflow visible zodat badge buiten de cirkel zichtbaar is */
    overflow:    visible;
}

/* Aparte cirkel container voor de foto */
.player-compact__photo-circle {
    position:      absolute;
    inset:         0;
    border-radius: var(--radius-full);
    overflow:      hidden;
    background:    var(--color-accent-spelers-light);
    display:       flex;
}

.player-compact__photo {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
    display:         block;
    flex-shrink:     0;
    min-height:      100%;
}

.player-compact__photo--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    color:           var(--color-accent-spelers);
    opacity:         .5;
}

.player-compact__brand-badge {
    position:        absolute;
    bottom:          -4px;
    right:           -4px;
    width:           25px;
    height:          25px;
    border-radius:   var(--radius-full);
    background:      #ffffff;
    border:          none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    box-shadow:      0 1px 4px rgba(0,0,0,.2);
}

.player-compact__brand-badge img {
    width:      18px;
    height:     18px;
    object-fit: contain;
}

.player-compact__info {
    flex:     1;
    min-width:0;
}

.player-compact__name {
    font-size:    var(--font-size-sm);
    font-weight:  var(--font-weight-bold);
    color:        var(--color-text);
    line-height:  var(--line-height-snug);
    margin:       0;
    word-break:   break-word;
    overflow-wrap:break-word;
}

.player-compact__meta {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-tertiary);
    display:    flex;
    gap:        var(--space-2);
    margin-top: 2px;
    flex-wrap:  wrap;
}

.player-compact__ranking {
    color:       var(--color-accent-spelers);
    font-weight: var(--font-weight-medium);
}


/* ==============================================================
   Meer laden knop
   ============================================================== */
.load-more {
    display:         flex;
    justify-content: center;
    margin-top:      var(--space-10);
}

.load-more__btn {
    min-width:   200px;
    gap:         var(--space-2);
}

.load-more__count {
    font-size:  var(--font-size-xs);
    opacity:    .7;
    font-weight:var(--font-weight-normal);
}

/* ==============================================================
   Breadcrumb
   ============================================================== */
.breadcrumb {
    margin-bottom: var(--space-3);
}

.breadcrumb__list {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--space-1);
    list-style:  none;
    padding:     0;
    margin:      0;
}

.breadcrumb__item {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    font-size:   var(--font-size-xs);
    color:       var(--color-text-tertiary);
}

.breadcrumb__item + .breadcrumb__item::before {
    content: '›';
    color:   var(--color-border-strong);
}

.breadcrumb__link {
    color:      var(--color-text-tertiary);
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover  { color: var(--color-text); }
.breadcrumb__current     { color: var(--color-text-secondary); }

/* Nieuws intro tekst */
.news-intro {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-6);
    margin-top:    0;
}

/* ==============================================================
   Zoekmodal
   ============================================================== */
.search-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.6);
    z-index:         calc(var(--z-header) + 20);
    display:         flex;
    align-items:     flex-start;
    justify-content: center;
    padding-top:     80px;
    backdrop-filter: blur(4px);
}

.search-modal-overlay[hidden] { display: none !important; }

.search-modal {
    background:    var(--color-card-bg);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-lg);
    width:         100%;
    max-width:     600px;
    margin:        0 var(--space-4);
}

.search-modal__form { padding: var(--space-2); }

.search-modal__inner {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding:     var(--space-2) var(--space-3);
}

.search-modal__icon  { flex-shrink: 0; color: var(--color-text-tertiary); }

.search-modal__input {
    flex:        1;
    border:      none;
    outline:     none;
    font-size:   var(--font-size-lg);
    background:  transparent;
    color:       var(--color-text);
    font-family: inherit;
    min-width:   0;
}

.search-modal__input::placeholder { color: var(--color-text-tertiary); }

.search-modal__close {
    flex-shrink:   0;
    width:         32px;
    height:        32px;
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content:center;
    color:         var(--color-text-tertiary);
    cursor:        pointer;
    background:    none;
    border:        none;
    transition:    background var(--transition-fast), color var(--transition-fast);
}

.search-modal__close:hover {
    background: var(--color-bg-secondary);
    color:      var(--color-text);
}

/* ==============================================================
   Zoekpagina
   ============================================================== */
.search-form {
    margin-bottom: var(--space-8);
}

.search-form__inner {
    display:   flex;
    gap:       var(--space-3);
    max-width: 600px;
}

.search-form__input {
    flex:          1;
    padding:       var(--space-3) var(--space-4);
    font-size:     var(--font-size-base);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    background:    var(--color-card-bg);
    color:         var(--color-text);
    font-family:   inherit;
    transition:    border-color var(--transition-fast);
    min-width:     0;
}

.search-form__input:focus {
    outline:      none;
    border-color: var(--color-cta);
}

.search-form__btn {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

.search-form__tip {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-tertiary);
    margin-top: var(--space-2);
}

.search-count {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.search-group {
    margin-bottom: var(--space-8);
}

.search-group__title {
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    font-size:     var(--font-size-base);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-text);
    margin-bottom: var(--space-4);
    padding-bottom:var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.search-group__count {
    margin-left:   auto;
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-normal);
    color:         var(--color-text-tertiary);
    background:    var(--color-bg-secondary);
    padding:       2px var(--space-2);
    border-radius: var(--radius-sm);
}

.search-players {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   var(--space-3);
}

.search-empty {
    max-width:   500px;
    padding:     var(--space-8) 0;
}

.search-empty__title {
    font-size:     var(--font-size-lg);
    margin-bottom: var(--space-4);
}

.search-empty__tips {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-6);
    padding-left:  var(--space-5);
    display:       flex;
    flex-direction:column;
    gap:           var(--space-2);
}

.search-popular { padding: var(--space-4) 0; }

.search-popular__label {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}

.search-popular__tags {
    display:  flex;
    flex-wrap:wrap;
    gap:      var(--space-2);
}

.search-popular__tag {
    padding:       var(--space-2) var(--space-3);
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    text-decoration:none;
    transition:    background var(--transition-fast), color var(--transition-fast);
    border:        1px solid var(--color-border);
}

.search-popular__tag:hover {
    background: var(--color-card-bg);
    color:      var(--color-text);
}

/* ==============================================================
   Artikel detailpagina
   ============================================================== */

/* Hero afbeelding — full width */
.article-hero {
    position:       relative;
    width:          100%;
    max-height:     520px;
    overflow:       hidden;
    background:     var(--color-bg-tertiary);
    margin-bottom:  0;
}

.article-hero__img {
    width:          100%;
    height:         520px;
    object-fit:     cover;
    display:        block;
}

.article-hero__caption {
    position:    absolute;
    bottom:      0;
    left:        0;
    right:       0;
    padding:     var(--space-8) max(var(--space-6), calc((100% - var(--container-max)) / 2 + var(--space-6))) var(--space-3);
    font-size:   var(--font-size-xs);
    color:       rgba(255,255,255,.9);
    text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.4);
    margin:      0;
    background:  linear-gradient(to top, rgba(0,0,0,.35) 0%, transparent 100%);
}

@media (max-width: 767px) {
    .article-hero__caption { padding-left: var(--space-4); padding-right: var(--space-4); }
}

@media (max-width: 600px) {
    .article-hero__caption { padding-left: var(--space-3); padding-right: var(--space-3); }
}

.article-hero__credit {
    opacity:     .75;
    margin-left: var(--space-2);
    font-style:  italic;
}

/* Layout: 8+4 kolommen */
.article-layout {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   var(--space-10);
    align-items:           start;
    padding:               var(--space-6) 0 var(--space-12);
}

.article-sidebar {
    position:   sticky;
    top:        calc(var(--header-height) + var(--space-4));
    display:    flex;
    flex-direction: column;
    gap:        var(--space-5);
}

/* Breadcrumb boven artikel */
.article-main .breadcrumb { margin-bottom: var(--space-3); }

/* Tag badges */
.article-tags-top {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    margin-bottom: var(--space-3);
}

.article-tag-badge {
    display:          inline-block;
    padding:          3px var(--space-3);
    border-radius:    var(--radius-sm);
    font-size:        var(--font-size-xs);
    font-weight:      var(--font-weight-bold);
    text-transform:   uppercase;
    letter-spacing:   .05em;
    background:       var(--color-accent-nieuws);
    color:            #ffffff;
    text-decoration:  none;
    transition:       opacity var(--transition-fast);
}

.article-tag-badge:hover { opacity: .8; }
.article-tag-badge--sm   { font-weight: var(--font-weight-normal); text-transform: none; letter-spacing: 0; background: var(--color-bg-secondary); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.article-tag-badge--sm:hover { color: var(--color-text); }

/* Artikel titel */
.article-title {
    font-size:     var(--font-size-3xl);
    font-weight:   var(--font-weight-bold);
    line-height:   var(--line-height-tight);
    color:         var(--color-text);
    margin:        0 0 var(--space-4);
}

/* Meta rij */
.article-meta {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             var(--space-2);
    font-size:       var(--font-size-sm);
    color:           var(--color-text-tertiary);
    margin-bottom:   var(--space-5);
    padding-bottom:  var(--space-4);
    border-bottom:   1px solid var(--color-border);
}

.article-meta__sep     { color: var(--color-border-strong); }
.article-meta__author  { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); text-decoration: none; }
.article-meta__author:hover { color: var(--color-text); }
.article-meta__readtime { display: flex; align-items: center; gap: 4px; }
.article-meta__source-link { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.article-meta__updated { font-style: italic; }

/* Samenvattingsblok (intro/lead) */
.article-summary {
    margin-bottom:  var(--space-6);
}

.article-summary__text {
    font-size:      var(--font-size-lg);
    font-weight:    var(--font-weight-medium);
    line-height:    var(--line-height-base);
    color:          var(--color-text-secondary);
    border-left:    3px solid var(--color-cta);
    padding-left:   var(--space-4);
    margin:         0;
}

/* Leesvoortgang */
.reading-progress {
    height:         3px;
    background:     var(--color-border);
    border-radius:  var(--radius-full);
    margin-bottom:  var(--space-6);
    overflow:       hidden;
}

.reading-progress__bar {
    height:     100%;
    width:      0%;
    background: var(--color-cta);
    transition: width 100ms linear;
    border-radius: var(--radius-full);
}

/* Artikel body typografie */
.article-body {
    font-size:    var(--font-size-base);
    line-height:  1.8;
    color:        var(--color-text);
}

.article-body h2 {
    font-size:     var(--font-size-xl);
    font-weight:   var(--font-weight-bold);
    margin:        var(--space-8) 0 var(--space-3);
    color:         var(--color-text);
    line-height:   var(--line-height-snug);
}

.article-body h3 {
    font-size:     var(--font-size-lg);
    font-weight:   var(--font-weight-bold);
    margin:        var(--space-6) 0 var(--space-2);
    color:         var(--color-text);
}

.article-body h4 {
    font-size:     var(--font-size-base);
    font-weight:   var(--font-weight-bold);
    margin:        var(--space-4) 0 var(--space-2);
    color:         var(--color-text);
}

.article-body p    { margin: 0 0 var(--space-4); }

/* Lijsten */
.article-body ul,
.article-body ol   { margin: 0 0 var(--space-4); padding-left: var(--space-4); }
.article-body ul   { list-style-type: square; }
.article-body ol   { list-style-type: decimal; }
.article-body li   { margin-bottom: var(--space-2); line-height: var(--line-height-base); }
.article-body li::marker { color: var(--color-cta); }

/* Geneste lijsten */
.article-body ul ul,
.article-body ol ol,
.article-body ul ol,
.article-body ol ul { margin: var(--space-2) 0 0; }

/* Horizontale rule */
.article-body hr {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     var(--space-8) 0;
}

/* Inline code */
.article-body code {
    font-family:    monospace;
    font-size:      .9em;
    background:     var(--color-bg-secondary);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-sm);
    padding:        1px 5px;
    color:          var(--color-text);
}

/* Codeblok */
.article-body pre {
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       var(--space-4);
    overflow-x:    auto;
    font-size:     var(--font-size-sm);
    line-height:   1.6;
    margin:        var(--space-4) 0;
}

.article-body pre code {
    background: none;
    border:     none;
    padding:    0;
    font-size:  inherit;
}

/* Figure + figcaption */
.article-body figure {
    margin: var(--space-6) 0;
}

.article-body figcaption {
    font-size:  var(--font-size-sm);
    color:      var(--color-text-tertiary);
    text-align: center;
    margin-top: var(--space-2);
    font-style: italic;
}

.article-body img {
    max-width:     100%;
    height:        auto;
    border-radius: var(--radius-md);
    margin:        var(--space-4) 0;
    display:       block;
}

.article-body a:not(.article-link) {
    color:              var(--color-cta);
    text-decoration:    underline;
    text-underline-offset: 2px;
}

.article-body a:not(.article-link):hover { opacity: .8; }

/* Blockquote */
.article-body blockquote {
    border-left:   3px solid var(--color-cta);
    margin:        var(--space-6) 0;
    padding:       var(--space-4) var(--space-5);
    background:    var(--color-bg-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style:    italic;
    font-size:     var(--font-size-base);
    line-height:   var(--line-height-base);
    color:         var(--color-text-secondary);
}

.article-body blockquote p { margin: 0; }

.article-body blockquote cite {
    display:     block;
    font-size:   var(--font-size-sm);
    font-style:  normal;
    color:       var(--color-text-tertiary);
    margin-top:  var(--space-2);
}

.article-body blockquote cite::before { content: '— '; }

/* Tabellen — scroll wrapper via JS, fallback via CSS */
.article-body table {
    display:         table;
    width:           100%;
    max-width:       100%;
    border-collapse: collapse;
    font-size:       var(--font-size-sm);
    margin:          0;
}

/* Directe tabellen in article-body: verborgen tot JS wrapper aanmaakt */
.article-body > table {
    display: none;
}

.article-body {
    overflow-x: hidden;
}

.article-table-wrap {
    overflow-x:    auto;
    margin:        var(--space-6) 0;
    border-radius: var(--radius-md);
    border:        1px solid var(--color-border);
    -webkit-overflow-scrolling: touch;
}

.article-table-wrap table {
    display:         table;
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--font-size-sm);
}

.article-table-wrap th {
    background:    var(--color-bg-secondary);
    font-weight:   var(--font-weight-bold);
    text-align:    left;
    padding:       var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--color-border);
    color:         var(--color-text);
    white-space:   nowrap;
}

.article-table-wrap td {
    padding:       var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color:         var(--color-text-secondary);
}

.article-table-wrap tr:last-child td { border-bottom: none; }

/* Alternating row colors */
.article-table-wrap tbody tr:nth-child(even) td {
    background: var(--color-bg-secondary);
}

.article-table-wrap tbody tr:hover td {
    background: var(--color-card-hover);
}

/* Tags onderaan */
.article-tags-bottom {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             var(--space-2);
    margin:          var(--space-6) 0;
    padding-top:     var(--space-5);
    border-top:      1px solid var(--color-border);
}

.article-tags-bottom__label {
    font-size:   var(--font-size-xs);
    color:       var(--color-text-tertiary);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}

/* Social sharing */
.article-share__buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
}

.article-share__btn {
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-medium);
    text-decoration: none;
    cursor:        pointer;
    border:        1px solid var(--color-border);
    background:    var(--color-card-bg);
    color:         var(--color-text-secondary);
    font-family:   inherit;
    transition:    background var(--transition-fast), color var(--transition-fast);
}

.article-share__btn:hover       { background: var(--color-bg-secondary); color: var(--color-text); }
.article-share__btn--whatsapp:hover { background: #25d366; color: #fff; border-color: #25d366; }
.article-share__btn--x:hover        { background: #000; color: #fff; border-color: #000; }
.article-share__btn--facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }

.article-share--top    { margin-bottom: var(--space-5); }
.article-share--bottom { margin-top: var(--space-4); }

/* Correctiemelding */
.article-correction {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-tertiary);
    margin-top: var(--space-3);
}

.article-correction__link {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-1);
    color:       var(--color-text-tertiary);
    transition:  color var(--transition-fast);
}

.article-correction__link:hover { color: var(--color-text); }

/* Auteursbio */
.article-author-bio {
    display:       flex;
    gap:           var(--space-4);
    padding:       var(--space-5);
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin:        var(--space-8) 0;
}

.article-author-bio__photo {
    width:         56px;
    height:        56px;
    border-radius: var(--radius-full);
    object-fit:    cover;
    flex-shrink:   0;
}

.article-author-bio__placeholder {
    width:           56px;
    height:          56px;
    border-radius:   var(--radius-full);
    background:      var(--color-bg-tertiary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           var(--color-text-tertiary);
}

.article-author-bio__name {
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-1);
    font-size:     var(--font-size-sm);
}

.article-author-bio__name a { color: var(--color-text); text-decoration: none; }
.article-author-bio__name a:hover { color: var(--color-cta); }
.article-author-bio__text  { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; }

/* Gerelateerde content */
.article-related {
    margin-top:    var(--space-8);
    padding-top:   var(--space-6);
    border-top:    1px solid var(--color-border);
}

.article-related__title {
    font-size:     var(--font-size-base);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-4);
    color:         var(--color-text);
}

/* Sidebar componenten */
.article-toc {
    background:    var(--color-card-bg);
    border:        1px solid transparent;
    border-radius: var(--radius-md);
    padding:       var(--space-4);
}

.article-toc__title {
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:         var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}

.article-toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.article-toc__item--h2 { padding-left: 0; }
.article-toc__item--h3 { padding-left: var(--space-3); }
.article-toc__item--h4 { padding-left: var(--space-5); }

.article-toc__link {
    font-size:      var(--font-size-sm);
    color:          var(--color-text-secondary);
    text-decoration:none;
    display:        block;
    padding:        2px 0;
    transition:     color var(--transition-fast);
    line-height:    var(--line-height-snug);
}

.article-toc__link:hover { color: var(--color-cta); }

.article-sidebar-cta {
    background:    var(--color-card-bg);
    border:        1px solid transparent;
    border-radius: var(--radius-md);
    padding:       var(--space-4);
}

.article-sidebar-cta__text {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.article-sidebar-share { padding: var(--space-3) 0; }
.article-sidebar-share__label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-2); }

/* Responsive */
@media (max-width: 900px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap:                   var(--space-6);
    }
    .article-sidebar { position: static; }
    .article-title   { font-size: var(--font-size-2xl); }
}

@media (max-width: 600px) {
    .article-hero__img { height: 240px; }
    .article-title     { font-size: var(--font-size-xl); }
    .article-layout    { padding: var(--space-4) 0 var(--space-8); }
    .article-summary__text { font-size: var(--font-size-base); }
}

/* Print */
@media print {
    .site-header, .site-footer, .article-sidebar,
    .article-share, .article-correction,
    .article-related, .reading-progress,
    .mobile-nav, .mobile-sidebar { display: none !important; }
    .article-layout { grid-template-columns: 1fr; }
    .article-title  { font-size: 24pt; }
    .article-body   { font-size: 11pt; line-height: 1.6; }
    .article-body a { color: inherit; text-decoration: none; }
    .article-body a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* Tags als plain tekst (geen knoppen) */
.article-tags-list {
    font-size:    var(--font-size-sm);
    color:        var(--color-text-tertiary);
    margin:       var(--space-5) 0;
    padding-top:  var(--space-4);
    border-top:   1px solid var(--color-border);
}

.article-tags-list__label {
    font-weight:    var(--font-weight-medium);
    margin-right:   var(--space-2);
    text-transform: uppercase;
    font-size:      var(--font-size-xs);
    letter-spacing: .05em;
}

/* ==============================================================
   Kennisbank
   ============================================================== */

/* Intro tekst */
.knowhow-intro {
    font-size:     var(--font-size-base);
    color:         var(--color-text-secondary);
    max-width:     640px;
    margin-bottom: var(--space-6);
    line-height:   var(--line-height-base);
}

/* Zoekvak */
.knowhow-search {
    margin-bottom: var(--space-8);
    max-width:     640px;
}

.knowhow-search__inner {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    background:    var(--color-card-bg);
    border:        2px solid var(--color-accent-kennisbank);
    border-radius: var(--radius-md);
    padding:       var(--space-2) var(--space-3);
    transition:    box-shadow var(--transition-fast);
}

.knowhow-search__inner:focus-within {
    box-shadow: 0 0 0 3px rgba(122, 75, 217, .15);
}

.knowhow-search__icon  { flex-shrink: 0; color: var(--color-accent-kennisbank); }

.knowhow-search__input {
    flex:        1;
    border:      none;
    outline:     none;
    font-size:   var(--font-size-base);
    background:  transparent;
    color:       var(--color-text);
    font-family: inherit;
    min-width:   0;
}

.knowhow-search__input::placeholder { color: var(--color-text-tertiary); }
.knowhow-search__btn   { flex-shrink: 0; }

/* Categorie cards */
.knowhow-cat-card {
    display:         flex;
    flex-direction:  column;
    border-radius:   var(--radius-md);
    overflow:        hidden;
    background:      var(--color-card-bg);
    border:          1px solid transparent;
    text-decoration: none;
    color:           inherit;
    transition:      transform var(--transition-fast),
                     box-shadow var(--transition-fast),
                     border-color var(--transition-fast);
}

.knowhow-cat-card:hover {
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-md);
    border-color: var(--color-accent-kennisbank);
    color:        inherit;
}

.knowhow-cat-card__image {
    position:     relative;
    aspect-ratio: 3 / 2;
    overflow:     hidden;
    background:   color-mix(in srgb, var(--color-accent-kennisbank) 10%, var(--color-bg-secondary));
    flex-shrink:  0;
}

.knowhow-cat-card__image--fallback {
    background: color-mix(in srgb, var(--color-accent-kennisbank) 15%, var(--color-bg-secondary));
}

.knowhow-cat-card__image img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.knowhow-cat-card:hover .knowhow-cat-card__image img { transform: scale(1.04); }

.knowhow-cat-card__body {
    padding: var(--space-4);
    flex:    1;
}

.knowhow-cat-card__title {
    font-size:     var(--font-size-base);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-text);
    margin-bottom: var(--space-1);
    line-height:   var(--line-height-snug);
}

.knowhow-cat-card__count {
    font-size: var(--font-size-xs);
    color:     var(--color-accent-kennisbank);
    margin:    0;
}

/* Kennisbank detail pagina */
.knowhow-page { --section-accent: var(--color-accent-kennisbank); }

.knowhow-hero {
    position:      relative;
    width:         100%;
    max-height:    360px;
    overflow:      hidden;
    background:    var(--color-bg-tertiary);
}

.knowhow-hero__img {
    width:      100%;
    height:     360px;
    object-fit: cover;
    display:    block;
}

.knowhow-layout {
    max-width:  760px;
    margin:     0 auto;
    padding:    var(--space-6) 0 var(--space-12);
}
/* knowhow-layout is replaced by article-layout on detail pages */

.knowhow-page__category { margin-bottom: var(--space-3); }

.knowhow-badge {
    display:          inline-block;
    padding:          3px var(--space-3);
    border-radius:    var(--radius-sm);
    font-size:        var(--font-size-xs);
    font-weight:      var(--font-weight-bold);
    text-transform:   uppercase;
    letter-spacing:   .05em;
    background:       var(--color-accent-kennisbank);
    color:            #ffffff;
    text-decoration:  none;
    transition:       opacity var(--transition-fast);
}

.knowhow-badge:hover { opacity: .8; }

/* Vraagtitel styling */
.knowhow-page__title--question {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
}

.knowhow-page__question-icon {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            40px;
    height:           40px;
    min-width:        40px;
    border-radius:    var(--radius-full);
    background:       var(--color-accent-kennisbank);
    color:            #ffffff;
    font-size:        var(--font-size-xl);
    font-weight:      var(--font-weight-bold);
    margin-top:       4px;
}

/* Inhoudsopgave inline */
.knowhow-toc {
    background:    var(--color-bg-secondary);
    border-left:   3px solid var(--color-accent-kennisbank);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding:       var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.knowhow-toc__title {
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:         var(--color-accent-kennisbank);
    margin-bottom: var(--space-3);
}

.knowhow-toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.knowhow-toc__item--h3 { padding-left: var(--space-4); }
.knowhow-toc__item--h4 { padding-left: var(--space-6); }

.knowhow-toc__link {
    font-size:       var(--font-size-sm);
    color:           var(--color-text-secondary);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

.knowhow-toc__link:hover { color: var(--color-accent-kennisbank); }

/* Deel knop */
.knowhow-share {
    display:       flex;
    gap:           var(--space-2);
    margin-bottom: var(--space-5);
}

/* Kennisbank body — links in accentkleur */
.knowhow-body a { color: var(--color-accent-kennisbank); }
.knowhow-body a:hover { opacity: .8; }

@media (max-width: 600px) {
    .knowhow-hero__img { height: 200px; }
    .knowhow-layout    { padding: var(--space-4) 0 var(--space-8); }
    .knowhow-page__question-icon { width: 32px; height: 32px; min-width: 32px; font-size: var(--font-size-base); }
}

/* ==============================================================
   Spelers
   ============================================================== */

/* Categorie navigatie */
.players-cat-nav {
    display:       flex;
    gap:           var(--space-2);
    margin-bottom: var(--space-6);
    flex-wrap:     wrap;
}

.players-cat-nav__btn {
    padding:          var(--space-2) var(--space-4);
    border-radius:    var(--radius-md);
    font-size:        var(--font-size-sm);
    font-weight:      var(--font-weight-medium);
    color:            var(--color-text-secondary);
    background:       var(--color-bg-secondary);
    border:           1px solid var(--color-border);
    text-decoration:  none;
    transition:       background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.players-cat-nav__btn:hover,
.players-cat-nav__btn.is-active {
    background:   var(--color-accent-spelers);
    color:        #ffffff;
    border-color: var(--color-accent-spelers);
}

/* Speler kaart (groot, hero-stijl) */
.player-card {
    display:         block;
    position:        relative;
    border-radius:   var(--radius-md);
    overflow:        hidden;
    background:      var(--color-accent-spelers-light);
    text-decoration: none;
    aspect-ratio:    4 / 5;
    color:           #ffffff;
    transition:      transform var(--transition-fast), box-shadow var(--transition-fast);
}

.player-card:hover {
    transform:  translateY(-2px);
    box-shadow: var(--shadow-md);
}

.player-card__image {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
}

.player-card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.player-card:hover .player-card__image img { transform: scale(1.04); }

.player-card__placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-accent-spelers);
    opacity:         .3;
}

.player-card__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 50%, transparent 80%);
}

.player-card__body {
    position:        absolute;
    bottom:          0;
    left:            0;
    right:           0;
    padding:         var(--space-3) var(--space-4);
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--space-2);
}

.player-card__ranking {
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-bold);
    background:    rgba(255,255,255,.95);
    display:       inline-block;
    padding:       2px var(--space-2);
    border-radius: var(--radius-sm);
    margin-top:    var(--space-1);
}

.player-card__ranking--bnl { color: #004899; }
.player-card__ranking--bwf { color: #f44336; }

.player-card__name {
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color:       #ffffff;
    margin:      0;
    line-height: var(--line-height-snug);
}

.player-card__name-row {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin-bottom: var(--space-1);
}

.player-card__brand-circle {
    flex-shrink:     0;
    width:           28px;
    height:          28px;
    border-radius:   var(--radius-full);
    background:      #ffffff;
    box-shadow:      0 1px 4px rgba(0,0,0,.15);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         3px;
    overflow:        hidden;
    margin-bottom:   1px;
}

.player-card__brand-circle img {
    width:      18px;
    height:     18px;
    object-fit: contain;
}

/* Gestopt badge */
.player-compact--retired { opacity: .6; }
.player-compact__retired-badge {
    font-size:   var(--font-size-xs);
    color:       var(--color-text-tertiary);
    font-style:  italic;
}

/* Spelersprofiel statistieken */
.player-stats {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-3);
    margin-bottom: var(--space-6);
    padding:       var(--space-4);
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.player-stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    min-width:      64px;
}

.player-stat__label {
    font-size:   var(--font-size-xs);
    color:       var(--color-text-tertiary);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.player-stat__value {
    font-size:   var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color:       var(--color-accent-spelers);
    line-height: 1.2;
}

.player-stat--secondary .player-stat__value {
    font-size: var(--font-size-base);
    color:     var(--color-text-secondary);
}

.player-stat--meta .player-stat__value {
    font-size: var(--font-size-base);
    color:     var(--color-text);
}

/* Olympische deelnames */
.player-olympics {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    flex-wrap:     wrap;
    margin-bottom: var(--space-5);
}

.player-olympics__label {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color:       var(--color-text-secondary);
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin:      0;
}

.player-olympics__list { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.player-olympics__item {
    padding:       3px var(--space-3);
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-text-secondary);
}

/* Externe links */
.player-links {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    margin-bottom: var(--space-6);
}

.player-link {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    color:         var(--color-text-secondary);
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    text-decoration: none;
    transition:    background var(--transition-fast), color var(--transition-fast);
}

.player-link:hover              { background: var(--color-card-bg); color: var(--color-text); }
.player-link--instagram:hover   { background: #e1306c; color: #fff; border-color: #e1306c; }
.player-link--bwf:hover         { background: var(--color-accent-spelers); color: #fff; border-color: var(--color-accent-spelers); }

/* Sponsorlogo */
.player-brand {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--font-size-sm);
    color:       var(--color-text-tertiary);
    margin-top:  var(--space-6);
}

@media (max-width: 600px) {
    .player-stats { gap: var(--space-2); }
    .player-stat  { min-width: 56px; }
}

/* Naam + sponsorlogo naast elkaar */
.player-name-row {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
    margin-bottom: var(--space-4);
}

.player-name-row .article-title { margin-bottom: 0; flex: 1; }

.player-name-brand {
    flex-shrink:     0;
    width:           48px;
    height:          48px;
    border-radius:   var(--radius-full);
    background:      #ffffff;
    box-shadow:      0 2px 8px rgba(0,0,0,.12);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--space-2);
    margin-top:      6px;
    overflow:        hidden;
}

.player-name-brand img {
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
}

/* Stats rij met drie kaarten */
.player-stats-row {
    display:    flex;
    gap:        var(--space-3);
    flex-wrap:  wrap;
    margin-bottom: var(--space-6);
}

.player-stats-card {
    flex:          1;
    min-width:     180px;
    border-radius: var(--radius-md);
    padding:       var(--space-4);
    border:        1px solid var(--color-border);
}

.player-stats-card--bnl {
    background:  #f0f5ff;
    border-color:#004899;
}

[data-theme="dark"] .player-stats-card--bnl,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .player-stats-card--bnl {
        background:   rgba(0, 72, 153, .15);
        border-color: rgba(0, 72, 153, .4);
    }
}

.player-stats-card--bwf {
    background:  #fff5f5;
    border-color:#f44336;
}

[data-theme="dark"] .player-stats-card--bwf,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .player-stats-card--bwf {
        background:   rgba(244, 67, 54, .1);
        border-color: rgba(244, 67, 54, .4);
    }
}

.player-stats-card--meta {
    background:  var(--color-bg-secondary);
}

.player-stats-card__header {
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:         var(--color-text-tertiary);
    margin-bottom: var(--space-3);
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
}

.player-stats-card__dot {
    width:         8px;
    height:        8px;
    border-radius: var(--radius-full);
    flex-shrink:   0;
}

.player-stats-card__dot--bnl { background: #004899; }
.player-stats-card__dot--bwf { background: #f44336; }

.player-stats-card__grid {
    display:    flex;
    gap:        var(--space-4);
    flex-wrap:  wrap;
}

.player-stat__value--bnl  { color: #004899; }
.player-stat__value--bwf  { color: #f44336; }
.player-stat__value--meta { color: var(--color-text); font-size: var(--font-size-base); }

[data-theme="dark"] .player-stat__value--bnl { color: #5b9bd5; }
[data-theme="dark"] .player-stat__value--bwf { color: #ef9a9a; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .player-stat__value--bnl { color: #5b9bd5; }
    :root:not([data-theme="light"]) .player-stat__value--bwf { color: #ef9a9a; }
}

@media (max-width: 600px) {
    .player-stats-card { min-width: 100%; }
    .player-name-brand { width: 40px; height: 40px; }
}

/* Spelers scroll wrapper — grid op desktop, horizontaal scroll op mobile */
.players-scroll-wrap { width: 100%; }

@media (max-width: 600px) {
    .players-scroll-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-2);
    }

    .players-scroll-wrap .players-grid {
        grid-template-columns: repeat(4, 160px);
        width: max-content;
    }

    .players-scroll-wrap .player-card {
        aspect-ratio: 3 / 4;
        width: 160px;
    }
}

/* Olympisch blok */
.player-olympics-block {
    display:       flex;
    align-items:   center;
    gap:           var(--space-5);
    padding:       var(--space-4) var(--space-5);
    background:    linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    flex-wrap:     wrap;
}

.player-olympics-block__left {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    flex-shrink:    0;
}

.player-olympics-block__rings {
    width:  120px;
    height: 40px;
}

.player-olympics-block__label {
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          rgba(255,255,255,.7);
    margin:         0;
}

.player-olympics-block__years {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
}

.player-olympics-block__badge {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    background:     rgba(255,255,255,.1);
    border:         1px solid rgba(255,255,255,.2);
    border-radius:  var(--radius-md);
    padding:        var(--space-2) var(--space-3);
    min-width:      60px;
}

.player-olympics-block__city {
    font-size:      var(--font-size-xs);
    color:          rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height:    1;
}

.player-olympics-block__year {
    font-size:   var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color:       #ffffff;
    line-height: 1.2;
}

/* Instagram card */
.player-instagram-card {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    padding:         var(--space-3) var(--space-4);
    border-radius:   var(--radius-md);
    text-decoration: none;
    background:      linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    color:           #ffffff;
    transition:      opacity var(--transition-fast), transform var(--transition-fast);
    max-width:       280px;
}

.player-instagram-card:hover {
    opacity:   .9;
    transform: translateY(-1px);
    color:     #ffffff;
}

.player-instagram-card__icon {
    flex-shrink: 0;
    width:       36px;
    height:      36px;
    display:     flex;
    align-items: center;
    justify-content: center;
}

.player-instagram-card__info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.player-instagram-card__handle {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color:       #ffffff;
    line-height: 1;
}

.player-instagram-card__label {
    font-size: var(--font-size-xs);
    color:     rgba(255,255,255,.8);
    line-height: 1;
}

.player-instagram-card__arrow { flex-shrink: 0; }

/* Icoon gecentreerd boven stat label */
.player-stat__label--icon {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            3px;
}

/* FAQ blok */
.player-faq__list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.player-faq__item {
    padding:       var(--space-4);
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border-left:   3px solid var(--color-accent-spelers);
}

.player-faq__question {
    font-size:     var(--font-size-base);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-text);
    margin-bottom: var(--space-2);
}

.player-faq__answer p {
    font-size: var(--font-size-sm);
    color:     var(--color-text-secondary);
    margin:    0;
    line-height: var(--line-height-base);
}

/* ==============================================================
   Clubs
   ============================================================== */

/* Clubs index layout: provincies links, kaart rechts */
.clubs-index-layout {
    display:    grid;
    grid-template-columns: 280px 1fr;
    gap:        var(--space-5);
    align-items: start;
}

/* Provincie lijst (legenda) */
.clubs-province-list {
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            var(--space-1);
}

.clubs-province-item {
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         var(--space-2) var(--space-3);
    border-radius:   var(--radius-md);
    font-size:       var(--font-size-sm);
    font-weight:     var(--font-weight-medium);
    color:           var(--color-text-secondary);
    background:      var(--color-bg-secondary);
    border:          1px solid transparent;
    text-decoration: none;
    transition:      background var(--transition-fast), color var(--transition-fast),
                     border-color var(--transition-fast), opacity var(--transition-fast);
}

.clubs-province-item:hover {
    background:   color-mix(in srgb, var(--prov-color) 15%, var(--color-bg-secondary));
    border-color: var(--prov-color);
    color:        var(--color-text);
}

.clubs-province-item__dot {
    width:         8px;
    height:        8px;
    min-width:     8px;
    border-radius: var(--radius-full);
    background:    var(--prov-color);
}

.clubs-province-item__name { flex: 1; }

.clubs-province-item__count {
    font-size:   var(--font-size-xs);
    color:       var(--color-text-tertiary);
    font-weight: var(--font-weight-normal);
}

/* Kaart */
.clubs-map-wrap {
    border-radius: var(--radius-md);
    overflow:      hidden;
    border:        1px solid var(--color-border);
    /* Zorg dat Leaflet tiles altijd zichtbaar zijn */
    position:      relative;
    z-index:       0;
}

.clubs-map {
    width:  100%;
    height: 520px;
    /* Leaflet vereist expliciete hoogte op het element zelf */
    display: block;
}

/* Tablet: kaart onder provincies */
@media (max-width: 900px) {
    .clubs-index-layout {
        grid-template-columns: 1fr;
    }
    .clubs-province-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobiel: kaart verbergen, provincies als 2 kolommen */
@media (max-width: 600px) {
    .clubs-map-wrap {
        display: none;
    }
    .clubs-province-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* Club detailpagina */
.club-locations { margin-top: var(--space-8); }

.club-locations__title {
    font-size:     var(--font-size-lg);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-4);
}

.club-locations__list {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-3);
    margin-bottom:         var(--space-4);
}

@media (max-width: 600px) {
    .club-locations__list {
        grid-template-columns: 1fr;
    }
}

.club-location {
    padding:       var(--space-3) var(--space-4);
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border-left:   3px solid var(--color-border);
}

.club-location--primary { border-left-color: var(--color-accent-clubs); }

.club-location__name {
    font-weight:   var(--font-weight-medium);
    color:         var(--color-text);
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    margin-bottom: var(--space-1);
}

.club-location__badge {
    font-size:   var(--font-size-xs);
    background:  var(--color-accent-clubs);
    color:       #ffffff;
    padding:     1px var(--space-2);
    border-radius: var(--radius-sm);
}

.club-location__address {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-tertiary);
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    margin:      0;
}

/* Kleine locatiekaart */
.club-map {
    width:         100%;
    height:        260px;
    border-radius: var(--radius-md);
    overflow:      hidden;
    border:        1px solid var(--color-border);
    position:      relative;
    z-index:       0;
    margin-top:    var(--space-4);
}

@media (max-width: 600px) {
    .clubs-map  { height: 320px; }
    .club-map   { height: 200px; }
}

/* Mede-clubs in locatielijst */
.club-location__co-clubs {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-tertiary);
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex-wrap:   wrap;
    margin-top:  var(--space-2);
}

.club-location__co-link {
    color:           var(--color-accent-clubs);
    text-decoration: none;
    font-weight:     var(--font-weight-medium);
}

.club-location__co-link:hover { text-decoration: underline; }

/* ==============================================================
   Page Header — consistent patroon voor alle overzichtspagina's
   ============================================================== */

.page-header {
    padding:       var(--space-6) 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}

.page-header__breadcrumb {
    margin-bottom: var(--space-3);
}

.page-header__title {
    font-size:     clamp(1.75rem, 4vw, 2.5rem);
    font-weight:   var(--font-weight-bold);
    line-height:   var(--line-height-snug);
    color:         var(--color-text);
    margin-bottom: var(--space-3);
}

.page-header__intro {
    font-size:    var(--font-size-base);
    color:        var(--color-text-secondary);
    max-width:    640px;
    margin:       0;
    line-height:  var(--line-height-base);
    padding-left: var(--space-4);
    border-left:  3px solid var(--page-accent, var(--color-border));
}

/* Accentkleuren per sectie */
.page-header--nieuws     { --page-accent: var(--color-accent-nieuws); }
.page-header--kennisbank { --page-accent: var(--color-accent-kennisbank); }
.page-header--spelers    { --page-accent: var(--color-accent-spelers); }
.page-header--clubs      { --page-accent: var(--color-accent-clubs); }

/* Interne links (speler/club) in artikelbody — subtiel, niet storend */
.article-link {
    color:           inherit;
    text-decoration: none;
    border-bottom:   1px dotted var(--color-text-tertiary);
    transition:      border-color var(--transition-fast), color var(--transition-fast);
}

.article-link:hover {
    color:         var(--color-text);
    border-bottom-color: var(--color-text-secondary);
    border-bottom-style: solid;
}

.article-link--player:hover { color: var(--color-accent-spelers); border-bottom-color: var(--color-accent-spelers); }
.article-link--club:hover   { color: var(--color-accent-clubs);   border-bottom-color: var(--color-accent-clubs); }

/* ==============================================================
   Statische pagina's (disclaimer, privacy, versie, supporters)
   ============================================================== */

.static-page {
    max-width: 760px;
}

.static-page__body h2 {
    font-size:     var(--font-size-xl);
    font-weight:   var(--font-weight-bold);
    margin-top:    var(--space-8);
    margin-bottom: var(--space-3);
    color:         var(--color-text);
}

.static-page__body p {
    margin-bottom: var(--space-4);
    line-height:   var(--line-height-base);
    color:         var(--color-text-secondary);
}

.static-page__body a {
    color:           var(--color-cta);
    text-decoration: none;
}

.static-page__body a:hover { text-decoration: underline; }

.static-page__rights,
.static-page__update {
    font-size:  var(--font-size-sm);
    color:      var(--color-text-tertiary);
    margin-top: var(--space-8);
    padding-top:var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* Supporters CTA */
/* ==============================================================
   Supporters pagina
   ============================================================== */

.supporters-cta {
    display:       flex;
    gap:           var(--space-8);
    align-items:   center;
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding:       var(--space-6);
    margin-bottom: var(--space-10);
    border-left:   4px solid var(--color-cta);
}

@media (max-width: 767px) {
    .supporters-cta { flex-direction: column; gap: var(--space-5); }
}

.supporters-cta__text { flex: 1; }
.supporters-cta__text p { color: var(--color-text-secondary); margin-bottom: var(--space-2); }

.supporters-cta__title {
    font-size:     var(--font-size-xl);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-3);
}

.supporters-cta__notice {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-tertiary);
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin-top:  var(--space-3);
}

.supporters-cta__action {
    flex-shrink: 0;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         var(--space-3);
    text-align:  center;
}

.supporters-cta__btn {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-2);
    white-space: nowrap;
    padding:     var(--space-3) var(--space-6);
    font-size:   var(--font-size-base);
}

.supporters-cta__listing {
    font-size: var(--font-size-xs);
    color:     var(--color-text-tertiary);
    max-width: 220px;
    line-height: var(--line-height-base);
}

/* Donatielijst */
.supporters-list__title {
    font-size:     var(--font-size-lg);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-4);
    color:         var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.supporters-year {
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow:      hidden;
    margin-bottom: var(--space-2);
}

.supporters-year__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         var(--space-3) var(--space-5);
    background:      var(--color-bg-secondary);
    cursor:          pointer;
    font-weight:     var(--font-weight-bold);
    font-size:       var(--font-size-base);
    list-style:      none;
    user-select:     none;
    gap:             var(--space-4);
}

.supporters-year__header::-webkit-details-marker { display: none; }

.supporters-year__label {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

.supporters-year__label::before {
    content:    '';
    display:    inline-block;
    width:      16px;
    height:     16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center;
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.supporters-year[open] .supporters-year__label::before {
    transform: rotate(90deg);
}

.supporters-year__total {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color:       var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.supporters-year__body {
    border-top: 1px solid var(--color-border);
}

/* Donatijerij */
.supporters-row {
    display:       grid;
    grid-template-columns: 110px 1fr auto;
    gap:           var(--space-4);
    padding:       var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    font-size:     var(--font-size-sm);
    align-items:   center;
}

.supporters-row:last-child { border-bottom: none; }

.supporters-row__date  { color: var(--color-text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.supporters-row__name  { color: var(--color-text-secondary); }
.supporters-row__amount { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); text-align: right; white-space: nowrap; }

@media (max-width: 600px) {
    .supporters-row { grid-template-columns: 1fr auto; }
    .supporters-row__date { display: none; }
}

/* Versie badge */
.versie-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-4);
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding:       var(--space-3) var(--space-5);
    margin-bottom: var(--space-6);
    border:        1px solid var(--color-border);
}

.versie-badge__number {
    font-size:   var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color:       var(--color-cta);
    font-family: monospace;
}

.versie-badge__date {
    font-size: var(--font-size-sm);
    color:     var(--color-text-tertiary);
}

.versie-changelog {
    list-style:    none;
    padding:       var(--space-4);
    margin:        0;
    display:       flex;
    flex-direction:column;
    gap:           var(--space-2);
}

.versie-changelog li {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-secondary);
    padding-left:var(--space-4);
    position:    relative;
}

.versie-changelog li::before {
    content:   '✓';
    position:  absolute;
    left:      0;
    color:     var(--color-cta);
    font-size: var(--font-size-xs);
}

@media (max-width: 600px) {
    .supporters-cta { flex-direction: column; }
    .supporters-cta__action { width: 100%; }
    .supporters-cta__listing { max-width: none; }
}

/* Dagger voor overleden spelers */
.player-deceased {
    color:       var(--color-text-tertiary);
    font-weight: var(--font-weight-normal);
    font-size:   .85em;
    margin-right: .1em;
}

/* ==============================================================
   Video
   ============================================================== */

.page-header--video { --page-accent: var(--color-accent-video); }

/* Jaarnavigatie */
.video-year-nav {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    margin-bottom: var(--space-6);
}

.video-year-btn {
    padding:         var(--space-2) var(--space-3);
    border-radius:   var(--radius-md);
    font-size:       var(--font-size-sm);
    font-weight:     var(--font-weight-medium);
    color:           var(--color-text-secondary);
    background:      var(--color-bg-secondary);
    border:          1px solid var(--color-border);
    text-decoration: none;
    transition:      background var(--transition-fast), color var(--transition-fast);
}

.video-year-btn:hover,
.video-year-btn.is-active {
    background:   var(--color-accent-video);
    color:        #ffffff;
    border-color: var(--color-accent-video);
}

/* Featured video */
.video-featured {
    margin-bottom: var(--space-8);
}

.video-featured__link {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             var(--space-6);
    align-items:     center;
    text-decoration: none;
    color:           inherit;
    background:      var(--color-card-bg);
    border-radius:   var(--radius-md);
    overflow:        hidden;
    border:          1px solid var(--color-border);
    transition:      box-shadow var(--transition-fast);
}

.video-featured__link:hover { box-shadow: var(--shadow-md); }

.video-featured__thumb {
    position:     relative;
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    background:   #000;
}

.video-featured__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.video-featured__link:hover .video-featured__thumb img { transform: scale(1.03); }

.video-featured__play {
    position:  absolute;
    inset:     0;
    display:   flex;
    align-items: center;
    justify-content: center;
}

.video-featured__body  { padding: var(--space-6); }

.video-featured__label {
    font-size:      var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight:    var(--font-weight-bold);
    color:          var(--color-accent-video);
    margin-bottom:  var(--space-2);
}

.video-featured__title {
    font-size:     var(--font-size-xl);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-3);
    line-height:   var(--line-height-snug);
    color:         var(--color-text);
}

.video-featured__intro {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-3);
    line-height:   var(--line-height-base);
}

.video-featured__meta {
    font-size: var(--font-size-xs);
    color:     var(--color-text-tertiary);
}

/* Video grid */
.video-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-5);
    margin-bottom:         var(--space-8);
}

.video-grid--compact {
    grid-template-columns: repeat(2, 1fr);
}

/* Video card */
.video-card {
    display:         flex;
    flex-direction:  column;
    text-decoration: none;
    color:           inherit;
    border-radius:   var(--radius-md);
    overflow:        hidden;
    background:      var(--color-card-bg);
    border:          1px solid transparent;
    transition:      transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.video-card:hover {
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-md);
    border-color: var(--color-accent-video);
}

.video-card__thumb {
    position:     relative;
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    background:   #000;
}

.video-card__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.video-card:hover .video-card__thumb img { transform: scale(1.04); }

.video-card__play {
    position:  absolute;
    inset:     0;
    display:   flex;
    align-items: center;
    justify-content: center;
    opacity:   0;
    transition: opacity var(--transition-fast);
}

.video-card:hover .video-card__play { opacity: 1; }

.video-short-badge {
    position:       absolute;
    top:            var(--space-2);
    left:           var(--space-2);
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-bold);
    background:     var(--color-accent-video);
    color:          #ffffff;
    padding:        1px var(--space-2);
    border-radius:  var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.video-duration {
    position:       absolute;
    bottom:         var(--space-2);
    right:          var(--space-2);
    font-size:      var(--font-size-xs);
    font-weight:    var(--font-weight-bold);
    background:     rgba(0,0,0,.75);
    color:          #ffffff;
    padding:        1px var(--space-2);
    border-radius:  var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

.video-card__body  { padding: var(--space-3) var(--space-4) var(--space-4); }

.video-card__title {
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    color:         var(--color-text);
    line-height:   var(--line-height-snug);
    margin-bottom: var(--space-1);
    display:       -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:      hidden;
}

.video-card__meta {
    font-size:   var(--font-size-xs);
    color:       var(--color-text-tertiary);
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex-wrap:   wrap;
}

.video-card__views {
    color: var(--color-text-tertiary);
}

.video-card__intro {
    font-size:   var(--font-size-xs);
    color:       var(--color-text-tertiary);
    margin-top:  var(--space-1);
    line-height: var(--line-height-snug);
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* Video embed */
.video-embed {
    position:      relative;
    aspect-ratio:  16 / 9;
    border-radius: var(--radius-md);
    overflow:      hidden;
    background:    #000;
    margin-bottom: var(--space-6);
}

.video-embed--short {
    aspect-ratio: 9 / 16;
    width:        50%;
    margin-left:  auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .video-embed--short { width: 85%; }
}

.video-embed iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
}

/* Beschrijving */

@media (max-width: 900px) {
    .video-featured__link { grid-template-columns: 1fr; }
    .video-featured__body { padding: var(--space-4); }
    .video-grid           { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .video-grid           { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .video-embed--short   { max-width: 100%; }
}

/* ==============================================================
   YouTube embed + consent placeholder
   ============================================================== */

/* Embed wrapper (16:9) */
.video-embed {
    position:     relative;
    aspect-ratio: 16 / 9;
    width:        100%;
    background:   #000;
    border-radius:var(--radius-md);
    overflow:     hidden;
}

.video-embed__iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
}

/* Placeholder */
.video-placeholder {
    position:     relative;
    aspect-ratio: 16 / 9;
    width:        100%;
    border-radius:var(--radius-md);
    overflow:     hidden;
    background:   #000;
}

.video-placeholder__thumb {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    .35;
    filter:     blur(2px);
}

.video-placeholder__overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0,0,0,.5);
}

.video-placeholder__content {
    text-align:      center;
    padding:         var(--space-6);
    max-width:       420px;
    color:           #ffffff;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
}

.video-placeholder__icon {
    color:         rgba(255,255,255,.7);
    margin-bottom: var(--space-3);
    display:       block;
}

.video-placeholder__title {
    font-size:     var(--font-size-base);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-2);
    color:         #ffffff;
}

.video-placeholder__text {
    font-size:     var(--font-size-sm);
    color:         rgba(255,255,255,.75);
    margin-bottom: var(--space-4);
    line-height:   var(--line-height-base);
}

@media (max-width: 480px) {
    .video-placeholder__content { padding: var(--space-4); }
    .video-placeholder__text    { display: none; }
}

/* ==============================================================
   Mobile sidebar tegels
   ============================================================== */

.mobile-sidebar__tiles {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-2);
    padding:               var(--space-4);
}

.mobile-sidebar__tile {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         var(--space-3) var(--space-2);
    border-radius:   var(--radius-md);
    background:      var(--color-sidebar-tile-bg);
    border:          1px solid var(--color-sidebar-tile-border);
    text-decoration: none;
    color:           var(--color-sidebar-tile-text);
    transition:      background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    min-height:      80px;
}

.mobile-sidebar__tile:hover,
.mobile-sidebar__tile.is-active {
    background:   var(--color-sidebar-tile-hover-bg);
    border-color: var(--color-cta);
    color:        var(--color-sidebar-tile-hover-text);
}

.mobile-sidebar__tile.is-active {
    color: var(--color-cta);
}

.mobile-sidebar__tile-icon {
    width:  28px;
    height: 28px;
    flex-shrink: 0;
}

.mobile-sidebar__tile-label {
    font-size:   var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-align:  center;
    line-height: 1.2;
}

/* Spelers index — altijd 4 kolommen, scroll op mobiel */
.players-index-scroll {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-4);
}

@media (max-width: 767px) {
    .players-index-scroll {
        grid-template-columns: repeat(4, 160px);
        overflow-x:            auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom:        var(--space-2);
        /* Negatieve marge zodat scroll tot rand gaat */
        margin-left:  calc(-1 * var(--space-4));
        margin-right: calc(-1 * var(--space-4));
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .players-index-scroll .player-card {
        width: 160px;
    }
}

/* Player card compact op mobiel: 2 kolommen, 3/2 verhouding */
@media (max-width: 600px) {
    .players-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .players-grid .player-card {
        aspect-ratio: 3 / 2;
    }

    /* Naam iets kleiner zodat het past */
    .players-grid .player-card__name {
        font-size: var(--font-size-xs);
    }

    .players-grid .player-card__brand-circle {
        width:  22px;
        height: 22px;
    }
}

/* Kennisbank categoriekaarten: 2 kolommen op mobiel */
@media (max-width: 767px) {
    .section--kennisbank .article-grid--4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

/* Nieuws article-card: compacter op 2-koloms mobiel */
@media (max-width: 767px) {
    .section--nieuws .article-card__title {
        font-size:          var(--font-size-sm);
        -webkit-line-clamp: 3;
    }

    .section--nieuws .article-card__intro {
        display: none;
    }
}


/* Kennisbank topics: 1 kolom op mobiel */
@media (max-width: 767px) {
    .knowhow-topics-grid.knowhow-topics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Universele card placeholder (geen afbeelding beschikbaar) */
.card-placeholder {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--color-bg-secondary);
    color:           var(--color-border);
}

.card-placeholder svg { opacity: .4; }

/* Nieuws article-card placeholder */
.article-card__image .card-placeholder { aspect-ratio: 16 / 9; }

/* Kennisbank card placeholder */
.knowhow-card__image .card-placeholder { aspect-ratio: 3 / 2; }

/* Club card placeholder */
.club-card__image .card-placeholder { aspect-ratio: 3 / 2; }

/* ==============================================================
   FAQ accordion (details/summary)
   ============================================================== */
.article-faq {
    margin-top: var(--space-8);
}

.article-faq__title {
    font-size:     var(--font-size-lg);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-4);
}

.article-faq__item {
    border-bottom: 1px solid var(--color-border);
}

.article-faq__item:first-of-type {
    border-top: 1px solid var(--color-border);
}

.article-faq__question {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             var(--space-4);
    padding:         var(--space-4) 0;
    font-size:       var(--font-size-base);
    font-weight:     var(--font-weight-medium);
    color:           var(--color-text);
    cursor:          pointer;
    list-style:      none;
    user-select:     none;
}

.article-faq__question::-webkit-details-marker { display: none; }

.article-faq__question::after {
    content:     '';
    flex-shrink: 0;
    width:       16px;
    height:      16px;
    background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
    transition:  transform 200ms ease;
}

.article-faq__item[open] > .article-faq__question::after {
    transform: rotate(180deg);
}

.article-faq__answer {
    padding-bottom: var(--space-4);
    color:          var(--color-text-secondary);
    line-height:    var(--line-height-base);
}

.article-faq__answer p { margin: 0; }

/* ==============================================================
   Club locaties: lijst links, kaart rechts op desktop
   ============================================================== */
.club-locations__layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap:     var(--space-6);
    align-items: stretch;
}

.club-locations__list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.club-locations__layout .club-map {
    position:   sticky;
    top:        calc(var(--header-height) + var(--space-4));
    height:     100%;
    min-height: 300px;
    margin-top: 0;
}

@media (max-width: 767px) {
    .club-locations__layout {
        grid-template-columns: 1fr;
    }
}

/* ==============================================================
   Video jaar dropdown
   ============================================================== */
.video-year-select {
    appearance:    none;
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    font-size:     var(--font-size-sm);
    font-family:   inherit;
    color:         var(--color-text);
    cursor:        pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--space-2) center;
    min-width: 160px;
}

.video-year-select:hover {
    border-color: var(--color-accent-video);
}

/* Zoekpagina: nieuws cards horizontaal op mobiel */
@media (max-width: 767px) {
    .search-group .article-card {
        flex-direction: row;
        align-items:    stretch;
    }

    .search-group .article-card__image {
        flex:          0 0 90px;
        width:         90px;
        aspect-ratio:  unset;
        align-self:    stretch;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
        overflow:      hidden;
        position:      relative;
    }

    .search-group .article-card__image img,
    .search-group .article-card__image .card-placeholder {
        position:   absolute;
        inset:      0;
        width:      100%;
        height:     100%;
        object-fit: cover;
    }

    .search-group .article-card__body {
        padding: var(--space-3);
        flex:    1;
    }

    .search-group .article-card__intro {
        display: none;
    }

    .search-group .article-card__title {
        font-size:          var(--font-size-sm);
        -webkit-line-clamp: 3;
    }
}

/* ==============================================================
   Static pages: inhoudsopgave
   ============================================================== */
.static-toc {
    background:    var(--color-bg-secondary);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       var(--space-4) var(--space-5);
    margin-bottom: var(--space-8);
    display:       inline-block;
    min-width:     280px;
}

.static-toc__list {
    margin:      0;
    padding-left: var(--space-5);
    list-style:  decimal;
}

.static-toc__list li {
    margin-bottom: var(--space-2);
    font-size:     var(--font-size-sm);
}

.static-toc__list a {
    color:           var(--color-text-secondary);
    text-decoration: none;
    border-bottom:   1px dotted var(--color-text-tertiary);
    transition:      color var(--transition-fast), border-color var(--transition-fast);
}

.static-toc__list a:hover {
    color:        var(--color-cta);
    border-color: var(--color-cta);
}

/* Versie intro tekst */
.versie-intro {
    color:         var(--color-text-secondary);
    font-size:     var(--font-size-sm);
    margin-bottom: var(--space-3);
}

/* ==============================================================
   Versie-tabel
   ============================================================== */
.versie-table-wrap {
    overflow-x:    auto;
    margin:        var(--space-4) 0 var(--space-8);
    border-radius: var(--radius-md);
    border:        1px solid var(--color-border);
}

.versie-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--font-size-sm);
}

.versie-table th {
    background:    var(--color-bg-secondary);
    font-weight:   var(--font-weight-bold);
    text-align:    left;
    padding:       var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    white-space:   nowrap;
}

.versie-table td {
    padding:       var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    line-height:   var(--line-height-base);
}

.versie-table tr:last-child td { border-bottom: none; }
.versie-table tr:nth-child(even) td { background: var(--color-bg-secondary); }

.versie-table__version {
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
    color:       var(--color-text);
}

.versie-table__date {
    white-space: nowrap;
    color:       var(--color-text-tertiary);
}

/* Homepage intro verbergen op mobiel */
@media (max-width: 767px) {
    .home-intro .page-header__intro {
        display: none;
    }
    .home-intro .page-header {
        padding-bottom: 0;
        margin-bottom:  0;
        border-bottom:  none;
    }
}

/* ==============================================================
   Team pagina
   ============================================================== */

/* Desktop: about links, auteurs rechts */
.team-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-10);
    align-items:           start;
}

@media (max-width: 767px) {
    .team-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* About tekst */
.team-about p { margin-bottom: var(--space-4); }
.team-about p:last-child { margin-bottom: 0; }

/* Auteurs lijst */
.team-authors {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

/* Horizontale auteur card */
.team-author-card {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    padding:         var(--space-3) var(--space-4);
    background:      var(--color-card-bg);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    text-decoration: none;
    color:           inherit;
    transition:      transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.team-author-card:hover {
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-md);
    border-color: var(--color-cta);
}

.team-author-card__photo {
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      var(--color-bg-secondary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-text-tertiary);
    flex-shrink:     0;
}

.team-author-card__name {
    font-size:     var(--font-size-base);
    font-weight:   var(--font-weight-bold);
    color:         var(--color-text);
    margin-bottom: var(--space-1);
}

.team-author-card__count {
    font-size: var(--font-size-xs);
    color:     var(--color-text-tertiary);
}

/* Auteursprofiel */
.author-profile {
    display:        flex;
    gap:            var(--space-6);
    align-items:    flex-start;
    margin-bottom:  var(--space-10);
    padding:        var(--space-6);
    background:     var(--color-card-bg);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
}

@media (max-width: 600px) {
    .author-profile { flex-direction: column; align-items: center; text-align: center; }
}

.author-profile__photo {
    width:         100px;
    height:        100px;
    border-radius: 50%;
    background:    var(--color-bg-secondary);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--color-text-tertiary);
    flex-shrink:   0;
}

.author-profile__name {
    font-size:     var(--font-size-2xl);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-1);
}

.author-profile__role {
    font-size:     var(--font-size-sm);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.author-profile__bio {
    margin-bottom: var(--space-4);
    font-size:     var(--font-size-base);
}

.author-profile__links {
    display:    flex;
    gap:        var(--space-3);
    flex-wrap:  wrap;
}

.author-profile__link {
    display:         flex;
    align-items:     center;
    gap:             var(--space-1);
    font-size:       var(--font-size-sm);
    color:           var(--color-text-secondary);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

.author-profile__link:hover { color: var(--color-cta); }

.article-related__count {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color:       var(--color-text-tertiary);
    margin-left: var(--space-2);
}

/* Homepage kennisbank: 3 kolommen op desktop, 1 kolom op mobiel */
.home-knowhow-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .home-knowhow-grid.home-knowhow-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==============================================================
   Contactformulier en tipformulier
   ============================================================== */

.contact-layout {
    display:               grid;
    grid-template-columns: 1fr 280px;
    gap:                   var(--space-10);
    align-items:           start;
}

@media (max-width: 767px) {
    .contact-layout { grid-template-columns: 1fr; }
    .contact-aside  { order: -1; }
}

/* Formulier */
.contact-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.contact-form__group { display: flex; flex-direction: column; gap: var(--space-2); }

.contact-form__label {
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color:       var(--color-text);
}

.contact-form__optional {
    font-weight: var(--font-weight-normal);
    color:       var(--color-text-tertiary);
}

.contact-form__required { color: var(--color-cta); }

.contact-form__input,
.contact-form__textarea {
    width:         100%;
    padding:       var(--space-3) var(--space-4);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-base);
    font-family:   inherit;
    color:         var(--color-text);
    background:    var(--color-bg);
    transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing:    border-box;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    outline:      none;
    border-color: var(--color-cta);
    box-shadow:   0 0 0 3px rgba(255,102,0,.12);
}

.contact-form__textarea { resize: vertical; min-height: 140px; line-height: var(--line-height-base); }

/* Radio groep */
.contact-form__radio-group {
    display:   flex;
    gap:       var(--space-4);
    flex-wrap: wrap;
}

.contact-form__radio {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--font-size-sm);
    cursor:      pointer;
}

.contact-form__radio input { accent-color: var(--color-cta); width: 16px; height: 16px; }

/* Success / error */
.form-success,
.form-error {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    padding:       var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size:     var(--font-size-base);
    margin-bottom: var(--space-6);
}

.form-success {
    background: color-mix(in srgb, #2a9d8f 12%, var(--color-bg));
    border:     1px solid #2a9d8f;
    color:      #1a6b62;
}

.form-error {
    background: color-mix(in srgb, var(--color-accent-video) 10%, var(--color-bg));
    border:     1px solid var(--color-accent-video);
    color:      var(--color-accent-video);
}

/* Contact aside */
.contact-aside { display: flex; flex-direction: column; gap: var(--space-5); }

.contact-info {
    padding:       var(--space-4);
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border:        1px solid var(--color-border);
}

.contact-info__title {
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-2);
}

.contact-info__item {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--font-size-sm);
}

.contact-info p { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

.player-tip-link {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-1);
    font-size:       var(--font-size-sm);
    color:           var(--color-text-tertiary);
    text-decoration: none;
    border-bottom:   1px dotted var(--color-text-tertiary);
    transition:      color var(--transition-fast), border-color var(--transition-fast);
}

.player-tip-link:hover { color: var(--color-cta); border-color: var(--color-cta); }

/* ==============================================================
   Eredivisie / Event pagina's
   ============================================================== */

.eredivisie-disclaimer-link {
    display:         inline-block;
    font-size:       var(--font-size-sm);
    color:           var(--color-text-tertiary);
    text-decoration: none;
    border-bottom:   1px dotted var(--color-text-tertiary);
    margin-top:      var(--space-2);
    transition:      color var(--transition-fast);
}

.eredivisie-disclaimer-link:hover { color: var(--color-cta); }

.eredivisie-updated {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--font-size-xs);
    color:       var(--color-text-tertiary);
    margin:      var(--space-4) 0 var(--space-2);
}

.eredivisie-section {
    margin-top: var(--space-8);
}

.eredivisie-section__title {
    font-size:     var(--font-size-xl);
    font-weight:   var(--font-weight-bold);
    margin-bottom: var(--space-4);
}

/* Eredivisie tabel: clublogo's */
.eredivisie-table .eredivisie-clublogo {
    height:          28px;
    width:           auto;
    vertical-align:  middle;
    margin-right:    var(--space-2);
}

.eredivisie-table .standingsrank {
    font-weight:  var(--font-weight-bold);
    font-size:    var(--font-size-sm);
    color:        var(--color-text-tertiary);
    padding-right: var(--space-2);
}

.eredivisie-table .score {
    font-variant-numeric: tabular-nums;
    font-weight:          var(--font-weight-medium);
}

.eredivisie-table .separator {
    color: var(--color-text-tertiary);
    padding: 0 var(--space-1);
}

.eredivisie-table .plannedtime {
    font-size:  var(--font-size-sm);
    white-space: nowrap;
}

.eredivisie-table .nowrap { white-space: nowrap; }

/* Disclaimer */
.eredivisie-disclaimer {
    margin-top:    var(--space-12);
    padding:       var(--space-5);
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border-left:   3px solid var(--color-border);
}

.eredivisie-disclaimer__title {
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color:         var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}

.eredivisie-disclaimer p {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-tertiary);
    line-height: var(--line-height-base);
    margin:      0;
}

/* Event logo */
.event-logo {
    margin-bottom: var(--space-6);
}

.event-logo__img {
    max-height: 80px;
    width:      auto;
    max-width:  300px;
}

/* NK kampioenen grid */
.nk-kampioenen {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-4);
    margin-top:            var(--space-4);
}

@media (max-width: 767px) {
    .nk-kampioenen { grid-template-columns: 1fr; }
}

.nk-discipline {
    background:    var(--color-card-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       var(--space-4);
}

.nk-discipline__name {
    font-size:     var(--font-size-xs);
    font-weight:   var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color:         var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}

.nk-discipline__winner,
.nk-discipline__runner {
    display:     flex;
    align-items: baseline;
    gap:         var(--space-2);
    font-size:   var(--font-size-sm);
    margin:      0 0 var(--space-1);
}

.nk-discipline__winner {
    font-weight: var(--font-weight-bold);
    color:       var(--color-text);
}

.nk-discipline__runner {
    color: var(--color-text-secondary);
}

.nk-discipline__rank {
    font-size:  var(--font-size-base);
    flex-shrink: 0;
}

/* Event pagina's: nieuws cards 1 kolom op mobiel */
@media (max-width: 767px) {
    .event-news-grid {
        grid-template-columns: 1fr;
    }
}

/* Event pagina: logo rechts van de page-header */
.page-header--event {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-6);
}

.page-header__text { flex: 1; min-width: 0; }

/* Zorg dat breadcrumb en intro binnen text-blok blijven */
.page-header--event .page-header__breadcrumb,
.page-header--event .page-header__title,
.page-header--event .page-header__intro { max-width: 100%; }

.page-header__event-logo {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

.page-header__event-logo img {
    height:    clamp(80px, 10vw, 140px);
    width:     auto;
    max-width: 280px;
}

/* Mobiel: logo uitgelijnd met bovenkant h1, hoogte = regelhoogte h1 */
@media (max-width: 600px) {
    .page-header--event {
        align-items: flex-start;
    }
    .page-header__event-logo {
        /* Voeg dezelfde top-offset toe als breadcrumb + margin-bottom */
        margin-top: calc(var(--space-3) + 1.2em); /* breadcrumb hoogte benadering */
    }
    .page-header__event-logo img {
        height: 1.75rem; /* gelijk aan min van clamp op h1 */
    }
}

/* Event nieuws cards: normaal op desktop, compact op mobiel */
.event-news-card {
    /* desktop: standaard article-card */
}

@media (max-width: 767px) {
    .event-news-card {
        flex-direction:  row !important;
        align-items:     stretch;
    }
    .event-news-card .article-card__image {
        flex:       0 0 80px;
        width:      80px;
        min-height: 80px;
        height:     auto;
        align-self: stretch;
    }
    .event-news-card .article-card__image img,
    .event-news-card .article-card__image .card-placeholder {
        position: absolute;
        inset:    0;
        width:    100%;
        height:   100%;
        object-fit: cover;
    }
    .event-news-card .article-card__image {
        position: relative;
    }
    .event-news-card .article-card__body {
        flex: 1;
    }
}

/* ==============================================================
   Disqus reacties
   ============================================================== */

.disqus-section {
    margin-top:    var(--space-10);
    padding-top:   var(--space-8);
    border-top:    1px solid var(--color-border);
}

.disqus-section__title {
    font-size:      var(--font-size-lg);
    font-weight:    var(--font-weight-bold);
    color:          var(--color-text);
    line-height:    var(--line-height-tight);
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
    margin:         0 0 var(--space-5);
}

.disqus-section__title::before {
    content:       '';
    display:       inline-block;
    width:         4px;
    height:        1.1em;
    border-radius: var(--radius-sm);
    flex-shrink:   0;
    background:    var(--color-brand);
}

/* Consent / binnenkort-placeholder */
.disqus-gate {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            var(--space-3);
    padding:        var(--space-8) var(--space-6);
    background:     var(--color-bg-secondary);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
}

.disqus-gate__icon {
    color:         var(--color-text-tertiary);
    margin-bottom: var(--space-1);
}

.disqus-gate__text {
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color:       var(--color-text);
    margin:      0;
}

.disqus-gate__btn {
    margin-top: var(--space-1);
}

.disqus-gate__sub {
    font-size:     var(--font-size-xs);
    color:         var(--color-text-tertiary);
    margin:        0 0 var(--space-2);
}

.disqus-gate--soon .disqus-gate__text {
    color: var(--color-text-secondary);
}

/* Laden indicator */
.disqus-thread { min-height: 120px; }

.disqus-loading {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    color:       var(--color-text-tertiary);
    font-size:   var(--font-size-sm);
    padding:     var(--space-6) 0;
}

.disqus-loading__icon {
    animation: spin 1.2s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==============================================================
   Zomerbadminton
   ============================================================== */

.zomerbadminton-map {
    border-radius: var(--radius-md);
    overflow:      hidden;
    border:        1px solid var(--color-border);
    margin-bottom: var(--space-2);
}

.zomerbadminton-map iframe {
    display: block;
    width:   100%;
}

.zomerbadminton-placeholder {
    min-height:      300px;
    background:      var(--color-bg-secondary) !important;
    color:           var(--color-text) !important;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    gap:             var(--space-3);
    padding:         var(--space-8) var(--space-6);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
}

.zomerbadminton-placeholder svg {
    color: var(--color-text-tertiary);
}

.zomerbadminton-placeholder .video-placeholder__title {
    color:       var(--color-text) !important;
    font-size:   var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin:      0;
}

.zomerbadminton-placeholder .video-placeholder__desc {
    color:     var(--color-text-secondary) !important;
    font-size: var(--font-size-sm);
    margin:    0;
}

.zomerbadminton-placeholder .video-placeholder__sub {
    color:     var(--color-text-tertiary) !important;
    font-size: var(--font-size-xs);
    margin:    0;
}

.zomerbadminton-cta {
    display:       flex;
    gap:           var(--space-8);
    align-items:   flex-start;
    background:    var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding:       var(--space-6);
    border-left:   4px solid var(--color-accent-clubs);
}

.zomerbadminton-cta__text {
    flex: 1;
}

.zomerbadminton-cta__text p,
.zomerbadminton-cta__text ul {
    font-size:   var(--font-size-sm);
    color:       var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.zomerbadminton-cta__text ul {
    padding-left: var(--space-5);
}

.zomerbadminton-cta__action {
    flex-shrink: 0;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         var(--space-3);
    text-align:  center;
}

.zomerbadminton-cta__sub {
    font-size: var(--font-size-xs);
    color:     var(--color-text-tertiary);
    margin:    0;
}

@media (max-width: 767px) {
    .zomerbadminton-cta { flex-direction: column; gap: var(--space-5); }
    .zomerbadminton-cta__action { align-items: flex-start; }
}

/* Homepage eredivisie grid: 1 kolom op ≤600px */
@media (max-width: 600px) {
    .home-eredivisie-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Homepage h1: lange versie op desktop, korte op mobiel */
.home-h1-short { display: none; }
.home-h1-long  { display: inline; }

@media (max-width: 600px) {
    .home-h1-short { display: inline; }
    .home-h1-long  { display: none; }
}

/* Nieuwspagina intro verbergen op mobiel */
@media (max-width: 767px) {
    .nieuws-intro { display: none; }
}

/* Eredivisie livestreams */
.eredivisie-streams {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-5);
    margin-top:            var(--space-4);
}

@media (max-width: 767px) {
    .eredivisie-streams { grid-template-columns: 1fr; }
}

.eredivisie-stream__label {
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-medium);
    color:         var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.video-embed-wrap {
    position:       relative;
    aspect-ratio:   16 / 9;
    border-radius:  var(--radius-md);
    overflow:       hidden;
    background:     #000;
}

.video-embed-wrap iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}