/* Herbruikbare componenten uit het ontwerp */

/* Verticaal ritme van een sectie: 32–44px boven, 46–64px onder.
   Bewust padding-block en niet de shorthand: .section staat meestal samen met
   .container op hetzelfde element, en de shorthand zou de zijmarge van de
   container op 0 zetten. Dan plakt de tekst tegen de schermrand. */
.section {
    padding-block: 40px 56px;
}

@media (max-width: 860px) {
    .section {
        padding-block: 32px 46px;
    }
}

/* ------------------------------------------------------------------ */
/* Tekstkolom met sidebar                                              */
/* ------------------------------------------------------------------ */

/* Gedeeld door de artikelpagina en het spelersprofiel. Staat hier en niet in
   article.css, want dat blad wordt alleen op de artikelpagina geladen — het
   profiel viel daardoor terug op één kolom zonder sidebar. */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 24px;
}

.sidebar {
    min-width: 0;
}

.sidebar__block {
    margin-top: 34px;
}

/* De advertentie mag meelopen tijdens het scrollen van een lang artikel */
.ad--sidebar {
    position: sticky;
    top: 76px;
    margin-top: 0;
}

@media (max-width: 860px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sidebar {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Chips en tags                                                       */
/* ------------------------------------------------------------------ */

.chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 11.5px;
    /* Vaste regelhoogte: zo is een chip altijd precies 34px en kan de
       filterbalk daarop uitlijnen, ongeacht het geladen lettertype. */
    line-height: 18px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 7px 11px;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.chip:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* Actieve sportchip: witte tekst op de sportkleur zelf */
.chip[aria-pressed="true"] {
    color: #fff;
    background: var(--sport-fg);
    border-color: var(--sport-fg);
}

.chip[aria-pressed="true"]:hover {
    color: #fff;
}

/* Chips zonder eigen sportkleur ("Alle sporten", de geslachtsfilters) vallen
   terug op het donkere vlak in plaats van op de accentkleur. */
.chip--all[aria-pressed="true"],
.chip--plain[aria-pressed="true"] {
    background: var(--ink-deep);
    border-color: var(--ink-deep);
}

.chip--neutral {
    background: var(--chip-neutral);
    border-color: transparent;
    color: var(--text-muted);
}

/* Sport-tag: kleur volgt uit de hue van de sport */
.tag-sport {
    display: inline-flex;
    align-items: center;
    font-family: var(--narrow);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sport-fg);
    background: var(--sport-bg);
    border-radius: var(--radius);
    padding: 4px 8px;
}

/* Gevulde variant, op artikel- en clubkoppen */
.tag-sport--solid {
    color: #fff;
    background: var(--accent);
}

/* Op donkere vlakken */
.tag-sport--bright {
    color: var(--ink-deep);
    background: var(--accent-bright);
}

.tag-outline {
    display: inline-flex;
    align-items: center;
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 4px 8px;
}

.tag-outline--on-dark {
    color: #b9c3d1;
    border-color: #3a4757;
}

/* ------------------------------------------------------------------ */
/* Sectiekoppen — altijd op een 2px rule                               */
/* ------------------------------------------------------------------ */

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border-top: 2px solid var(--ink);
    padding-top: 12px;
    margin-bottom: 22px;
}

