/* ============================================================
   MOBILE RESPONSIVE OVERRIDES (320px - 768px)
   ============================================================ */

/* Navigation Mobile styles moved to components/navbar.css */

/* --- Phase 4 hero text & observation card mobile --- */
@media (max-width: 767px) {
    #phase4-hero-text {
        padding: 0 20px !important;
        padding-top: calc(12vh + 80px) !important;
    }
    #phase4-hero-text h2 {
        font-size: 44px !important;
        white-space: normal !important;
        width: 100%;
    }

    #observation-card {
        left: 20px !important;
        right: 20px !important;
        top: auto !important;
        bottom: 40px !important;
        transform: none !important;
        width: auto !important;
    }

    #observation-card > div {
        max-width: 100% !important;
        width: 100% !important;
    }

    #observation-card span {
        font-size: 12px !important;
    }

    #observation-card p {
        font-size: 16px !important;
    }
}

/* --- Hero Section Mobile --- */
@media (max-width: 767px) {
    #hero-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    #hero-heading {
        font-size: clamp(2rem, 10vw, 3rem) !important;
        line-height: 0.95;
        margin-bottom: 24px;
        max-width: 100%;
    }

    #hero-content .aura-reveal p,
    #hero-content p.aura-reveal {
        font-size: clamp(0.875rem, 3.5vw, 1.125rem);
        margin-bottom: 32px;
        max-width: 100%;
    }

    .shiny-cta-orange {
        padding: 14px 28px !important;
        min-height: 48px;
    }

    .shiny-cta-orange .text-sm {
        font-size: 15px;
    }

    #scroll-indicator {
        bottom: 24px;
    }
}

/* --- Testimonial Section Mobile --- */
@media (max-width: 767px) {
    #testimonial-section {
        border-radius: 20px 20px 0 0 !important;
    }

    /* Remove tall scroll wrapper — no sticky scroll on mobile */
    #testimonial-wrap {
        height: auto !important;
    }

    #testimonial {
        position: relative !important;
        height: auto !important;
        min-height: 100vh;
        padding: 80px 0 60px !important;
    }

    #testimonial > div {
        padding: 0 20px !important;
    }

    #quote-lines {
        font-size: 32px !important;
        line-height: 42px !important;
        margin-bottom: 32px !important;
    }

    #quote-attribution p {
        font-size: clamp(20px, 5vw, 32px) !important;
        letter-spacing: -1px !important;
    }

    #quote-attribution div p {
        font-size: clamp(18px, 4.5vw, 28px) !important;
    }
}

/* --- Trusted By Section Mobile --- */
@media (max-width: 767px) {
    #trusted-by-section > div {
        padding: 48px 20px !important;
        gap: 24px !important;
    }

    #trusted-by-section p {
        font-size: 12px !important;
    }

    #trusted-by-section > div > div {
        gap: 40px !important;
        flex-wrap: nowrap !important;
    }

    #trusted-by-section img {
        height: 50px !important;
    }

    #trusted-by-section img[alt="Jain Sports"] {
        height: 20px !important;
    }
}

