/**
 * Additional Responsive Fixes
 * Ensures WordPress blocks and custom elements are fully responsive
 */

/* ===================================
   WordPress Block Overrides
   =================================== */

/* Force columns to stack on mobile */
@media (max-width: 782px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap;
        flex-direction: column;
    }
    
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
        margin-top: 24px;
    }
}

/* ===================================
   Equipment Listing Grid Responsive
   =================================== */

/* Desktop - 4 columns */
@media (min-width: 1200px) {
    .listing-grid,
    .wp-block-post-template.is-flex-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Tablet - 3 columns */
@media (min-width: 900px) and (max-width: 1199px) {
    .listing-grid,
    .wp-block-post-template.is-flex-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Small Tablet - 2 columns */
@media (min-width: 600px) and (max-width: 899px) {
    .listing-grid,
    .wp-block-post-template.is-flex-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile - 1 column */
@media (max-width: 599px) {
    .listing-grid,
    .wp-block-post-template.is-flex-container {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

/* ===================================
   Hero Section Mobile
   =================================== */

@media (max-width: 768px) {
    /* Hero carousel buttons */
    .carousel-controls {
        bottom: 16px;
        right: 16px;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    /* Hero split section */
    .hero-split .wp-block-column:first-child {
        margin-bottom: 16px;
    }
}

/* ===================================
   Filter Pills Mobile
   =================================== */

@media (max-width: 768px) {
    .filter-section {
        border-radius: 16px;
        padding: 20px;
    }
    
    .filter-group {
        margin-bottom: 20px;
    }
    
    .filter-group__title {
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .filter-pills {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .filter-section {
        padding: 16px;
    }
    
    .filter-pill {
        flex: 0 0 auto;
        min-width: auto;
    }
    
    .filter-pill input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }
}

/* ===================================
   Navigation Mobile
   =================================== */

@media (max-width: 782px) {
    /* WordPress mobile menu button */
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close {
        color: var(--wp--preset--color--orange-500);
    }
    
    /* Mobile menu overlay */
    .wp-block-navigation__responsive-container.is-menu-open {
        background-color: var(--wp--preset--color--white);
    }
    
    /* Menu items in mobile */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        gap: 8px;
    }
}

/* ===================================
   Footer Mobile
   =================================== */

@media (max-width: 768px) {
    /* Stack footer columns */
    .site-footer .wp-block-columns {
        flex-direction: column;
    }
    
    .footer-contact-card {
        margin-bottom: 24px;
    }
    
    /* Footer links wrap */
    .site-footer .wp-block-group:last-child {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .footer-contact-card,
    .footer-form-card {
        border-radius: 16px;
    }
}

/* ===================================
   Typography Mobile Overrides
   =================================== */

@media (max-width: 480px) {
    /* Ensure headings don't get too large on small screens */
    .wp-block-heading {
        word-break: break-word;
    }
    
    /* Button text size */
    .wp-block-button__link {
        font-size: 14px;
        padding: 10px 20px;
    }
}

/* ===================================
   WordPress Block Spacing Mobile
   =================================== */

@media (max-width: 768px) {
    /* Reduce spacing between blocks on mobile */
    .wp-block-group {
        margin-top: 32px !important;
        margin-bottom: 32px !important;
    }

    /* Keep equipment cards flush inside their own layout */
    .equipment-card__content,
    .equipment-card__footer {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .equipment-card .wp-block-post-featured-image {
        margin-bottom: 0 !important;
    }
    
    /* Reduce section padding */
    .wp-block-group[style*="margin-top:80px"] {
        margin-top: 48px !important;
    }
    
    .wp-block-group[style*="margin-bottom:80px"] {
        margin-bottom: 48px !important;
    }
}

/* ===================================
   Images Mobile
   =================================== */

@media (max-width: 768px) {
    /* Featured images */
    .wp-block-post-featured-image {
        margin-bottom: 16px;
    }
    
    /* Cover blocks min-height adjustment */
    .wp-block-cover {
        min-height: 300px !important;
    }
}

@media (max-width: 480px) {
    .wp-block-cover {
        min-height: 250px !important;
    }
}

/* ===================================
   Search Results Mobile
   =================================== */

@media (max-width: 768px) {
    /* Search page columns */
    .search .wp-block-columns {
        flex-direction: column;
    }
    
    .search .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ===================================
   Ensure Nothing Breaks on Tiny Screens
   =================================== */

@media (max-width: 360px) {
    /* Absolute minimum for very small devices */
    body {
        font-size: 15px;
    }
    
    h1 {
        font-size: 24px !important;
    }
    
    h2 {
        font-size: 20px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    .btn {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .equipment-card__content {
        padding: 12px;
    }
    
    .filter-pill {
        padding: 4px 8px;
        font-size: 11px;
    }
}