/* FOCUS_ADVENTURES_V8_6_7_MAGAZINE_COMPOSITION */

body.fa867{
    --fa867-bg:#06111a;
    --fa867-bg2:#091722;
    --fa867-text:#f3eee7;
    --fa867-body:#dbe4ea;
    --fa867-muted:#8194a3;
    --fa867-line:rgba(159,181,198,.13);
    --fa867-orange:#ff6418;
    --fa867-orange2:#ff8b54;
}

/* =========================================================
   TOTALE PAGINA
   ========================================================= */

body.fa867 .fa26-layout{
    grid-template-columns:
        minmax(210px,250px)
        minmax(0,1fr)!important;

    gap:24px!important;
}

body.fa867 .fa26-sidebar{
    width:auto!important;
    max-width:250px!important;

    border-right:
        1px solid
        var(--fa867-line)!important;
}

/* sidebar minder druk */

body.fa867 .fa26-sidebar .fa26-place{
    font-size:8.5px!important;
    opacity:.72!important;
}

body.fa867 .fa26-day-link{
    padding:9px!important;
    border-radius:13px!important;
}

body.fa867 .fa26-day-link strong{
    font-size:11px!important;
}

body.fa867 .fa26-day-link small{
    font-size:9px!important;
}

/* =========================================================
   DAG ALS MAGAZINEHOOFDSTUK
   ========================================================= */

body.fa867 .fa26-day{
    position:relative!important;

    margin:
        0
        0
        60px!important;

    padding:
        34px
        34px
        42px!important;

    border:
        1px solid
        var(--fa867-line)!important;

    border-radius:
        22px!important;

    background:
        linear-gradient(
            145deg,
            #08151f,
            #061019
        )!important;

    overflow:hidden!important;
}

/* =========================================================
   DAGKOP
   ========================================================= */

