/* Mobile Layout Fixes for Guide Pages - Highway 71 Auto Parts */
/* Version 2.0 - Enhanced targeting for feature boxes and Shop by Brand */

/* ============================================
   FEATURE BOXES (1-Year Warranty, VIN Programmed, etc.)
   ============================================ */

/* Mobile: Stack feature boxes vertically */
@media (max-width: 767px) {
    /* Force flex container to wrap */
    .elementor-section .elementor-container,
    .elementor-section-wrap > .elementor-section .elementor-container {
        flex-wrap: wrap !important;
    }
    
    /* Each feature box column takes full width on mobile */
    .elementor-column.elementor-col-25,
    .elementor-column.elementor-col-20,
    .elementor-column[data-col="25"],
    .elementor-column[data-col="20"] {
        width: 50% !important;
        min-width: 150px !important;
    }
    
    /* Icon box wrapper - vertical stack */
    .elementor-widget-icon-box .elementor-icon-box-wrapper {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px 5px !important;
    }
    
    /* Icon box content */
    .elementor-widget-icon-box .elementor-icon-box-content {
        text-align: center !important;
    }
    
    /* Icon box title - prevent text from running together */
    .elementor-icon-box-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        margin-bottom: 5px !important;
    }
    
    /* Icon box description */
    .elementor-icon-box-description {
        font-size: 12px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
    }
    
    /* ============================================
       SHOP BY BRAND BUTTONS  
       ============================================ */
    
    /* Button section - ensure columns wrap */
    .elementor-widget-button {
        margin-bottom: 10px !important;
    }
    
    /* Buttons should have proper spacing */
    .elementor-button-wrapper {
        display: block !important;
        width: 100% !important;
    }
    
    /* Button itself - full width with text wrapping */
    .elementor-widget-button .elementor-button {
        width: 100% !important;
        min-width: unset !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        height: auto !important;
        min-height: auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Button columns - stack vertically */
    .elementor-inner-section .elementor-column,
    .elementor-section.elementor-inner-section .elementor-column {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* Ensure button text is visible */
    .elementor-button-text {
        display: inline-block !important;
        text-overflow: clip !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    /* Button icons */
    .elementor-button-icon {
        margin-right: 8px !important;
    }
    
    /* ============================================
       GENERAL LAYOUT FIXES
       ============================================ */
    
    /* Heading widgets */
    .elementor-widget-heading .elementor-heading-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
    }
    
    /* Hero sections */
    .h71-guide-hero {
        padding: 20px 15px !important;
    }
    
    .h71-guide-hero h1 {
        font-size: 1.3em !important;
        line-height: 1.2 !important;
    }
    
    .h71-guide-hero p {
        font-size: 1em !important;
    }
    
    /* Text editor widgets */
    .elementor-widget-text-editor {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Section padding on mobile */
    .elementor-section > .elementor-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Gap fix for inner sections */
    .elementor-inner-section .elementor-container {
        gap: 10px !important;
    }
}

/* ============================================
   TABLET (768px - 1024px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Feature boxes - 2 columns on tablet */
    .elementor-column.elementor-col-25,
    .elementor-column[data-col="25"] {
        width: 50% !important;
    }
    
    /* Shop by Brand buttons - 2 columns */
    .elementor-inner-section .elementor-column {
        width: 50% !important;
    }
    
    /* Button text wrapping */
    .elementor-widget-button .elementor-button {
        white-space: normal !important;
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
}

/* ============================================
   SMALL PHONES (< 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Feature boxes - 2 columns even on small phones */
    .elementor-column.elementor-col-25,
    .elementor-column.elementor-col-20,
    .elementor-column[data-col="25"],
    .elementor-column[data-col="20"] {
        width: 50% !important;
    }
    
    /* Smaller font sizes */
    .elementor-icon-box-title {
        font-size: 12px !important;
    }
    
    .elementor-icon-box-description {
        font-size: 11px !important;
    }
    
    /* Buttons full width */
    .elementor-widget-button .elementor-button {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
}