/* ============================================
   MOBILE-ONLY OPTIMIZATION
   Industry-Standard Mobile UX Best Practices
   ⚠️ DESKTOP STYLES REMAIN UNCHANGED
   ============================================ */

/* Mobile breakpoint: screens ≤ 767px */
@media (max-width: 767px) {
    
    /* ==========================================
       1️⃣ TYPOGRAPHY OPTIMIZATION (Mobile Only)
       ========================================== */
    
    /* Body text - industry standard 15.5-16px */
    body,
    p,
    li,
    .case-text-emphasis {
        font-size: 15.5px !important;
        line-height: 1.55 !important;
    }
    
    /* Heading hierarchy - mobile optimized */
    h1,
    .hero-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    
    h2,
    .section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }
    
    h3,
    .case-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    h4,
    .case-section-title {
        font-size: 17px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }
    
    h5 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    h6 {
        font-size: 15.5px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    /* Subtitles and supporting text */
    .section-subtitle,
    .hero-subtitle {
        font-size: 15.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    
    /* Small text */
    small,
    .case-meta-item,
    .impact-label {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
    
    /* ==========================================
       2️⃣ SECTION PADDING & SPACING
       ========================================== */
    
    /* Reduce section vertical padding */
    section {
        padding: 48px 0 !important;
    }
    
    .container {
        padding: 0 20px !important;
    }
    
    /* Section headers */
    .section-header {
        margin-bottom: 32px !important;
    }
    
    /* Card padding */
    .card,
    .challenge-card,
    .pillar-card,
    .system-card {
        padding: 18px !important;
        margin-bottom: 16px !important;
    }
    
    /* Case study layout */
    .case-content-main {
        padding: 0 !important;
    }
    
    /* ==========================================
       3️⃣ METRIC TILES (Mobile Compact)
       ========================================== */
    
    /* Impact grid - force single column */
    .impact-grid,
    .kpi-dashboard .impact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Individual tiles - compact & premium */
    .impact-tile {
        padding: 16px 18px !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        border-radius: 8px !important;
    }
    
    /* Metric value - readable but not oversized */
    .impact-value {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin: 8px 0 6px !important;
        font-weight: 700 !important;
    }
    
    /* Metric label - clear hierarchy */
    .impact-label {
        font-size: 13.5px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    
    /* Icon sizing */
    .impact-icon,
    .impact-tile .impact-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    /* KPI dashboard header */
    .kpi-dashboard h5 {
        font-size: 17px !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }
    
    /* ==========================================
       4️⃣ CHARTS & VISUALIZATIONS
       ========================================== */
    
    /* Chart containers */
    .performance-chart,
    .chart-wrapper,
    .dual-chart-container .chart-card {
        height: 240px !important;
        margin-bottom: 16px !important;
    }
    
    canvas {
        max-height: 240px !important;
    }
    
    /* Dual charts - stack vertically */
    .dual-chart-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* Chart cards */
    .chart-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .chart-title {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }
    
    /* ==========================================
       5️⃣ FLOWCHARTS / DIAGRAMS (Mobile Stack)
       ========================================== */
    
    /* Three-pillar system - vertical stack */
    .three-pillars-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .pillar-card {
        width: 100% !important;
        padding: 16px !important;
    }
    
    .pillar-icon-large {
        font-size: 28px !important;
        margin-bottom: 10px !important;
    }
    
    .pillar-title {
        font-size: 17px !important;
        margin-bottom: 10px !important;
    }
    
    .pillar-list li {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }
    
    /* Audience funnel - vertical */
    .audience-funnel {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .funnel-stage {
        width: 100% !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    /* Attribution system */
    .attribution-pipeline {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .attribution-stage {
        width: 100% !important;
        padding: 16px !important;
    }
    
    /* Hub-spoke system - mobile adaptation */
    .hub-spoke-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }
    
    .central-hub {
        width: 140px !important;
        height: 140px !important;
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }
    
    .spoke {
        position: relative !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .spoke-connector {
        display: none !important; /* Hide connecting lines on mobile */
    }
    
    .spoke-card {
        padding: 16px !important;
    }
    
    /* Reduce shadows (less bulk on mobile) */
    .pillar-card,
    .spoke-card,
    .funnel-stage,
    .attribution-stage {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    
    /* ==========================================
       6️⃣ FLOATING TOC - HIDE ON MOBILE
       ========================================== */
    
    .case-toc-sidebar,
    .floating-toc {
        display: none !important;
    }
    
    /* ==========================================
       7️⃣ HERO SECTION OPTIMIZATION
       ========================================== */
    
    .hero {
        padding: 56px 0 48px !important;
    }
    
    .hero-title {
        font-size: 26px !important;
        margin-bottom: 12px !important;
    }
    
    .hero-subtitle {
        font-size: 15.5px !important;
        margin-bottom: 16px !important;
    }
    
    /* Hero counters - stack vertically */
    .hero-counters {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 24px !important;
    }
    
    .counter-item {
        padding: 12px !important;
        text-align: center !important;
    }
    
    .counter-number {
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }
    
    .counter-label {
        font-size: 13.5px !important;
    }
    
    /* ==========================================
       8️⃣ BUTTONS & INTERACTIVE ELEMENTS
       ========================================== */
    
    /* Touch-friendly button sizing */
    button,
    .btn,
    .cta-button {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 15.5px !important;
        border-radius: 6px !important;
    }
    
    /* Case tabs - vertical stack */
    .case-tabs {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .case-tab {
        width: 100% !important;
        padding: 14px 16px !important;
        min-height: 44px !important;
        text-align: left !important;
        border-radius: 6px !important;
    }
    
    .case-tab-number {
        font-size: 14px !important;
    }
    
    .case-tab-title {
        font-size: 16px !important;
    }
    
    .case-tab-subtitle {
        font-size: 13px !important;
    }
    
    /* ==========================================
       9️⃣ PREVENT ZOOMED-IN FEELING
       ========================================== */
    
    /* Ensure no horizontal scroll */
    * {
        max-width: 100% !important;
    }
    
    img,
    video,
    iframe {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Container constraints */
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Prevent text overflow */
    h1, h2, h3, h4, h5, h6, p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* ==========================================
       🔟 SPACING RHYTHM (Mobile Grid)
       ========================================== */
    
    /* Small element spacing */
    .case-meta-item {
        margin-bottom: 8px !important;
    }
    
    /* Component spacing */
    .challenge-cards {
        gap: 12px !important;
        margin-top: 16px !important;
    }
    
    .challenge-card {
        margin-bottom: 12px !important;
    }
    
    /* Section spacing */
    .case-challenge,
    .case-solution,
    .case-impact,
    .case-learnings {
        margin-bottom: 32px !important;
        padding-bottom: 24px !important;
    }
    
    /* Major section breaks */
    .toc-anchor {
        padding-top: 24px !important;
        margin-top: 32px !important;
    }
    
    /* ==========================================
       ADDITIONAL MOBILE REFINEMENTS
       ========================================== */
    
    /* Navigation */
    .navbar {
        padding: 12px 0 !important;
    }
    
    .nav-container {
        padding: 0 20px !important;
    }
    
    /* Logo sizing */
    .nav-logo {
        font-size: 18px !important;
    }
    
    /* Mobile menu */
    .nav-links {
        padding: 16px !important;
    }
    
    .nav-links li {
        margin-bottom: 12px !important;
    }
    
    .nav-links a {
        font-size: 16px !important;
        padding: 10px 0 !important;
    }
    
    /* Case meta grid */
    .case-meta-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Case notes */
    .case-note {
        padding: 16px !important;
        margin: 24px 0 !important;
        border-radius: 8px !important;
    }
    
    .case-note h5 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .case-note p {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
    }
    
    /* Learning items */
    .learnings-list {
        gap: 16px !important;
    }
    
    .learning-item {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .learning-number {
        font-size: 16px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    
    .learning-content strong {
        font-size: 15.5px !important;
        display: block !important;
        margin-bottom: 6px !important;
    }
    
    .learning-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Behavioral pivot section (mobile) */
    .breakthrough-highlight {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 16px !important;
        text-align: center !important;
    }
    
    .breakthrough-icon {
        width: 64px !important;
        height: 64px !important;
        font-size: 28px !important;
        margin: 0 auto !important;
    }
    
    .breakthrough-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    .breakthrough-subtitle {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
    }
    
    .pivot-section {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .pivot-section h6 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .pivot-section p {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
    }
    
    .pivot-section li {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }
    
    .pivot-callout {
        padding: 20px 16px !important;
        font-size: 14.5px !important;
        line-height: 1.6 !important;
    }
    
    .pivot-callout p {
        padding: 0 12px !important;
    }
    
    /* Framework insights */
    .framework-insight {
        padding: 16px !important;
        margin: 16px 0 !important;
    }
    
    .insight-icon {
        font-size: 24px !important;
        margin-right: 12px !important;
    }
    
    .insight-content {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
    }
    
    /* Footer */
    footer {
        padding: 40px 0 32px !important;
    }
    
    .footer-content {
        flex-direction: column !important;
        gap: 24px !important;
        text-align: center !important;
    }
    
    /* Scroll-to-top button */
    .scroll-to-top {
        width: 44px !important;
        height: 44px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
    
    /* ==========================================
       FINAL POLISH
       ========================================== */
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth !important;
    }
    
    /* Prevent text size adjustment on orientation change */
    html {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    /* Optimize tap highlighting */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Better font rendering on mobile */
    body {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* End of Mobile-Only Optimizations */