/*
 * TPI Custom Responsive Fixes
 * Breakpoints: xs (<576), sm (576+), md (768+), lg (992+), xl (1200+)
 */

/* ================================================================
   1. PRODUCT CATEGORY PAGES — Nested Container Fix
   ----------------------------------------------------------------
   Product category pages (vegetables, leather, etc.) wrap the
   carousel in a .container inside another .container, causing
   double horizontal padding on small screens.
   ================================================================ */

.service-details .product-page .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    width: 100%;
}

/* ================================================================
   2. PRODUCT CATEGORY PAGES — Double Section-Space Fix
   ----------------------------------------------------------------
   .service-details.section-space + nested .product-page.section-space
   doubles vertical padding (up to 240px on mobile). Reduce inner
   padding to reasonable values.
   ================================================================ */

.service-details .product-page.section-space {
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (max-width: 767px) {
    .service-details .product-page.section-space {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (max-width: 575px) {
    .service-details .product-page.section-space {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* ================================================================
   3. PRODUCT CATEGORY PAGES — Show Image Before Sidebar on Mobile
   ----------------------------------------------------------------
   Bootstrap order classes show sidebar first on mobile (<992px).
   Override so the main category image shows first.
   ================================================================ */

@media (max-width: 991px) {
    .service-details .order-1.order-lg-0 {
        order: 0 !important;
    }
    .service-details .order-0.order-lg-1 {
        order: 1 !important;
    }
}

/* ================================================================
   4. ABOUT SECTION — Badge Alignment on Tablet
   ----------------------------------------------------------------
   .about-badge has margin-left: 135px designed for the desktop
   negative-margin layout. At 768-1199px the column is full-width
   so the badge needs repositioning.
   ================================================================ */

@media (min-width: 768px) and (max-width: 1199px) {
    .about-one .about-badge {
        margin-left: 20px;
    }
}

/* ================================================================
   5. ABOUT SECTION — Two-Column Layout at Tablet (lg)
   ----------------------------------------------------------------
   col-xl-6 stacks at <1200px. At lg (992-1199px) force 50/50
   so the about section stays side-by-side on large tablets.
   ================================================================ */

@media (min-width: 992px) and (max-width: 1199px) {
    .about-one .row.align-items-center>.col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ================================================================
   6. HERO SECTION — Right Column on Tablet
   ----------------------------------------------------------------
   At 768-1199px col-xl-4 becomes full-width and stacks.
   Center the right column content and constrain image width.
   ================================================================ */

@media (max-width: 1199px) {
    .hero-one__right {
        text-align: center;
    }
    .hero-one__right .hero-one__desc--2 {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ================================================================
   7. HEADER — Email Address Truncation on Tablet
   ----------------------------------------------------------------
   Email in header can overflow on narrow tablets (768-900px).
   ================================================================ */

@media (min-width: 768px) and (max-width: 900px) {
    .main-header__phone__number {
        font-size: 13px;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ================================================================
   8. FOOTER — Newsletter Form Stacking
   ----------------------------------------------------------------
   Ensure input stacks above button on small screens.
   ================================================================ */

@media (max-width: 480px) {
    .footer-widget__newsletter .amoxi-btn-two {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* ================================================================
   9. CONTACT PAGE — Map Height on Mobile
   ================================================================ */

@media (max-width: 575px) {
    .google-map__contact iframe {
        height: 200px;
    }
}

/* ================================================================
   10. PAGE HEADER — Title Size on Very Small Screens
   ----------------------------------------------------------------
   Prevent page header title from overflowing on narrow devices.
   ================================================================ */

@media (max-width: 390px) {
    .page-header__title {
        font-size: 30px;
        word-break: break-word;
    }
}

/* ================================================================
   11. PRODUCT ITEMS — Images Scale Uniformly
   ================================================================ */

.product__item__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Prevent absolute-positioned shape images from overflowing */

@media (max-width: 575px) {
    .hero-one__shape,
    .about-one__shape,
    .page-header__shape-1,
    .page-header__shape-2 {
        display: none;
    }
}

/* ================================================================
   13. FUNFACT SECTION — Stats Grid on Mobile
   ----------------------------------------------------------------
   Ensure the stats grid has proper borders and padding on mobile.
   ================================================================ */

@media (max-width: 575px) {
    .funfact-one__item {
        padding: 30px 20px;
    }
}

/* ================================================================
   14. SERVICE DETAILS — Sidebar Full Width on Mobile
   ================================================================ */

@media (max-width: 991px) {
    .service-details__pages {
        margin-top: 20px;
    }
}

/* ================================================================
   15. AMOXI-AREA — TechPort Text on Mobile
   ----------------------------------------------------------------
   The clamp() already handles scaling but ensure text doesn't
   overflow the viewport on very small phones.
   ================================================================ */

@media (max-width: 480px) {
    .amoxi-area__title {
        overflow: hidden;
        white-space: nowrap;
    }
}

/* ================================================================
   16. CONTACT FORM — Phone/email input font size
   ----------------------------------------------------------------
   Prevent iOS auto-zoom on inputs smaller than 16px.
   ================================================================ */

@media (max-width: 767px) {
    .form-one__control input,
    .form-one__control textarea,
    .form-one__control select {
        font-size: 16px !important;
    }
}

/* ================================================================
   17. MOBILE NAV — Ensure full-width overlay
   ================================================================ */

@media (max-width: 1199px) {
    .mobile-nav__wrapper {
        width: 100%;
    }
    .mobile-nav__content {
        max-width: 340px;
    }
}

/* ================================================================
   18. PRODUCT PAGE (products.php) — Single column on xs
   ----------------------------------------------------------------
   On <576px, force product grid items to full width.
   ================================================================ */

@media (max-width: 575px) {
    .product-page .row.gutter-y-30>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ================================================================
   19. FOOTER — Columns stack properly on sm
   ----------------------------------------------------------------
   Ensure footer columns stack gracefully on small screens.
   ================================================================ */

@media (max-width: 575px) {
    .main-footer__top .col-xl-2,
    .main-footer__top .col-xl-4 {
        text-align: left;
    }
}

/* ================================================================
   20. SLIDE TEXT SECTION — Prevent overflow issues
   ================================================================ */

.slide-text {
    overflow: hidden;
}

/* ================================================================
   21. STROKE TEXT (Portfolio heading) — Scale on mobile
   ================================================================ */

@media (max-width: 767px) {
    .portfolio-one .stroke-text-title svg text {
        font-size: clamp(40px, 12vw, 130px);
    }
}