/* =========================================================================
 * Mobile compatibility layer.
 *
 * Loaded LAST so its rules win without `!important` spam. Organized by
 * breakpoint, then by section. The desktop styles in styles.css/auth.css/
 * dashboard.css are left untouched — this file only overrides what breaks
 * on phones.
 *
 * Breakpoints used:
 *   - 1024px: large tablets / small laptops
 *   - 768px:  tablets (existing in styles.css)
 *   - 640px:  phones in landscape
 *   - 480px:  phones in portrait
 *   - 360px:  small phones (Galaxy S, older Android)
 * ======================================================================= */

/* ---------- Universal touch improvements (all sizes) ---------- */

* {
    -webkit-tap-highlight-color: rgba(212,169,87, 0.2);
}

/* NOTE: don't put `overflow-x: hidden` on `html` — it kills `position: sticky`
   on every descendant (notably `.feat-pin`, the desktop features scroll).
   `body` in styles.css already has overflow-x: hidden, which is enough. */

/* iOS Safari: prevent the orientation change zoom */
@media screen and (max-device-width: 768px) {
    html { -webkit-text-size-adjust: 100%; }
}

/* Inputs: keep them at >=16px so iOS doesn't auto-zoom on focus */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Buttons / links acting as buttons: 44px minimum touch target */
@media (max-width: 768px) {
    button,
    .btn-primary,
    .btn-ghost,
    .btn-google,
    .auth-btn,
    .pricing-cta,
    .promo-btn,
    .acct-btn,
    .copy-btn,
    .reward-btn,
    a.btn-primary,
    a.btn-ghost {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============== TABLET (768px) ============== */
@media (max-width: 768px) {

    /* Navbar tightens horizontal padding */
    #navbar {
        padding: 1rem 1rem;
    }
    #navbar.scrolled {
        padding: 0.7rem 1rem;
    }

    /* Section headings shrink */
    .sec-head h2 {
        font-size: clamp(1.6rem, 5vw, 2.4rem);
    }

    /* Container padding */
    .container {
        padding: 0 1rem;
    }
}

/* ============== LANDSCAPE PHONES (640px) ============== */
@media (max-width: 640px) {

    /* Pricing: single column, then 2-up at >=640px */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Studio project grid: still works at 260px min, but tighten */
    .studio-grid {
        grid-template-columns: 1fr;
    }

    /* Stats grid: 2 columns on landscape phones */
    .dash-stats,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }

    /* Use cases: stack to 2 columns */
    .uc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ============== PORTRAIT PHONES (480px) ============== */
