/* =========================================================
   FOCUS ADVENTURES V8.7.2
   2026 EDITORIAL UPGRADE
   ========================================================= */

:root{
    --fa872-bg:#070b10;
    --fa872-surface:#0c1218;
    --fa872-soft:#111922;
    --fa872-paper:#eee7da;
    --fa872-paper2:#f6f0e7;
    --fa872-text:#f4f0e9;
    --fa872-copy:#bdc5cb;
    --fa872-muted:#788590;
    --fa872-line:rgba(255,255,255,.095);
    --fa872-orange:#ff681f;
    --fa872-orange2:#ff9d69;
    --fa872-serif:Georgia,"Times New Roman",serif;
}

/* =========================================================
   PAGE BASE
   ========================================================= */

body.home-page,
body.fa26-reizen{
    background:
        radial-gradient(
            circle at 78% 2%,
            rgba(255,104,31,.08),
            transparent 32rem
        ),
        radial-gradient(
            circle at 10% 45%,
            rgba(72,103,126,.06),
            transparent 35rem
        ),
        var(--fa872-bg)!important;
}

/* =========================================================
   HEADER 2026
   ========================================================= */

body.home-page .site-header,
body.fa26-reizen .fa26-nav{
    min-height:68px!important;

    border-bottom:
        1px solid
        rgba(255,255,255,.08)!important;

    background:
        rgba(6,10,14,.72)!important;

    backdrop-filter:
        blur(22px)
        saturate(1.2)!important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(1.2)!important;
}

/* =========================================================
   HOME - ONZE REIZEN
   ========================================================= */

body.home-page .trip-overview{
    position:relative!important;

    width:min(1460px,calc(100% - 48px))!important;

    margin:
        clamp(110px,12vw,190px)
        auto!important;

    padding:
        0!important;

    border:0!important;
    border-radius:0!important;

    background:
        transparent!important;

    overflow:visible!important;
}

/*
 * Achtergrondvlak als subtiel licht in plaats van
 * massieve crème container.
 */
body.home-page .trip-overview::before{
    content:"";

    position:absolute;

    inset:
        -60px
        -40px
        auto;

    height:520px;

    z-index:-1;

    background:
        radial-gradient(
            ellipse at 30% 20%,
            rgba(255,104,31,.055),
            transparent 52%
        );
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

body.home-page .trip-overview .section-heading{
    display:grid!important;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(280px,.55fr)!important;

    gap:
        clamp(40px,7vw,120px)!important;

    align-items:end!important;

    margin:
        0
        0
        clamp(60px,8vw,110px)!important;

    padding:
        0
        0
        28px!important;

    border-bottom:
        1px solid
        var(--fa872-line)!important;
}

body.home-page .trip-overview .kicker{
    color:
        var(--fa872-orange2)!important;

    font-size:
        10px!important;

    font-weight:
        850!important;

    letter-spacing:
        .18em!important;
}

body.home-page .trip-overview .section-heading h2{
    margin:
        10px
        0
        0!important;

    color:
        var(--fa872-text)!important;

    font-family:
        var(--fa872-serif)!important;

    font-size:
        clamp(
            68px,
            9vw,
            148px
        )!important;

    font-weight:
        400!important;

    line-height:
        .82!important;

    letter-spacing:
        -.07em!important;
}

body.home-page .trip-overview .section-heading p{
    max-width:
        430px!important;

    margin:
        0
        0
        6px!important;

    color:
        var(--fa872-copy)!important;

    font-family:
        var(--fa872-serif)!important;

    font-size:
        clamp(
            17px,
            1.5vw,
            22px
        )!important;

    line-height:
        1.55!important;
}

/* =========================================================
   TRIP GRID
   ========================================================= */

body.home-page .trip-grid{
    display:grid!important;

    grid-template-columns:
        repeat(
            12,
            minmax(0,1fr)
        )!important;

    gap:
        clamp(
            32px,
            4vw,
            66px
        )!important;

    align-items:start!important;
}

/* basis */
body.home-page .trip-card{
    position:relative!important;

    grid-column:
        span 6!important;

    margin:
        0!important;

    padding:
        0!important;

    border:
        0!important;

    border-radius:
        0!important;

    background:
        transparent!important;

    box-shadow:
        none!important;
}

/* editorial ritme */
body.home-page .trip-card:nth-child(4n+1){
    grid-column:
        span 7!important;
}

body.home-page .trip-card:nth-child(4n+2){
    grid-column:
        span 5!important;

    margin-top:
        110px!important;
}

body.home-page .trip-card:nth-child(4n+3){
    grid-column:
        2 / span 5!important;

    margin-top:
        30px!important;
}

body.home-page .trip-card:nth-child(4n){
    grid-column:
        7 / span 6!important;

    margin-top:
        140px!important;
}

/* =========================================================
   COVER
   ========================================================= */

body.home-page .trip-card-cover{
    position:relative!important;

    display:block!important;

    overflow:hidden!important;

    border:
        1px solid
        rgba(255,255,255,.08)!important;

    border-radius:
        3px!important;

    background:
        #090e13!important;

    box-shadow:
        0
        30px
        80px
        rgba(0,0,0,.24)!important;

    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        box-shadow .65s ease!important;
}

/*
 * Zwarte gutters van bestaande poster-layout visueel
 * onderdeel maken van de editorial presentatie.
 */
body.home-page .trip-card-cover::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    border:
        1px solid
        rgba(255,255,255,.06);
}

