/* ===========================
   module.css – scoped op .si2
   =========================== */

/* 16:9 kaart */
.si2 .map-ratio {
    width: 100%;
    aspect-ratio: 16 / 9; /* moderne browsers */
    position: relative;
}
    /* fallback voor oudere browsers */
    .si2 .map-ratio::before {
        content: "";
        display: block;
        padding-top: 56.25%; /* 9/16 */
    }

    .si2 .map-ratio > #map {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
/* Optioneel: andere verhouding op smalle schermen */
@media (max-width: 640px) {
    .si2 .map-ratio {
        aspect-ratio: 4 / 3;
    }

        .si2 .map-ratio::before {
            padding-top: 75%; /* 3/4 */
        }
}

/* 16:9 wrapper soort-foto (RadImageGallery) */
.si2 .ratio-169 {
    position: relative;
    width: 100%;
}

    .si2 .ratio-169::before {
        content: "";
        display: block;
        padding-top: 56.25%; /* 9/16 */
    }
    /* laat de gallery het hele vak innemen */
    .si2 .ratio-169 > .RadImageGallery {
        position: absolute;
        inset: 0;
    }

/* image-area 100% x 100% en zonder donkere achtergrond */
.si2 .rig-169 .rigImageArea,
.si2 .rig-169 .rigLargeImage {
    width: 100%;
    height: 100%;
    background: #fff;
}
    /* vul het kader zonder balken (kan crop geven) */
    .si2 .rig-169 .rigLargeImage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Legenda (horizontaal, wrapt indien nodig) */
.si2 .legend {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
}

    .si2 .legend li {
        display: flex;
        align-items: center;
        margin-right: 20px;
        background-color: transparent;
    }

    .si2 .legend .color-box {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        border-radius: 50%;
        border: 1px solid darkblue;
    }

.si2 .color-0 {
    background-color: dodgerblue;
}

.si2 .color-1 {
    background-color: #ffffcc;
}
/* lichtgeel */
.si2 .color-2 {
    background-color: #ffeda0;
}
/* geel */
.si2 .color-3 {
    background-color: #feb24c;
}
/* oranje */
.si2 .color-4 {
    background-color: #f03b20;
}
/* donkeroranje */
.si2 .color-5 {
    background-color: #bd0026;
}
/* rood */

/* Tiles / knoppen / checkboxes */
.si2 div.noHover.RadTile {
    border-color: transparent;
}
/* betere leesbaarheid van tile-tekst over afbeeldingen */
.si2 .RadTile div.rtileBottomContent {
    font-weight: bold;
    width: auto;
    max-width: 800px;
    min-width: 800px;
    color: #000;
    background-color: rgba(255, 255, 255, 0.7);
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    bottom: 10px;
    white-space: nowrap;
}

.si2 .btn-primary {
    top: 7px;
    left: 0;
}

/* Checkbox lay-out */
.si2 .checkbox-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

    .si2 .checkbox-container > div {
        flex: 1;
        padding: 10px;
        max-width: 250px; /* pas aan naar wens */
    }

/* RadSlider theming */
.si2 .RadSlider_Bootstrap .rslHorizontal a.rslDraghandle {
    background-color: #00A68D;
}

.si2 .RadSlider_Bootstrap .rslSelectedregion {
    background-color: #00A68D;
}

.si2 .RadSlider_Bootstrap .rslTrack {
    background-color: #00A68D;
}

/* Maandenweergave bij slider */
.si2 .months {
    float: left;
    padding-left: 20px;
    padding-top: 14px;
    /* background: transparent url('Images/monthsBackground.jpg') no-repeat; */
}

.si2 .monthsSlider .rslItemsWrapper .rslItem span {
    font-weight: bold;
    line-height: 30px;
    padding-left: 10px;
}

/* geen scrollbar in raddock */
.si2 .rdContent {
    overflow: hidden !important;
}


/* 4 kolommen in de Zoeken-dock: Zoeken | Biotoop | Project */
/* Rij met 4 kolommen */
.si2 .filters-row.filters-4cols {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px; /* row-gap | col-gap */
    align-items: flex-start;
}

    /* Alle filters: mogen krimpen en wrappen */
    .si2 .filters-row.filters-4cols > .filter {
        flex: 1 1 220px; /* basis 220px, groeit mee */
        min-width: 220px;
    }

    /* Zoekkolom: compact houden */
    .si2 .filters-row.filters-4cols > .search-col {
        flex: 0 0 320px; /* vaste kolombreedte ~320px */
        max-width: 340px;
        min-width: 260px;
    }

/* Zoektextbox echt binnen de kolom laten passen */
.si2 .filters-row .search-col .RadInput,
.si2 .filters-row .search-col .riTextBox,
.si2 .filters-row .search-col input[type="text"] {
    width: 100% !important;
    max-width: 100%;
}

/* Netjes wrappen van checkbox/radiolijsten */
.si2 .filters-row .RadCheckBoxList .rblList,
.si2 .filters-row .RadRadioButtonList .rrlList {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0;
    padding: 0;
}

.si2 .filters-row .RadCheckBoxList .rblItem,
.si2 .filters-row .RadRadioButtonList .rrlItem {
    list-style: none;
}

/* Kopje boven elk blok */
.si2 .filters-row .filter > div:first-child {
    font-weight: 600;
    margin-bottom: 6px;
}

/* Breakpoints: 2 kolommen en daarna 1 kolom */
@media (max-width: 1100px) {
    .si2 .filters-row.filters-4cols > .filter {
        flex: 0 0 calc(50% - 12px);
        min-width: 280px;
    }

    .si2 .filters-row.filters-4cols > .search-col {
        flex: 0 0 calc(50% - 12px);
        max-width: none;
    }
}

@media (max-width: 560px) {
    .si2 .filters-row.filters-4cols > .filter,
    .si2 .filters-row.filters-4cols > .search-col {
        flex: 0 0 100%;
        min-width: 0;
    }
}