@media (max-width: 480px) {

    /* ---------- Navbar ---------- */
    #navbar {
        padding: 0.75rem 0.875rem;
    }
    #navbar.scrolled {
        padding: 0.6rem 0.875rem;
    }
    .nav-container {
        padding: 0;
    }
    .logo-text {
        font-size: 1.05rem;
    }

    /* Hero releases the 100vh death-grip and stacks content tighter */
    #hero {
        min-height: auto;
        padding: 6rem 0 3rem;
    }
    .hero-content {
        padding: 0 1rem;
    }
    #hero h1 {
        font-size: clamp(2rem, 9vw, 2.6rem);
        line-height: 1.1;
        margin-bottom: 1rem;
    }
    .hero-sub {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }
    .hero-btns {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }
    .hero-btns .btn-primary,
    .hero-btns .btn-ghost {
        width: 100%;
        text-align: center;
    }
    /* "See it live" → #demo, but the demo section is hidden below — hide
       the button too so it doesn't scroll into the void. */
    .hero-btns a[href="#demo"] {
        display: none !important;
    }
    .hero-chips {
        gap: 0.6rem 1rem !important; /* row-gap column-gap — breathes horizontally */
        font-size: 0.72rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .hero-chip {
        padding: 0.45rem 0.95rem;
    }

    /* ---------- Stats: 2×2 grid (overrides 768px column-stack) ---------- */
    #stats {
        margin-top: 0.5rem;
    }
    .stats-inner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 1.25rem 1.5rem !important; /* generous spacing between rows + cols */
        padding: 1.5rem 1.25rem !important;
    }
    .stat {
        flex: 0 0 calc(50% - 0.75rem) !important;
        text-align: center;
        padding: 0.5rem 0;
    }
    .stat-sep {
        display: none !important; /* Separators don't make sense in a 2×2 grid */
    }
    .stat-val {
        font-size: 1.85rem;
    }

    /* ---------- Features section: stop the sticky scroll on mobile ---------- */
    .feat-scroll {
        height: auto !important;
    }
    .feat-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    .feat-pin {
        position: static !important;
        top: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    .feat-list {
        gap: 0.75rem !important;
    }
    /* Show every feature item fully (desktop hides non-active ones) */
    .feat-item {
        padding: 1.1rem 1.2rem !important;
        opacity: 1 !important;
        border-left: 2px solid rgba(212,169,87,0.3) !important;
        background: rgba(212,169,87,0.03) !important;
    }
    .feat-item h3 {
        color: #fff !important;
    }
    .feat-item p {
        max-height: none !important;
        opacity: 1 !important;
        margin-top: 0.4rem !important;
    }
    .feat-visual {
        display: none !important; /* The video carousel doesn't make sense
                                     when features aren't scroll-triggered */
    }

    /* ---------- Demo: hidden entirely on mobile (interactive map UI doesn't
       work well on touch + portrait, and it's a heavy WebGL load). The
       footer "Live Demo" link from the navbar will scroll past nothing —
       acceptable since the link is also hidden when demo is hidden. */
    #demo,
    .demo-section,
    .demo-wrap {
        display: none !important;
    }

    /* ---------- Animations carousel: 1 slide visible at a time ---------- */
    .anim-track {
        gap: 0.75rem;
    }
    .anim-slide {
        flex: 0 0 calc(100vw - 2rem) !important;
        max-width: 360px;
    }
    .anim-video,
    .anim-vid-wrap {
        height: 200px;
    }

    /* ---------- How It Works timeline ---------- */
    .timeline {
        padding-left: 2rem;
    }
    .tl-step {
        padding-left: 1rem;
    }
    .tl-card {
        padding: 1rem;
    }
    .tl-card h3 {
        font-size: 1rem;
    }
    .tl-num {
        font-size: 1rem;
    }

    /* ---------- Use Cases: single column ---------- */
    .uc-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .uc-card {
        padding: 1.25rem;
    }

    /* ---------- CTA section ---------- */
    #cta {
        padding: 3rem 1rem 5rem;
    }
    .cta-inner {
        padding: 2rem 1.5rem;
        gap: 1.5rem;
    }
    .cta-title {
        font-size: clamp(1.55rem, 6vw, 2.1rem);
    }

    /* ---------- Footer: brand stacks above 3 inline columns of links ---------- */
    .footer-inner {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: left;
    }
    .footer-brand {
        text-align: center;
    }
    .footer-brand .logo {
        justify-content: center;
    }
    .footer-desc {
        font-size: 0.85rem;
        max-width: 280px;
        margin: 0.6rem auto 0;
    }
    .footer-cols {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
    .footer-col h4 {
        font-size: 0.72rem;
        margin-bottom: 0.5rem;
    }
    .footer-col a {
        padding: 0.35rem 0;
        font-size: 0.75rem;
        display: block;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        font-size: 0.7rem;
    }

    /* ---------- Auth pages ---------- */
    .auth-page {
        padding: 5rem 1rem 2rem;
    }
    .auth-container {
        max-width: 100%;
    }
    .auth-card {
        padding: 1.5rem 1.25rem;
    }
    .auth-card h1 {
        font-size: 1.5rem;
    }
    .auth-sub {
        font-size: 0.85rem;
    }

    /* ---------- Account page ---------- */
    .acct {
        padding: 5rem 1rem 4rem;
    }
    .acct-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        text-align: left;
    }
    .acct-name {
        font-size: 1.25rem;
    }
    .acct-email {
        font-size: 0.85rem;
    }
    .acct-section {
        padding: 1.25rem;
    }
    .acct-section h2 {
        font-size: 1rem;
    }

    /* ---------- Dashboard ---------- */
    .dash {
        padding: 4.5rem 1rem 3rem;
    }
    /* Background blob: contain so it can't trigger horizontal scroll */
    .dash-bg {
        width: 100%;
        max-width: 100%;
        left: 0;
        transform: none;
    }

    /* Hero: avatar centered above greeting, badges centered */
    .dash-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .dash-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.4rem;
    }
    .dash-avatar-ring {
        inset: -4px;
    }
    .dash-greet {
        width: 100%;
    }
    .dash-greet h1 {
        font-size: 1.55rem;
        line-height: 1.1;
    }
    .dash-greet-time {
        font-size: 0.82rem;
    }
    .dash-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
    }
    .dash-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
    }
    /* Hide desktop sign-out (was top-right of hero) */
    .dash-signout-desktop { display: none !important; }
    /* Hide desktop Studio quick-action; mobile gets it as a stats tile */
    .dash-action-studio-desktop { display: none !important; }
    /* Show mobile-only Open Studio tile (4th stats cell) */
    .dash-stat-studio-mobile {
        display: flex !important;
        text-decoration: none;
    }
    /* Show mobile-only Sign out card in quick actions */
    .dash-action-signout-mobile {
        display: flex !important;
    }

    /* Stats: 2x2 on phones (was 4-up auto-fit at 240px min) */
    .dash-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
        margin-bottom: 1.75rem;
    }
    .dash-stat {
        padding: 0.85rem 0.85rem;
        gap: 0.65rem;
    }
    .dash-stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }
    .dash-stat-icon svg {
        width: 18px;
        height: 18px;
    }
    .dash-stat-label {
        font-size: 0.62rem;
    }
    .dash-stat-value {
        font-size: 0.82rem;
    }

    /* Cards (journey, referral, rewards, upgrade): tighter padding */
    .dash-card {
        padding: 1.25rem 1.1rem;
        border-radius: 14px;
        margin-bottom: 1rem;
    }
    .dash-card-head {
        margin-bottom: 1.25rem;
    }
    .dash-card-head h2 {
        font-size: 1.1rem;
    }
    .dash-card-head p {
        font-size: 0.82rem;
    }

    /* Journey: line origin moves with smaller card padding */
    .dash-journey-line {
        left: calc(1.1rem + 13px);
        top: 5.5rem;
        bottom: 1.5rem;
    }
    .dash-jstep {
        gap: 0.85rem;
    }
    .dash-jstep-text h3 {
        font-size: 0.9rem;
    }
    .dash-jstep-text p {
        font-size: 0.78rem;
    }
    .dash-jstep-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.85rem;
    }

    /* Quick actions: 1 column always */
    .dash-actions {
        grid-template-columns: 1fr !important;
        gap: 0.6rem;
    }
    .dash-action {
        padding: 1rem 1.1rem;
        gap: 0.85rem;
    }
    .dash-action-icon {
        width: 38px;
        height: 38px;
    }
    .dash-action-text h3 {
        font-size: 0.9rem;
    }
    .dash-action-text p {
        font-size: 0.74rem;
    }

    /* Referral row: input + button stack vertically on tiny phones,
       stay inline on phones wide enough to fit both. */
    .dash-referral-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .dash-referral-input {
        flex: 1 1 100%;
        font-size: 0.78rem;
        padding: 0.7rem 0.85rem;
    }
    .dash-referral-copy {
        flex: 1 1 100%;
        padding: 0.7rem 1rem;
    }
    .dash-referral-stats {
        gap: 1rem;
        flex-direction: column;
    }
    .dash-referral-stat {
        font-size: 0.8rem;
    }
    .dash-referral-stat strong {
        font-size: 1.25rem;
    }
    .dash-referral-future {
        font-size: 0.75rem;
        padding: 0.65rem 0.85rem;
    }

    /* Reward cards */
    .dash-reward-item {
        padding: 0.85rem;
    }
    .dash-reward-item-copy {
        font-size: 0.8rem;
    }
    .dash-reward-item-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    .dash-reward-btn {
        flex: 1 1 100%;
        min-width: 0;
        padding: 0.7rem 1rem;
    }

    /* Upgrade CTA */
    .dash-upgrade-cta-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    .dash-upgrade-cta-btn,
    .dash-upgrade-cta-dismiss {
        width: 100%;
        text-align: center;
        padding: 0.8rem 1rem;
    }
    .dash-upgrade-cta-head h2 {
        font-size: 1.05rem;
    }
    .dash-upgrade-cta-head p {
        font-size: 0.82rem;
    }

    /* ---------- Pricing ---------- */
    .pricing-page {
        padding: 5rem 1rem 4rem;
    }
    .pricing-hero h1 {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }
    .pricing-hero p {
        font-size: 0.95rem;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-width: 100%;
    }
    .pricing-card {
        padding: 1.5rem;
    }
    .pricing-card.popular {
        transform: none;
    }
    .pricing-toggle {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* ---------- Studio project manager ---------- */
    .studio-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1.5rem 1rem 0;
    }
    .studio-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem 2rem;
    }
    .studio-videos {
        padding: 0 1rem 2rem;
    }
    .studio-video-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .studio-video-info {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* ---------- Flash messages: full-width, bottom-anchored ---------- */
    .flash-container {
        top: auto;
        bottom: 1rem;
        left: 0.5rem;
        right: 0.5rem;
    }
    .flash {
        min-width: 0;
        max-width: 100%;
        font-size: 0.85rem;
        padding: 0.85rem 1rem;
    }

    /* ---------- Modals: never exceed viewport, scroll if needed ---------- */
    .confirm-modal-backdrop,
    .modal-overlay {
        padding: 0.75rem;
        align-items: flex-end !important; /* Bottom sheet on phones */
    }
    .confirm-modal {
        max-width: 100%;
        max-height: calc(100vh - 1.5rem);
        overflow-y: auto;
        padding: 1.25rem 1.25rem 1rem;
        border-radius: 14px 14px 0 0;
    }
    .confirm-modal-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }
    .confirm-modal-btn {
        width: 100%;
    }

    /* ---------- Cookie consent: full bottom strip ---------- */
    .cc {
        left: 0.5rem !important;
        right: 0.5rem !important;
        bottom: 0.5rem !important;
        max-width: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .cc-text {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }
    .cc-actions {
        display: flex;
        gap: 0.5rem;
    }
    .cc-actions button {
        flex: 1;
    }

    /* ---------- Feedback widget pill ---------- */
    .fb-pill {
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        font-size: 0.8rem;
        padding: 0.6rem 0.9rem;
    }
    .fb-modal {
        max-width: 100%;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    /* ---------- FAQ / Legal pages ---------- */
    .faq-page,
    .legal-page {
        padding: 5rem 1rem 3rem;
    }
    .faq-page h1,
    .legal-page h1 {
        font-size: 1.6rem;
    }
    .faq-page h2,
    .legal-page h2 {
        font-size: 1.2rem;
    }
    .faq-item summary {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }
    .faq-answer {
        font-size: 0.85rem;
        line-height: 1.55;
    }

    /* ---------- Forms: inputs span full width ---------- */
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        box-sizing: border-box;
    }
    .form-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* ---------- Pre-launch / coming soon screens ---------- */
    .studio-coming-soon-inner {
        padding: 2rem 1rem;
    }
    .studio-coming-soon-title {
        font-size: 1.4rem;
    }
}

