/* ===== RESPONSIVE STYLES - SUPER MOBILE OPTIMIZED (v4.0) ===== */

@media (max-width: 1200px) {
    .painting-card {
        width: 420px;
    }
}

@media (max-width: 900px) {
    .paintings-grid {
        padding: 0 5vw;
        gap: 60px;
    }

    .painting-card {
        width: 360px;
        border-width: 10px;
    }

    .filter-dropdown-wrapper {
        top: 22px;
        right: 20px;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 75px;
    }

    /* Fixed top header with side safe zones for hamburger and filter button */
    .header {
        background: rgba(22, 16, 13, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 10px 75px 8px 75px;
        height: auto;
        min-height: var(--header-height);
        border-bottom: 1px solid rgba(212, 175, 55, 0.25);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }

    .header h1 {
        font-size: 1.35rem;
        letter-spacing: 2px;
        line-height: 1.1;
    }

    .header p {
        font-size: 0.65rem;
        letter-spacing: 2px;
        margin-top: 2px;
    }

    .memorial-header-dedication {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }

    /* Hamburger placement */
    .hamburger-menu {
        top: 18px;
        left: 18px;
        padding: 6px;
    }

    .hamburger-menu span {
        width: 28px;
        height: 3px;
        margin: 5px 0;
    }

    /* Filter dropdown button top right on mobile - ONLY ARROW/ICON */
    .filter-dropdown-wrapper {
        top: 16px;
        right: 16px;
        z-index: 1001;
    }

    .filter-dropdown-btn {
        padding: 8px 13px;
        font-size: 0.95rem;
        border-radius: 50px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    }

    .filter-dropdown-btn span.btn-label {
        display: none !important;
    }

    .filter-dropdown-btn .btn-arrow {
        font-size: 1rem;
        margin: 0;
        line-height: 1;
    }

    .filter-dropdown-menu {
        width: 230px;
        max-width: 85vw;
        right: 0;
        top: calc(100% + 8px);
        padding: 6px;
    }

    .dropdown-item {
        padding: 12px 14px;
        font-size: 0.78rem;
        min-height: 44px; /* Touch target */
    }

    /* Natural mobile layout & native smooth scrolling */
    html, body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: relative !important;
    }

    .main-content {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: flex-start !important;
    }

    .paintings-grid-container {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: visible !important;
        padding: 95px 16px 20px 16px !important; /* Clears header */
        margin: 0 !important;
        z-index: 5;
    }

    .paintings-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: visible !important;
        padding: 0 !important;
        gap: 36px !important;
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        align-items: center !important;
    }

    .painting-card {
        position: relative !important;
        width: 100% !important;
        max-width: 440px !important;
        height: auto !important;
        border-radius: 4px !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        margin: 0 auto !important;
        border-width: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
        outline-offset: -6px !important;
    }

    .painting-images {
        height: 260px !important;
        width: 100% !important;
    }

    .painting-card:hover {
        transform: none !important;
    }

    .painting-info {
        position: static !important;
        width: auto !important;
        margin: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        padding: 20px 16px !important;
        min-height: auto !important;
        background: #fffcf5 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .painting-info::before,
    .painting-info::after {
        display: none !important;
    }

    /* Mobile Footer: STRICTLY AT THE VERY BOTTOM AFTER ALL PAINTINGS */
    .footer {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        margin-top: 50px !important;
        margin-bottom: 0 !important;
        z-index: 10 !important;
        display: block !important;
        clear: both !important;
        padding: 25px 15px !important;
    }

    .painting-title {
        font-size: 1.15rem;
        letter-spacing: 1px;
    }

    .painting-description {
        font-size: 0.88rem;
        min-height: auto;
    }

    /* Controls hidden on mobile */
    .carousel-controls,
    .carousel-indicators {
        display: none !important;
    }

    /* Full width Sidebar on Mobile */
    .sidebar {
        width: 100%;
        left: -100%;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 8px 60px 6px 60px;
    }

    .header h1 {
        font-size: 1.15rem;
        letter-spacing: 1.5px;
    }

    .filter-dropdown-btn {
        padding: 6px 10px;
        font-size: 0.68rem;
    }

    .filter-dropdown-btn .btn-arrow {
        font-size: 0.65rem;
    }

    .painting-card {
        width: calc(100vw - 24px);
        max-width: 360px;
        min-height: 400px;
    }

    .painting-images {
        height: 230px;
    }

    .painting-info {
        padding: 14px 10px;
    }

    .painting-title {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .painting-price {
        font-size: 1.25rem;
    }
}

@media (max-width: 360px) {
    .header h1 {
        font-size: 1.05rem;
    }

    .filter-dropdown-btn span.btn-label {
        max-width: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}