/* mobile.css — phone & tablet refinements.
   Loaded last so it overrides desktop polish where needed.
   This is the SAME codebase as desktop — every edit you make above flows here automatically.
   Keep changes here scoped to viewports that need them. */

/* Safe-area padding for notched phones (iPhone X+, modern Androids). */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .mobile-nav {
        bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.5rem));
    }
    .navbar { padding-top: max(1rem, env(safe-area-inset-top)); }
}

/* =========================================================================
   Tablet & below — under 900px
   ========================================================================= */
@media (max-width: 900px) {
    /* Trim section padding so content breathes without scrolling forever. */
    .hero            { padding: 6.5rem 1.1rem 2rem; }
    .about-section,
    .process-section,
    .commissions-section,
    .testimonials-section,
    .gallery-section { padding: 3.5rem 0; }

    main { padding: 1.25rem; }

    /* Section headings tighten for portrait viewports. */
    .section-heading { font-size: clamp(1.7rem, 6vw, 2.4rem); }
    .section-lede    { font-size: 1rem; max-width: 100%; }
    .section-eyebrow { font-size: 1.1rem; }

    /* Hero — single column was already in place; refine the new decorative bits. */
    .hero-text       { padding: 0; }
    .hero-headline   { font-size: clamp(2rem, 7vw, 3.2rem); margin-bottom: 1.2rem; }
    .hero-subtitle   { font-size: 1rem; max-width: 100%; margin-bottom: 1.75rem; line-height: 1.7; }
    .hero-tag        { font-size: 0.68rem; padding: 0.3rem 0.75rem; margin-bottom: 0.9rem; }

    /* Hero scribble was hidden under 900px already; keep it that way. */
    .hero-scribble   { display: none; }

    /* Hero artwork stack — give it real height on tablets and phones. */
    .hero-art        { aspect-ratio: 4/4; min-height: 320px; max-width: 480px; margin: 0 auto; }
    .hero-art-label  { font-size: 0.9rem; bottom: -1.4rem; }
    .hero-art-mark   { width: 18px; height: 18px; }

    /* Buttons stay reasonable size and take full width if cramped. */
    .hero-ctas       { gap: 0.6rem; margin-bottom: 2.25rem; }
    .hero-cta        { padding: 0.7rem 1.2rem; font-size: 0.9rem; }

    /* Gallery: reduce gap so masonry feels denser without scroll fatigue. */
    .gallery-grid    { column-gap: 1rem; }
    .gallery-item    { margin-bottom: 1rem; }

    /* Process grid handled in sections.css. Soft the timeline thread off (already hidden). */

    /* Footer tightens vertically. */
    .site-footer     { padding: 4rem 1.25rem 1.5rem; }
    .footer-inner    { gap: 2rem; }
    .footer-signature { font-size: 2rem; }

    /* The cinematic modal — already responsive; widen to edges and center cleanly. */
    .art-modal-content { padding: 4.5rem 1rem 2.5rem; }
}

/* =========================================================================
   Phones — under 600px
   ========================================================================= */