/* --- Match Analysis Section Mobile --- */
@media (max-width: 767px) {
    #match-analysis-section {
        overflow: hidden;
    }

    .ma-horizontal-sticky {
        height: auto !important;
        overflow: visible;
        position: relative !important;
    }

    .ma-horizontal-track {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 48px 20px 100px;
    }

    /* Kill the fixed 100vw/100vh frames — let content dictate height */
    .ma-frame {
        width: 100% !important;
        height: auto !important;
        flex-shrink: 1 !important;
        overflow: visible !important;
    }

    .ma-frame-inner {
        height: auto !important;
        min-height: 0 !important;
        display: flex;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 32px 0;
    }

    .ma-glow-effect {
        display: none;
    }

    .ma-bg-glow {
        display: none;
    }

    /* --- Frame 0: Intro --- */
    .ma-intro-content {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        text-align: left !important;
    }

    .ma-section-label {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    .ma-intro-heading {
        font-size: clamp(28px, 8vw, 36px) !important;
        letter-spacing: -1.5px !important;
    }

    .ma-intro-heading .light {
        font-size: clamp(24px, 6.5vw, 30px) !important;
    }

    /* --- Frame 1: Match At A Glance --- */
    .ma-glance-section {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
    }

    .ma-player-names-header {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }

    .ma-player-names-header .opponent {
        font-size: 16px !important;
    }

    .ma-panel-title {
        font-size: clamp(24px, 7vw, 32px) !important;
    }

    .ma-glance-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: relative !important;
        padding-bottom: 20px !important;
    }

    /* --- Frame 2: Feedback text --- */
    .ma-feedback-text {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        font-size: clamp(24px, 6.5vw, 32px) !important;
        letter-spacing: 0.5px !important;
        line-height: 1.3 !important;
    }

    /* --- Frame 3: Match Decider --- */
    .ma-decider-wrapper {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .ma-decider-quote {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 48px !important;
        height: 50px !important;
        margin-bottom: -8px;
    }

    .ma-decider-quote img {
        width: 100%;
        height: 100%;
    }

    .ma-decider-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    .ma-decider-intro {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        padding: 20px 20px 12px !important;
        box-sizing: border-box;
        font-size: 15px !important;
    }

    .ma-decider-text {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 20px 20px !important;
        box-sizing: border-box;
        font-size: 13px !important;
        overflow: visible !important;
    }

    .ma-decider-glow {
        display: none;
    }

    .ma-placeholder-card {
        display: none !important;
    }

    /* --- Frame 4: Strengths Intro Text --- */
    .ma-strengths-intro-text {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
    }

    .ma-strengths-intro-text .main {
        font-size: clamp(26px, 7vw, 34px) !important;
        letter-spacing: 0.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 16px !important;
    }

    .ma-strengths-intro-text .sub {
        font-size: clamp(20px, 5.5vw, 26px) !important;
        letter-spacing: 0.5px !important;
        line-height: 1.3 !important;
    }

    /* --- Frame 5: Dual Cards - stack vertically --- */
    .ma-dual-cards-wrapper {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }

    .ma-dual-cards-glow,
    .ma-dual-cards-glow-inner,
    .ma-dual-cards-glow-core {
        display: none;
    }

    .ma-dual-dots,
    .ma-dual-dots-inner {
        display: none;
    }

    .ma-strengths-card-full,
    .ma-weakness-card-full {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
    }

    .ma-strengths-card-full .ma-card-inner-panel,
    .ma-weakness-card-full .ma-card-inner-panel {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        margin: 16px !important;
        padding: 16px !important;
        gap: 16px !important;
    }

    .ma-card-title {
        font-size: 20px !important;
    }

    .ma-card-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .ma-card-text-overflow {
        height: auto !important;
        overflow: visible !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .ma-card-icon-badge {
        width: 48px !important;
        height: 40px !important;
    }

    .ma-strengths-cursor-video,
    .ma-weakness-cursor-video {
        display: none !important;
    }

    /* --- Frame 6: +1000 Insights --- */
    .ma-areas-text {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
    }

    .ma-areas-text .main {
        font-size: clamp(26px, 7vw, 34px) !important;
        letter-spacing: -0.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 16px !important;
    }

    .ma-areas-text .sub {
        font-size: clamp(20px, 5.5vw, 26px) !important;
        letter-spacing: 0.5px !important;
        line-height: 1.3 !important;
    }

    /* --- Summary card (if present) --- */
    .ma-summary-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 400px;
    }

    .ma-summary-card-left {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
    }

    .ma-summary-menu {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin-top: 16px;
    }

    .ma-summary-menu-item {
        padding-left: 16px !important;
    }

    .ma-summary-card-right {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
    }

    .ma-phone-mockup {
        display: none;
    }

    .ma-chipset-container {
        display: none;
    }

    .ma-progress-bar {
        display: none !important;
    }

    .ma-scroll-hint {
        display: none !important;
    }

    /* Make all match analysis elements visible on mobile */
    .ma-fade-in,
    .ma-slide-in-left,
    .ma-slide-in-right {
        opacity: 1 !important;
        transform: none !important;
    }

    /* --- Glance card internals --- */
    .ma-metrics {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        padding: 8px 20px 20px;
        box-sizing: border-box;
    }

    .ma-metric-bars.reversed {
        width: 100% !important;
    }

    .ma-metric-value {
        font-size: 11px !important;
        width: auto !important;
    }

    .ma-metric-name {
        font-size: 9px !important;
    }

    .ma-game-scores {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        padding: 16px 20px;
        gap: 32px !important;
        justify-content: center;
    }

    .ma-game-score .label {
        font-size: 10px !important;
    }

    .ma-game-score .score {
        font-size: 20px !important;
    }

    .ma-player-header {
        position: relative !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 8px 0;
    }

    .ma-player-names {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        text-align: center;
        padding: 8px;
    }

    /* Hide the in-card player labels & divider — names already shown above card */
    .ma-player-label {
        display: none !important;
    }

    .ma-divider-line {
        display: none !important;
    }

    .ma-metric-row {
        gap: 2px !important;
    }

    .ma-metric-bars {
        width: 100%;
    }
}

