/* =========================================================
   HERO
   ========================================================= */

.family-hero {
    position: relative;

    overflow: hidden;

    padding: 5rem 0 4rem;

    color: var(--color-white);

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(223, 77, 40, .24),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(229, 182, 47, .12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--color-blue-deep),
            var(--color-blue-dark)
        );
}

.family-hero::after {
    content: "★";

    position: absolute;

    right: 5%;
    bottom: -18%;

    color: rgba(255, 255, 255, .05);

    font-size: clamp(8rem, 18vw, 15rem);

    transform: rotate(-10deg);

    pointer-events: none;
}

.family-hero__content {
    position: relative;
    z-index: 1;

    max-width: 850px;
}

.family-hero .eyebrow {
    color: var(--color-blue-deep);

    background: var(--color-gold-light);

    padding: .3rem .7rem;

    border-radius: var(--radius-pill);
}

.family-hero h1 {
    margin-bottom: 1.25rem;

    color: var(--color-white);

    font-size: clamp(2.6rem, 6vw, 4.8rem);
}

.family-hero__intro {
    max-width: 760px;

    margin-bottom: 0;

    color: #dce6f0;

    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.75;
}


/* =========================================================
   INHOUDSOPGAVE
   ========================================================= */

.family-toc {
    background:
        linear-gradient(
            180deg,
            #f7f9fb,
            #ffffff
        );
}

.family-toc__box {
    padding: 2.5rem;

    border: 1px solid rgba(13, 61, 107, .10);
    border-radius: var(--radius-lg);

    background: var(--color-white);

    box-shadow: var(--shadow-card);
}

.family-toc__header {
    max-width: 700px;

    margin-bottom: 2rem;
}

.family-toc__header h2 {
    margin-bottom: .75rem;
}

.family-toc__header p:last-child {
    margin-bottom: 0;

    color: #667382;
}

.family-toc__links {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: .8rem;
}

.family-toc__links a {
    display: flex;
    align-items: center;

    gap: .75rem;

    min-height: 58px;

    padding: .75rem 1rem;

    color: var(--color-blue-deep);

    border: 1px solid #e6ebf0;
    border-radius: 12px;

    background: #fbfcfd;

    text-decoration: none;

    font-size: .9rem;
    font-weight: 800;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}

.family-toc__links a:hover {
    transform: translateY(-2px);

    color: var(--color-red-orange);

    border-color: rgba(229, 182, 47, .40);

    background: #ffffff;
}

.family-toc__links span {
    min-width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--color-blue-deep);

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--color-gold-light),
            var(--color-gold)
        );

    font-size: .72rem;
    font-weight: 900;
}


/* =========================================================
   ALGEMENE SECTIES
   ========================================================= */

.family-section {
    scroll-margin-top: 110px;

    background: var(--color-white);
}

.family-section--alt {
    background:
        linear-gradient(
            180deg,
            #f7f9fb,
            #fbfcfd
        );
}

.family-section__heading {
    display: grid;

    grid-template-columns: auto 1fr;

    align-items: flex-start;

    gap: 1.25rem;

    max-width: 900px;

    margin-bottom: 2.5rem;
}

.family-section__number {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--color-blue-deep);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--color-gold-light),
            var(--color-gold)
        );

    box-shadow: var(--shadow-gold);

    font-size: .9rem;
    font-weight: 900;
}

.family-section__heading .eyebrow {
    margin-bottom: .4rem;
}

.family-section__heading h2 {
    margin-bottom: .75rem;
}

.family-section__heading p:last-child {
    max-width: 760px;

    margin-bottom: 0;

    color: #647180;
}


/* =========================================================
   ALGEMENE FAMILY KAART
   ========================================================= */

.family-card {
    position: relative;

    padding: 1.5rem;

    overflow: hidden;

    border: 1px solid #e5eaf0;
    border-radius: var(--radius-md);

    background: var(--color-white);

    box-shadow:
        0 10px 28px rgba(6, 30, 56, .07);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.family-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(6, 30, 56, .11);
}

