/* Mobile-first responsive styles */

/* Mobile Layout Adjustments */
@media (max-width: 768px) {
    /* Header */
    .header .container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 15px;
    }
    
    .logo {
        font-size: 1.25rem;
    }
    
    .nav {
        gap: 1rem;
        justify-content: center;
    }
    
    .nav-link {
        font-size: 0.875rem;
    }
    
    /* Main Layout */
    .main {
        flex-direction: column;
        min-height: calc(100vh - 400px);
    }
    
    /* Welcome Content within Filter Panel */
    .filter-panel .welcome-content {
        padding: 15px;
        margin: 5px;
    }
    
    .filter-panel .welcome-content h3 {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }
    
    .filter-panel .welcome-content p {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    
    /* Filter Panel */
    .filter-panel {
        width: 100%;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateX(-100%);
        z-index: 1000;
        padding: 1rem 15px;
        background: #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .filter-panel--open {
        transform: translateX(0);
    }
    
    .filter-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    
    .filter-header h2 {
        font-size: 1.125rem;
    }
    
    .filter-toggle {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .filter-content {
        gap: 1rem;
    }
    
    .filter-group {
        gap: 0.375rem;
    }
    
    .filter-group label {
        font-size: 0.75rem;
    }
    
    .filter-input,
    .filter-select {
        padding: 0.625rem;
        font-size: 0.75rem;
    }
    
    .filter-options {
        gap: 0.375rem;
    }
    
    .filter-option {
        padding: 0.375rem;
        font-size: 0.75rem;
    }
    
    .filter-tags {
        gap: 0.375rem;
    }
    
    .filter-tag {
        padding: 0.25rem 0.375rem;
        font-size: 0.625rem;
    }
    
    .filter-clear {
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
        margin-top: 0.75rem;
    }
    
    /* Map Container */
    .map-container {
        height: 60vh;
        max-height: 200px;
    }
    
    .map {
        min-height: 400px;
    }
    
    .map-controls {
        top: 0.5rem;
        right: 0.5rem;
        gap: 0.375rem;
    }
    
    .map-control-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
    
    /* Project Cards */
    .project-cards {
        padding: 1rem;
    }
    
    .project-card {
        max-width: 100%;
        max-height: 90vh;
    }
    
    .project-card__header {
        padding: 1rem;
    }
    
    .project-card__header h3 {
        font-size: 1.125rem;
    }
    
    .project-card__close {
        font-size: 1.25rem;
    }
    
    .project-card__content {
        padding: 1rem;
    }
    
    .project-card__image img,
    .project-card__image-img {
        height: 150px;
    }
    
    .project-card__description {
        font-size: 0.875rem;
    }
    
    .project-card__category {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
    }
    
    .project-card__tag {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
    
    .project-card__actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .btn {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Footer */
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    
    .footer-section h3,
    .footer-section h4 {
        font-size: 1rem;
    }

    .footer-section ul li {
        margin-left:0px !important;
    }
    
    .footer-section p,
    .footer-section ul li a {
        font-size: 0.875rem;
    }
    
    .footer-bottom {
        font-size: 0.75rem;
    }
}

/* Tablet Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .filter-panel {
        width: 280px;
    }
    
    .map-container {
        height: calc(100vh - 140px);
    }
    
    .project-card {
        max-width: 450px;
    }
}

/* Large Mobile Devices */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .header .container {
        padding: 0.75rem 15px;
    }
    
    .logo {
        font-size: 1.125rem;
    }
    
    .nav {
        gap: 0.75rem;
    }
    
    .nav-link {
        font-size: 0.75rem;
        padding: 0.375rem 0;
    }
    
    .filter-panel {
        top: 70px;
        padding: 0.75rem 15px;
    }
    
    .filter-header h2 {
        font-size: 1rem;
    }
    
    .filter-toggle {
        padding: 0.375rem 0.625rem;
        font-size: 0.625rem;
    }
    
    .map-container {
        height: 50vh;
        min-height: 350px;
    }
    
    .map {
        min-height: 350px;
    }
    
    .map-controls {
        top: 0.375rem;
        right: 0.375rem;
    }
    
    .map-control-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
    }
    
    .project-cards {
        padding: 0.75rem;
    }
    
    .project-card__header {
        padding: 0.75rem;
    }
    
    .project-card__header h3 {
        font-size: 1rem;
    }
    
    .project-card__content {
        padding: 0.75rem;
    }
    
    .project-card__image img,
    .project-card__image-img {
        height: 120px;
    }
    
    .project-card__description {
        font-size: 0.75rem;
    }
    
    .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-link {
        padding: 0.75rem 0.5rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .filter-toggle {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    .filter-option {
        min-height: 44px;
        padding: 0.75rem;
    }
    
    .filter-tag {
        min-height: 32px;
        padding: 0.5rem 0.75rem;
    }
    
    .map-control-btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    .btn {
        min-height: 44px;
        padding: 0.75rem 1.5rem;
    }
    
    .project-card__close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Remove hover effects on touch devices */
    .nav-link:hover,
    .filter-option:hover,
    .filter-tag:hover,
    .map-control-btn:hover,
    .btn:hover,
    .project-card__close:hover {
        transform: none;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .main {
        flex-direction: row;
    }
    
    .filter-panel {
        width: 250px;
        position: relative;
        transform: translateX(0);
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        height: 100vh;
        overflow-y: auto;
    }
    
    .map-container {
        height: 100vh;
        min-height: auto;
    }
    
    .map {
        min-height: auto;
        height: 100%;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .custom-marker {
        border-width: 2px;
    }
    
    .marker-cluster-small,
    .marker-cluster-medium,
    .marker-cluster-large {
        border-width: 2px;
    }
}

/* Print Styles */
@media print {
    .filter-panel,
    .map-controls,
    .project-cards,
    .header,
    .footer {
        display: none !important;
    }
    
    .main {
        display: block;
    }
    
    .map-container {
        height: auto;
        min-height: 400px;
    }
    
    .map {
        min-height: 400px;
    }
}