body.fa867 .fa26-day-head{
    display:grid!important;

    grid-template-columns:
        54px
        minmax(0,1fr)
        auto!important;

    grid-template-areas:
        "number title count"!important;

    gap:
        17px!important;

    align-items:start!important;

    min-height:0!important;

    margin:
        0
        0
        24px!important;

    padding:
        0
        0
        20px!important;

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

body.fa867 .fa26-day-number{
    grid-area:number!important;

    width:48px!important;
    height:48px!important;

    border-radius:14px!important;

    box-shadow:none!important;
}

body.fa867 .fa26-day-number span{
    font-size:7px!important;
}

body.fa867 .fa26-day-number strong{
    font-size:20px!important;
}

body.fa867 .fa26-day-title{
    grid-area:title!important;

    position:static!important;
    inset:auto!important;
    transform:none!important;

    width:100%!important;
    max-width:980px!important;

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

body.fa867 .fa26-day-title p{
    margin:
        0
        0
        8px!important;

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

    font-size:
        9px!important;

    font-weight:
        850!important;

    letter-spacing:
        .14em!important;

    text-transform:
        uppercase!important;
}

body.fa867 .fa26-day-title h2{
    max-width:920px!important;

    margin:0!important;

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

    font-family:
        Georgia,
        "Times New Roman",
        serif!important;

    font-size:
        clamp(
            40px,
            4.1vw,
            68px
        )!important;

    font-weight:
        500!important;

    line-height:
        .98!important;

    letter-spacing:
        -.045em!important;

    text-wrap:
        balance!important;
}

body.fa867 .fa26-photo-count{
    grid-area:count!important;

    position:static!important;
    inset:auto!important;

    width:auto!important;

    margin:
        4px
        0
        0!important;

    padding:
        7px
        10px!important;

    border:
        1px solid
        rgba(255,100,24,.22)!important;

    border-radius:
        999px!important;

    color:
        #d6e0e6!important;

    background:
        transparent!important;

    font-size:
        10px!important;
}

/* locaties niet meer als drukke chips in kop */
body.fa867
.fa26-day-title
.fa26-places{
    display:none!important;
}

/* =========================================================
   DAGINTRO
   ========================================================= */

body.fa867 .fa26-day-story{
    position:static!important;
    inset:auto!important;
    transform:none!important;

    width:
        min(
            100%,
            840px
        )!important;

    max-width:
        840px!important;

    margin:
        0
        0
        30px
        68px!important;

    padding:
        0!important;

    border:
        0!important;

    background:
        transparent!important;
}

body.fa867 .fa26-day-story-label{
    display:block!important;

    margin:
        0
        0
        9px!important;

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

    font-size:
        9px!important;

    font-weight:
        850!important;

    letter-spacing:
        .15em!important;

    text-transform:
        uppercase!important;
}

body.fa867 .fa26-day-story p{
    max-width:
        760px!important;

    margin:0!important;

    color:
        var(--fa867-body)!important;

    font-family:
        Georgia,
        "Times New Roman",
        serif!important;

    font-size:
        clamp(
            17px,
            1.45vw,
            21px
        )!important;

    line-height:
        1.65!important;

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

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

body.fa867 .fa867-hero-wrap{
    width:
        calc(100% + 68px);

    margin:
        12px
        -34px
        30px;

    overflow:hidden;

    background:#03090e;
}

body.fa867 .fa867-hero-wrap .fa26-photo{
    width:100%!important;
    max-width:none!important;

    margin:0!important;

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

    box-shadow:none!important;
}

body.fa867 .fa867-hero-wrap img{
    display:block!important;

    width:100%!important;
    height:min(62vh,680px)!important;

    min-height:390px!important;

    object-fit:cover!important;

    aspect-ratio:auto!important;
}

body.fa867
.fa867-hero-wrap
.fa26-photo-overlay{
    padding:
        70px
        30px
        20px!important;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.72)
        )!important;
}

/* =========================================================
   MAGAZINE GRID
   ========================================================= */

body.fa867 .fa26-gallery{
    display:grid!important;

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

    gap:
        22px!important;

    align-items:start!important;

    width:100%!important;

    padding:
        0!important;

    margin:
        0!important;
}

body.fa867 .fa26-gallery > .fa26-photo{
    position:relative!important;

    overflow:hidden!important;

    margin:0!important;

    border:0!important;

    border-radius:
        13px!important;

    background:
        #061018!important;

    box-shadow:none!important;
}

/* standaard landschap */
body.fa867
.fa26-gallery
.fa856-landscape{
    grid-column:
        span 7!important;

    width:100%!important;

    max-width:none!important;
}

/* afwisselend kleinere landschapfoto */
body.fa867
.fa26-gallery
.fa856-landscape:nth-of-type(3n){
    grid-column:
        span 5!important;
}

/* portrait */
body.fa867
.fa26-gallery
.fa856-portrait{
    grid-column:
        span 5!important;

    width:100%!important;

    max-width:
        520px!important;

    justify-self:center!important;
}

/* square */
body.fa867
.fa26-gallery
.fa856-square{
    grid-column:
        span 5!important;

    max-width:
        620px!important;

    justify-self:center!important;
}

/* alle foto's natuurlijk */
body.fa867
.fa26-gallery
img{
    display:block!important;

    width:100%!important;
    height:auto!important;

    max-height:none!important;

    object-fit:cover!important;

    aspect-ratio:auto!important;
}

/* portret nooit crop */
body.fa867
.fa26-gallery
.fa856-portrait img{
    object-fit:contain!important;
}

/* =========================================================
   CAPTIONS
   ========================================================= */

body.fa867 .fa26-photo-overlay{
    padding:
        42px
        15px
        11px!important;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.62)
        )!important;
}

body.fa867
.fa26-photo-overlay strong{
    font-family:
        Georgia,
        "Times New Roman",
        serif!important;

    font-size:
        13px!important;

    font-weight:
        600!important;
}

body.fa867
.fa26-photo-overlay span{
    margin-top:
        2px!important;

    color:
        rgba(255,255,255,.72)!important;

    font-size:
        9px!important;
}

/* individuele foto-artikelen blijven uit */
body.fa867 .fa26-photo-story,
body.fa867 .fa26-photo-info,
body.fa867 .fa855-more{
    display:none!important;
}

/* =========================================================
   EDITORIAL VERHAALSTROKEN
   ========================================================= */

body.fa867 .fa866-story-flow{
    grid-column:
        2 / 12!important;

    display:block!important;

    width:100%!important;
    max-width:
        920px!important;

    min-height:0!important;

    justify-self:center!important;

    margin:
        12px
        0
        18px!important;

    padding:
        20px
        0
        20px
        28px!important;

    border:
        0!important;

    border-left:
        2px solid
        var(--fa867-orange)!important;

    background:
        transparent!important;
}

