:root {
    --paper: #f6f7f6;
    --paper-soft: #fbfbfb;

    --ink: #2f2f2f;
    --muted: #6e6e6e;

    --accent-soft: #d2c8b6;
    --line: rgba(0, 0, 0, .06);

    --shadow1:
        0 10px 26px
        rgba(0, 0, 0, .12);

    --shadow2:
        0 36px 72px
        rgba(0, 0, 0, .16);
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero{
  position: relative;
  padding: 10px 0 70px;
  min-height: 100vh;

background: linear-gradient(
  135deg,
  rgb(255, 248, 240) 0%,
  rgb(248, 235, 220) 55%,
  rgb(255, 243, 232) 100%
);
}


.hero::before {
    content: none;
    display: none;
}


.hero__content {
    position: relative;

    z-index: 1;

    width:
        min(900px, 95%);

    margin:
        30px auto;

    padding:
        58px 66px;

    background:
        var(--paper);

    color:
        var(--ink);

    border-radius:
        12px;

    border:
        1px solid
        var(--line);

    box-shadow:
        var(--shadow1),
        var(--shadow2);
}


.hero__content h1 {
    margin:
        0 0 14px;

    font-size:
        2.15rem;

    font-weight:
        600;

    letter-spacing:
        .2px;
}


.hero__content > hr {
    border:
        0;

    border-top:
        1px solid
        rgba(0, 0, 0, .10);

    margin:
        0;
}


/*
|--------------------------------------------------------------------------
| VIERINGEN SECTION
|--------------------------------------------------------------------------
*/

.vieringen-section {
    width:
        100%;

    max-width:
        none;

    margin:
        38px 0 0;

    padding:
        0;
}


/*
|--------------------------------------------------------------------------
| VERTICALE LIJST
|--------------------------------------------------------------------------
*/

.vieringen-lijst {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


/*
|--------------------------------------------------------------------------
| VIERING RIJ
|--------------------------------------------------------------------------
*/

.viering-rij {
    background:
        #fff;

    border:
        1px solid
        rgba(0, 0, 0, .07);

    border-radius:
        10px;

    overflow:
        hidden;

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


.viering-rij:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, .07);

    border-color:
        rgba(0, 0, 0, .12);
}


.viering-rij[open] {
    box-shadow:
        0 10px 26px
        rgba(0, 0, 0, .08);
}


/*
|--------------------------------------------------------------------------
| EERSTVOLGENDE
|--------------------------------------------------------------------------
*/

.viering-rij--eerstvolgende {
    border-left:
        4px solid
        var(--accent-soft);
}


/*
|--------------------------------------------------------------------------
| SUMMARY
|--------------------------------------------------------------------------
*/

.viering-samenvatting {
    display:
        grid;

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

    align-items:
        center;

    gap:
        20px;

    min-height:
        92px;

    padding:
        15px 20px;

    cursor:
        pointer;

    list-style:
        none;

    user-select:
        none;
}


.viering-samenvatting::-webkit-details-marker {
    display:
        none;
}


.viering-samenvatting::marker {
    display:
        none;

    content:
        "";
}


/*
|--------------------------------------------------------------------------
| DATUMBLOK
|--------------------------------------------------------------------------
*/

.viering-datumblok {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        60px;

    padding:
        6px;

    border-right:
        1px solid
        rgba(0, 0, 0, .08);
}


.viering-dag {
    font-size:
        1.8rem;

    font-weight:
        600;

    line-height:
        1;

    color:
        var(--ink);
}


.viering-maand {
    margin-top:
        6px;

    font-size:
        .78rem;

    font-weight:
        600;

    color:
        var(--muted);

    text-transform:
        uppercase;

    letter-spacing:
        .7px;
}


/*
|--------------------------------------------------------------------------
| HOOFDINFORMATIE
|--------------------------------------------------------------------------
*/

.viering-hoofdinfo {
    min-width:
        0;
}


.viering-label {
    display:
        inline-block;

    margin-bottom:
        7px;

    padding:
        4px 8px;

    background:
        rgba(210, 200, 182, .35);

    border-radius:
        999px;

    color:
        #625a4d;

    font-size:
        .72rem;

    font-weight:
        600;

    letter-spacing:
        .3px;

    text-transform:
        uppercase;
}


.viering-hoofdinfo h2 {
    margin:
        0;

    color:
        var(--ink);

    font-size:
        1.15rem;

    font-weight:
        600;

    line-height:
        1.35;
}


.viering-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        .93rem;
}


.viering-meta-scheiding {
    opacity:
        .45;
}


