/* MOBILE-ONLY STYLES */
@media (hover: none) and (pointer: coarse) {

    body {
        padding: 0 5px;
        font-size: 1rem;
        overscroll-behavior-y: contain;
    }

    .header-banner {
         height: 100px;
         background-size: 90% 90%;
    }

    /* TABS */
    #tab-container {
        margin-top: -13px !important;
    }
    #tab-bar {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        scrollbar-width: none;
    }
    #tab-bar::-webkit-scrollbar { display: none; }

    #tab-gallery, .gallery-wrapper {
        min-height: 75vh; /* full screen height */
        padding-bottom: 40px; /* breathing room */
    }

    .tab-btn {
        padding: 12px 18px;
        font-size: 1rem;
        border-radius: 12px;
        margin: 6px;
        transform: none !important; 
    }

    .tab-btn:hover {
        transform: none !important;
        background: var(--tab-bg, #ccc);
    }

    /* GALLERY — one column by default */
    #image-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding:0;

    }

    /* GALLERY — two columns when screen is wide enough */
    @media (min-width: 380px) and (hover: none) and (pointer: coarse) {
        #image-container {
            grid-template-columns: 1fr 1fr;
        }
    }

    .image {
        height: 220px !important;
        border-radius: 12px;
    }

    .card {
        margin: 0;
    }

    .card p {
        text-align: center;
        margin-top: 4px;
        font-size: 0.95rem;
    }

    @media (max-width: 600px) {
        .gallery-subtab-btn {
            padding: 7px 14px;
            font-size: 14px;
            border-radius: calc(var(--radius) - 2px);
        }
    }

    /* LIGHTBOX MOBILE */
    #lightbox {
        align-items: center;
        justify-content: center;
        padding: 10px;
        touch-action: none;  /* required for pinch + swipe */
    }

    .lightbox-img {
        max-width: 100%;
        max-height: 80vh;
        border-radius: 12px;
        transition: transform 0.2s ease-out;
    }

    .lightbox-caption {
        font-size: 0.9rem;
        text-align: center;
        margin-top: 10px;
        padding: 0 10px;
    }

    .close {
        top: 10px;
        right: 10px;
        font-size: 32px;
        padding: 12px;
    }
}