/*
 * Poolbaas Home + Stand Visual V1
 * --------------------------------------------
 * Gerichte verfijning na Visual Foundation V1.
 */


/* ========================================================
   KANTOOR — ALGEMENE VERTICAL RHYTHM
   ======================================================== */

body .pk4-page {
    gap: clamp(24px, 4vw, 38px) !important;
}

body .pk4-page > * {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body .pk4-page > .pk4-panel {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body .pk4-page > .pk4-panel + .pk4-panel {
    margin-top: 0 !important;
    padding-top: clamp(24px, 4vw, 36px) !important;
}


/* ========================================================
   KANTOOR — COMPACTERE HERO
   ======================================================== */

body .pk4-hero {
    min-height: 0 !important;
    margin: 0 !important;
    padding:
        clamp(28px, 5vw, 50px)
        clamp(22px, 5vw, 54px)
        clamp(24px, 4vw, 42px) !important;
}

body .pk4-hero__content {
    display: grid !important;
    gap: 18px !important;
}

body .pk4-hero__content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body .pk4-hero h1 {
    max-width: 760px;
    font-size:
        clamp(2.25rem, 8vw, 4.5rem) !important;
    line-height: 0.98 !important;
}

body .pk4-hero__details {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px 20px !important;
    margin-top: 0 !important;
}

body .pk4-hero__action {
    width: 100% !important;
    max-width: none !important;
    min-height: 56px !important;
    margin-top: 4px !important;
    border-radius:
        var(--pbv1-radius-md, 13px) !important;
}

body .pk4-hero__watermark {
    opacity: 0.045 !important;
}


/* ========================================================
   KANTOOR — SECTIEKOPPEN
   ======================================================== */

body .pk4-page :where(
    .pk4-section-header,
    .pk4-panel__header,
    .pk4-upcoming-v3__header
) {
    align-items: baseline !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
}

body .pk4-page :where(
    .pk4-section-header,
    .pk4-panel__header,
    .pk4-upcoming-v3__header
) a {
    white-space: nowrap;
}


/* ========================================================
   KANTOOR — ÉÉN DOORLOPENDE WEDSTRIJDSTRIP
   ======================================================== */

body .pk4-page :has(
    > .pk4-upcoming-v3__card
) {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: stretch !important;
    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border-top:
        1px solid var(--pbv1-line, rgba(49, 31, 79, 0.12)) !important;

    border-bottom:
        1px solid var(--pbv1-line, rgba(49, 31, 79, 0.12)) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

body .pk4-page :has(
    > .pk4-upcoming-v3__card
)::-webkit-scrollbar {
    display: none;
}

body .pk4-upcoming-v3__card {
    position: relative;

    flex: 1 1 0 !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 18px 14px !important;

    border: 0 !important;
    border-right:
        1px solid var(--pbv1-line-soft, rgba(49, 31, 79, 0.075)) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    scroll-snap-align: start;
}

body .pk4-upcoming-v3__card:last-child {
    border-right: 0 !important;
}

body .pk4-upcoming-v3__card:hover {
    z-index: 1;
    background:
        var(--pbv1-surface-muted, rgba(51, 32, 83, 0.045)) !important;
    transform: none !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="team"],
    [class*="club"],
    [class*="fixture"],
    [class*="name"]
) {
    min-width: 0 !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="name"],
    h3,
    strong
) {
    overflow: hidden;
    text-overflow: ellipsis;
}

body .pk4-upcoming-v3__card [class*="name"] {
    display: -webkit-box;
    min-height: 2.5em;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    line-clamp: 2;
    white-space: normal !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="score"],
    [class*="prediction"]
) {
    border-radius:
        var(--pbv1-radius-sm, 9px) !important;
    box-shadow: none !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="status"],
    [class*="saved"]
) {
    white-space: nowrap;
}


/* ========================================================
   KANTOOR — STAND DIRECT AANSLUITEND
   ======================================================== */

body .pk9-stand-card {
    min-height: 0 !important;
    margin: 0 !important;
    padding:
        20px 0 0 !important;

    border-top:
        1px solid var(--pbv1-line, rgba(49, 31, 79, 0.12)) !important;
}

body .pk9-stand-card > * {
    margin-top: 0 !important;
}