/* --- Training Analysis Section Mobile --- */
@media (max-width: 767px) {
    #training-analysis-section {
        padding-bottom: 16px !important;
    }

    .training-chipset-header {
        height: 250px !important;
    }

    .paradigm-chip-svg {
        width: 140px !important;
    }

    .paradigm-chip-glow {
        width: 200px !important;
        height: 280px !important;
    }

    .training-content-area {
        margin-top: -40px !important;
    }

    .training-scroll-section {
        height: auto !important;
    }

    .training-sticky-frame {
        position: relative !important;
        height: auto !important;
    }

    .badminton-court-container {
        min-height: auto !important;
        margin-top: 24px !important;
        transform: none !important;
        margin-bottom: 0 !important;
    }

    .glass-cards-wrapper {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0 20px 20px;
        -webkit-overflow-scrolling: touch;
    }

    .glass-card {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 320px !important;
        top: auto !important;
        border-radius: 20px;
        -webkit-transform: none !important;
        transform: none !important;
        opacity: 1 !important;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: auto;
    }

    .glass-card--technique {
        height: 440px !important;
        order: -1 !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
        -webkit-transform: none;
        transform: none;
    }
    .glass-card--daily-progress { z-index: 2 !important; }
    .glass-card--focus-areas { z-index: 3 !important; }
    .glass-card--focus-areas .card-svg {
        top: 16px !important;
    }
    .glass-card--session { z-index: 4 !important; }
    .glass-card--coach { z-index: 5 !important; }
    .glass-card--coach .card-svg {
        top: 0px !important;
    }

    .card-img--player {
        height: 100% !important;
        bottom: 148px !important;
        left: calc(50% - 32px) !important;
        transform: translateX(-50%) scale(1.2) !important;
        animation: none !important;
    }

    .card-img--light-overlay {
        display: none !important;
    }

    .card-svg {
        border-radius: 16px;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        bottom: 0 !important;
        object-fit: contain !important;
    }

    /* Disable dots canvas animation on mobile — causes vibration with sticky */
    .dots-canvas {
        display: none !important;
    }
}

/* --- Recording Solutions Section Mobile (redesigned row layout) --- */
@media (max-width: 767px) {
    #recording-solutions-section {
        padding: 40px 0 !important;
        margin-top: -1px !important;
        border: none !important;
        box-shadow: none !important;
    }

    #recording-solutions-section::before {
        display: none !important;
    }

    .recording-solutions-container {
        gap: 36px !important;
    }

    .recording-row,
    .recording-row.recording-row--reversed {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .recording-row-image-wrap {
        width: 100% !important;
        min-width: unset !important;
        height: 260px !important;
        border-radius: 12px !important;
    }

    .recording-row--reversed .recording-row-image-wrap {
        height: 258px !important;
    }

    .recording-card-content,
    .recording-row--reversed .recording-card-content {
        max-width: 100% !important;
        padding: 0 4px !important;
    }

    .recording-card-label {
        font-size: 13px !important;
    }

    .recording-card-title {
        font-size: 18px !important;
    }

    .recording-card-description {
        font-size: 15px !important;
        max-width: 100% !important;
    }
}