.section-head__title {
    font-family: var(--narrow);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.section-head__link {
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Beeldplaceholders — tot de redactie fotografie levert               */
/* ------------------------------------------------------------------ */

.ph {
    background: var(--placeholder-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 10px;
    color: #9a988f;
    text-align: center;
    padding: 8px;
}

.ph--dark {
    background: var(--placeholder-dark);
    color: #64748b;
}

.ph--ad {
    background: var(--placeholder-ad);
    border: 1px dashed #c2c1ba;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a3a29a;
}

/* Echte foto's krijgen dezelfde verhoudingen als de placeholders die ze vervangen */
.media {
    width: 100%;
    object-fit: cover;
}

/* media() levert een <picture> zodra er een webp naast het origineel ligt. Die
   wrapper heeft geen eigen vorm nodig: zonder dit is híj het flex-item in een
   rij en niet de afbeelding, en dan slaan breedte en flex:none op de verkeerde
   doos neer.

   De <source> moet er dan wel expliciet uit. Met display:contents tellen álle
   kinderen mee als item, en een <source> die een cel van een grid inpikt duwt
   de tekst ernaast een regel omlaag. */
picture {
    display: contents;
}

picture > source {
    display: none;
}

.ph--16-10, .media.ph--16-10 { aspect-ratio: 16 / 10; }
.ph--16-9  { aspect-ratio: 16 / 9; }
.ph--4-3   { aspect-ratio: 4 / 3; }
.ph--1-1   { aspect-ratio: 1 / 1; }

.ph--round {
    border-radius: 50%;
}

/* ------------------------------------------------------------------ */
/* Kaarten — randen, geen schaduwen, geen afronding                    */
/* ------------------------------------------------------------------ */

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color var(--transition);
}

.card:hover {
    border-color: var(--ink);
}

.card__image {
    display: block;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 15px 16px 18px;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.card__gender {
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.card__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 18.5px;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--ink);
}

.card__intro {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
}

.card__date {
    margin-top: auto;
    font-family: var(--narrow);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 26px;
}

.card-grid--teams {
    grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
}

.card-grid--related {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* ------------------------------------------------------------------ */
/* Overstappenlijst                                                    */
/* ------------------------------------------------------------------ */

.transfer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 13px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    transition: background var(--transition);
}

.transfer:hover {
    background: var(--row-hover);
    color: var(--ink);
}

.transfer__sport {
    min-width: 62px;
    text-align: center;
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sport-fg);
    background: var(--sport-bg);
    border-radius: var(--radius);
    padding: 5px 8px;
}

.transfer__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.transfer__name {
    font-weight: 600;
    font-size: 15.5px;
}

.transfer__age {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--text-faint);
    margin-left: 4px;
}

.transfer__route {
    font-size: 13px;
    color: var(--text-muted);
}

.transfer__aside {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.transfer__date {
    font-family: var(--narrow);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

.transfer__type {
    display: inline-flex;
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius);
    padding: 4px 8px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Spotlight — "Talent van de week"                                    */
/* ------------------------------------------------------------------ */

.spotlight {
    display: block;
    background: var(--ink-deep);
    color: #fff;
    transition: background var(--transition);
}

.spotlight:hover {
    background: var(--dark-hover);
    color: #fff;
}

.spotlight__image {
    width: 100%;
}

/* Liggende variant voor de homepage, waar de kaart de volle breedte heeft. */
.spotlight--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.spotlight--wide .spotlight__image {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.spotlight--wide .spotlight__body {
    justify-content: center;
    padding: 30px 34px;
}

.spotlight--wide .spotlight__name {
    font-size: 30px;
}

@media (max-width: 860px) {
    .spotlight--wide {
        grid-template-columns: 1fr;
    }

    .spotlight--wide .spotlight__image {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    .spotlight--wide .spotlight__body {
        padding: 18px 20px 20px;
    }

    .spotlight--wide .spotlight__name {
        font-size: 25px;
    }
}

.spotlight__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
}

.spotlight__name {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.spotlight__meta {
    font-size: 13px;
    color: #9fabbb;
}

.spotlight__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #26303c;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat__value {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 21px;
    color: #fff;
    line-height: 1;
}

.stat__label {
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7f8d9e;
}

/* ------------------------------------------------------------------ */
/* Spelerkaart                                                         */
/* ------------------------------------------------------------------ */

.team-card__image {
    display: block;
    position: relative;
}

.team-card__tag {
    position: absolute;
    top: 10px;
    left: 10px;
}

.team-card__name {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0;
    color: var(--ink);
}

.team-card__club {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #6b7280;
}

.team-card__logo {
    width: 20px;
    height: 20px;
    flex: none;
}

.team-card__chip {
    display: inline-flex;
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius);
    padding: 4px 8px;
}

/* ------------------------------------------------------------------ */
/* Advertentieplek                                                     */
/* ------------------------------------------------------------------ */

.ad {
    margin-top: 26px;
}

/* De plek is even breed als de kolom waarin hij staat. Een vaste 300px liet op
   een telefoon een strook wit achter naast blokken die wél doorlopen. */
.ad__slot {
    width: 100%;
    height: var(--ad-height, 250px);
}

/* Op desktop staat de advertentie in de sidebar, op mobiel inline tussen
   de laatste alinea's. Precies één van de twee is zichtbaar. */
.ad--inline {
    display: none;
}

@media (max-width: 860px) {
    .ad--sidebar {
        display: none;
    }

    .ad--inline {
        display: block;
    }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--narrow);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 0;
    border-radius: var(--radius);
    padding: 11px 16px;
    transition: background var(--transition), color var(--transition);
}

.btn--dark {
    background: var(--ink-deep);
    color: #fff;
}

.btn--dark:hover {
    background: var(--ink);
    color: #fff;
}

.btn--accent {
    background: var(--accent);
    color: #fff;
}

.btn--accent:hover {
    background: var(--accent-hover);
    color: #fff;
}

.btn--bright {
    background: var(--accent-bright);
    color: var(--ink-deep);
}

.btn--bright:hover {
    background: var(--accent-bright-hover);
    color: var(--ink-deep);
}

.btn--outline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-input);
    padding: 7px 11px;
}