body .pk4-page :where(
    .pk4-stand,
    .pk9-stand,
    .pk4-activity
) {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ========================================================
   STAND — VERTICAL RHYTHM
   ======================================================== */

body .psf5-page {
    gap: clamp(24px, 4vw, 36px) !important;
}

body .psf5-page > * {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ========================================================
   STAND — HEADER EN WEEKSTATUS WORDEN ÉÉN SECTIE
   ======================================================== */

body .psf5-header {
    padding:
        6px 0 24px !important;
}

body .psf5-header__status {
    margin-top: 24px !important;
    padding:
        20px 0 0 !important;

    border: 0 !important;
    border-top:
        1px solid var(--pbv1-line, rgba(49, 31, 79, 0.12)) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-header__status :where(
    [class*="badge"],
    [class*="label"]
) {
    margin-bottom: 8px;
}


/* ========================================================
   STAND — TABS ALS ONDERSTREEPTE NAVIGATIE
   ======================================================== */

body .psf5-page [class*="tabs"] {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line, rgba(49, 31, 79, 0.12)) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page
[class*="psf5-"][class*="-tab"]:not(
    [class*="-table"]
) {
    position: relative;

    min-height: 68px !important;
    margin: 0 !important;
    padding:
        14px 10px !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page
[class*="psf5-"][class*="-tab"]:not(
    [class*="-table"]
)::after {
    content: "";

    position: absolute;
    right: 18%;
    bottom: -1px;
    left: 18%;

    height: 3px;

    border-radius: 999px;
    background: transparent;

    transition:
        background-color
        var(--pbv1-normal, 220ms)
        var(--pbv1-ease, ease),
        right
        var(--pbv1-normal, 220ms)
        var(--pbv1-ease, ease),
        left
        var(--pbv1-normal, 220ms)
        var(--pbv1-ease, ease);
}

body .psf5-page
[class*="psf5-"][class*="-tab"].is-active:not(
    [class*="-table"]
),
body .psf5-page
[class*="psf5-"][class*="-tab"][aria-selected="true"]:not(
    [class*="-table"]
) {
    color:
        var(--pbv1-brand-strong, #3d205f) !important;
    background: transparent !important;
}

body .psf5-page
[class*="psf5-"][class*="-tab"].is-active:not(
    [class*="-table"]
)::after,
body .psf5-page
[class*="psf5-"][class*="-tab"][aria-selected="true"]:not(
    [class*="-table"]
)::after {
    right: 8%;
    left: 8%;
    background:
        var(--pbv1-brand, #553281);
}


/* ========================================================
   STAND — VOORTGANG GEEN LOSSE KAART
   ======================================================== */

body .psf5-page :where(
    .psf5-progress,
    .psf5-progress-card,
    .psf5-progress-panel,
    [class^="psf5-progress"]
) {
    margin: 0 !important;
    padding:
        22px 0 !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line, rgba(49, 31, 79, 0.12)) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page :where(
    .psf5-progress,
    .psf5-progress-card,
    .psf5-progress-panel
) :where(
    [class*="track"],
    progress
) {
    border-radius: 999px !important;
    box-shadow: none !important;
}


/* ========================================================
   STAND — POSITIE EN LEIDER ALS COMPACTE DATASECTIES
   ======================================================== */

body .psf5-personal-card {
    margin: 0 !important;
    padding:
        24px 0 !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line, rgba(49, 31, 79, 0.12)) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-personal-card:first-of-type {
    border-top:
        1px solid var(--pbv1-line, rgba(49, 31, 79, 0.12)) !important;
}

body .psf5-winner-card {
    margin: 0 !important;
    padding:
        24px 0 !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line, rgba(49, 31, 79, 0.12)) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page :where(
    .psf5-personal-card,
    .psf5-winner-card
) :where(
    [class*="points"],
    [class*="gap"],
    [class*="icon"]
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* ========================================================
   MOBIEL
   ======================================================== */

@media (max-width: 720px) {
    body .pk4-page {
        gap: 26px !important;
    }

    body .pk4-hero {
        margin-inline: -9px !important;
        padding:
            30px 24px
            26px !important;
    }

    body .pk4-hero h1 {
        font-size:
            clamp(2.2rem, 11vw, 3.4rem) !important;
    }

    body .pk4-page :has(
        > .pk4-upcoming-v3__card
    ) {
        margin-inline: -9px !important;
        padding-inline: 9px !important;
    }

    body .pk4-upcoming-v3__card {
        flex:
            0 0 min(76vw, 315px) !important;

        min-width:
            min(76vw, 315px) !important;

        padding:
            18px 16px !important;
    }

    body .pk4-upcoming-v3__card:first-child {
        border-left:
            1px solid var(--pbv1-line-soft, rgba(49, 31, 79, 0.075)) !important;
    }

    body .psf5-page {
        gap: 26px !important;
    }

    body .psf5-header {
        padding-top: 0 !important;
    }

    body .psf5-header__status {
        margin-top: 20px !important;
        padding-top: 18px !important;
    }

    body .psf5-page
    [class*="psf5-"][class*="-tab"]:not(
        [class*="-table"]
    ) {
        min-height: 64px !important;
        padding:
            12px 8px !important;
    }

    body .psf5-personal-card,
    body .psf5-winner-card {
        padding:
            22px 0 !important;
    }
}


/* ========================================================
   REDUCED MOTION
   ======================================================== */

@media (prefers-reduced-motion: reduce) {
    body .pk4-page :has(
        > .pk4-upcoming-v3__card
    ) {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }

    body .psf5-page
    [class*="psf5-"][class*="-tab"]:not(
        [class*="-table"]
    )::after {
        transition: none !important;
    }
}