/* --- Solution / Get In Touch Section Mobile --- */
@media (max-width: 767px) {
    #solution-photo-frame {
        aspect-ratio: auto !important;
        height: 100vh !important;
        min-height: 100vh;
        perspective: none !important;
        isolation: auto !important;
    }

    #solution-photo-frame::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 5;
        pointer-events: none;
    }

    #solution-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #solution-header-overlay {
        width: 100% !important;
        padding: 24px !important;
        top: 100px !important;
        bottom: auto !important;
        transform: none !important;
        background: none !important;
    }

    #solution-header-overlay h2 {
        font-size: clamp(36px, 10vw, 60px) !important;
        mix-blend-mode: normal !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    #solution-header-overlay p:first-child {
        font-size: 18px !important;
    }

    .solution-nav-btn {
        padding: 14px 16px;
        min-height: 48px;
        touch-action: manipulation;
    }

    /* Disable hover transform on mobile — iOS Safari requires double-tap
       when :hover changes layout (transform), first tap = hover, second = click */
    .solution-nav-btn:hover {
        transform: none !important;
    }

    .indicator-label {
        font-size: 16px !important;
    }

    .solution-indicator {
        padding: 10px 14px;
        min-height: 44px;
    }

    .solution-card {
        width: calc(100vw - 40px) !important;
        max-width: 360px;
    }

    /* Expanded view mobile — matched to Figma (402px frame) */
    .solution-expanded-view {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    .expanded-content {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        padding: 0 20px !important;
        padding-top: 40px !important;
        gap: 19px !important;
        z-index: 10 !important;
        display: flex !important;
    }

    .expanded-nav {
        gap: 24px !important;
    }

    .expanded-back-btn {
        width: 24px !important;
        height: 24px !important;
        padding: 10px !important;
        box-sizing: content-box !important;
        margin: -10px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .expanded-badge {
        padding: 8px 16px !important;
        border-radius: 8px !important;
    }

    .expanded-badge-dot {
        width: 16px !important;
        height: 16px !important;
    }

    .expanded-badge-text {
        font-size: 14px !important;
        letter-spacing: -0.5px !important;
    }

    .expanded-text {
        gap: 8px !important;
    }

    .expanded-headline {
        font-size: 32px !important;
        line-height: 1.0 !important;
        letter-spacing: -0.5px !important;
        width: 100% !important;
        mix-blend-mode: normal !important;
        -webkit-text-fill-color: #ffffff !important;
        color: #ffffff !important;
    }

    .expanded-description {
        font-size: 16px !important;
        line-height: 1.5 !important;
        letter-spacing: -0.3px !important;
        width: 100% !important;
    }

    .expanded-cta-btn {
        height: 53px !important;
        min-height: 53px !important;
        padding: 14px 30px !important;
        margin-top: 8px !important;
        font-size: 16px !important;
    }

    .expanded-video-bg {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        z-index: 0 !important;
    }

    .expanded-overlay {
        z-index: 1 !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }

    .expanded-cards-container {
        display: none !important;
    }

    /* Contact form mobile — bottom sheet */
    .contact-form-overlay {
        overflow: hidden !important;
        align-items: flex-end !important;
    }

    .contact-form-container {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 20px !important;
        padding-top: 12px !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        transform: translateY(100%) !important;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    .contact-form-overlay.active .contact-form-container {
        transform: translateY(0) !important;
    }

    /* Bottom sheet drag handle */
    .contact-form-container::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    .contact-form {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .form-group {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .phone-input-group {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .phone-input-group .country-code-select {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        flex: 0 0 80px !important;
        padding: 12px 28px 12px 10px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    .phone-input-group input[type="tel"] {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* --- Stats Section Mobile --- */
@media (max-width: 767px) {
    .relative.py-32 {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        border: none !important;
    }
}

/* Footer Section Mobile styles moved to components/footer.css */

/* --- Global Touch Target Enforcement --- */
@media (max-width: 767px) {
    button, a, [role="button"], .cursor-pointer {
        min-height: 44px;
    }

    /* Ensure text does not overflow */
    h1, h2, h3, h4, h5, h6, p {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* --- Extra small screens (320px - 374px) --- */
@media (max-width: 374px) {
    #hero-heading {
        font-size: 1.75rem !important;
    }

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

    .ma-intro-heading {
        font-size: 24px !important;
    }

    .ma-feedback-text {
        font-size: 22px !important;
    }

    .ma-strengths-intro-text .main,
    .ma-areas-text .main {
        font-size: 22px !important;
    }

    .ma-strengths-intro-text .sub,
    .ma-areas-text .sub {
        font-size: 18px !important;
    }

    .ma-glance-card {
        max-width: 100%;
    }

    .ma-game-scores {
        gap: 16px !important;
        flex-wrap: wrap;
    }

    .ma-game-score .score {
        font-size: 18px !important;
    }

    #solution-header-overlay h2 {
        font-size: 32px !important;
    }

    .footer-backed-logos {
        flex-wrap: wrap;
        gap: 12px !important;
    }
}