@media (max-width: 600px) {
    .hero { padding: 6rem 1rem 1.75rem; }

    /* Hero stack — make the dominant card larger relative to the smaller frame. */
    .hero-art           { aspect-ratio: 4/4.6; min-height: 360px; max-width: 100%; }
    .hero-stack-card:nth-child(1) { width: 74%; height: 80%; top: 0; left: 0; }
    .hero-stack-card:nth-child(2) { width: 52%; height: 56%; top: 18%; right: 0; }
    .hero-stack-card:nth-child(3) { width: 44%; height: 46%; bottom: 0; left: 22%; }

    /* Mark corners pull in so they don't get clipped by edge padding. */
    .hero-art-mark-tl   { top: -2px; left: -2px; }
    .hero-art-mark-br   { bottom: -2px; right: -2px; }
    .hero-art-label     { font-size: 0.85rem; bottom: -1.2rem; }

    /* The gradient orbs are heavy on small GPUs — drop their blur and count visually. */
    .splash-1, .splash-2, .splash-3, .splash-4 { filter: blur(70px); }
    .splash-4 { display: none; }

    /* Dust + ambient drift — keep but lighter so phones don't burn battery. */
    .ambient-dust::after { display: none; }
    body::before         { animation-duration: 60s; opacity: 0.10; }
    [data-theme="dark"] body::before { opacity: 0.16; }

    /* Stats — 2 columns; tighten label and number sizes. */
    .hero-stats         { gap: 1rem 1.25rem; padding-top: 1.25rem; }
    .stat-num           { font-size: 1.5rem; }
    .stat-label         { font-size: 0.65rem; }

    /* Touch-first gallery: surface title/category permanently as a small badge,
       since :hover never fires on touch. */
    .gallery-item-overlay {
        background: linear-gradient(180deg, transparent 0%, rgba(10, 8, 6, 0.72) 100%);
        transform: none;
        opacity: 1;
        padding: 1rem 1rem 0.85rem;
    }
    .gallery-item-overlay::before { display: none; }
    .gallery-item-title {
        font-size: 1rem;
        opacity: 1;
        transform: none;
    }
    .gallery-item-category {
        font-size: 0.95rem;
        opacity: 0.9;
        transform: none;
    }
    .gallery-item:hover { transform: none; }
    .gallery-item:active { transform: scale(0.98); transition: transform 0.15s ease; }

    /* Section title's bullet dot moves inline so it doesn't fall off the edge. */
    .section-title { margin-left: 1.25rem; }

    /* Process steps stack to 1 column on phones (already handled at 480px). Add room for number badge. */
    .process-step-body  { padding: 1.1rem 1.1rem 1.2rem; }

    /* Modal nav buttons sit at the bottom on phones (already in components.css);
       make sure the close button avoids the notch. */
    .art-modal-close    { top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; }
    .art-modal-content  { padding: 4rem 0.85rem 6rem; gap: 1.25rem; }
    .art-modal-title    { font-size: 1.5rem; }
    .art-modal-details  { grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0.85rem 0; }

    /* Footer becomes narrower; signature stays bold but smaller. */
    .footer-signature   { font-size: 1.7rem; }
    .footer-quote       { font-size: 1rem; }
    .footer-baseline    { flex-direction: column; gap: 0.5rem; text-align: center; }

    /* Bigger tap targets — accessibility minimum is ~44px. */
    .filter-btn         { padding: 0.55rem 1.1rem; font-size: 0.85rem; }
    .footer-socials a   { width: 42px; height: 42px; }
    .navbar-icon,
    .navbar .theme-toggle,
    .navbar .admin-toggle { width: 36px; height: 36px; }

    /* The hand-drawn arrow eats space without context on phones — already hidden at 900px. */
    .hero-scribble      { display: none; }
}

/* =========================================================================
   Very small phones — under 380px
   ========================================================================= */
@media (max-width: 380px) {
    .hero-headline    { font-size: 1.85rem; }
    .navbar-name      { display: none; }
    .navbar-actions   { gap: 0.1rem; }
    .filter-btn       { padding: 0.5rem 0.85rem; font-size: 0.8rem; }
    .footer-inner     { gap: 1.5rem; }
}

/* =========================================================================
   Touch-only devices — disable hover-dependent niceties
   ========================================================================= */
@media (hover: none) and (pointer: coarse) {
    /* Hover-only effects look broken on touch (you tap, then it sticks "hovered" until you tap elsewhere).
       Replace with active-state polish where it matters. */
    .gallery-item:hover img         { transform: none; filter: saturate(1); }
    .gallery-item:active img        { transform: scale(1.03); transition: transform 0.2s ease; }
    .commission-card:hover          { transform: none; }
    .commission-card:active         { transform: scale(0.99); transition: transform 0.15s ease; }
    .process-step:hover             { transform: none; }
    .process-step:active            { transform: scale(0.99); transition: transform 0.15s ease; }
    .hero-stack-card:hover          { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.22); }
    .footer-card:hover              { transform: none; }
    .navbar-links a:hover           { background: transparent; }

    /* Disable parallax-only behaviors on touch (they are bound to fineCursor in JS already,
       but ensure the CSS hooks don't leave artefacts). */
    .hero-stack { --mx: 0; --my: 0; }
}

/* =========================================================================
   Landscape phones — short heights
   ========================================================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .hero            { padding: 5rem 1rem 1.5rem; min-height: auto; }
    .hero-art        { min-height: 240px; aspect-ratio: 4/3; }
    .hero-stats      { padding-top: 1rem; }
    .mobile-nav      { display: none; }
    body             { padding-bottom: 0; }
}