/* ============================================================
   responsive.css — The Power of 30
   Mobile first · min-width only · Bootstrap 5 breakpoints
   Dark: mobile/tablet · Light: >= 1025px (desktop)
   ============================================================ */

/* ── SM 576px ── */
@media (min-width: 576px) {
    :root { --grid-cols: 3; --header-h: 80px; }
    .site-header { padding: 0 var(--space-lg); }
    .logo-img    { height: 56px; }
    .site-main   { padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .site-footer { padding: var(--space-xl) var(--space-lg); }
}

/* ── MD 768px ── */
@media (min-width: 768px) {
    :root { --grid-cols: 4; --grid-gap: 4px; --header-h: 72px; }
    .site-header    { padding: 0 var(--space-xl); }
    .logo-img       { height: 46px; }
    .site-main      { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .site-footer    { padding: var(--space-xl) var(--space-xl); }
    .nav-menu-label { font-size: 28px; }
    .lb-prev { left: var(--space-md); }
    .lb-next { right: var(--space-md); }
    .lb-stage { padding: 68px var(--space-xl) var(--space-md); }
}

/* ── LG 992px ── */
@media (min-width: 992px) {
    :root { --grid-cols: 5; --grid-gap: 4px; --header-h: 76px; }
    .site-header { padding: 0 var(--space-2xl); }
    .logo-img    { height: 50px; }
    .site-main   { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
    .site-footer { padding: var(--space-xl) var(--space-2xl); }
    .nav-menu    { width: 340px; }
    .lb-prev { left: var(--space-xl); }
    .lb-next { right: var(--space-xl); }
}

/* ══════════════════════════════════════════════════════
   DESKTOP >= 1025px — LIGHT THEME + SIDEBAR
   ══════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    :root {
        --grid-cols: 6;
        --grid-gap:  5px;
        --sidebar-w: 300px;
    }

    html { background-color: #f5f2ee; scroll-padding-top: 40px; }
    body { background-color: #f5f2ee; color: #1e1a17; }

    .site-header {
        position: fixed;
        top: 0; left: 0; right: auto;
        width: 300px;
        height: 100vh;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 48px 32px;
        background-color: #ffffff;
        border-bottom: none;
        border-right: 1px solid #e0d9d0;
        gap: 40px;
        overflow-y: auto;
    }

    .logo-link { height: auto; padding: 0; width: 100%; }
    .logo-img  { height: auto; width: 100%; max-width: 220px; object-fit: contain; }

    .menu-btn { display: none; }

    .nav-menu,
    .nav-menu[hidden] {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        overflow: visible !important;
        display: flex !important;
        flex: 1;
    }

    .nav-menu-close    { display: none; }
    .nav-menu-backdrop { display: none !important; }
    .nav-menu-list     { gap: 0; }

    .nav-menu-link {
        padding: 10px 0;
        border-bottom: 1px solid #e0d9d0;
        color: #9a8e82;
    }
    .nav-menu-link:hover,
    .nav-menu-link.is-active { color: #b07d5a; }

    .nav-menu-label { font-size: 18px; color: inherit; }
    .nav-menu-count { color: #c4b8ad; }

    .site-main {
        margin-left: 300px;
        padding-left: 48px;
        padding-right: 48px;
        padding-top: 48px;
    }

    .gallery-section  { border-bottom-color: #e0d9d0; }
    .section-header   { border-bottom-color: #e0d9d0; }
    .section-title    { color: #1e1a17; }
    .photo-item       { background-color: #ede9e3; }
    .empty-state      { color: #c4b8ad; }

    .site-footer {
        margin-left: 300px;
        padding-left: 48px;
        padding-right: 48px;
        background-color: #f5f2ee;
        color: #c4b8ad;
        border-top-color: #e0d9d0;
    }

    .lb-backdrop { background: rgba(16,12,9,.96) !important; }
}

/* ── XXL 1400px ── */
@media (min-width: 1400px) {
    :root { --grid-cols: 7; }
    .site-header { width: 320px; padding: 56px 40px; }
    .logo-img    { max-width: 260px; }
    .site-main   { margin-left: 320px; padding-left: 64px; padding-right: 64px; }
    .site-footer { margin-left: 320px; padding-left: 64px; padding-right: 64px; }
}

/* ── INTRO light (desktop) ── */
@media (min-width: 1025px) {
    .gallery-intro { border-bottom-color: #e0d9d0; }
    .intro-text    { color: #1e1a17; }
    .intro-sub     { color: #9a8e82; }
}