/* ==========================================================================
 |    PARTNER - DESKTOP SPECIFIC FIXES
 |    ========================================================================== */

/* Desktop Highlight Cards Improvements */
@media (min-width: 1024px) {
    /* Force better grid layout for desktop */
    .about-highlights {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 50px !important;
        max-width: 1400px !important;
        margin: 100px auto 0 auto !important;
    }

    /* Improved card sizing and content flow */
    .highlight-card {
        min-height: 380px !important;
        padding: 50px 35px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Better text handling */
    .highlight-card h3 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* Better description text */
    .highlight-card p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-grow: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Icon improvements */
    .highlight-icon {
        width: 85px !important;
        height: 85px !important;
        font-size: 2.1rem !important;
        margin-bottom: 28px !important;
        flex-shrink: 0 !important;
    }
}

/* Large Desktop Improvements */
@media (min-width: 1200px) {
    .about-highlights {
        gap: 60px !important;
        max-width: 1500px !important;
        margin: 120px auto 0 auto !important;
    }

    .highlight-card {
        min-height: 420px !important;
        padding: 60px 45px !important;
    }

    .highlight-card h3 {
        font-size: 1.95rem !important;
        margin-bottom: 24px !important;
    }

    .highlight-card p {
        font-size: 1.15rem !important;
        line-height: 1.65 !important;
    }

    .highlight-icon {
        width: 95px !important;
        height: 95px !important;
        font-size: 2.3rem !important;
        margin-bottom: 32px !important;
    }
}

/* Extra Large Desktop */
@media (min-width: 1400px) {
    .about-highlights {
        gap: 70px !important;
        max-width: 1600px !important;
        margin: 140px auto 0 auto !important;
    }

    .highlight-card {
        min-height: 450px !important;
        padding: 70px 50px !important;
    }

    .highlight-card h3 {
        font-size: 2.05rem !important;
        margin-bottom: 28px !important;
        line-height: 1.25 !important;
    }

    .highlight-card p {
        font-size: 1.2rem !important;
        line-height: 1.7 !important;
    }

    .highlight-icon {
        width: 105px !important;
        height: 105px !important;
        font-size: 2.5rem !important;
        margin-bottom: 36px !important;
    }
}

/* Ultra Wide Desktop */
@media (min-width: 1600px) {
    .about-highlights {
        gap: 80px !important;
        max-width: 1800px !important;
    }

    .highlight-card {
        min-height: 480px !important;
        padding: 80px 60px !important;
    }

    .highlight-card h3 {
        font-size: 2.15rem !important;
        margin-bottom: 32px !important;
    }

    .highlight-card p {
        font-size: 1.25rem !important;
    }

    .highlight-icon {
        width: 110px !important;
        height: 110px !important;
        font-size: 2.6rem !important;
        margin-bottom: 40px !important;
    }
}

/* Text Overflow Prevention */
@media (min-width: 1024px) {
    .highlight-card h3 {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -moz-hyphens: auto !important;
        -ms-hyphens: auto !important;
    }

    /* Specific fixes for common text issues */
    .highlight-card h3:lang(id) {
        hyphens: manual !important;
        word-break: keep-all !important;
    }
}

/* Fallback for browsers that don't support CSS Grid properly */
@supports not (display: grid) {
    @media (min-width: 1024px) {
        .about-highlights {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
        }

        .highlight-card {
            flex: 0 1 calc(33.333% - 40px) !important;
            margin: 0 20px 40px 20px !important;
        }
    }
}

/* Additional Text Handling Improvements */
@media (min-width: 1024px) {
    /* Ensure proper text rendering */
    .highlight-card h3 {
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* Prevent text from being cut off */
    .highlight-card {
        overflow: visible !important;
    }

    /* Better spacing for Indonesian text */
    .highlight-card h3:lang(id) {
        letter-spacing: -0.02em !important;
        word-spacing: 0.1em !important;
    }

    /* Ensure cards have enough space */
    .about-highlights {
        padding: 0 20px !important;
    }
}

/* Debug helper - remove in production */
/*
@media (min-width: 1024px) {
    .highlight-card {
        border: 1px dashed red !important;
    }

    .highlight-card h3 {
        border: 1px dashed blue !important;
    }
}
*/