/* Responsive Design - Enhanced for three-column layout */

/* Large Desktop */
@media (min-width: 1400px) {
    .grid-display {
        grid-template-columns: 350px 1fr 250px;
    }
    
    .title-hero {
        font-size: 2.8rem;
    }

    .top-bar {
        padding: 0.5rem !important;
    }

    /* html, body {
        overflow: hidden;
    } */
}

/* Standard Desktop */
@media (max-width: 1200px) {
    .grid-display {
        grid-template-columns: 280px 1fr 220px;
        gap: 0.5rem;
    }
    
    .title-hero {
        font-size: 2.2rem;
    }
    
    .top-bar {
        padding: 0.5rem !important;
    }
/* 
    html, body {
        overflow: hidden;
    } */
}

/* Large Tablet */
@media (max-width: 1024px) {
    .grid-display {
        grid-template-columns: 250px 1fr 200px;
    }
    
    .title-hero {
        font-size: 2rem;
    }
    
    .top-bar nav ul {
        gap: 0.75rem;
    }
    
    .col1, .col2 {
        font-size: 0.85rem;
    }
}

/* Tablet Portrait */
@media (max-width: 768px) {
    .top-bar {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
    }
    
    .title-hero {
        font-size: 1.8rem;
    }
    
    .top-bar nav ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .grid-display {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        gap: 0.5rem;
    }
    
    .col1 {
        order: 1;
        max-height: 40vh;
        /* overflow-y: visible !important; */
    }
    
    .map-col {
        order: 2;
        max-height: 50vh;
    }
    
    .col2 {
        order: 3;
        max-height: 40vh;
    }
    
    #map {
        height: 50vh;
    }
    
    /* Make panels collapsible on mobile */
    .col1, .col2 {
        position: relative;
    }
    
    .mobile-panel-header {
        background-color: var(--primary-color);
        color: white;
        padding: 0.5rem;
        margin: -0.5rem -0.5rem 0.5rem -0.5rem;
        font-weight: 600;
        cursor: pointer;
        border-radius: 0.375rem 0.375rem 0 0;
    }
    
    .mobile-panel-content {
        transition: max-height 0.3s ease;
        overflow: hidden;
    }
    
    .mobile-panel-content.collapsed {
        max-height: 0;
    }
}

/* Mobile Landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .grid-display {
        grid-template-columns: 200px 1fr 180px;
        grid-template-rows: 1fr;
    }
    
    .col1, .col2 {
        max-height: 70vh;
        font-size: 0.8rem;
    }
    
    .map-col {
        max-height: 70vh;
    }
    
    #map {
        height: 70vh;
    }
    
    .title-hero {
        font-size: 1.5rem;
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    main {
        padding: 0.5rem;
    }
    
    .top-bar {
        padding: 0.5rem !important;
    }
    
    .title-hero {
        font-size: 1.6rem;
    }
    
    .top-bar nav ul {
        font-size: 0.9rem;
    }
    
    .grid-display {
        gap: 0.25rem;
    }
    
    .col1, .col2 {
        padding: 0.25rem;
        font-size: 0.8rem;
        max-height: 35vh;
    }
    
    #map {
        height: 40vh;
    }
    
    .map-col {
        max-height: 40vh;
    }
    
    /* Touch-friendly button sizing */
    button {
        min-height: 44px;
        font-size: 0.9rem;
    }
    
    select {
        min-height: 44px;
        font-size: 1rem; /* Prevent zoom on iOS */
    }
    
    /* Layer controls adjustments */
    ul.sidebar li,
    ul.layer-checklist li {
        margin-bottom: 0.5rem;
    }
    
    label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem;
        min-height: 40px;
    }
    
    input[type="checkbox"] {
        transform: scale(1.2);
        margin-right: 0.5rem;
    }
}

/* Very Small Mobile */
@media (max-width: 320px) {
    .title-hero {
        font-size: 1.4rem;
    }
    
    .top-bar nav ul {
        font-size: 0.8rem;
    }
    
    .col1, .col2 {
        padding: 0.25rem;
        max-height: 30vh;
    }
    
    #map {
        height: 35vh;
    }
    
    .map-col {
        max-height: 35vh;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .grid-display > div {
        border: 2px solid var(--primary-color);
    }
    
    #map {
        border-width: 3px !important;
    }
    
    button {
        border: 2px solid currentColor;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .mobile-panel-content {
        transition: none;
    }
    
    main {
        transition: none;
    }
    
    .leaflet-control-zoom a {
        transition: none;
    }
}

/* Dark mode support (if Pico CSS theme switching is used) */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: rgb(45, 55, 72);
    }
    
    .grid-display > div {
        background-color: var(--background-color);
    }
}

/* Print styles */
@media print {
    .top-bar nav,
    .col1,
    .col2 {
        display: none;
    }
    
    .grid-display {
        grid-template-columns: 1fr;
    }
    
    #map {
        height: 80vh;
        border: 2px solid black;
    }
    
    .title-hero {
        color: black;
    }
}