/* ===== Responsive overrides for Gano Excel México (legacy table-based site) ===== */

/* Make all images and videos fluid */
img, video, iframe { max-width: 100%; height: auto; }

/* Slider images should fill container */
.top-slider img,
.bannerx img,
#lightSlider li img { width: 100%; height: auto; max-width: 100%; }

/* Remove horizontal scroll trap */
html, body { overflow-x: hidden; }

/* ===== Tablet & smaller (≤ 1023px) ===== */
@media (max-width: 1023px) {
    /* Hide the wide desktop nav and product mega-menu */
    .nav-bar2, .product-menu, .mega-menu { display: none !important; }
    /* Show the mobile nav */
    .nav-bar3 { display: block !important; }

    /* Default content containers shouldn't exceed viewport */
    .wrapper, .slide, .content-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

    /* Force any fixed-width tables down */
    table { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
    table[width="1024"], table[width="980"], table[width="1000"], table[width="1200"] {
        width: 100% !important; max-width: 100% !important;
    }
}

/* ===== Phone (≤ 768px) ===== */
@media (max-width: 768px) {
    body { font-size: 15px; }

    /* Stack table cells into rows */
    main table tr,
    .slide table tr,
    .ge-contact table tr { display: block !important; }
    main table td,
    .slide table td,
    .ge-contact table td {
        display: block !important;
        width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box;
    }

    /* Slides shouldn't have huge fixed heights */
    .slide { height: auto !important; min-height: auto !important; padding: 16px 12px !important; }
    .slide1bg { width: 100% !important; height: auto !important; }

    /* Fancy absolute layouts (company "timeline") collapse on small screens */
    .timeline { display: none !important; }
    [id^="content"][id$="0"], [id^="content"][id^="content"] {
        position: static !important;
        margin: 16px auto !important;
        max-width: 100% !important;
        width: 90% !important;
        left: auto !important;
        top: auto !important;
    }
    #topslide, [id^="c"][id$="1"] { position: static !important; width: 100% !important; height: auto !important; }

    /* Slider arrows / dots — keep but smaller */
    .slick-prev, .slick-next { transform: scale(.8); }

    /* Logo */
    .logo img { max-width: 80% !important; height: auto !important; }
    .nav-bar3 .logo img { width: 80% !important; max-width: 280px !important; margin: 4px 0 !important; }

    /* Footer */
    .footer { padding: 16px !important; text-align: center !important; }
    .footer-logo, .footer-links, .b-social { float: none !important; display: block !important; margin: 8px auto !important; text-align: center !important; }

    /* Mobile menu styling */
    .mobile-menu { width: 100% !important; padding: 16px !important; }
    .mobile-menu p { padding: 6px 0 !important; }

    /* Product menu (when forced visible inside mobile flow, e.g. on product detail pages) */
    .product-container { padding: 16px !important; }
    .product-image img { width: 100% !important; max-width: 360px !important; margin: 0 auto !important; display: block !important; }
    .product-title { font-size: 22px !important; line-height: 1.2 !important; }

    /* News & business slider container */
    #lightSlider, .lSSlideOuter { max-width: 100% !important; }

    /* Map / map section background */
    .slide[style*="background-image"] {
        background-size: cover !important;
        background-position: center !important;
    }
}

/* ===== Small phone (≤ 480px) ===== */
@media (max-width: 480px) {
    .largetext, #large2 { font-size: 20px !important; line-height: 1.2 !important; }
    .smalltext { font-size: 14px !important; }
    .system, .compplan, .mapbold { font-size: 18px !important; }
    h1, .product-title { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }

    .foursteps img { max-width: 100px !important; height: auto !important; }
}