/* Layout Responsive Fix - Provides responsive layout for desktop viewports */
/* Ensures proper flexbox layout for filter panel, map container, and insights */
@media (min-width: 768px) {
    /* Main container layout for desktop viewports */
    body main .container,
    #attractions .container {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        height: auto;
        overflow: visible;
        position: relative;
    }
    
    /* Filter panel styling for desktop layout */
    body main section#attractions aside#filters-panel,
    #attractions aside#filters-panel {
        position: static;
        width: var(--filter-panel-width);
        min-width: var(--filter-panel-width);
        max-width: var(--filter-panel-width);
        flex: 0 0 var(--filter-panel-width);
        height: auto;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        transform: none;
        translate: none;
        z-index: var(--z-dropdown, 1030);
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        margin: 1.5rem 1rem 1.5rem 1.5rem;
        padding: 2rem;
        display: block !important; /* Override mobile display:none */
        float: none;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }
    
    /* Container for map and insights (desktop layout) */
    .map-and-insights-container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 1.5rem 1.5rem 1.5rem 0;
        position: relative;
        z-index: var(--z-base, 1);
    }
    
    /* Map container layout for desktop */
    #attractions .map-container {
        width: 100%;
        margin: 0;
        position: relative;
        z-index: inherit;
        display: block;
    }
    
    /* Map dimensions for desktop */
    #attractions .map-container #map {
        width: 100%;
        height: 500px;
        position: relative;
        z-index: inherit;
    }
    
    /* Travel insights styling for desktop layout */
    .travel-insights {
        background: transparent;
        padding: 2rem 0 0 0;
        margin-top: 0;
        position: relative;
        z-index: inherit;
    }
    
    .insights-container {
        max-width: none;
        margin: 0;
        padding: 0;
    }
    
    /* 3x3 grid layout for desktop insights */
    .insights-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    /* Ensure filter panel overrides mobile hiding */
    #filters-panel.filters {
        display: block !important;
    }
    
    /* Trip Planner Section - Push content right of filter panel */
    #trip-planner .detail-container {
        margin-left: var(--filter-total-margin); /* Uses design token for consistent spacing */
        max-width: none; /* Allow content to use remaining space */
    }
}