/* FOCUS_ADVENTURES_V8_6_6_MAGAZINE */

body.fa866{
    --fa866-bg:#071019;
    --fa866-card:#0b1722;
    --fa866-line:rgba(162,184,201,.15);
    --fa866-text:#eef3f6;
    --fa866-muted:#8ea2b3;
    --fa866-orange:#ff6418;
    --fa866-orange2:#ff8b54;
}

/* =========================================================
   DAG ALS EDITORIAL SPREAD
   ========================================================= */

body.fa866 .fa26-day{
    padding:34px 34px 48px!important;
    margin-bottom:42px!important;

    border:1px solid var(--fa866-line)!important;
    border-radius:24px!important;

    background:
        linear-gradient(
            145deg,
            #0b1722,
            #07121b
        )!important;
}

/* compacte kop */

body.fa866 .fa26-day-head{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr) auto!important;
    grid-template-areas:"number title count"!important;

    gap:20px!important;
    align-items:start!important;

    min-height:0!important;

    margin:0 0 24px!important;
    padding:0 0 22px!important;

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

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

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

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

    width:100%!important;
    max-width:1050px!important;
}

body.fa866 .fa26-day-title h2{
    max-width:1000px!important;

    margin:0!important;

    font-size:
        clamp(
            38px,
            4.6vw,
            70px
        )!important;

    line-height:.98!important;
    letter-spacing:-.05em!important;
    text-wrap:balance!important;
}

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

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

    align-self:start!important;

    margin-top:4px!important;
}

/* oude locatiechips uit de kop verdwijnen */

body.fa866
.fa26-day-title
.fa26-places{
    display:none!important;
}

/* =========================================================
   DAGVERHAAL
   ========================================================= */

body.fa866 .fa26-day-story{
    position:relative!important;
    inset:auto!important;
    float:none!important;
    transform:none!important;

    width:min(100%,960px)!important;
    max-width:960px!important;

    margin:0 auto 36px!important;
    padding:0!important;

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

    background:transparent!important;
}

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

    margin:0 0 10px!important;

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

    font-size:10px!important;
    font-weight:850!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
}

body.fa866 .fa26-day-story p{
    margin:0!important;

    max-width:900px!important;

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

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

    line-height:1.72!important;

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

/* =========================================================
   MAGAZINE GALLERY
   ========================================================= */

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

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

    gap:
        26px
        26px!important;

    align-items:start!important;

    width:100%!important;
}

/* kaarten worden visueel veel rustiger */

body.fa866 .fa26-photo{
    position:relative!important;

    min-width:0!important;

    overflow:hidden!important;

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

    background:#061018!important;

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

/* geen artikel onder iedere foto */

body.fa866 .fa26-photo-story,
body.fa866 .fa26-photo-info,
body.fa866 .fa855-more{
    display:none!important;
}

/* overlay alleen subtiel */

body.fa866 .fa26-photo-overlay{
    padding:
        30px
        18px
        14px!important;

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

body.fa866 .fa26-photo-overlay strong{
    font-size:14px!important;
    line-height:1.25!important;
}

body.fa866 .fa26-photo-overlay span{
    margin-top:3px!important;

    font-size:10px!important;

    opacity:.78!important;
}

/* =========================================================
   FOTO FORMATEN
   ========================================================= */

/* breed redactioneel beeld */

body.fa866 .fa856-landscape{
    grid-column:span 7!important;

    width:100%!important;
    max-width:none!important;
}

body.fa866 .fa856-landscape img{
    display:block!important;

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

    aspect-ratio:auto!important;
    object-fit:contain!important;
}

/* hero */

body.fa866
.fa856-landscape.fa856-hero{
    grid-column:1 / -1!important;

    margin:
        8px
        0
        14px!important;
}

body.fa866
.fa856-landscape.fa856-hero img{
    width:100%!important;

    max-height:720px!important;

    object-fit:contain!important;

    background:#050c12!important;
}

/* portrait wordt echte magazinekolom */

body.fa866 .fa856-portrait{
    grid-column:span 5!important;

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

    justify-self:center!important;
}

body.fa866 .fa856-portrait img{
    display:block!important;

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

    max-height:900px!important;

    object-fit:contain!important;
    aspect-ratio:auto!important;
}

/* square */

body.fa866 .fa856-square{
    grid-column:span 5!important;

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

    justify-self:center!important;
}

body.fa866 .fa856-square img{
    display:block!important;

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

    object-fit:cover!important;
}

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

body.fa866 .fa26-gallery
.fa856-landscape:nth-of-type(4n){
    grid-column:span 7!important;
}

/* =========================================================
   MAGAZINE TEKST TUSSEN FOTO'S
   ========================================================= */

body.fa866 .fa866-editorial-story{
    grid-column:span 5!important;

    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;

    min-height:280px!important;

    padding:
        28px
        8px!important;
}

body.fa866 .fa866-editorial-story small{
    display:block;

    margin-bottom:12px;

    color:var(--fa866-orange2);

    font-size:10px;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
}

body.fa866 .fa866-editorial-story p{
    margin:0;

    color:#e6edf2;

    font-size:
        clamp(
            16px,
            1.35vw,
            20px
        );

    line-height:1.75;
}

/* =========================================================
   LEUK OM TE WETEN OP DAGNIVEAU
   ========================================================= */

body.fa866 .fa866-day-fact{
    grid-column:2 / 12!important;

    margin:
        18px
        0
        22px!important;

    padding:
        22px
        26px!important;

    border-top:
        1px solid
        rgba(255,100,24,.35);

    border-bottom:
        1px solid
        rgba(255,100,24,.22);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,100,24,.045),
            transparent
        );
}

body.fa866 .fa866-day-fact small{
    display:block;

    margin-bottom:7px;

    color:var(--fa866-orange2);

    font-size:10px;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}

body.fa866 .fa866-day-fact p{
    margin:0;

    max-width:900px;

    color:#dfe7ed;

    font-size:15px;
    line-height:1.7;
}

/* =========================================================
   ROUTE ONDERAAN DAG
   ========================================================= */

body.fa866 .fa866-day-route{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    margin:
        34px
        0
        0!important;

    padding:
        18px
        0
        0!important;

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

    color:
        var(--fa866-muted);

    font-size:
        11px;
}

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

    opacity:.8;
}

/* =========================================================
   KOSTEN BLIJVEN REISNIVEAU
   ========================================================= */

body.fa866 .fa851-cost-story{
    margin-top:
        52px!important;
}

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

@media(max-width:900px){

    body.fa866 .fa26-day{
        padding:
            20px
            15px
            30px!important;

        border-radius:
            18px!important;
    }

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

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

        gap:
            10px
            13px!important;
    }

    body.fa866 .fa26-day-title h2{
        font-size:
            clamp(
                31px,
                9vw,
                48px
            )!important;
    }

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

    body.fa866 .fa26-day-story{
        margin:
            0
            0
            25px!important;
    }

    body.fa866 .fa26-day-story p{
        font-size:
            17px!important;
    }

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

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

        margin:
            0
            0
            20px!important;
    }

    body.fa866 .fa856-portrait{
        max-width:
            560px!important;

        margin-left:auto!important;
        margin-right:auto!important;
    }

    body.fa866 .fa866-editorial-story{
        min-height:0!important;

        padding:
            6px
            3px
            22px!important;
    }

    body.fa866 .fa866-day-fact{
        margin:
            25px
            0!important;

        padding:
            18px
            3px!important;
    }
}