/* ============================================
   ROI/Growth Calculator - Mobile Optimization
   Expert Mobile Fixes for Perfect Responsive Experience
   ============================================ */

/* Mobile First: 320px - 480px (Small Mobile) */
@media (max-width: 480px) {
    /* Calculator Container */
    .growth-calculator {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .growth-calculator--manufacturing {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Input & Results Panels */
    .growth-calculator__inputs,
    .growth-calculator__results {
        padding: 1.25rem 1rem;
        border-radius: 16px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .growth-calculator__section-title {
        font-size: 1.1rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        word-break: break-word;
    }

    /* Input Groups - Better Spacing */
    .growth-input-group {
        margin-bottom: 1.5rem;
    }

    /* Labels - Stack on Very Small Screens */
    .growth-label {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .growth-label__text {
        font-size: 0.9rem;
        flex: 1 1 100%;
        min-width: 0;
    }

    .growth-label__value {
        font-size: 1.15rem;
        min-width: auto;
        flex: 0 0 auto;
    }

    /* Sliders - Enhanced Touch Targets */
    .growth-slider {
        height: 12px !important;
        border-radius: 6px;
        margin: 1rem 0;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    .growth-slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -2px;
    }

    .growth-slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    .growth-slider-wrapper {
        margin: 1rem 0;
        padding: 0.5rem 0;
    }

    /* Range Labels - Smaller Text */
    .growth-range-labels {
        font-size: 0.75rem;
        margin-top: 0.75rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .growth-range-labels span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Approach Selector */
    .growth-approach-selector {
        margin-top: 1.75rem;
        padding-top: 1.5rem;
    }

    .growth-approach-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .growth-approach-options {
        grid-template-columns: 1fr !important;
        gap: 0.875rem;
    }

    .growth-approach-card {
        padding: 1rem;
        min-height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .growth-approach-card strong {
        font-size: 0.95rem;
    }

    .growth-approach-card small {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    /* Outcome Cards - Single Column */
    .growth-outcome-cards {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .growth-outcome-card {
        padding: 1.25rem 1rem;
        gap: 0.875rem;
    }

    .growth-outcome-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .growth-outcome-icon svg {
        width: 22px;
        height: 22px;
    }

    .growth-outcome-label {
        font-size: 0.75rem;
    }

    .growth-outcome-value {
        font-size: 1.5rem;
        word-break: break-word;
    }

    .growth-outcome-change {
        font-size: 0.85rem;
    }

    /* Methodology Breakdown */
    .growth-methodology-breakdown {
        margin-top: 1.75rem;
        padding: 1.25rem 1rem;
        border-radius: 16px;
    }

    .growth-breakdown-title {
        font-size: 1.1rem;
        margin-bottom: 1.25rem;
    }

    .growth-phases {
        gap: 1.25rem;
    }

    .growth-phase {
        padding: 1.25rem 1rem;
        border-radius: 12px;
    }

    .growth-phase-header {
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-bottom: 0.875rem;
    }

    .growth-phase-number {
        font-size: 1.3rem;
    }

    .growth-phase-title {
        font-size: 1rem;
        flex: 1 1 100%;
    }

    .growth-phase-duration {
        font-size: 0.8rem;
        padding: 0.35rem 0.75rem;
    }

    .growth-phase-description {
        font-size: 0.9rem;
        margin-bottom: 0.875rem;
    }

    .growth-phase-deliverables li {
        font-size: 0.85rem;
        padding-left: 1.35rem;
        line-height: 1.5;
    }

    /* CTA Block */
    .growth-cta-block {
        margin-top: 1.75rem;
        padding: 1.5rem 1.25rem;
        gap: 1.25rem;
        border-radius: 16px;
    }

    .growth-cta-content h4 {
        font-size: 1.15rem;
    }

    .growth-cta-content p {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    /* Framework Overview */
    .growth-framework-overview {
        grid-template-columns: 1fr !important;
        padding: 1.25rem 1rem;
        gap: 1rem;
    }

    .growth-framework-overview--detailed {
        grid-template-columns: 1fr !important;
    }

    /* Context Badges */
    .growth-calculator-context {
        gap: 0.75rem;
        margin-top: 1.25rem;
        justify-content: flex-start;
    }

    .growth-context-badge {
        font-size: 0.8rem;
        padding: 0.5rem 0.875rem;
        white-space: nowrap;
    }

    /* Pillar Grid */
    .growth-pillar-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Selector Wrapper */
    .industry-selector-wrapper {
        margin: 1.25rem auto;
        padding: 1rem;
        border-radius: 12px;
    }

    .growth-selector-container {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .growth-selector-item {
        width: 100%;
    }

    .growth-selector-label {
        font-size: 0.85rem;
        padding: 0.75rem;
    }

    .growth-selector {
        font-size: 0.9rem;
        padding: 0.875rem;
        min-height: 48px;
        touch-action: manipulation;
    }
}

/* Tablet Portrait: 481px - 640px */
@media (min-width: 481px) and (max-width: 640px) {
    .growth-calculator {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .growth-calculator--manufacturing {
        grid-template-columns: 1fr;
    }

    .growth-calculator__inputs,
    .growth-calculator__results {
        padding: 1.5rem 1.25rem;
    }

    .growth-approach-options {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .growth-outcome-cards {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .growth-slider {
        height: 10px;
    }

    .growth-slider::-webkit-slider-thumb,
    .growth-slider::-moz-range-thumb {
        width: 26px;
        height: 26px;
    }
}

/* Tablet Landscape: 641px - 768px */
@media (min-width: 641px) and (max-width: 768px) {
    .growth-calculator {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .growth-calculator--manufacturing {
        grid-template-columns: 1fr;
    }

    .growth-outcome-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .growth-approach-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* iPad/Tablet: 769px - 992px */
@media (min-width: 769px) and (max-width: 992px) {
    .growth-calculator {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .growth-calculator--manufacturing {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .growth-outcome-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small Desktop: 993px - 1200px */
@media (min-width: 993px) and (max-width: 1200px) {
    .growth-calculator {
        grid-template-columns: 1fr 1.1fr;
        gap: 2rem;
    }

    .growth-calculator--manufacturing {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem;
    }
}

/* Touch Device Optimizations (All Mobile/Tablet) */
@media (hover: none) and (pointer: coarse) {
    /* Enhanced Touch Targets */
    .growth-slider {
        height: 14px !important;
        cursor: pointer;
    }

    .growth-slider::-webkit-slider-thumb {
        width: 32px;
        height: 32px;
        cursor: pointer;
    }

    .growth-slider::-moz-range-thumb {
        width: 32px;
        height: 32px;
        cursor: pointer;
    }

    .growth-approach-card {
        min-height: 80px;
        padding: 1.25rem;
        cursor: pointer;
    }

    .growth-selector {
        min-height: 52px;
        font-size: 16px; /* Prevents iOS zoom */
        cursor: pointer;
    }

    /* Better tap targets for all buttons */
    .growth-cta-block .btn,
    button {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
        touch-action: manipulation;
    }

    /* Remove hover effects on touch devices */
    .growth-approach-card:hover,
    .growth-outcome-card:hover,
    .growth-phase:hover {
        transform: none;
    }

    /* Active states for touch feedback */
    .growth-approach-card:active {
        transform: scale(0.98);
    }

    .growth-slider:active::-webkit-slider-thumb,
    .growth-slider:active::-moz-range-thumb {
        transform: scale(1.2);
    }
}

/* Landscape Mode Fixes */
@media (max-height: 600px) and (orientation: landscape) {
    .growth-calculator__inputs,
    .growth-calculator__results {
        padding: 1rem;
    }

    .growth-input-group {
        margin-bottom: 1rem;
    }

    .growth-calculator__section-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .growth-outcome-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }

    .growth-methodology-breakdown {
        margin-top: 1.5rem;
        padding: 1rem;
    }
}

/* Prevent Horizontal Scroll */
@media (max-width: 768px) {
    .growth-calculator,
    .growth-calculator *,
    .growth-calculator__inputs,
    .growth-calculator__results {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Ensure text doesn't overflow */
    .growth-label__text,
    .growth-phase-title,
    .growth-outcome-value {
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }
}

/* High DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .growth-slider::-webkit-slider-thumb {
        box-shadow: 0 4px 14px rgba(244, 161, 0, 0.5);
    }

    .growth-slider::-moz-range-thumb {
        box-shadow: 0 4px 14px rgba(244, 161, 0, 0.5);
    }
}

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix iOS Safari slider */
    .growth-slider {
        -webkit-appearance: none;
        background: linear-gradient(90deg, 
            rgba(244, 161, 0, 0.2) 0%, 
            rgba(244, 161, 0, 0.4) 100%
        );
    }

    /* Prevent iOS zoom on input focus */
    .growth-selector,
    input[type="range"] {
        font-size: 16px;
    }

    /* Fix iOS double-tap zoom */
    .growth-approach-card,
    .growth-outcome-card {
        touch-action: manipulation;
    }
}

/* Android Specific Fixes */
@media (max-width: 768px) {
    /* Fix Android Chrome slider rendering */
    .growth-slider {
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    .growth-slider:focus {
        outline: 2px solid rgba(244, 161, 0, 0.5);
        outline-offset: 2px;
    }
}

/* Accessibility - Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    .growth-slider::-webkit-slider-thumb,
    .growth-slider::-moz-range-thumb,
    .growth-approach-card,
    .growth-outcome-card,
    .growth-phase {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .growth-calculator {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .growth-slider,
    .growth-approach-selector {
        display: none;
    }
}

/* ============================================
   GROWTH PROJECTION HERO METRIC - MOBILE FIX
   (The "Projected Revenue Growth" card)
   ============================================ */

/* Mobile First: 320px - 640px */
@media (max-width: 640px) {
    /* Hero Metric Container - Stack Vertically */
    .growth-hero-metric {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
        margin-bottom: 2rem;
    }

    /* Main Card - Reduce Padding */
    .growth-hero-metric-main {
        padding: 1.5rem 1.25rem;
        overflow: hidden;
    }

    /* Label Section */
    .growth-hero-label {
        margin-bottom: 1.25rem;
        flex-wrap: wrap;
    }

    .growth-hero-label span {
        font-size: 0.85rem;
        letter-spacing: 0.03em;
    }

    .growth-hero-label svg {
        width: 20px;
        height: 20px;
    }

    /* Value Display */
    .growth-hero-value-container {
        gap: 1rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        align-items: center;
    }

    .growth-hero-value {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    .growth-hero-change {
        font-size: 1.1rem !important;
        padding: 0.35rem 0.75rem;
    }

    /* Timeline Bar */
    .growth-hero-timeline {
        position: relative;
    }

    .growth-timeline-bar {
        height: 10px;
        margin-bottom: 0.875rem;
    }

    /* Timeline Labels - Prevent Overlap */
    .growth-timeline-labels {
        font-size: 0.7rem;
        gap: 0.25rem;
    }

    .growth-timeline-labels span {
        flex: 1;
        text-align: center;
        white-space: nowrap;
        overflow: visible;
    }

    .growth-timeline-labels span:first-child {
        text-align: left;
    }

    .growth-timeline-labels span:last-child {
        text-align: right;
    }

    /* Side Cards - Full Width Stack */
    .growth-hero-metric-side {
        gap: 1rem;
    }

    /* Metric Cards */
    .growth-metric-card {
        padding: 1.25rem 1rem;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .growth-metric-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .growth-metric-icon svg {
        width: 22px;
        height: 22px;
    }

    .growth-metric-content {
        flex: 1;
        min-width: 0;
    }

    .growth-metric-label {
        font-size: 0.8rem;
        margin-bottom: 0.35rem;
    }

    .growth-metric-value {
        font-size: 1.3rem;
        margin-bottom: 0.25rem;
    }

    .growth-metric-sublabel {
        font-size: 0.75rem;
    }

    /* Projection Summary */
    .growth-projection-summary {
        padding: 1.5rem 1.25rem;
        margin-bottom: 2rem;
    }

    .projection-summary-cards {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .projection-summary-card {
        padding: 1rem;
        text-align: center;
    }

    .summary-label {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    .summary-value {
        font-size: 1.3rem;
        margin: 0.5rem 0;
    }

    .summary-helper {
        font-size: 0.75rem;
    }

    /* Range Visual */
    .projection-range-visual {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .projection-range-info {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .range-info-item {
        text-align: center;
        padding: 0.75rem 0.5rem;
        background: rgba(0, 59, 117, 0.3);
        border-radius: 8px;
    }

    .range-info-item span {
        font-size: 0.75rem;
        display: block;
        margin-bottom: 0.35rem;
    }

    .range-info-item strong {
        font-size: 1.1rem;
    }

    /* Range Track */
    .projection-range-track {
        position: relative;
        height: 8px;
        background: rgba(0, 59, 117, 0.5);
        border-radius: 4px;
        margin: 1rem 0;
    }

    .projection-track-label {
        font-size: 0.7rem;
        position: absolute;
        top: -1.5rem;
    }

    .projection-track-label:first-child {
        left: 0;
    }

    .projection-track-label--end {
        right: 0;
        left: auto;
    }

    .projection-range-values {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }

    .projection-range-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--color-primary), #FFD37A);
        border-radius: 4px;
    }

    /* ================================================
       WHERE TO FOCUS FIRST - OPPORTUNITY CARDS
       ================================================ */
    
    /* Opportunity Breakdown Container */
    .growth-opportunity-breakdown {
        padding: 1.5rem 1rem;
        margin-bottom: 2rem;
        border-radius: 16px;
    }

    .growth-opportunity-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .growth-opportunity-title {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }

    .growth-opportunity-subtitle {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* Grid - Single Column */
    .growth-opportunity-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    /* Individual Cards */
    .growth-opportunity-card {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem 1rem 1.25rem 1.5rem;
        border-radius: 16px;
        overflow: visible;
    }

    /* Remove hover transform on mobile (doesn't work well) */
    .growth-opportunity-card:hover {
        transform: none;
    }

    /* Rank Badge - Horizontal Layout */
    .growth-opportunity-rank {
        flex-direction: row;
        align-items: center;
        gap: 0.875rem;
        min-width: auto;
        justify-content: flex-start;
    }

    .rank-number {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .rank-label {
        font-size: 0.75rem;
        text-align: left;
        line-height: 1.3;
    }

    /* Content Section */
    .growth-opportunity-content {
        flex: 1;
        min-width: 0;
        width: 100%;
    }

    .growth-opportunity-content h5 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        line-height: 1.3;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }

    .growth-opportunity-content p {
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: 1rem;
        color: var(--color-text-soft);
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Metrics - Responsive Grid */
    .growth-opportunity-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        width: 100%;
    }

    .opportunity-metric {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.875rem 0.75rem;
        background: rgba(0, 59, 117, 0.3);
        border-radius: 10px;
        border: 1px solid rgba(244, 161, 0, 0.15);
    }

    .opportunity-metric .metric-label {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .opportunity-metric .metric-value {
        font-size: 1.15rem;
        line-height: 1.2;
        overflow-wrap: break-word;
    }
}

/* Extra Small Mobile: 320px - 480px */
@media (max-width: 480px) {
    /* Projection Values */
    .growth-hero-value {
        font-size: 1.75rem !important;
    }

    .growth-hero-change {
        font-size: 1rem !important;
    }

    .growth-timeline-labels {
        font-size: 0.65rem;
    }

    .growth-metric-value {
        font-size: 1.2rem;
    }

    .summary-value {
        font-size: 1.2rem;
    }

    .range-info-item strong {
        font-size: 1rem;
    }

    .projection-range-info {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .range-info-item {
        padding: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .range-info-item span {
        margin: 0;
        display: inline;
    }

    /* Opportunity Cards - Extra Small */
    .growth-opportunity-breakdown {
        padding: 1.25rem 0.875rem;
    }

    .growth-opportunity-title {
        font-size: 1.05rem;
    }

    .growth-opportunity-subtitle {
        font-size: 0.8rem;
    }

    .growth-opportunity-card {
        padding: 1rem 0.875rem 1rem 1.25rem;
        gap: 0.875rem;
    }

    .rank-number {
        font-size: 1.35rem;
        width: 42px;
        height: 42px;
    }

    .rank-label {
        font-size: 0.7rem;
    }

    .growth-opportunity-content h5 {
        font-size: 1rem;
        margin-bottom: 0.65rem;
    }

    .growth-opportunity-content p {
        font-size: 0.825rem;
        line-height: 1.55;
        margin-bottom: 0.875rem;
    }

    /* Metrics - Stack on Very Small Screens */
    .growth-opportunity-metrics {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .opportunity-metric {
        padding: 0.75rem 0.65rem;
    }

    .opportunity-metric .metric-label {
        font-size: 0.675rem;
    }

    .opportunity-metric .metric-value {
        font-size: 1.05rem;
    }
}

/* Extra Small Devices (Galaxy Fold, etc) */
@media (max-width: 320px) {
    /* Calculator Inputs/Results */
    .growth-calculator__inputs,
    .growth-calculator__results {
        padding: 1rem 0.75rem;
    }

    .growth-calculator__section-title {
        font-size: 1rem;
    }

    .growth-label__text {
        font-size: 0.85rem;
    }

    .growth-label__value {
        font-size: 1.05rem;
    }

    .growth-outcome-value {
        font-size: 1.3rem;
    }

    .growth-phase {
        padding: 1rem 0.875rem;
    }

    .growth-cta-block {
        padding: 1.25rem 1rem;
    }

    /* Projection Card */
    .growth-hero-metric-main {
        padding: 1.25rem 1rem;
    }

    .growth-hero-value {
        font-size: 1.5rem !important;
    }

    .growth-timeline-labels {
        font-size: 0.6rem;
    }

    /* Opportunity Cards - Ultra Compact */
    .growth-opportunity-breakdown {
        padding: 1rem 0.75rem;
    }

    .growth-opportunity-title {
        font-size: 0.95rem;
    }

    .growth-opportunity-subtitle {
        font-size: 0.75rem;
    }

    .growth-opportunity-card {
        padding: 0.875rem 0.75rem 0.875rem 1rem;
    }

    .rank-number {
        font-size: 1.2rem;
        width: 38px;
        height: 38px;
    }

    .rank-label {
        font-size: 0.65rem;
    }

    .growth-opportunity-content h5 {
        font-size: 0.95rem;
    }

    .growth-opportunity-content p {
        font-size: 0.8rem;
    }

    .opportunity-metric {
        padding: 0.65rem 0.5rem;
    }

    .opportunity-metric .metric-label {
        font-size: 0.65rem;
    }

    .opportunity-metric .metric-value {
        font-size: 1rem;
    }
}