.family-card::after {
    content: "";

    position: absolute;

    right: -35px;
    bottom: -35px;

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background: rgba(23, 103, 165, .05);
}

.family-card__icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 1rem;

    border-radius: 12px;

    background: #fff4cf;

    font-size: 1.5rem;
}

.family-card h3 {
    margin-bottom: .65rem;
}

.family-card p {
    margin-bottom: 0;

    color: #657281;
}


/* =========================================================
   REGELS
   ========================================================= */

.rules-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1rem;
}


/* =========================================================
   BASISAFSPRAKEN / INFO LIST
   ========================================================= */

.info-list {
    display: grid;

    gap: 1rem;
}

.info-list__item {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 1rem;

    padding: 1.35rem;

    border: 1px solid #e6eaf0;
    border-radius: var(--radius-md);

    background: var(--color-white);

    box-shadow:
        0 8px 22px rgba(6, 30, 56, .05);
}

.info-list__icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    color: var(--color-blue-deep);

    background:
        linear-gradient(
            135deg,
            var(--color-gold-light),
            var(--color-gold)
        );

    font-size: 1.35rem;
}

.info-list__item h3 {
    margin-bottom: .4rem;
}

.info-list__item p {
    margin-bottom: 0;

    color: #657281;
}


/* =========================================================
   HP / POA
   ========================================================= */

.game-info-grid {
    display: grid;

    grid-template-columns:
        1.25fr
        .75fr;

    gap: 1.25rem;
}

.game-info-card {
    padding: 1.6rem;

    border: 1px solid #e5eaf0;
    border-radius: var(--radius-md);

    background: var(--color-white);

    box-shadow:
        0 10px 28px rgba(6, 30, 56, .06);
}

.game-info-card h3 {
    margin-bottom: 1rem;
}

.game-info-card ul {
    margin: 0;
    padding-left: 1.2rem;
}

.game-info-card li {
    margin-bottom: .65rem;

    color: #647180;
}

.game-info-card li:last-child {
    margin-bottom: 0;
}

.game-info-card--highlight {
    color: var(--color-white);

    border: 0;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(223, 77, 40, .24),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--color-blue-deep),
            var(--color-blue-dark)
        );
}

.game-info-card--highlight h3 {
    color: var(--color-gold-light);
}

.game-info-card--highlight p {
    margin-bottom: 0;

    color: #d9e4ef;
}


/* =========================================================
   TIPS & TRICKS
   ========================================================= */

.tips-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1rem;
}

.tip-card {
    padding: 1.4rem;

    border: 1px solid #e6ebf0;
    border-radius: var(--radius-md);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafbfd
        );

    box-shadow:
        0 10px 28px rgba(6, 30, 56, .06);
}

.tip-card:nth-child(2) {
    border-top: 4px solid var(--color-red-orange);
}

.tip-card:nth-child(3) {
    border-top: 4px solid var(--color-blue);
}

.tip-card:nth-child(4) {
    border-top: 4px solid var(--color-gold);
}

.tip-card__icon {
    display: block;

    margin-bottom: .8rem;

    font-size: 1.7rem;
}

.tip-card h3 {
    margin-bottom: .6rem;
}

.tip-card p {
    margin-bottom: 0;

    color: #667382;

    font-size: .92rem;
}


/* =========================================================
   NIEUWE SPELERS
   ========================================================= */

.steps-list {
    display: grid;

    gap: 1rem;
}

.step-card {
    display: grid;

    grid-template-columns: auto 1fr;

    align-items: flex-start;

    gap: 1rem;

    padding: 1.35rem;

    border: 1px solid #e5eaf0;
    border-radius: var(--radius-md);

    background: var(--color-white);

    box-shadow:
        0 8px 22px rgba(6, 30, 56, .05);
}

.step-card__number {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--white);

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--color-orange),
            var(--color-red-orange)
        );

    box-shadow: var(--shadow-red);

    font-weight: 900;
}

.step-card h3 {
    margin-bottom: .4rem;
}