/* ============== SMALL PHONES (360px) ============== */
@media (max-width: 360px) {

    /* Even tighter padding */
    #navbar {
        padding: 0.6rem 0.7rem;
    }

    #hero h1 {
        font-size: 1.85rem;
    }
    .hero-sub {
        font-size: 0.875rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .auth-page {
        padding: 4.5rem 0.75rem 1.5rem;
    }
    .auth-card {
        padding: 1.25rem 1rem;
    }

    .acct,
    .dash,
    .pricing-page {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .container {
        padding: 0 0.75rem;
    }

    /* Buttons stack font-weight tighter */
    .btn-primary,
    .btn-ghost {
        font-size: 0.85rem;
        padding: 0.7rem 1.1rem;
    }

    /* Footer cols too cramped at 3-up — drop to 2 */
    .footer-cols {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Dashboard stats: 2x2 cramps at 360px, single column reads better */
    .dash-stats {
        grid-template-columns: 1fr !important;
    }
    /* Avatar smaller still */
    .dash-avatar {
        width: 56px;
        height: 56px;
        font-size: 1.2rem;
    }
    .dash-greet h1 {
        font-size: 1.4rem;
    }
}

/* ============== iOS SAFE-AREA NOTCH ============== */
/* Phones with notches (iPhone X+) need bottom-anchored elements offset
   so they don't sit on/under the home indicator. */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 480px) {
        .flash-container {
            bottom: calc(1rem + env(safe-area-inset-bottom));
        }
        .cc {
            bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
        }
        .fb-pill {
            bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ============== LANDSCAPE ORIENTATION (short height) ============== */
@media (max-width: 900px) and (max-height: 500px) {
    /* On rotated phones, hero shouldn't take full height */
    #hero {
        min-height: auto;
        padding: 5rem 1rem 2rem;
    }
    /* Modals smaller */
    .confirm-modal {
        max-height: calc(100vh - 1rem);
    }
}