/* FOCUS_ADVENTURES_V8_6_7_1_MAGAZINE_POLISH */

/* =========================================================
   BASIS
   ========================================================= */

body.fa867.fa8671{
    --mag-bg:#07131c;
    --mag-panel:#091720;
    --mag-text:#f1eee9;
    --mag-copy:#d4dde3;
    --mag-muted:#8495a2;
    --mag-line:rgba(158,180,196,.12);
    --mag-accent:#ff681c;
    --mag-accent-soft:#ff9562;
}


/* =========================================================
   MEER RUIMTE VOOR HET MAGAZINE
   ========================================================= */

body.fa8671 .fa26-layout{
    grid-template-columns:220px minmax(0,1fr)!important;
    gap:28px!important;
}

body.fa8671 .fa26-sidebar{
    max-width:220px!important;
}


/* =========================================================
   SIDEBAR: MEER INHOUDSOPGAVE, MINDER UI
   ========================================================= */

body.fa8671 .fa26-day-link{
    grid-template-columns:30px minmax(0,1fr)!important;

    padding:8px 4px!important;

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

    background:transparent!important;
}

body.fa8671 .fa26-day-link:hover,
body.fa8671 .fa26-day-link.is-active{
    background:transparent!important;
}

body.fa8671 .fa26-day-link.is-active strong{
    color:#fff!important;
}

body.fa8671 .fa26-day-link b{
    width:27px!important;
    height:27px!important;

    background:transparent!important;

    border:1px solid rgba(255,104,28,.35)!important;

    color:var(--mag-accent-soft)!important;
}

body.fa8671 .fa26-day-link.is-active b{
    background:var(--mag-accent)!important;
    border-color:var(--mag-accent)!important;
    color:#fff!important;
}

body.fa8671 .fa26-day-link .fa26-places{
    display:none!important;
}


/* =========================================================
   DAG = EDITORIAL CHAPTER
   ========================================================= */

body.fa8671 .fa26-day{
    margin:0 0 90px!important;

    padding:38px 42px 46px!important;

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

    border-radius:0!important;

    background:transparent!important;

    box-shadow:none!important;

    overflow:visible!important;
}


/* eerste dag hoeft bovenaan geen scheidingslijn */
body.fa8671 .fa26-day:first-child{
    border-top:0!important;
}


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

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

    gap:18px!important;

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

    border:0!important;
}

body.fa8671 .fa26-day-number{
    width:42px!important;
    height:42px!important;

    border-radius:50%!important;

    background:var(--mag-accent)!important;

    box-shadow:none!important;
}

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

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

body.fa8671 .fa26-day-title p{
    margin:1px 0 7px!important;

    font-size:9px!important;
    letter-spacing:.16em!important;
}

body.fa8671 .fa26-day-title h2{
    max-width:850px!important;

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

    font-size:clamp(38px,3.7vw,60px)!important;

    font-weight:400!important;

    line-height:1.01!important;
    letter-spacing:-.04em!important;

    color:var(--mag-text)!important;
}

body.fa8671 .fa26-photo-count{
    margin-top:3px!important;

    padding:5px 9px!important;

    border:0!important;

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

    background:transparent!important;

    font-size:9px!important;
}


/* =========================================================
   INTRO VAN DE DAG
   ========================================================= */

body.fa8671 .fa26-day-story{
    width:min(100%,720px)!important;
    max-width:720px!important;

    margin:0 0 34px 64px!important;
    padding:0!important;

    border:0!important;
    background:none!important;
}

body.fa8671 .fa26-day-story-label{
    margin-bottom:9px!important;

    font-size:8px!important;
    letter-spacing:.17em!important;
}

body.fa8671 .fa26-day-story p{
    max-width:680px!important;

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

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

    font-size:18px!important;
    line-height:1.7!important;
}


/* =========================================================
   HERO: FOTO OPENT DE REPORTAGE
   ========================================================= */

body.fa8671 .fa867-hero-wrap{
    position:relative!important;

    width:calc(100% + 84px)!important;

    margin:10px -42px 44px!important;

    background:#02080c!important;
}

body.fa8671 .fa867-hero-wrap .fa26-photo{
    border-radius:0!important;
    background:#02080c!important;
}

body.fa8671 .fa867-hero-wrap img{
    width:100%!important;

    height:clamp(430px,58vw,720px)!important;

    object-fit:cover!important;
    object-position:center!important;
}


/* hero caption als echte fotocredit */
body.fa8671
.fa867-hero-wrap
.fa26-photo-overlay{
    padding:100px 32px 20px!important;

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

body.fa8671
.fa867-hero-wrap
.fa26-photo-overlay strong{
    font-size:15px!important;
}


/* =========================================================
   MAGAZINE FOTOVELD
   ========================================================= */

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

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

    column-gap:24px!important;
    row-gap:42px!important;

    align-items:center!important;
}


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


