/*
 * Business Transformation - MINIMAL Mobile Fixes Only
 * Conservative approach: Only fix what's broken on mobile
 * DO NOT override desktop styles
 */

/* ========================================
   MOBILE FIXES ONLY (max-width: 767px)
   ======================================== */

@media only screen and (max-width: 767px) {

    /* Fix value dimensions grid on mobile */
    .value-dimensions {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 20px !important;
    }

    /* Fix framework phases on mobile - vertical stack */
    .framework-phases {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .framework-phases:after,
    .progress-bar {
        display: none !important;
    }

    .phase-item {
        min-width: 100% !important;
        margin: 0 !important;
    }

    /* Fix maturity levels on mobile */
    .maturity-levels {
        flex-direction: column !important;
    }

    .maturity-level {
        min-width: 100% !important;
        margin: 0 0 15px 0 !important;
    }

    /* Fix dimensions grid on mobile */
    .dimensions-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .dimension-item {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Fix industry tabs on mobile */
    .industry-tab-nav {
        justify-content: flex-start !important;
    }

    .industry-tab-btn {
        flex: 0 0 auto !important;
        min-width: auto !important;
    }

    /* Fix lead gen container on mobile */
    .lead-gen-content,
    .lead-gen-form {
        padding: 25px 20px !important;
    }

    /* Fix CTA footer on mobile */
    .social-proof {
        padding-left: 0 !important;
        border-left: none !important;
        margin-top: 30px !important;
        padding-top: 30px !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
    }

    .btn-outline {
        margin-left: 0 !important;
        margin-top: 10px !important;
        display: block !important;
        width: 100% !important;
    }

    /* Fix case study results on mobile */
    .case-study-results {
        flex-direction: column !important;
    }

    .result-item {
        min-width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Ensure no horizontal overflow */
    .value-dimensions-container,
    .framework-container,
    .maturity-model-container {
        overflow-x: hidden !important;
    }

    /* Fix industry content on mobile */
    .industry-challenges,
    .industry-solutions {
        padding: 0 !important;
        margin-bottom: 20px !important;
    }
}

/* ========================================
   TABLET ADJUSTMENTS (768px - 991px)
   ======================================== */

@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* Two column grid on tablets */
    .value-dimensions {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dimensions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Stack phases vertically on tablets too */
    .framework-phases {
        flex-direction: column !important;
    }

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