/* ═══════════════════════════════════════════════════════════════
   Stilux Mobile Reduction CSS
   Based on: Stilux Mobile Reduction & Efficiency Spec (March 2026)

   This file ONLY activates at ≤768px.
   Desktop layout is untouched — all rules are inside @media blocks.
   PDF/document generation styles are fully isolated in pdf_generator.py.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   §14 ACCESSIBILITY: Always active (not viewport-dependent)
   ───────────────────────────────────────────────────────────── */

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Focus visible — keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--stilux-teal, #00b8a9);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   §06 MICRO-INTERACTIONS: Always active
   ───────────────────────────────────────────────────────────── */

/* Button press feedback — CSS only, no JS */
button:active,
a.btn-primary-landing:active,
a.btn-outline:active,
.pricing-btn:active,
.cta-pill:active,
.nav-cta-link:active,
.nav-login-link:active {
    transform: scale(0.97);
    opacity: 0.9;
    transition: transform 100ms ease-out, opacity 100ms ease-out;
}

/* Error shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
}
.shake { animation: shake 300ms ease-in-out; }


/* ═══════════════════════════════════════════════════════════════
   PRIMARY BREAKPOINT: ≤768px (mobile)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ─── §01 KILL LIST: Elements to ELIMINATE ─────────────── */

    /* Floating skill tags animation — saves ~45KB JS + GPU */
    .cv-skill-tags-carousel,
    .cv-skill-set {
        display: none !important;
    }

    /* Hero visual (CV preview card) — show small on mobile */
    .hero-visual {
        display: block !important;
        order: 2;
        max-width: 160px;
        margin: 8px auto 4px;
    }
    .hero-visual .cv-preview-card {
        padding: 10px !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
    }
    .hero-visual .cv-card-header { margin-bottom: 4px !important; }
    .hero-visual .cv-avatar { width: 18px !important; height: 18px !important; }
    .hero-visual .cv-name-line,
    .hero-visual .cv-title-line { height: 3px !important; }
    .hero-visual .cv-divider { margin: 4px 0 !important; }
    .hero-visual .cv-card-section { margin-bottom: 2px !important; }
    .hero-visual .cv-section-label { font-size: 6px !important; margin-bottom: 2px !important; }
    .hero-visual .cv-text-line { height: 2px !important; margin-bottom: 2px !important; }
    .hero-visual .cv-skill-tags-carousel { display: none !important; }
    .hero-visual .cv-ats-badge { padding: 4px 6px !important; top: -6px !important; right: -6px !important; }
    .hero-visual .ats-score { font-size: 9px !important; }
    .hero-visual .ats-label { font-size: 5px !important; }
    .hero-visual .cv-ai-overlay { display: none !important; }
    .hero-visual .cv-badge-left {
        top: auto !important; bottom: 40px !important;
        left: -14px !important; right: auto !important;
        padding: 3px 7px !important; border-radius: 6px !important;
    }
    .hero-visual .cv-badge-bottom {
        top: auto !important; bottom: -8px !important;
        left: 50% !important; transform: translateX(-50%) !important;
        padding: 3px 7px !important; border-radius: 6px !important;
    }
    .hero-visual .cv-badge-left .ats-label,
    .hero-visual .cv-badge-bottom .ats-label {
        font-size: 5px !important; letter-spacing: 0.3px !important;
    }
    .hero-credibility {
        order: 3 !important;
        position: static !important;
        text-align: center;
        width: 100%;
        margin-top: 24px;
    }

    /* Hero badge — non-essential */
    .hero-badge {
        display: none !important;
    }

    /* Desktop nav links — hamburger already exists */
    .landing-nav {
        display: none !important;
    }

    /* Desktop nav buttons — hamburger handles this */
    .landing-nav-buttons {
        display: none !important;
    }

    /* Heavy shadows → subtle borders */
    .pricing-card,
    .benefit-card,
    .hiw-card {
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }


    /* ─── §02 COMPRESS: Reduce size/complexity ────────────── */

    /* --- HEADER: 44px compact --- */
    header,
    .landing-header {
        height: 44px;
        padding: 0 16px;
    }

    .logo-text {
        font-size: 18px;
    }

    /* Show hamburger — borderless, dark lines */
    .mobile-hamburger,
    .landing-hamburger {
        display: flex !important;
        border: none !important;
        background: none !important;
        border-radius: 0 !important;
    }

    .mobile-hamburger span {
        background: var(--text-primary, #1d1d1f) !important;
    }

    .mobile-hamburger:hover {
        border: none !important;
        background: none !important;
    }

    /* --- HERO: Compact mobile layout --- */
    .hero-section {
        padding: 72px 20px 20px;
        min-height: auto;
        gap: 0;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .hero-title {
        font-size: 26px !important;
        line-height: 1.15;
        margin-bottom: 12px;
    }

    .hero-subtitle {
        font-size: 14px !important;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .hero-buttons a,
    .hero-buttons button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Credibility bar — compact single line */
    .hero-section > div:last-child {
        font-size: 11px;
    }


    /* --- BENEFITS: 2x2 collapsible cards --- */
    .apple-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .apple-card {
        padding: 14px !important;
        cursor: pointer;
        transition: all 200ms ease-out;
        overflow: hidden;
    }

    .apple-accent {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }

    .apple-card-title {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* Collapse description by default on mobile */
    .apple-card-desc {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-top: 0;
        transition: max-height 300ms ease-out, opacity 200ms ease-out, margin-top 200ms ease-out;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* Expanded state — toggled via JS */
    .apple-card.expanded .apple-card-desc {
        max-height: 200px;
        opacity: 1;
        margin-top: 8px;
    }

    /* When a card is expanded, it spans full width */
    .apple-card.expanded {
        grid-column: 1 / -1;
    }


    /* --- COMPARISON: Stack vertically --- */
    #comparison-v2 {
        padding: 48px 16px !important;
    }

    .v2-header h2 {
        font-size: 24px !important;
    }

    .v2-cols {
        flex-direction: column !important;
        gap: 32px;
    }

    .v2-col {
        max-width: 100% !important;
        width: 100% !important;
    }

    .v2-paper {
        height: 360px !important;
    }

    .v2-notes {
        flex-direction: column !important;
        gap: 8px;
    }

    .v2-note {
        font-size: 12px;
    }


    /* --- VOICE INTERVIEW SECTION: Compact --- */
    .voice-section,
    [id*="voice"],
    [id*="interview"] {
        padding: 48px 16px;
    }


    /* --- HOW IT WORKS: Single column --- */
    #how-it-works {
        padding: 48px 16px !important;
    }

    .hiw-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .hiw-card {
        aspect-ratio: 16/9;
    }

    .hiw-header h2 {
        font-size: 24px;
    }


    /* --- PRICING: Horizontal snap scroll --- */
    #pricing {
        padding: 48px 16px !important;
    }

    .pricing-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 16px 12px;
        /* Hide scrollbar for clean look */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pricing-grid::-webkit-scrollbar {
        display: none;
    }

    .pricing-card {
        min-width: 75vw;
        max-width: 75vw;
        flex-shrink: 0;
        scroll-snap-align: center;
        padding: 20px 16px !important;
    }
    .pricing-card .pricing-name { font-size: 18px !important; }
    .pricing-card .pricing-tagline { font-size: 12px !important; margin-bottom: 8px !important; }
    .pricing-card .price-amount { font-size: 32px !important; }
    .pricing-card .capacity-example { padding: 10px 12px !important; margin: 12px 0 !important; font-size: 12px !important; }
    .pricing-card .pricing-features { font-size: 13px !important; }
    .pricing-card .pricing-features li { padding: 4px 0 !important; }

    /* Pro stays in natural HTML order (Starter → Pro → Ultra) so it's centered */
    .pricing-card.featured {
        order: 0;
    }

    .pricing-header h2 {
        font-size: 24px;
    }


    /* --- CTA SECTIONS: Full-width buttons --- */
    .v2-cta,
    .hiw-cta {
        text-align: center;
    }

    .cta-pill,
    .cta-pill--primary {
        width: 100%;
        max-width: 320px;
        text-align: center;
        justify-content: center;
    }


    /* --- FAQ: Touch-optimized --- */
    #faq {
        padding: 48px 16px !important;
    }

    .faq-q {
        min-height: 44px;
        padding: 16px 0;
    }


    /* --- FOOTER: Minimal --- */
    footer {
        padding: 24px 16px !important;
    }

    .footer-content {
        flex-direction: column;
        gap: 16px;
    }

    .footer-links {
        display: none;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }


    /* ─── §14 TOUCH TARGETS: 44px minimum ─────────────────── */
    button,
    a[href],
    input[type="submit"],
    .nav-link,
    .faq-q,
    .lang-toggle-btn {
        min-height: 44px;
    }


    /* ─── §07 INPUTS: Prevent iOS auto-zoom ───────────────── */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* App textareas — optimized for mobile keyboard */
    textarea {
        width: 100%;
        min-height: 180px;
        max-height: 50vh;
        padding: 16px;
        border-radius: 12px;
        resize: none;
        -webkit-overflow-scrolling: touch;
        line-height: 1.5;
    }

    textarea:focus {
        border-color: var(--stilux-teal, #00b8a9);
    }


    /* ─── GENERAL: Mobile spacing & typography ────────────── */

    /* Reduce section padding globally */
    .section,
    section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* All section headings — unified to match hero (22px/700) */
    h2,
    .section-title,
    .v2-header h2,
    .hiw-header h2,
    .pricing-header h2,
    .faq-header h2,
    #voice-interview h2,
    [id*="voice"] h2 {
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }

    h3 {
        font-size: 16px;
    }

    /* Body text comfortable reading */
    p {
        font-size: 14px;
        line-height: 1.5;
    }

}


/* ═══════════════════════════════════════════════════════════════
   SECONDARY BREAKPOINT: ≤480px (small phones)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    .hero-title {
        font-size: 22px !important;
    }

    .hero-subtitle {
        font-size: 13px !important;
    }

    .v2-header h2,
    .hiw-header h2,
    .pricing-header h2 {
        font-size: 20px !important;
    }

    .v2-paper {
        height: 300px !important;
    }

    .pricing-card {
        min-width: 260px;
    }

    /* Voice interview: move pill into image on mobile */
    .va-content-side .vi-pill { display:none !important; }
    .va-img-side .va-pill-mobile {
        display:inline-flex !important;
        position:absolute; top:12px; left:50%; transform:translateX(-50%);
        z-index:2;
        align-items:center; gap:6px;
        padding:5px 14px; border-radius:980px;
        background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
        border:1px solid rgba(0,184,169,.3);
        font-size:10px; font-weight:600; letter-spacing:1px;
        text-transform:uppercase; color:#00d4c0; white-space:nowrap;
    }
    .va-img-side .va-pill-mobile::before {
        content:''; width:6px; height:6px; border-radius:50%;
        background:#34d399; animation:voicePulse 1.5s ease infinite;
    }

    /* Consistent section padding across all mobile sections */
    #features,
    #comparison-v2,
    #how-it-works,
    #voice-interview,
    #pricing,
    #faq {
        padding: 36px 12px !important;
    }
}