/* ═══════════════════════════════════════════════════════════════════
   mobile.css  —  ALL mobile overrides live here. Desktop is untouched.
   Loaded last in index.php so cascade order wins without !important.
   Breakpoint: ≤ 768px
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Variable overrides ──────────────────────────────────────
       Zero out nav/sidebar widths — content fills the full frame.
       Frame padding shrinks to a slim inset.
       Masonry drops to 2 columns.
       Minimal type scale fix — full scale comes in step 7.        */
    :root {
        --nav-width:        0px;
        --sidebar-width:    0px;
        --frame-padding-x:  12px;
        --frame-padding-y:  16px;
        --scroll-fade:      32px;
        --masonry-columns:  2 140px;
        --mobile-nav-h:     56px;   /* height of the bottom nav strip */
        --mobile-top-h:     48px;   /* height of the top strip        */

        /* Stop 96px titles from wrecking the layout before step 7 */
        --text-title:       40px;
        --text-eyebrow:     14px;
    }


    /* ── Hide desktop strips ─────────────────────────────────────
       Content border shimmers are desktop-only.
       Navbar is re-shown in step 2 as the bottom strip.
       Sidebar is re-shown in step 3 as the top strip.             */
    .content-border-shimmer,
    .content-border-shimmer-2 {
        display: none;
    }


    /* ── Content → horizontal rail ───────────────────────────────
       The content element becomes the rail the ribbon slides through.
       Sections sit inside it side by side.
       Vertical scroll is handled per-section, not here.            */
    .content {
        /* No padding here — each section handles its own spacing */
        padding: 0;

        /* Horizontal ribbon layout */
        display: flex;
        flex-direction: row;

        /* Native horizontal scroll + snap */
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;

        /* Prevent iOS back-gesture firing on the leftmost section */
        overscroll-behavior-x: none;

        /* Remove the vertical fade — sections handle their own */
        mask-image: none;
        -webkit-mask-image: none;

        /* Scrollbar already hidden in main.css (scrollbar-width: none) */
    }


    /* ── Each section → one horizontal slot ─────────────────────
       Every gallery-section becomes a full-viewport-width slot.
       Swiping left/right snaps between them.
       Long content (galleries, about) scrolls vertically inside.  */
    .gallery-section {
        /* One slot = full content-area width */
        min-width: 100%;
        width:     100%;
        height:    100%;
        flex-shrink: 0;

        /* Snap anchor */
        scroll-snap-align: start;
        scroll-margin-top: 0;

        /* Vertical scroll within the slot */
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;

        /* Own spacing */
        padding:       var(--padding);
        margin-bottom: 0;
        box-sizing:    border-box;

        /* Vertical fade at the top and bottom of each section */
        mask-image: linear-gradient(
            to bottom,
            transparent 0px,
            black var(--scroll-fade),
            black calc(100% - var(--scroll-fade)),
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0px,
            black var(--scroll-fade),
            black calc(100% - var(--scroll-fade)),
            transparent 100%
        );
    }

    .gallery-section::-webkit-scrollbar {
        display: none;
    }


    /* ── Welcome section — reset desktop special-casing ──────────
       Desktop pulls the welcome section above the frame with a
       negative margin-top and sizes it to 100dvh.
       On mobile it's just a normal horizontal slot.                */
    #section-welcome {
        margin-top: 0;
        height:     100%;
    }

    #section-welcome .section-header {
        height: auto;
    }


    /* ════════════════════════════════════════════════════════════
       STEP 2 — Bottom nav strip
       ════════════════════════════════════════════════════════════ */

    /* ── Navbar → bottom strip ───────────────────────────────────
       Re-shows the navbar (removed from the hide list above) and
       re-positions it from the desktop left strip to a bottom strip
       sitting inside the frame, mirroring the same glass-inset look
       the left nav has on desktop.                                 */
    .navbar {
        display:  flex;

        /* Override desktop: left strip → bottom strip */
        top:      auto;
        bottom:   var(--frame-padding-y);
        left:     var(--frame-padding-x);
        right:    var(--frame-padding-x);
        width:    auto;
        height:   var(--mobile-nav-h);

        align-items: center;
    }

    /* Icons in a row instead of a column */
    .nav-icons {
        flex-direction: row;
        justify-content: space-evenly;
    }

    /* ── Icon — reset desktop horizontal nudge ───────────────────
       nav.js sets --translate-x for the left-strip active effect.
       On mobile that nudge pushes icons sideways — drop it.
       Keep --scale so the active-size feedback still works once
       step 5 rewires the active-section detection.                 */
    .icon {
        width:     auto;
        height:    100%;
        flex:      1;
        transform: scale(var(--scale, 0.75));
    }

    /* ── Content — clear the bottom nav ─────────────────────────
       Content stops above the nav strip, revealing the frame glass
       behind the icons — identical to how the left strip works on
       desktop (content's left border → nav → frame glass).        */
    .content {
        bottom: calc(var(--frame-padding-y) + var(--mobile-nav-h));
    }


    /* ════════════════════════════════════════════════════════════
       STEP 3 — Top strip (sidebar repurposed)
       ════════════════════════════════════════════════════════════ */

    /* ── Sidebar → top strip ─────────────────────────────────────
       Re-shows the sidebar and repositions it from the desktop
       right column to a horizontal top strip inside the frame.
       Logo anchors the left. Socials anchor the right.
       The empty middle is reserved for the filter pills (step 4). */
    .sidebar {
        display:         flex;
        flex-direction:  row;
        align-items:     center;
        justify-content: space-between;

        /* Override desktop: right column → top strip */
        top:    var(--frame-padding-y);
        bottom: auto;
        left:   var(--frame-padding-x);
        right:  var(--frame-padding-x);
        width:  auto;
        height: var(--mobile-top-h);

        /* Horizontal padding only — vertical centering via align-items */
        padding: 0 var(--padding);

        /* Reset isolation — no absolute-positioned children on mobile */
        isolation: auto;
    }

    /* ── Logo — small, left anchor ───────────────────────────────
       Desktop: fills the full sidebar width (~96 px).
       Mobile: fixed 32 px square in the top-left of the strip.    */
    .sidebar-logo {
        width:       32px;
        height:      32px;
        flex-shrink: 0;
    }

    /* ── Hobbies — hidden on mobile ──────────────────────────────
       No sidebar column to host them. The about section will show
       hobby content inline in its own section slot instead.        */
    .sidebar-hobbies {
        display: none;
    }

    /* ── Socials block — horizontal row, right anchor ────────────
       Desktop: vertical column with label above.
       Mobile: horizontal icon row, no label.                       */
    .sidebar-inner {
        flex-direction: row;
        align-items:    center;
        gap:            12px;
        width:          auto;
    }

    /* Labels ("Socials", "Hobbies") — no room in the strip */
    .sidebar-label {
        display: none;
    }

    /* ── Social icons — override the desktop 2×2 grid ────────────
       Desktop: display:grid, repeat(2,1fr), width:100%.
       Mobile: flat flex row of four small icons.                   */
    .social-icons {
        display:        flex;
        flex-direction: row;
        gap:            12px;
        width:          auto;
    }

    .social-icon {
        width:  20px;
        height: 20px;
    }

    /* ── Keep top strip visible in the About section ─────────────
       main.css fades .sidebar-logo and .sidebar-inner to opacity:0
       when data-section="section-about" so the hobbies can show.
       On mobile there are no hobbies — override to keep the top
       strip fully visible regardless of the active section.        */
    :root[data-section="section-about"] .sidebar-logo,
    :root[data-section="section-about"] .sidebar-inner {
        opacity:        1;
        pointer-events: auto;
    }

    /* ── Content — clear the top strip ──────────────────────────
       Content starts below the top strip, same logic as the bottom:
       frame-padding-y reaches the frame edge, mobile-top-h is the
       strip height sitting above the content area.                 */
    .content {
        top: calc(var(--frame-padding-y) + var(--mobile-top-h));
    }


    /* ════════════════════════════════════════════════════════════
       STEP 5 — JS scroll system bypass
       ════════════════════════════════════════════════════════════ */

    /* ── Nav icon scale reset ────────────────────────────────────
       navTick() sets --scale on each icon based on vertical scroll
       position. On mobile navTick() does not run, so --scale keeps
       its CSS fallback value of 0.75 (set in main.css).
       Override to 1 so icons appear at full size in the bottom strip.
       --translate-x is already neutralised in the step 2 transform
       override, so only --scale needs addressing here.             */
    .icon {
        --scale: 1;
    }


    /* ════════════════════════════════════════════════════════════
       STEP 4 — Mobile filter bar
       ════════════════════════════════════════════════════════════ */

    /* ── Filter bar container ────────────────────────────────────
       Sits between logo and socials in the top strip.
       flex:1 absorbs all remaining horizontal space so the logo
       stays left-anchored and socials stay right-anchored.
       Scrolls horizontally when pills overflow (many filters).     */
    #mobile-filters {
        flex:            1;
        display:         flex;
        flex-direction:  row;
        align-items:     center;
        gap:             8px;
        overflow-x:      auto;
        overflow-y:      hidden;
        padding:         0 8px;
        height:          100%;
        scrollbar-width: none;
    }

    #mobile-filters::-webkit-scrollbar {
        display: none;
    }

    /* ── Filter pills ────────────────────────────────────────────
       Desktop .filter-btn is full-width (width:100%) with vertical
       padding only. Pills are compact, auto-width, and don't wrap.  */
    #mobile-filters .filter-btn {
        width:       auto;
        padding:     5px 12px;
        flex-shrink: 0;
        white-space: nowrap;
    }


    /* ════════════════════════════════════════════════════════════
       STEP 7 — Full variable scale: typography, spacing, about
       ════════════════════════════════════════════════════════════ */

    /* ── Typography + layout variables ──────────────────────────
       Finishes what step 1 started. Reduces parallax-era spacing
       that serves no purpose when snapTick() is off on mobile,
       and scales down large desktop type sizes for narrow screens. */
    :root {
        /* Section-header padding-top is a parallax staging area on desktop.
           On mobile the parallax JS never runs — trim to a slim inset.     */
        --section-header-h:     8px;

        /* Mid-size heading — about name, sub-headings                      */
        --text-heading:         22px;
        --text-heading-spacing: 0.08em;

        /* Sub display text — about email link, large CTAs                  */
        --text-sub:             15px;

        /* Section title — tighten letter-spacing for narrow screens        */
        --text-title-spacing:   0.08em;

        /* Eyebrow — tighten letter-spacing                                 */
        --text-eyebrow-spacing: 0.18em;
    }


    /* ── Section eyebrow — always visible on mobile ─────────────
       On desktop snap.js drives eyebrow opacity via an inline
       style, animating it in as the section scrolls into frame.
       On mobile snapTick() never runs so the CSS default
       opacity:0 would permanently hide every section eyebrow.
       Override it here so the label is immediately visible.      */
    .section-eyebrow {
        opacity: 1;
    }


    /* ════════════════════════════════════════════════════════════
       STEP 7 — About section mobile layout
       ════════════════════════════════════════════════════════════ */

    /* ── About layout spacing — override scoped custom props ────
       These variables live on .about-layout itself (not :root),
       so they must be overridden on the same element.            */
    .about-layout {
        --about-avatar:     96px;   /* 148px → 96px                 */
        --about-layout-gap: 32px;   /* 56px  → 32px                 */
        --about-block-pt:   20px;   /* 36px  → 20px                 */
        --about-block-gap:  16px;   /* 24px  → 16px                 */
        padding-bottom:     40px;   /* 80px  → 40px                 */
    }


    /* ── About hero — 3-column grid → single column ─────────────
       Desktop layout:  personal | avatar | online  (1fr 1fr 1fr)
       Mobile layout:   avatar on top, then personal, then online.
       Avatar stays centered so it reads as a profile pic header. */
    .about-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "avatar"
            "personal"
            "online";
        gap: 24px;
    }

    /* Avatar — center horizontally in the single column          */
    .about-avatar {
        justify-self: center;
    }

    /* Online column — drop right-alignment, read left-to-right   */
    .about-hero-online {
        align-items: flex-start;
        text-align:  left;
    }

    .about-hero-online .email-row,
    .about-hero-online .about-hero-socials {
        justify-content: flex-start;
    }


    /* ── About projects — 2-column grid → single column ─────────
       Cards stack vertically; each takes the full slot width.    */
    .about-projects-grid {
        grid-template-columns: 1fr;
        gap:                   16px;
    }


    /* ── About contact — reduce top breathing room ───────────── */
    .about-contact {
        padding-top: 32px;
    }


    /* ── Masonry gaps — tighter on mobile ────────────────────────
       Desktop uses --gap (16px) for both column-gap and tile
       margin-bottom. On mobile that wastes too much screen space;
       use 1/3 of the gap variable (~5px) for both axes.           */
    .masonry {
        column-gap: calc(var(--gap) / 3);
    }

    .tile {
        margin-bottom: calc(var(--gap) / 3);
    }


    /* ════════════════════════════════════════════════════════════
       Nav active indicator (mobile)
       ════════════════════════════════════════════════════════════ */

    /* ── Dim all icons once a section is active ──────────────────
       :root[data-section] is only truthy after the first section
       fires, so icons stay full-opacity on initial load and only
       dim once the IntersectionObserver sets data-section.        */
    :root[data-section] .icon {
        opacity:    0.35;
        transition: transform 0.2s ease-out, opacity 0.25s ease-out;
    }

    /* ── Active section → full opacity + slight scale boost ──────
       data-section is set on <html> by setActiveSection() in
       background.js (via IntersectionObserver) and immediately
       on click in nav.js — no extra JS needed here.              */
    :root[data-section="section-render"]   .icon[href="#section-render"],
    :root[data-section="section-photos"]   .icon[href="#section-photos"],
    :root[data-section="section-videos"]   .icon[href="#section-videos"],
    :root[data-section="section-download"] .icon[href="#section-download"],
    :root[data-section="section-about"]    .icon[href="#section-about"] {
        opacity: 1;
        --scale: 1.15;
    }

}