/* ============================================================
   UNI.ART — responsive.css
   ALL @media blocks live here per Rule 11. Zero standalone
   rules. Loaded AFTER main.css.

   Breakpoints (recommended in Rule 11):
     - max  767px → mobile
     - max  999px → small tablet (info stacks)
     - min 1001px → tablet+ (filter / menu panels become docked)
     - min 1200px → large (detail layout 42/58 split)
     - min 1440px → wide
   ============================================================ */

/* ── min-width 1001px: filter + menu panels dock to right half ── */
@media (min-width: 1001px) {
    .filter-panel {
        left: auto;
        right: 0;
        width: 50%;
        border-left: 1px solid var(--border-color);
        border-radius: 0;
        box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.08);
    }

    .menu-panel {
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(100%);
        width: 50%;
        border: 1px solid var(--border-color);
        border-bottom: none;
        border-radius: 4px 4px 0 0;
    }
    .menu-panel.open {
        transform: translateX(-50%) translateY(0);
    }
}

/* ── min-width 1200px: detail layout 42/58 split ──────────── */
@media (min-width: 1200px) {
    .detail-col-left  { width: 42%; }
    .detail-info-wrap { width: 58%; }
}

/* ── max-width 999px: detail info columns stack ──────────── */
@media (max-width: 999px) {
    .detail-info-top,
    .detail-info-bottom { flex-direction: column; }
    .detail-col-info-b  { padding-top: 24px; }
    .detail-bottom-b    { padding-top: 24px; }
}

/* ── max-width 767px: mobile carousel + stacking ────────── */
@media (max-width: 767px) {
    .detail-layout {
        flex-direction: column;
    }
    .detail-gallery-wrap {
        display: block;
        position: relative;
        width: 100%;
    }
    .detail-col-left {
        width: 100%;
        height: 50vh;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: relative;
    }
    .detail-col-left::-webkit-scrollbar { display: none; }
    /* vendor/admin edit button must not occupy a carousel slot on mobile */
    .detail-col-left > .wcfm_buttons { position: absolute; top: 8px; left: 8px; z-index: 6; margin: 0; }

    .detail-img-wrap {
        flex-shrink: 0;
        width: 100%;
        height: 50vh;
        scroll-snap-align: start;
    }
    .detail-img-wrap img {
        height: 100%;
        object-fit: contain;
    }

    .detail-carousel-dots {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 6px;
        z-index: 5;
    }
    .detail-carousel-dot {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        opacity: 1;
        cursor: pointer;
    }
    .detail-carousel-dot::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--text);
        opacity: 0.3;
    }
    .detail-carousel-dot.active::before { opacity: 1; }

    .detail-info-wrap {
        width: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
    }
    .detail-info-top,
    .detail-info-bottom { flex-direction: column; }
    .detail-col-info-b  { padding-top: 24px; }
    .detail-bottom-b    { padding-top: 24px; }
    .detail-info-bottom { padding-top: 40px; }

    /* Tighter gallery on mobile */
    .gallery--artist {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* ── min-width 1440px: wide hero proportions ────────────── */
@media (min-width: 1440px) {
    .artist__meta {
        padding-top: var(--gap-xl);
        padding-bottom: var(--gap-xl);
    }
}

/* ── Reduced-motion preference (Rule 11) ────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Print styles (Rule 11) ─────────────────────────────── */
@media print {
    .bottom-nav,
    .menu-panel,
    .filter-panel,
    .panel-backdrop,
    .scroll-toggle-wrap,
    .login-overlay,
    .detail-back,
    .active-filter-bar { display: none !important; }

    body {
        padding-bottom: 0;
        height: auto;
        display: block;
    }
    .sart-columns {
        display: block;
        overflow: visible;
        height: auto;
    }
    .sart-col {
        display: block;
        overflow: visible;
    }
    .grid-item { page-break-inside: avoid; }

    .detail-page { position: static; opacity: 1; }
    .detail-layout { display: block; }
    .detail-col-left,
    .detail-info-wrap { width: 100%; position: static; }
}

/* === Mobile: momentum scroll for split & unified (added) ==========
   split/unified use inner scroll containers (each .sart-col in split, the
   .sart-columns in unified). Give them iOS momentum scrolling. The earlier
   page-scroll override that lived here was REMOVED, so split/unified behave
   on phones exactly as on desktop (split = columns scroll independently,
   unified = both columns scroll together). */
.sart-col,
.sart-columns.unified {
    -webkit-overflow-scrolling: touch;
}

/* === Reliable tapping on touch controls (added) ===================
   Removes the double-tap-zoom delay/ambiguity on the custom (non-native)
   span/div controls so taps register on the first touch. */
.grid-item,
.tile-info-actions span,
.action-save,
.action-open,
.detail-back,
.detail-cta-add {
    touch-action: manipulation;
}

/* === Detail overlay on phones: smooth its own scroll (added) ========
   The original mobile block earlier in this file already stacks the detail
   layout AND runs the horizontal swipe carousel for multi-image galleries
   (.detail-col-left: overflow-x:auto; scroll-snap-type:x; position:relative).
   Here we ONLY smooth the overlay's own scroll and stop it chaining to the
   page behind. We must NOT override .detail-col-left overflow/position or the
   carousel breaks (images spill sideways, dots detach). */
@media (max-width: 767px) {
    .detail-page {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* === FIX: hidden login overlay must not intercept taps (added) =======
   .auth-step.is-active sets pointer-events:auto, which overrides the hidden
   .login-overlay's pointer-events:none -- so the invisible (opacity:0) active
   step kept capturing taps/clicks over the centre of the screen, blocking the
   tiles / Save / Open beneath it (worse on phones, where the centred login box
   covers most of the width). Force the whole overlay subtree non-interactive
   whenever it is not .visible. When it IS .visible the normal rules apply and
   the login form works as before. */
.login-overlay:not(.visible),
.login-overlay:not(.visible) * {
    pointer-events: none !important;
}