/* Desktop Phone Number Display Fix */

/* Fix phone number display on desktop */
@media (min-width: 992px) {
    .phone-number {
        font-size: 1.5rem !important; /* ลดขนาดตัวอักษร */
        white-space: nowrap !important; /* บังคับให้อยู่ในบรรทัดเดียว */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: 0.05em !important; /* ลดระยะห่างตัวอักษร */
        line-height: 1.2 !important;
        display: block !important;
        text-align: center !important;
        margin: 1rem 0 !important;
    }
    
    /* Adjust for extra large screens */
    @media (min-width: 1200px) {
        .phone-number {
            font-size: 1.75rem !important;
        }
    }
    
    /* Ensure number cards have enough width */
    .number-card {
        min-width: 280px !important;
    }
    
    /* Optimize grid layout for desktop */
    .row.g-4 > .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    /* For medium screens, use 3 columns */
    @media (min-width: 992px) and (max-width: 1199px) {
        .row.g-4 > .col-lg-3 {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }
        
        .phone-number {
            font-size: 1.4rem !important;
        }
    }
}

/* Alternative approach using flexbox for phone numbers */
@media (min-width: 992px) {
    .number-card .phone-number {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }
}

/* Ensure proper spacing in number display */
@media (min-width: 768px) {
    .phone-number {
        padding: 0 10px;
    }
}

/* Fix for specific phone number formats */
@media (min-width: 992px) {
    /* Handle xxx-xxx-xxxx format */
    .phone-number {
        min-width: 0;
        max-width: 100%;
        word-break: keep-all !important;
        hyphens: none !important;
    }
}