:root {
    --cpx-map-bg: #0a0a0a;
    --cpx-borders-color: #3f3f3f;
    --cpx-marker-gray: #1c1c1c;
    --cpx-marker-green: #00A77E;
    --cpx-panel-bg: #242424;
    --cpx-panel-text: #fff;
    --cpx-panel-width: 350px;
    --cpx-panel-shadow: 0 20px 40px rgba(0, 0, 0, .18);

    --cpx-radius-xl: 0;

    --cpx-gallery-gap: 10px;
    --cpx-gallery-thumb-h: 140px;
    --cpx-gallery-btn-bg: rgba(255, 255, 255, .1);
    --cpx-gallery-btn-fg: #fff;
    --cpx-gallery-btn-bg-hover: rgba(255, 255, 255, .18);

    --cpx-gallery-line-gap: 11px;
    --cpx-gallery-line-height: 3px;
    --cpx-gallery-line-height-active: 3px;
    --cpx-gallery-line-bg: rgba(255, 255, 255, .35);
    --cpx-gallery-line-active: var(--cpx-marker-green);
    /* #00A77E */
    --cpx-gallery-line-radius: 2px;

    --cpx-scrollbar-size: 10px;
    --cpx-scrollbar-radius: 8px;
    --cpx-scrollbar-track: rgba(255, 255, 255, .08);
    --cpx-scrollbar-thumb: rgba(255, 255, 255, .35);
    --cpx-scrollbar-thumb-hover: var(--cpx-marker-green);
    /* #00A77E */
    --cpx-scrollbar-thumb-active: #00c49a;

    --cpx-beam-fade-duration: .35s;
}

.projects-map {
    /* BEM block */
    position: relative;
    background: var(--cpx-map-bg);
    border-radius: var(--cpx-radius-xl);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.projects-map__canvas {
    width: 100%;
    height: 650px;
}

@media screen and (max-width: 1024px) {
    .projects-map__canvas {
        height: 70vh;
    }
}

/* zwart/wit tiles */
.leaflet-tile {
    filter: grayscale(1) contrast(1.05) brightness(0.96);
}

/* Leaflet popup verbergen (we gebruiken een eigen panel) */
.leaflet-popup {
    display: none !important;
}

/* Markers (divIcon + inline SVG) */
.projects-map__marker__wrap {
    background: transparent !important;
    border: 0 !important;
}

.projects-map__marker {
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.projects-map__marker__svg {
    display: block;
}

.projects-map__marker__pin {
    fill: var(--cpx-marker-gray);
    transition: fill .2s ease;
}

.projects-map__marker__dot {
    fill: #ffffff;
    opacity: .95;
}

.projects-map__marker.is-active .projects-map__marker__pin,
.projects-map__marker:focus-visible .projects-map__marker__pin,
.projects-map__marker:hover .projects-map__marker__pin {
    fill: var(--cpx-marker-green);
}

/* Panel rechts */
.projects-map__panel {
    position: absolute;
    top: 50%;
    right: 30px;
    width: min(100%, var(--cpx-panel-width));
    height: auto;
    max-height: calc(100% - 60px);
    background: var(--cpx-panel-bg);
    color: var(--cpx-panel-text);
    transform: translateX(-30px) translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: transform .5s ease, opacity .5s ease;
    box-shadow: var(--cpx-panel-shadow);
    z-index: 1001 !important;
    display: flex;
    flex-direction: column;
}

.projects-map__panel.is-open {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
    pointer-events: auto;
}

@media screen and (max-width: 768px) {
    .projects-map__panel {
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        transform: none;

        &.is-open {
            transform: none;
        }
    }
}

.projects-map__panel__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: 0;
    cursor: pointer;
    padding: 0 !important;
    line-height: 0 !important;
}

.projects-map__panel__content {
    padding: 38px;
    overflow-y: auto;
    height: 100%;
    overscroll-behavior: contain;

    /* Firefox */
    scrollbar-width: thin;
    /* auto | thin | none */
    scrollbar-color: var(--cpx-scrollbar-thumb) var(--cpx-scrollbar-track);
    scrollbar-gutter: stable both-edges;
    /* prevents layout shift */
}

@media screen and (max-width: 768px) {
    .projects-map__panel__content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* WebKit (Chrome, Edge, Safari) */
.projects-map__panel__content::-webkit-scrollbar {
    width: var(--cpx-scrollbar-size);
}

.projects-map__panel__content::-webkit-scrollbar-track {
    background: var(--cpx-scrollbar-track);
    border-radius: var(--cpx-scrollbar-radius);
}

.projects-map__panel__content::-webkit-scrollbar-thumb {
    background: var(--cpx-scrollbar-thumb);
    border-radius: var(--cpx-scrollbar-radius);
    border: 2px solid transparent;
    /* creates a gap between thumb & track */
    background-clip: padding-box;
}

.projects-map__panel__content::-webkit-scrollbar-thumb:hover {
    background: var(--cpx-scrollbar-thumb-hover);
}

.projects-map__panel__content::-webkit-scrollbar-thumb:active {
    background: var(--cpx-scrollbar-thumb-active);
}

/* High-contrast/forced colors safety */
@media (forced-colors: active) {
    .projects-map__panel__content {
        scrollbar-color: ButtonText Canvas;
    }
}

.projects-map__panel__title {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 8px;
    margin-bottom: 15px !important;
}

.projects-map__panel__meta {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
    font-size: .9rem;
    gap: 15px;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
}

.projects-map__panel__meta__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    position: relative;

    &:not(:last-child) {
        &:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 1px;
            background: var(--cpx-borders-color);
        }
    }
}

