/*
 * Viewer header V3.0
 * - lichtere stadsfoto
 * - minder zware blauwe overlay
 * - mascotte exact op de onderrand
 */

.viewer-category-header {
    overflow: hidden !important;
    isolation: isolate !important;
    background-color: #315f88 !important;
}

.viewer-category-header::before {
    content: "" !important;
    position: absolute !important;
    inset: -24% -26% -14% -6% !important;
    z-index: -2 !important;
    background-image: var(--viewer-header-image) !important;
    background-repeat: no-repeat !important;
    background-position: 34% 63% !important;
    background-size: 128% auto !important;
    filter: brightness(1.24) saturate(1.08) contrast(.96) !important;
    transform: none !important;
    opacity: 1 !important;
}

.viewer-category-header::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background:
        linear-gradient(
            90deg,
            rgba(6, 38, 70, .35) 0%,
            rgba(14, 67, 108, .20) 52%,
            rgba(25, 83, 124, .12) 100%
        ) !important;
    pointer-events: none;
}

.viewer-category-header__overlay {
    display: none !important;
}

.viewer-category-header__inner {
    align-items: end !important;
    min-height: var(--viewer-sticky-header-height) !important;
    padding-top: .75rem !important;
    padding-bottom: 0 !important;
}

.viewer-category-header__brand {
    align-self: end !important;
    display: flex !important;
    align-items: flex-end !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.viewer-category-header__brand img {
    display: block !important;
    width: 92px !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
}

.viewer-category-header__content,
.viewer-category-header__back {
    align-self: center !important;
    margin-bottom: .65rem !important;
}

.viewer-category-header__title {
    text-shadow: 0 2px 10px rgba(0,0,0,.24) !important;
}

@media (max-width: 900px) {
    .viewer-category-header::before {
        inset: -18% -40% -10% -8% !important;
        background-position: 31% 61% !important;
        background-size: 145% auto !important;
    }

    .viewer-category-header__brand img {
        width: 72px !important;
    }

    .viewer-category-header__content {
        margin-bottom: .45rem !important;
    }
}

@media (max-width: 560px) {
    .viewer-category-header::before {
        inset: -12% -62% -8% -10% !important;
        background-position: 28% 59% !important;
        background-size: 174% auto !important;
    }

    .viewer-category-header__brand img {
        width: 58px !important;
    }
}