.step-card p {
    margin-bottom: 0;

    color: #657281;
}


/* =========================================================
   COMMUNICATIE
   ========================================================= */

.communication-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1rem;
}


/* =========================================================
   RECORDS INSTUREN
   ========================================================= */

.submission-box {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 2rem;

    padding: 2rem;

    color: var(--color-white);

    border-radius: var(--radius-lg);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(223, 77, 40, .22),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--color-blue-deep),
            var(--color-blue-dark)
        );

    box-shadow:
        0 20px 45px rgba(6, 30, 56, .16);
}

.submission-box__content h3 {
    margin-bottom: 1rem;

    color: var(--gold-light);
}

.submission-box__content ol {
    margin: 0;
    padding-left: 1.3rem;

    color: #dce6ef;
}

.submission-box__content li {
    margin-bottom: .6rem;
}

.submission-box__content li:last-child {
    margin-bottom: 0;
}

.submission-box__action {
    flex-shrink: 0;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-list {
    display: grid;

    gap: .8rem;
}

.faq-item {
    overflow: hidden;

    border: 1px solid #e4e9ef;
    border-radius: 12px;

    background: var(--color-white);

    box-shadow:
        0 7px 20px rgba(6, 30, 56, .05);
}

.faq-item summary {
    position: relative;

    padding: 1rem 3rem 1rem 1.2rem;

    color: var(--color-blue-deep);

    font-weight: 850;

    cursor: pointer;

    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 1.2rem;

    transform: translateY(-50%);

    color: var(--color-red-orange);

    font-size: 1.4rem;
    font-weight: 900;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item[open] summary {
    color: var(--color-red-orange);

    background: #fffaf7;
}

.faq-item p {
    margin: 0;

    padding: 0 1.2rem 1.2rem;

    color: #657281;
}


/* =========================================================
   TERUG NAAR BOVEN
   ========================================================= */

.back-to-top {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 900;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    color: var(--color-blue-deep);

    border: 1px solid rgba(255, 255, 255, .40);
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--color-gold-light),
            var(--color-gold)
        );

    box-shadow:
        0 8px 24px rgba(6, 30, 56, .24);

    text-decoration: none;

    font-size: 1.5rem;
    font-weight: 900;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.back-to-top:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(6, 30, 56, .30);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .family-toc__links {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

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

    .game-info-grid {
        grid-template-columns: 1fr;
    }

    .communication-grid {
        grid-template-columns: 1fr;
    }

    .submission-box {
        grid-template-columns: 1fr;
    }

    .submission-box__action {
        justify-self: start;
    }
}


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

@media (max-width: 700px) {

    .family-hero {
        padding: 4rem 0 3.5rem;
    }

    .family-toc__box {
        padding: 1.5rem;
    }

    .family-toc__links {
        grid-template-columns: 1fr;
    }

    .family-section__heading {
        grid-template-columns: 1fr;

        gap: .9rem;
    }

    .family-section__number {
        width: 50px;
        height: 50px;
    }

    .rules-grid {
        grid-template-columns: 1fr;
    }

    .tips-grid {
        grid-template-columns: 1fr;
    }

    .info-list__item {
        grid-template-columns: 1fr;
    }

    .step-card {
        grid-template-columns: auto 1fr;
    }

    .submission-box {
        padding: 1.5rem;
    }

    .back-to-top {
        right: 16px;
        bottom: 16px;

        width: 48px;
        height: 48px;
    }
}


/* =========================================================
   KLEINE MOBIELE SCHERMEN
   ========================================================= */

@media (max-width: 450px) {

    .family-toc__box {
        padding: 1.25rem;
    }

    .family-toc__links a {
        min-height: 54px;

        padding: .65rem .8rem;

        font-size: .84rem;
    }

    .family-toc__links span {
        min-width: 30px;
        height: 30px;
    }

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

    .step-card__number {
        width: 42px;
        height: 42px;
    }

    .back-to-top {
        width: 44px;
        height: 44px;

        font-size: 1.25rem;
    }
}