.projects-map__panel__excerpt {
    margin-bottom: 20px;
    font-size: .95rem;
}

.projects-map__panel__meta__value {
    color: var(--cpx-panel-text);
}

.projects-map__panel__meta__icon {
    width: 24px;
}

.projects-map__panel__image {
    margin: 10px 0 14px;
    border-radius: 12px;
    overflow: hidden;
}

.projects-map__panel__image img {
    display: block;
    width: 100%;
    height: auto;
}

.projects-map__panel__teaser {
    font-size: .98rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.projects-map__panel__link {
    background-color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-c7e2a3f-font-family), Sans-serif;
    font-size: var(--e-global-typography-c7e2a3f-font-size);
    font-weight: var(--e-global-typography-c7e2a3f-font-weight);
    color: var(--e-global-color-text) !important;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: var(--e-global-color-primary);
    border-radius: 50px 50px 50px 50px;
    padding: 12px 24px 12px 24px;
    margin-top: 20px;
    display: block;
    text-align: center;
    line-height: 1;
    transition: all .3s;

    &:hover,
    &:focus {
        background-color: var(--e-global-color-52bf508);
        color: var(--e-global-color-primary) !important;
    }
}

/* Mobile: panel full width */
@media (max-width: 800px) {
    .projects-map__panel {
        width: 100%;
    }
}

.projects-map__gallery {
    margin: 10px 0 16px;
}

.projects-map__gallery .swiper-wrapper {
    align-items: center;
}

.projects-map__gallery__slide {
    /* fixed thumb width */
    height: var(--cpx-gallery-thumb-h);
    border-radius: 0;
    overflow: hidden;
}

.projects-map__gallery__link {
    display: block;
    width: 100%;
    height: 100%;
}

.projects-map__gallery__img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    background-color: #fff;
}

.projects-map__gallery__nav {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.projects-map__gallery__btn {
    border: 0;
    border-radius: 8px;
    background: var(--cpx-gallery-btn-bg);
    color: var(--cpx-gallery-btn-fg);
    width: 36px;
    height: 32px;
    cursor: pointer;
}

.projects-map__gallery__btn:hover {
    background: var(--cpx-gallery-btn-bg-hover);
}

/* Keep the pagination under the slider and stretch it */
.projects-map__gallery__pagination {
    position: static !important;
    margin-top: 14px;
    display: flex;
    /* <-- let bullets flex to fill width */
    align-items: center;
    justify-content: stretch;
    gap: var(--cpx-gallery-line-gap);
    width: 100%;
    padding: 0 4px;
    /* small side breathing room */
    min-height: calc(var(--cpx-gallery-line-height-active) + 2px);
}

/* Turn bullets into lines that share the full width */
.projects-map__gallery__pagination .swiper-pagination-bullet {
    flex: 1 1 0;
    /* equal segments */
    display: block !important;
    /* override Swiper inline-block */
    height: var(--cpx-gallery-line-height);
    background-color: var(--cpx-gallery-line-bg);
    opacity: 1 !important;
    /* ignore default fading opacity */
    margin: 0 !important;
    /* the gap is on the container */
    border-radius: var(--cpx-gallery-line-radius);
    transform: none !important;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
}

/* Active segment */
.projects-map__gallery__pagination .swiper-pagination-bullet-active {
    background-color: var(--cpx-gallery-line-active);
    height: var(--cpx-gallery-line-height-active);
}

.projects-map__beam {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* never block clicks */
    z-index: 480;
    transition: opacity .2s ease-in-out;
    opacity: 0;
    /* below panel (500), above tiles */
}

.projects-map__beam.is-visible {
    opacity: 1;
}