.btn--outline:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.btn--danger {
    background: transparent;
    color: #a33327;
    border: 1px solid #e3c4bf;
}

.btn--danger:hover {
    background: #fbe9e7;
    color: #a33327;
}

/* ------------------------------------------------------------------ */
/* Volgknop                                                            */
/* ------------------------------------------------------------------ */

/* Een echt formulier, dus krijgt het de maat van de knop erin. */
.follow {
    display: inline-flex;
    margin: 0;
}

/* Volg je al, dan is de knop geen uitnodiging meer maar een bevestiging —
   en een bevestiging hoort minder hard te schreeuwen dan een oproep. */
.follow__btn.is-following {
    background: transparent;
    border: 1px solid currentColor;
}

.follow__btn.is-following:hover {
    background: transparent;
    opacity: 0.75;
}

.btn--bright.is-following {
    color: var(--accent-bright);
}

.btn--dark.is-following {
    color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* Leegstaten — met acht sporten levert een selectie vaak niets op,    */
/* dus dit is een gewone toestand, geen randgeval.                     */
/* ------------------------------------------------------------------ */

.empty {
    padding: 40px 0 48px;
}

.empty__kicker {
    font-family: var(--narrow);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.empty__line {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.45;
    color: var(--text-muted);
    max-width: 44ch;
    margin-bottom: 20px;
}

.empty--on-dark .empty__kicker {
    color: var(--accent-bright);
}

.empty--on-dark .empty__line {
    color: #c6d0dc;
}

/* ------------------------------------------------------------------ */
/* Broodtekst — 18px/1.75, ruim genoeg om lang door te lezen op mobiel */
/* ------------------------------------------------------------------ */

.prose {
    max-width: 70ch;
}

.prose h1 {
    font-size: clamp(32px, 4vw, 44px);
    margin-bottom: 18px;
}

.prose h2 {
    font-size: 26px;
    margin: 36px 0 12px;
}

.prose p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-body);
    text-wrap: pretty;
}

.prose p + p {
    margin-top: 22px;
}

.prose__lead {
    font-size: 19px !important;
    line-height: 1.55 !important;
    color: var(--text-lead) !important;
    margin-bottom: 22px;
}

.prose blockquote {
    margin: 28px 0;
    padding-left: 22px;
    border-left: 3px solid var(--accent);
    font-family: var(--serif);
    font-style: italic;
    font-size: 24px;
    line-height: 1.45;
    color: var(--ink);
}

.prose h3 {
    font-size: 20px;
    margin: 28px 0 10px;
}

/* base.css zet list-style op none voor alle lijsten in de navigatie; in een
   artikel horen de bolletjes en cijfers er juist wél te staan. */