/*
|--------------------------------------------------------------------------
| UITKLAPPEN
|--------------------------------------------------------------------------
*/

.viering-uitklappen {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--muted);

    font-size:
        .86rem;
}


.viering-pijl {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    border:
        1px solid
        rgba(0, 0, 0, .10);

    border-radius:
        50%;

    font-size:
        1.25rem;

    font-weight:
        300;

    line-height:
        1;

    transition:
        transform .25s ease,
        background .25s ease;
}


.viering-rij[open]
.viering-pijl {
    transform:
        rotate(45deg);

    background:
        var(--paper);
}


/*
|--------------------------------------------------------------------------
| DETAILS
|--------------------------------------------------------------------------
*/

.viering-details {
    padding:
        0 20px 24px 114px;

    border-top:
        1px solid
        rgba(0, 0, 0, .06);
}


.viering-details-grid {
    display:
        grid;

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

    gap:
        18px 30px;

    padding-top:
        22px;
}


.viering-detail {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.viering-detail-label {
    color:
        var(--muted);

    font-size:
        .76rem;

    font-weight:
        600;

    letter-spacing:
        .5px;

    text-transform:
        uppercase;
}


.viering-detail strong {
    color:
        var(--ink);

    font-size:
        .96rem;

    font-weight:
        500;

    line-height:
        1.5;
}


/*
|--------------------------------------------------------------------------
| OPMERKINGEN
|--------------------------------------------------------------------------
*/

.viering-opmerkingen {
    margin-top:
        22px;

    padding:
        18px 20px;

    background:
        var(--paper-soft);

    border:
        1px solid
        rgba(0, 0, 0, .05);

    border-radius:
        8px;
}


.viering-opmerkingen p {
    margin:
        8px 0 0;

    color:
        var(--muted);

    font-size:
        .95rem;

    line-height:
        1.7;
}


/*
|--------------------------------------------------------------------------
| MELDINGEN
|--------------------------------------------------------------------------
*/

.vieringen-melding {
    background:
        #fff;

    border:
        1px solid
        rgba(0, 0, 0, .07);

    border-radius:
        10px;

    padding:
        25px;

    color:
        var(--muted);
}


.vieringen-error {
    border-color:
        #f8b4b4;

    background:
        #fde8e8;

    color:
        #9b1c1c;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 760px
) {

    .hero__content {
        width:
            min(92%, 900px);

        padding:
            42px 32px;
    }


    .viering-samenvatting {
        grid-template-columns:
            62px
            minmax(0, 1fr)
            auto;

        gap:
            14px;

        padding:
            14px;
    }


    .viering-details {
        padding:
            0 18px 22px 90px;
    }


    .viering-uitklappen-tekst {
        display:
            none;
    }

}


/*
|--------------------------------------------------------------------------
| MOBIEL
|--------------------------------------------------------------------------
*/

@media (
    max-width: 560px
) {

    .hero {
        padding:
            1px 0 35px;
    }


    .hero__content {
        width:
            calc(100% - 24px);

        margin:
            18px auto;

        padding:
            30px 18px;

        box-sizing:
            border-box;
    }


    .hero__content h1 {
        font-size:
            1.8rem;
    }


    .vieringen-section {
        margin-top:
            26px;
    }


    .vieringen-lijst {
        gap:
            10px;
    }


    .viering-samenvatting {
        grid-template-columns:
            52px
            minmax(0, 1fr)
            34px;

        gap:
            11px;

        min-height:
            82px;

        padding:
            12px 10px;
    }


    .viering-datumblok {
        min-height:
            52px;

        padding:
            4px;
    }


    .viering-dag {
        font-size:
            1.5rem;
    }


    .viering-maand {
        margin-top:
            5px;

        font-size:
            .65rem;

        letter-spacing:
            .3px;
    }


    .viering-label {
        margin-bottom:
            5px;

        font-size:
            .61rem;
    }


    .viering-hoofdinfo h2 {
        font-size:
            1rem;
    }


    .viering-meta {
        gap:
            5px;

        margin-top:
            5px;

        font-size:
            .82rem;
    }


    .viering-uitklappen {
        gap:
            0;
    }


    .viering-pijl {
        width:
            30px;

        height:
            30px;
    }


    .viering-details {
        padding:
            0 15px 18px;
    }


    .viering-details-grid {
        grid-template-columns:
            1fr;

        gap:
            15px;

        padding-top:
            18px;
    }


    .viering-opmerkingen {
        margin-top:
            18px;

        padding:
            15px;
    }

}