body.fa867
.fa866-story-flow small{
    display:block!important;

    margin:
        0
        0
        10px!important;

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

    font-size:
        9px!important;

    font-weight:
        850!important;

    letter-spacing:
        .14em!important;

    text-transform:
        uppercase!important;
}

body.fa867
.fa866-story-flow p{
    margin:0!important;

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

    font-family:
        Georgia,
        "Times New Roman",
        serif!important;

    font-size:
        clamp(
            19px,
            1.7vw,
            25px
        )!important;

    line-height:
        1.5!important;

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

/* oude brede/zij variant neutraliseren */
body.fa867
.fa866-story-flow.is-wide{
    grid-column:
        2 / 12!important;

    max-width:
        920px!important;
}

/* =========================================================
   WEETJE
   ========================================================= */

body.fa867 .fa866-day-fact{
    grid-column:
        1 / 8!important;

    margin:
        16px
        0
        10px!important;

    padding:
        20px
        22px!important;

    border:
        1px solid
        rgba(255,100,24,.35)!important;

    border-radius:
        13px!important;

    background:
        rgba(255,100,24,.025)!important;
}

body.fa867
.fa866-day-fact small{
    margin-bottom:
        8px!important;

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

    font-size:
        9px!important;

    font-weight:
        850!important;

    letter-spacing:
        .14em!important;
}

body.fa867
.fa866-day-fact p{
    max-width:
        700px!important;

    margin:0!important;

    color:
        #dbe4ea!important;

    font-size:
        13px!important;

    line-height:
        1.65!important;
}

/* =========================================================
   ROUTE
   ========================================================= */

body.fa867 .fa866-day-route{
    display:flex!important;

    align-items:center!important;
    justify-content:flex-end!important;

    flex-wrap:wrap!important;

    gap:
        8px!important;

    margin:
        30px
        0
        0!important;

    padding:
        18px
        0
        0!important;

    border-top:
        1px solid
        var(--fa867-line)!important;

    color:
        #c9d4dc!important;

    font-size:
        11px!important;
}

body.fa867
.fa866-route-arrow{
    color:
        var(--fa867-orange)!important;

    font-size:
        14px!important;
}

/* =========================================================
   KOSTEN
   ========================================================= */

body.fa867 .fa851-cost-story{
    margin-top:
        50px!important;

    border-radius:
        14px!important;
}

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

@media(max-width:900px){

    body.fa867 .fa26-layout{
        display:block!important;
    }

    body.fa867 .fa26-sidebar{
        max-width:none!important;
    }

    body.fa867 .fa26-day{
        padding:
            20px
            15px
            28px!important;

        border-radius:
            16px!important;
    }

    body.fa867 .fa26-day-head{
        grid-template-columns:
            48px
            minmax(0,1fr)!important;

        grid-template-areas:
            "number title"
            "count count"!important;

        gap:
            10px
            12px!important;
    }

    body.fa867 .fa26-day-title h2{
        font-size:
            clamp(
                34px,
                10vw,
                50px
            )!important;
    }

    body.fa867 .fa26-photo-count{
        justify-self:start!important;
    }

    body.fa867 .fa26-day-story{
        width:100%!important;

        margin:
            0
            0
            24px!important;
    }

    body.fa867 .fa867-hero-wrap{
        width:
            calc(100% + 30px);

        margin:
            10px
            -15px
            24px;
    }

    body.fa867
    .fa867-hero-wrap img{
        height:auto!important;

        min-height:0!important;

        max-height:none!important;
    }

    body.fa867 .fa26-gallery{
        display:block!important;
    }

    body.fa867 .fa26-gallery > *{
        width:100%!important;
        max-width:100%!important;

        margin:
            0
            0
            20px!important;
    }

    body.fa867 .fa866-story-flow,
    body.fa867 .fa866-story-flow.is-wide{
        width:100%!important;

        max-width:none!important;

        margin:
            8px
            0
            24px!important;

        padding:
            16px
            0
            16px
            18px!important;
    }

    body.fa867
    .fa866-story-flow p{
        font-size:
            19px!important;
    }

    body.fa867 .fa866-day-fact{
        width:100%!important;

        margin:
            18px
            0!important;
    }

    body.fa867 .fa866-day-route{
        justify-content:flex-start!important;
    }
}