.prose ul,
.prose ol {
    margin: 20px 0;
    padding-left: 24px;
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-body);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li {
    margin-top: 8px;
}

.prose li::marker {
    color: var(--text-faint);
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.prose a:hover {
    color: var(--ink);
}

.prose strong {
    font-weight: 700;
    color: var(--ink);
}

/* Een afbeelding in de tekst: even breed als de kolom, met het onderschrift in
   dezelfde stijl als dat onder de hoofdfoto. */
.prose .article-figure {
    margin: 28px 0;
}

.prose .article-figure__image {
    width: 100%;
    height: auto;
    display: block;
}

.prose .article-figure figcaption {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-faint);
    margin-top: 8px;
}

.prose__form {
    margin: 20px 0 28px;
}

/* ------------------------------------------------------------------ */
/* Kickers en meta                                                     */
/* ------------------------------------------------------------------ */

.kicker {
    font-family: var(--narrow);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.kicker--bright {
    color: var(--accent-bright);
}

.meta {
    font-size: 12.5px;
    color: var(--text-faint);
}

/* Echte advertentie in plaats van de placeholder */
.ad__link {
    display: block;
}

/* Artwork van een sponsor rekken we niet op: dat wordt onscherp. Hij houdt zijn
   aangeleverde maat en gaat in het midden staan, zodat de ruimte eromheen
   gelijk is in plaats van een rafelrand aan één kant. */
.ad__image {
    width: 100%;
    max-width: var(--ad-width, none);
    height: auto;
    display: block;
    margin-inline: auto;
    border: 1px solid var(--border);
}

/* ------------------------------------------------------------------ */
/* Cookiebanner                                                        */
/* ------------------------------------------------------------------ */

/* Onderaan vastgezet en niet over de inhoud heen: een balk die de helft van het
   artikel afdekt maakt weigeren onaantrekkelijk, en dat is precies wat een
   vrije keuze niet is. */
.cookie {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    background: var(--ink-deep);
    border-top: 2px solid var(--accent-bright);
    color: #d7dee7;
}

.cookie__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.cookie__text {
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 78ch;
}

.cookie__text a {
    color: var(--accent-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie__actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* Allebei even zwaar: weigeren mag niet moeilijker zijn dan accepteren. */
.cookie__btn {
    background: #fff;
    color: var(--ink-deep);
    white-space: nowrap;
}

.cookie__btn:hover {
    background: var(--accent-bright);
    color: var(--ink-deep);
}

@media (max-width: 720px) {
    .cookie__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .cookie__actions {
        margin-left: 0;
    }

    .cookie__btn {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Eigen advertentie: de andere projecten van de redactie              */
/* ------------------------------------------------------------------ */

/* Vult de plek precies zoals een geboekte banner dat zou doen: dezelfde breedte
   en hoogte uit --ad-width en --ad-height, zodat de pagina niet verspringt als
   er later wél een sponsor staat. */
/* Geen max-width: dit is een tekstblok dat zich naar de plek voegt, geen banner
   van een vaste maat. Zo loopt hij op een telefoon net zo ver door als de
   kaarten eromheen, en op de homepage over de volle kolom. */
.house-ad {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    width: 100%;
    height: var(--ad-height, 250px);
    padding: 16px 18px;
    background-color: var(--ink-deep);
    background-image: var(--house-image);
    background-size: cover;
    background-position: center;
    color: #fff;
    transition: transform var(--transition);
}

.house-ad:hover {
    color: #fff;
}

.house-ad:hover .house-ad__name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.house-ad__kicker {
    font-family: var(--narrow);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-bright);
}

.house-ad__name {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
}

.house-ad__line {
    font-size: 12.5px;
    color: #b9c3d1;
}

/* In een hoge zijbalkplek (300×600) staat de tekst prettiger halverwege. */
.ad--sidebar .house-ad {
    justify-content: flex-end;
}

.ad__label {
    display: block;
    margin-top: 5px;
    font-family: var(--narrow);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}