/* FOCUS_ADVENTURES_V8_5_7_EDITORIAL_CLEANUP */

body.fa857 {
    --fa857-bg:#07111a;
    --fa857-card:#0c1823;
    --fa857-line:rgba(151,177,198,.16);
    --fa857-orange:#ff6418;
    --fa857-muted:#8fa2b3;
}

/*
 * ==========================================================
 * DAG
 * ==========================================================
 */

body.fa857 .fa26-day {
    min-height:0 !important;
    height:auto !important;
    padding:22px 24px 32px !important;
}

/*
 * De bestaande dagkop wordt een echte compacte editorial header.
 */
body.fa857 .fa26-day-head {
    display:grid !important;
    grid-template-columns:64px minmax(0,1fr) !important;
    grid-template-areas:
        "number title"
        "number places" !important;

    gap:8px 20px !important;

    align-items:start !important;

    min-height:0 !important;
    height:auto !important;

    padding:4px 0 20px !important;
    margin:0 0 20px !important;

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

/*
 * DAG nummer
 */
body.fa857 .fa26-day-number {
    grid-area:number !important;

    width:58px !important;
    height:58px !important;

    margin:2px 0 0 !important;

    align-self:start !important;

    border-radius:17px !important;
}

/*
 * Titel
 */
body.fa857 .fa26-day-title {
    grid-area:title !important;

    width:auto !important;
    max-width:1050px !important;

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

    transform:none !important;
}

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

    font-size:10px !important;
    line-height:1.2 !important;
    letter-spacing:.12em !important;
}

body.fa857 .fa26-day-title h2 {
    margin:0 !important;

    max-width:1050px !important;

    font-size:clamp(34px,4vw,58px) !important;
    line-height:1.01 !important;
    letter-spacing:-.045em !important;

    text-wrap:balance !important;
}

body.fa857 .fa26-day-title small {
    margin-top:8px !important;
}

/*
 * Locaties onder titel.
 */
body.fa857 .fa26-day-head .fa26-places {
    grid-area:places !important;

    display:flex !important;
    flex-wrap:wrap !important;

    gap:6px !important;

    width:auto !important;
    max-width:950px !important;

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

body.fa857 .fa26-day-head .fa26-place {
    width:auto !important;
    max-width:240px !important;

    padding:5px 9px !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;

    font-size:10px !important;
    line-height:1.2 !important;
}

/*
 * Oude V8.5 positionering hard terugzetten.
 */
body.fa857 .fa26-day-head > *,
body.fa857 .fa26-day-title,
body.fa857 .fa26-day-story {
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    float:none !important;

    transform:none !important;
}

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

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

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

    min-height:0 !important;
    height:auto !important;

    margin:0 0 24px 78px !important;
    padding:18px 20px !important;

    box-sizing:border-box !important;

    border:1px solid var(--fa857-line) !important;
    border-left:3px solid var(--fa857-orange) !important;
    border-radius:16px !important;

    background:rgba(12,24,35,.78) !important;
}

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

    margin-bottom:9px !important;

    color:#ff8550 !important;

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

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

    font-size:15px !important;
    line-height:1.72 !important;

    max-width:850px !important;
}

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

body.fa857 .fa26-gallery {
    clear:both !important;

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

    gap:24px !important;

    width:100% !important;

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

/*
 * Oude vreemde margins / positioning verwijderen.
 */
body.fa857 .fa26-gallery > * {
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;
}

/*
 * Landscape standaard 50%.
 */
body.fa857 .fa856-landscape {
    grid-column:span 6 !important;

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

    justify-self:stretch !important;
}

/*
 * Geschikte hero landscape over volle breedte.
 */
body.fa857 .fa856-landscape.fa856-hero {
    grid-column:1 / -1 !important;
}

/*
 * Portrait bewust smaller.
 */
body.fa857 .fa856-portrait {
    grid-column:span 6 !important;

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

    justify-self:center !important;
}

/*
 * Portrait afbeelding volledig zichtbaar.
 */
body.fa857 .fa856-portrait img {
    display:block !important;

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

    max-height:880px !important;

    margin:0 auto !important;

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

/*
 * Square.
 */
body.fa857 .fa856-square {
    grid-column:span 6 !important;

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

    justify-self:center !important;
}

/*
 * Hero landscape.
 */
body.fa857 .fa856-hero img {
    display:block !important;

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

    max-height:680px !important;

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

    background:#050c12 !important;
}

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

body.fa857 .fa851-cost-story {
    width:100% !important;

    max-width:1180px !important;

    margin:42px auto 22px !important;
    padding:22px 24px !important;

    box-sizing:border-box !important;

    border:1px solid var(--fa857-line) !important;
    border-left:3px solid var(--fa857-orange) !important;
    border-radius:16px !important;

    background:rgba(12,24,35,.82) !important;
}

body.fa857 .fa851-cost-story small {
    display:block !important;

    margin-bottom:8px !important;

    color:#ff8550 !important;

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

body.fa857 .fa851-cost-story p {
    max-width:1000px !important;

    margin:0 !important;

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

body.fa857 .fa851-cost-note {
    max-width:900px !important;

    margin-top:12px !important;

    font-size:11px !important;
    line-height:1.55 !important;

    color:var(--fa857-muted) !important;
}

/*
 * ==========================================================
 * SIDEBAR
 * ==========================================================
 */

body.fa857 .fa26-day-link {
    min-height:0 !important;
    height:auto !important;
}

body.fa857 .fa26-day-link .fa26-places {
    max-height:none !important;
}

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

@media (max-width:900px) {

    body.fa857 .fa26-day {
        padding:18px 14px 26px !important;
    }

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

        gap:8px 12px !important;

        padding-bottom:15px !important;
        margin-bottom:15px !important;
    }

    body.fa857 .fa26-day-number {
        width:50px !important;
        height:50px !important;

        border-radius:14px !important;
    }

    body.fa857 .fa26-day-title h2 {
        font-size:clamp(29px,8vw,42px) !important;
    }

    body.fa857 .fa26-day-story {
        width:100% !important;
        max-width:none !important;

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

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

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

        margin:0 0 18px !important;
    }

    body.fa857 .fa856-portrait img {
        max-height:none !important;
    }

    body.fa857 .fa851-cost-story {
        margin:28px 0 16px !important;
        padding:18px 16px !important;
    }
}