/* --- Custom Flexbox Grid System --- */

:root {
    /* Grid gaps */
    --rns-grid-column-gap: 1rem;  /* Side gaps between columns */
    --rns-grid-row-gap: 2rem;       /* Vertical gaps between rows */

    /* Mobile gaps */
    --rns-grid-column-gap-mobile: 1rem;
    --rns-grid-row-gap-mobile: 1.5rem;

    /* Transition Duration */
    --rns-view-layout-transition-duration: 0.3s; /* Duration for layout changes */
    --rns-view-fade-duration: 1s;            /* Duration for opacity fade (adjust as needed) */
}

/* The main flex container */
.rns-flex-grid {
    display: grid;
    column-gap: var(--rns-grid-column-gap-mobile);
    row-gap: var(--rns-grid-row-gap-mobile);
    width: 100%;
}

@media (min-width: 768px) {
    .rns-flex-grid {
        column-gap: var(--rns-grid-column-gap);
        row-gap: var(--rns-grid-row-gap);
    }
}

/* The items within the grid */
.rns-flex-grid > .tile-item {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Responsive Item Sizing Based on View Mode --- */

/* Tile View */
.rns-flex-grid.view-tiles {
    grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 576px) { .rns-flex-grid.view-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .rns-flex-grid.view-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .rns-flex-grid.view-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .rns-flex-grid.view-tiles { grid-template-columns: repeat(5, 1fr); } }

/* Split View */
@media (min-width: 992px) { .rns-flex-grid.view-split { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .rns-flex-grid.view-split { grid-template-columns: repeat(3, 1fr); } }


/* --- Main Layout Control (Tiles vs Map Container) --- */

.rns-results-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rns-grid-column-gap);
}

/* Base styles for transition properties */
.tiles,
.results-map-container {
    flex-grow: 1;
    flex-shrink: 0; /* IMPORTANT: Prevent unwanted shrinking during transition */
    min-width: 0;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;

    /* Define ONLY the properties and base duration/timing */
    transition-property: opacity, visibility, flex-basis, max-width, height, overflow, padding, margin;
    transition-duration: var(--rns-view-fade-duration), /* Opacity */
                         0s,                             /* Visibility */
                         var(--rns-view-layout-transition-duration), /* flex-basis */
                         var(--rns-view-layout-transition-duration), /* max-width */
                         0s,                             /* height */
                         0s,                             /* padding */
                         0s;                             /* margin */
    transition-timing-function: ease-in-out;

    /* Default state is visible */
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Default delay (Used for fade-in) */
}

/* Specific Delays for Fade-Out (when becoming hidden) */
.tiles.hiding,
.results-map-container.hiding {
    /* Opacity fades first */
    /* Visibility, height, padding, margin change AFTER fade */
    /* Layout (flex-basis, max-width) changes start immediately with opacity */
    transition-delay: 0s, /* opacity */
                      var(--rns-view-fade-duration), /* visibility */
                      0s,                             /* flex-basis */
                      0s,                             /* max-width */
                      var(--rns-view-fade-duration), /* height */
                      var(--rns-view-fade-duration), /* padding */
                      var(--rns-view-fade-duration); /* margin */
}

/* Helper class for hidden state (can be added dynamically or use view-* classes) */
.view-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    flex-basis: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Delay layout changes until AFTER opacity fade */
    transition-delay: 0s, var(--rns-view-transition-duration), 0s, 0s, var(--rns-view-transition-duration), var(--rns-view-transition-duration), var(--rns-view-transition-duration);
}

/* --- Desktop Layout Adjustments --- */
@media (min-width: 992px) {
    /* SPLIT VIEW */
    .tiles.view-split { flex-basis: 60%; max-width: 60%; height: auto; }
    .results-map-container.view-split {
        flex-basis: calc(40% - var(--rns-grid-column-gap)); max-width: calc(40% - var(--rns-grid-column-gap));
        position: sticky; top: 112px; height: calc(100vh - 115px); overflow: hidden;
    }

    /* MAP VIEW */
    .tiles.view-map { /* Apply hidden state */
        opacity: 0; visibility: hidden; flex-basis: 0 !important; max-width: 0 !important; height: 0 !important;
        overflow: hidden !important; padding: 0 !important; margin: 0 !important;
        transition-delay: 0s, var(--rns-view-fade-duration), 0s, 0s, var(--rns-view-fade-duration), var(--rns-view-fade-duration), var(--rns-view-fade-duration);
    }
    .results-map-container.view-map { /* Apply visible state */
        flex-basis: 100%; max-width: 100%; position: relative; top: 0; height: calc(100vh - 150px);
        opacity: 1; visibility: visible; overflow: visible;
        transition-delay: 0s; /* Ensure immediate layout/visibility for fade-in */
    }

    /* TILES VIEW */
    .tiles.view-tiles { /* Apply visible state */
        flex-basis: 100%; max-width: 100%; height: auto;
        opacity: 1; visibility: visible; overflow: visible;
        transition-delay: 0s; /* Ensure immediate layout/visibility for fade-in */
    }
    .results-map-container.view-tiles { /* Apply hidden state */
        opacity: 0; visibility: hidden; flex-basis: 0 !important; max-width: 0 !important; height: 0 !important;
        overflow: hidden !important; padding: 0 !important; margin: 0 !important;
        transition-delay: 0s, var(--rns-view-fade-duration), 0s, 0s, var(--rns-view-fade-duration), var(--rns-view-fade-duration), var(--rns-view-fade-duration);
    }
}

/* --- Mobile Layout Adjustments --- */
@media (max-width: 991.98px) {
    .tiles, .results-map-container {
        flex-basis: 100% !important; max-width: 100% !important;
        position: relative !important; top: auto !important; height: auto;
    }

    /* MAP VIEW (Mobile) */
    .tiles.view-map { /* Hidden State */
        flex: 1;
        opacity: 0; visibility: hidden; height: 0 !important;
        overflow: hidden !important; padding: 0 !important; margin: 0 !important;
        transition-delay: 0s, var(--rns-view-fade-duration), 0s, 0s, var(--rns-view-fade-duration), var(--rns-view-fade-duration), var(--rns-view-fade-duration);
    }
    .results-map-container.view-map { /* Visible State */
        height: 60vh; opacity: 1; visibility: visible; overflow: visible;
        transition-delay: 0s; /* Immediate layout/visibility for fade-in */
        margin-bottom: 50px;
    }

    /* TILES VIEW (Mobile) */
    .tiles.view-tiles,
    .tiles.view-split { /* Visible State */
        height: auto; opacity: 1; visibility: visible; overflow: visible;
        transition-delay: 0s; /* Immediate layout/visibility for fade-in */
    }
    .results-map-container.view-tiles,
    .results-map-container.view-split { /* Hidden State */
        opacity: 0; visibility: hidden; height: 0 !important;
        overflow: hidden !important; padding: 0 !important; margin: 0 !important;
        transition-delay: 0s, var(--rns-view-fade-duration), 0s, 0s, var(--rns-view-fade-duration), var(--rns-view-fade-duration), var(--rns-view-fade-duration);
    }
}

/* --- Responsive Display Utilities (Bootstrap Equivalents) --- */
/* ... (keep these) ... */
.d-block { display: block !important; }
.d-none { display: none !important; }
@media (min-width: 768px) {
  .d-md-block { display: block !important; }
  .d-md-none { display: none !important; }
  .d-md-flex { display: flex !important; }
}