/* ritme: af en toe kleiner landschap */
body.fa8671
.fa26-gallery > .fa26-photo.fa856-landscape:nth-of-type(3n){
    grid-column:span 5!important;
}


/* elke paar beelden bewust groot */
body.fa8671
.fa26-gallery > .fa26-photo.fa856-landscape:nth-of-type(6n){
    grid-column:2 / 12!important;
}


/* portrait = magazineportret, niet opblazen */
body.fa8671
.fa26-gallery > .fa26-photo.fa856-portrait{
    grid-column:span 4!important;

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

    justify-self:center!important;
}


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

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

    justify-self:center!important;
}


/* kaarten-look helemaal weg */
body.fa8671 .fa26-gallery > .fa26-photo{
    border:0!important;

    border-radius:5px!important;

    background:transparent!important;

    box-shadow:none!important;
}


/* foto's zelf */
body.fa8671 .fa26-gallery .fa26-photo-button{
    display:block!important;

    width:100%!important;

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

    overflow:hidden!important;

    background:#02080c!important;
}

body.fa8671 .fa26-gallery img{
    width:100%!important;
    height:auto!important;

    border-radius:5px!important;
}


/* =========================================================
   CAPTION: SUBTIEL
   ========================================================= */

body.fa8671
.fa26-gallery
.fa26-photo-overlay{
    position:absolute!important;

    left:0!important;
    right:0!important;
    bottom:0!important;

    padding:44px 13px 10px!important;

    opacity:.78!important;

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

body.fa8671
.fa26-gallery
.fa26-photo-overlay strong{
    font-family:inherit!important;

    font-size:10px!important;
    font-weight:600!important;
}

body.fa8671
.fa26-gallery
.fa26-photo-overlay span{
    font-size:8px!important;
}


/* =========================================================
   VERHAAL TUSSEN DE FOTO'S
   ========================================================= */

body.fa8671 .fa866-story-flow,
body.fa8671 .fa866-story-flow.is-wide{
    grid-column:2 / 12!important;

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

    justify-self:center!important;

    margin:12px 0!important;

    padding:8px 0 8px 30px!important;

    border:0!important;
    border-left:2px solid var(--mag-accent)!important;

    background:transparent!important;
}

body.fa8671 .fa866-story-flow small{
    margin-bottom:10px!important;

    color:var(--mag-accent-soft)!important;

    font-size:8px!important;
    letter-spacing:.17em!important;
}

body.fa8671 .fa866-story-flow p{
    max-width:780px!important;

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

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

    font-size:clamp(20px,1.65vw,25px)!important;

    font-weight:400!important;

    line-height:1.52!important;
    letter-spacing:-.015em!important;
}


/* =========================================================
   WEETJE = REDACTIONELE SIDENOTE
   ========================================================= */

body.fa8671 .fa866-day-fact{
    grid-column:3 / 11!important;

    width:100%!important;

    margin:8px 0!important;
    padding:22px 26px!important;

    border:0!important;
    border-top:1px solid rgba(255,104,28,.38)!important;
    border-bottom:1px solid rgba(255,104,28,.18)!important;

    border-radius:0!important;

    background:transparent!important;
}

body.fa8671 .fa866-day-fact p{
    font-family:
        Georgia,
        "Times New Roman",
        serif!important;

    font-size:15px!important;
    line-height:1.65!important;
}


/* =========================================================
   ROUTE = EINDE VAN HET HOOFDSTUK
   ========================================================= */

body.fa8671 .fa866-day-route{
    margin-top:38px!important;
    padding-top:17px!important;

    justify-content:center!important;

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

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

    font-size:10px!important;

    letter-spacing:.02em!important;
}


/* =========================================================
   OUDE FOTO-TEKST BLIJFT WEG
   ========================================================= */

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


/* =========================================================
   DESKTOP BREED
   ========================================================= */

@media(min-width:1350px){

    body.fa8671 .fa26-day{
        padding-left:54px!important;
        padding-right:54px!important;
    }

    body.fa8671 .fa867-hero-wrap{
        width:calc(100% + 108px)!important;

        margin-left:-54px!important;
        margin-right:-54px!important;
    }
}


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

@media(max-width:900px){

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

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

    body.fa8671 .fa26-day{
        margin-bottom:55px!important;

        padding:26px 15px 32px!important;
    }

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

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

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

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

        margin:0 0 25px!important;
    }

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

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

        margin:
            8px
            -15px
            28px!important;
    }

    body.fa8671 .fa867-hero-wrap img{
        height:auto!important;
        min-height:0!important;
    }

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

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

        margin:0 0 28px!important;
    }

    body.fa8671 .fa26-gallery > .fa856-portrait{
        width:min(82%,430px)!important;
        max-width:82%!important;

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

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

        margin:8px 0 30px!important;

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

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

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

        margin:12px 0 28px!important;
        padding:18px 2px!important;
    }

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