/* hover */
@media(hover:hover){

    body.home-page .trip-card:hover .trip-card-cover{
        transform:
            translateY(-8px)!important;

        box-shadow:
            0
            42px
            100px
            rgba(0,0,0,.34)!important;
    }
}

/* =========================================================
   CARD BODY
   ========================================================= */

body.home-page .trip-card-body{
    position:relative!important;

    padding:
        20px
        48px
        0
        0!important;

    background:
        transparent!important;
}

body.home-page .trip-card-date{
    margin:
        0
        0
        8px!important;

    color:
        var(--fa872-orange2)!important;

    font-size:
        9px!important;

    font-weight:
        850!important;

    letter-spacing:
        .15em!important;

    text-transform:
        uppercase!important;
}

body.home-page .trip-card-body h3{
    margin:
        0
        0
        9px!important;

    color:
        var(--fa872-text)!important;

    font-family:
        var(--fa872-serif)!important;

    font-size:
        clamp(
            30px,
            3.2vw,
            54px
        )!important;

    font-weight:
        400!important;

    line-height:
        .98!important;

    letter-spacing:
        -.04em!important;
}

body.home-page .trip-card-subtitle{
    max-width:
        520px!important;

    color:
        var(--fa872-muted)!important;

    font-size:
        13px!important;

    line-height:
        1.65!important;
}

/* =========================================================
   OPEN ARROW 2026
   ========================================================= */

body.home-page .trip-card-body::after{
    content:"↗";

    position:absolute;

    right:0;
    top:24px;

    display:grid;
    place-items:center;

    width:36px;
    height:36px;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:
        50%;

    color:
        var(--fa872-text);

    font-size:
        15px;

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

@media(hover:hover){

    body.home-page
    .trip-card:hover
    .trip-card-body::after{
        transform:
            rotate(45deg);

        background:
            var(--fa872-orange);

        border-color:
            var(--fa872-orange);
    }
}

/* =========================================================
   REIZEN.PHP
   ========================================================= */

body.fa26-reizen .fa26-main{
    padding-top:
        clamp(
            80px,
            10vw,
            150px
        )!important;
}

body.fa26-reizen .fa26-intro{
    display:grid!important;

    grid-template-columns:
        minmax(0,1fr)
        minmax(260px,.5fr)!important;

    gap:
        60px!important;

    align-items:end!important;

    max-width:none!important;

    margin-bottom:
        clamp(
            60px,
            8vw,
            110px
        )!important;
}

body.fa26-reizen .fa26-intro h2{
    font-family:
        var(--fa872-serif)!important;

    font-size:
        clamp(
            62px,
            8vw,
            120px
        )!important;

    font-weight:
        400!important;

    line-height:
        .86!important;

    letter-spacing:
        -.06em!important;
}

/* kaarten */
body.fa26-reizen .fa26-card{
    background:
        transparent!important;

    border:
        0!important;

    border-radius:
        0!important;

    box-shadow:
        none!important;
}

body.fa26-reizen .fa26-card-content{
    padding:
        18px
        0
        0!important;
}

body.fa26-reizen .fa26-card h2,
body.fa26-reizen .fa26-card h3{
    font-family:
        var(--fa872-serif)!important;

    font-weight:
        400!important;

    letter-spacing:
        -.04em!important;
}

/* =========================================================
   MICRO ANIMATION
   ========================================================= */

body.fa872-ready .fa872-card{
    opacity:0;

    transform:
        translateY(28px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

body.fa872-ready
.fa872-card.fa872-visible{
    opacity:1;

    transform:none;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

    body.home-page
    .trip-overview
    .section-heading{
        grid-template-columns:
            1fr!important;
    }

    body.home-page .trip-grid{
        grid-template-columns:
            1fr!important;
    }

    body.home-page .trip-card,
    body.home-page .trip-card:nth-child(n){
        grid-column:
            1!important;

        margin-top:
            0!important;

        margin-bottom:
            58px!important;
    }

    body.fa26-reizen .fa26-intro{
        grid-template-columns:
            1fr!important;
    }
}

@media(max-width:640px){

    body.home-page .trip-overview{
        width:
            calc(100% - 28px)!important;

        margin-top:
            80px!important;
    }

    body.home-page
    .trip-overview
    .section-heading h2{
        font-size:
            clamp(
                56px,
                19vw,
                86px
            )!important;
    }

    body.home-page .trip-card-body{
        padding-right:
            40px!important;
    }

    body.home-page
    .trip-card-body h3{
        font-size:
            34px!important;
    }
}

@media(prefers-reduced-motion:reduce){

    body.fa872-ready .fa872-card{
        opacity:1!important;

        transform:none!important;

        transition:none!important;
    }
}