/**
 * ==============================================================================
 * SADRA VISUALS — ARTBOOK PHOTOGRAPHY GALLERY DESIGN SYSTEM
 * LAYER 5.2: MOBILE-FIRST FLUID GEOMETRY & TOUCH ERGONOMICS
 * ==============================================================================
 * Enforces:
 * 1. Zero Horizontal Overflow across all viewports
 * 2. Responsive Breakpoint Matrix (< 380px, < 480px, < 768px, < 1024px)
 * 3. Fluid Auto-Fit Grids with clamp() Gutters and Edge-to-Edge Full-Bleed
 * 4. Touch Ergonomics: 44px minimum tap targets & 16px iOS anti-zoom inputs
 * 5. Adaptive Bottom-Sheet Modals with momentum scrolling
 * 6. Notch and Home Indicator Safe-Area Boundary Protection
 */

/* ==============================================================================
   1. ZERO HORIZONTAL OVERFLOW ENFORCEMENT
   ============================================================================== */
html, body {
    max-width: 100%;
    overflow-x: clip;
}

.app-viewport,
.viewport-section,
.container,
.gallery-container,
.gallery-feed,
.hero-container,
.modal-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Hard wrap technical strings, hashes, EXIF specifications, and URLs */
.break-text,
.exif-spec,
.photo-hash,
.url-text,
code, pre {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ==============================================================================
   2. FLUID AUTO-FIT GRID & EDGE-TO-EDGE FOUNDATIONS
   ============================================================================== */
:root {
    --grid-gutter: clamp(8px, 2vw, 20px);
    --grid-min-col: clamp(260px, 45vw, 400px);
    --card-min-h: clamp(220px, 35vh, 480px);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-col), 1fr));
    gap: var(--grid-gutter);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--grid-gutter) 0;
}

/* Edge-to-Edge Grid on Mobile devices */
.edge-to-edge-grid {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Card Aspect Ratio Wrapper with Zero-Jank CLS prevention */
.photo-card-frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.photo-card-frame img,
.photo-card-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    vertical-align: middle;
}

/* ==============================================================================
   3. TOUCH ERGONOMICS & MINIMUM TAP TARGETS (>= 44px)
   ============================================================================== */
button,
.btn,
.btn-pill,
.btn-icon,
.nav-link,
.dock-btn,
.filter-chip,
.dropdown-trigger,
.modal-close-btn,
[role="button"],
input[type="submit"],
input[type="button"] {
    min-height: var(--min-tap-target);
    min-width: var(--min-tap-target);
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* iOS Safari Auto-Zoom Prevention: Guarantee 16px minimum font size */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-size: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* ==============================================================================
   4. ADAPTIVE MODALS & BOTTOM-SHEETS (< 768px)
   ============================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--bg-overlay);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 24px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    position: relative;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    background: var(--bg-modal);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    transition: transform var(--transition-spring), opacity 0.2s ease;
}

.modal-backdrop.is-active .modal-card {
    transform: translateY(0) scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-modal);
    position: sticky;
    top: 0;
    z-index: 2;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}

.sheet-drag-handle {
    display: none;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-dim);
    margin: 8px auto 4px auto;
}

/* Transform to Bottom-Sheet on Mobile Screens (< 768px) */
@media (max-width: 768px) {
    .modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .modal-card {
        max-width: 100%;
        max-height: 88vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
        transform: translateY(100%);
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }

    .modal-backdrop.is-active .modal-card {
        transform: translateY(0);
    }

    .sheet-drag-handle {
        display: block;
    }
}

/* ==============================================================================
   5. RESPONSIVE BREAKPOINT MATRIX
   ============================================================================== */

/* ------------------------------------------------------------------------------
   A. Tablet Viewports (769px to 1024px)
   ------------------------------------------------------------------------------ */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --grid-min-col: 300px;
        --grid-gutter: 14px;
    }
}

/* ------------------------------------------------------------------------------
   B. Mobile / Phablet Viewports (< 768px)
   ------------------------------------------------------------------------------ */
