/* =====================================================
   PHONE LAYOUT (≤ 768px)
   Loaded after the page's own styles so these win.
   Goals: header in one compact row, a slim nav that
   doesn't eat the screen, filters folded away, and a
   two-column gallery you can scroll through quickly.
   ===================================================== */

/* Desktop never shows the phone filter button */
.filter-toggle { display: none; }

@media (max-width: 768px) {

    /* ---------- Header: logo + title on one row, icons top-right ---------- */
    header {
        padding: 0.75rem 1rem;
        text-align: left;
    }

    .logo-title-container {
        justify-content: flex-start;
        gap: 0.75rem;
        padding-right: 96px;            /* room for 中 + cart buttons */
    }

    .header-logo {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    .logo {
        font-size: 1.3rem;
        margin-bottom: 0.1rem;
    }

    .subtitle {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .header-icons {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        margin: 0;
        gap: 8px;
    }

    .header-icon {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .language-toggle {
        position: static;
        margin: 0;
    }

    /* ---------- Nav: one slim row that scrolls sideways if needed ---------- */
    nav {
        padding: 0.4rem 0;
    }

    .nav-container {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.25rem;
        padding: 0 0.75rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .nav-container::-webkit-scrollbar { display: none; }

    .nav-btn {
        flex: 0 0 auto;
        padding: 0.45rem 0.8rem;
        font-size: 0.95rem;
        white-space: nowrap;
    }

    main { padding: 0.75rem; }

    /* ---------- Filters: folded behind one button, not sticky ---------- */
    .filter-container {
        position: static;
        padding: 0.5rem 0;
        border-bottom: none;
    }

    .filter-toggle {
        display: block;
        width: 100%;
        padding: 0.7rem 1rem;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        background: #f8f9fa;
        color: #2c3e50;
        font-size: 0.95rem;
        text-align: left;
        cursor: pointer;
    }

    .filter-toggle::after {
        content: "▾";
        float: right;
        transition: transform 0.2s ease;
    }

    .filter-container.open .filter-toggle::after { transform: rotate(180deg); }

    .filter-container .filter-menu { display: none; padding: 0.75rem 0 0; }
    .filter-container.open .filter-menu { display: block; }

    .results-info { font-size: 0.85rem; margin: 0.5rem 0; }

    /* ---------- Gallery: two columns, compact cards ---------- */
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .gallery-item-image { aspect-ratio: 1 / 1; }

    .gallery-item-info { padding: 0.6rem 0.7rem 0.75rem; }

    .gallery-item-info h3 {
        font-size: 0.95rem;
        line-height: 1.3;
        margin-bottom: 0.3rem;
    }

    /* The poem/description is for the lightbox; keep cards tidy */
    .gallery-item-info p { display: none; }

    .gallery-item .artwork-meta {
        flex-wrap: wrap;
        gap: 0.15rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Featured: show each painting whole on phones - never crop the artwork */
@media (max-width: 768px) {
    .featured-grid .featured-item .featured-image-container,
    .featured-grid .featured-item .featured-image-container img {
        min-height: 0;
    }

    .featured-grid .featured-item .featured-image-container img {
        height: auto;
        object-fit: contain;
    }
}

/* Very narrow phones: one column reads better */
@media (max-width: 340px) {
    .gallery-grid { grid-template-columns: 1fr; }
}