/* FOCUS_ADVENTURES_V8_5_8_LAYOUT_REPAIR */

/*
 * V8.5.8 is leidend voor de dagstructuur.
 * Oudere V8.5.x positionering wordt hier bewust geneutraliseerd.
 */

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

/* ==========================================================
   DAGHEADER
   ========================================================== */

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

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

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

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

    border-bottom:1px solid rgba(151,177,198,.16) !important;
}

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

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

    margin:0 !important;

    align-self:start !important;
}

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

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

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

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

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

body.fa857 .fa26-day-title h2 {
    max-width:900px !important;

    margin:0 !important;

    font-size:clamp(32px,3.5vw,54px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
}

body.fa857 .fa26-day-title .fa26-places {
    display:flex !important;
    flex-wrap:wrap !important;

    gap:6px !important;

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

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

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

    padding:5px 9px !important;

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

/* Alleen eerste vijf locaties tonen. */
body.fa857 .fa26-day-title .fa26-place:nth-child(n+6) {
    display:none !important;
}

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

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

    align-self:start !important;

    width:auto !important;
    min-width:max-content !important;

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

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

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

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

    box-sizing:border-box !important;

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

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

    margin:0 0 28px 82px !important;
    padding:18px 20px !important;

    border:1px solid rgba(151,177,198,.16) !important;
    border-left:3px solid #ff6418 !important;
    border-radius:16px !important;

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

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

    width:auto !important;

    margin:0 0 9px !important;

    white-space:normal !important;

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

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

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

    margin:0 !important;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;

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

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

body.fa857 .fa26-gallery {
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;

    gap:24px !important;

    width:100% !important;

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

/* normale landscape */
body.fa857 .fa26-gallery .fa856-landscape {
    grid-column:span 6 !important;

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

    margin:0 !important;
    justify-self:stretch !important;
}

/* hero landscape */
body.fa857 .fa26-gallery .fa856-landscape.fa856-hero {
    grid-column:1 / -1 !important;
}

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

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

    margin:0 !important;

    justify-self:center !important;
    align-self:start !important;
}

/* Eén portraitfoto op een dag: mooi links/centraal in content,
   maar nooit gigantisch breed. */
body.fa857 .fa26-gallery > .fa856-portrait:only-child {
    grid-column:1 / -1 !important;

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

    justify-self:center !important;
}

body.fa857 .fa856-portrait .fa26-photo-button,
body.fa857 .fa856-portrait img {
    width:100% !important;
    height:auto !important;

    max-height:none !important;

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

body.fa857 .fa856-landscape img {
    width:100% !important;
    height:auto !important;

    aspect-ratio:auto !important;
}

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

@media (max-width:900px) {

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

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

        gap:10px 12px !important;

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

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

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

    body.fa857 .fa26-photo-count {
        justify-self:start !important;
        margin:2px 0 0 !important;
    }

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

        margin:0 0 20px !important;
        padding:16px !important;
    }

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

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

        margin:0 0 20px !important;
    }

    body.fa857 .fa856-portrait img {
        width:auto !important;
        max-width:100% !important;

        margin:0 auto !important;
    }
}