@media (max-width: 768px) {
    :root {
        --header-height: 56px;
        --dock-height: 52px;
        --grid-min-col: 100%;
        --grid-gutter: 12px;
    }

    /* Edge-to-edge container margins */
    .container {
        padding-left: clamp(10px, 2.5vw, 16px);
        padding-right: clamp(10px, 2.5vw, 16px);
    }

    /* Stack multi-column elements smoothly */
    .responsive-flex-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Ensure tables can scroll horizontally without breaking layout */
    .table-scroll-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ------------------------------------------------------------------------------
   C. Compact Mobile Viewports (< 480px)
   ------------------------------------------------------------------------------ */
@media (max-width: 480px) {
    :root {
        --grid-gutter: 8px;
    }

    .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Full-bleed photo cards on compact screens */
    .edge-to-edge-grid {
        padding-left: 0;
        padding-right: 0;
    }

    .photo-card-frame {
        border-radius: var(--radius-sm);
    }

    .btn-pill {
        padding: 0 12px;
        font-size: 0.78rem;
    }
}

/* ------------------------------------------------------------------------------
   D. Ultra-Compact Mobile (< 380px) - iPhone SE, Mini Devices
   ------------------------------------------------------------------------------ */
@media (max-width: 380px) {
    :root {
        --grid-gutter: 6px;
    }

    .container {
        padding-left: 6px;
        padding-right: 6px;
    }

    .brand-title {
        display: none; /* Icon-only brand mark on ultra-small screens */
    }

    .hero-headline {
        font-size: 1.45rem;
    }

    .hero-subhead {
        font-size: 0.88rem;
    }
}

/* ==============================================================================
   6. NOTCH & HOME INDICATOR SAFE-AREA INTEGRATIONS
   ============================================================================== */
.site-header {
    padding-top: env(safe-area-inset-top, 0px);
}
/* Safe area for floating dock handled via bottom offset */

.toast-container {
    bottom: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px) + 16px);
    right: max(16px, env(safe-area-inset-right, 0px));
    left: auto;
    width: auto;
    max-width: calc(100vw - 32px);
    align-items: flex-end;
}

/* ==============================================================================
   7. SPA VIEWPORT TRANSITIONS & SECTION VISIBILITY
   ============================================================================== */
.viewport-section {
    display: none;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.viewport-section.active {
    display: block;
    opacity: 1;
}

/* ==============================================================================
   8. DEDICATED BACK TO TOP (GO TOP) CONTROLLER
   ============================================================================== */
body > .back-to-top,
body > .back-to-top-btn {
    position: fixed;
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    right: max(24px, env(safe-area-inset-right, 0px));
    width: 46px;
    height: 46px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-full, 9999px);
    background: rgba(18, 22, 34, 0.88);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.16));
    color: var(--accent-gold, #d4af37);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 450;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(212, 175, 55, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.92);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.25s,
                background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body > .back-to-top.visible,
body > .back-to-top.is-visible,
body > .back-to-top-btn.visible,
body > .back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

body > .back-to-top:hover,
body > .back-to-top-btn:hover {
    background: var(--accent-gold, #d4af37);
    color: #08090c;
    border-color: var(--accent-gold, #d4af37);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(212, 175, 55, 0.35);
}

body > .back-to-top:active,
body > .back-to-top-btn:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

body > .back-to-top:focus-visible,
body > .back-to-top-btn:focus-visible {
    outline: 2px solid var(--accent-gold, #d4af37);
    outline-offset: 3px;
}

.back-to-top-icon {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform 0.2s ease;
}

.back-to-top:hover .back-to-top-icon,
.back-to-top-btn:hover .back-to-top-icon {
    transform: translateY(-2px);
}

/* Light Theme Support */
[data-theme="light"] body > .back-to-top,
[data-theme="light"] body > .back-to-top-btn {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(180, 140, 30, 0.35);
    color: #b38914;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 16px rgba(180, 140, 30, 0.1);
}

[data-theme="light"] body > .back-to-top:hover,
[data-theme="light"] body > .back-to-top-btn:hover {
    background: #b38914;
    color: #ffffff;
    border-color: #b38914;
    box-shadow: 0 12px 32px rgba(180, 140, 30, 0.28);
}

/* RTL Layout Alignment */
[dir="rtl"] body > .back-to-top,
[dir="rtl"] body > .back-to-top-btn {
    right: auto;
    left: max(24px, env(safe-area-inset-left, 0px));
}

/* Inline Dock Alignment — prevents floating above or overlapping dock */
.lens-dock .back-to-top,
.lens-dock .back-to-top-btn {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
}

@media (max-width: 768px) {
    body > .back-to-top,
    body > .back-to-top-btn {
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: calc(var(--dock-height, 58px) + env(safe-area-inset-bottom, 0px) + 12px);
        width: 40px;
        height: 40px;
    }

    [dir="rtl"] body > .back-to-top,
    [dir="rtl"] body > .back-to-top-btn {
        right: auto;
        left: max(16px, env(safe-area-inset-left, 0px));
    }

    .lens-dock .back-to-top,
    .lens-dock .back-to-top-btn {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
    }
}