/* =========================================================
   FBA Xperts CLONE — responsive.css
   ========================================================= */

/* ============ 1366px and below : slight tightening ============ */
@media (max-width: 1366px) {
    :root {
        --container: 1180px;
    }

    .site-header .container,
    .container,
    .container-small {
        width: min(100% - 28px, var(--container));
    }
}

/* ============ 1200px : large tablet / small desktop ============ */
@media (max-width: 1200px) {
    :root {
        --container: 1120px;
    }

    .why-cards-grid {
        gap: 18px;
    }

    .stats-grid {
        gap: 20px;
    }

    .main-nav > ul {
        gap: 0;
    }

    .main-nav a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.8rem;
    }

    .header-actions {
        gap: 10px;
    }
}

/* ============ 1024px : tablet ============ */
@media (max-width: 1024px) {
    :root {
        --section-padding: 84px;
    }

    .site-header .container {
        width: min(100% - 22px, var(--container));
    }

    .main-nav,
    .header-actions .header-phone {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .header-quote-btn {
        display: none;
    }

    .home-hero {
        min-height: 0;
        padding-bottom: 0;
    }

    .home-hero__visual {
        position: relative;
        top: 0;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 380px;
        margin-top: 8px;
        overflow: hidden;
    }

    .home-hero__content {
        max-width: 100%;
        text-align: center;
        padding: 34px 0 40px;
    }

    .home-hero__heading,
    .home-hero__text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-badges {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cta-row {
        justify-content: center;
    }

    .review-strip__track {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 10px;
    }

    .review-item {
        border-right: none;
        border-bottom: 1px solid var(--border-dark);
        padding-bottom: 16px;
    }

    .service-accordion-section .container,
    .contact-section .container {
        grid-template-columns: 1fr;
    }

    .why-content {
        grid-template-columns: 1fr;
    }

    .service-visual {
        max-width: 460px;
        margin: 0 auto;
    }

    .industry-swiper {
        margin-right: -6vw;
    }

    .blog-grid,
    .tiktok-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid > .process-card::after,
    .process-grid > .process-card::before {
        display: none;
    }

    .circular-platform-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 30px;
    }

    .circular-platform-grid::before {
        display: none;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px;
    }

    .stat-item:nth-child(3) {
        border-left: none;
    }

    .bordered-feature__box,
    .bordered-feature__box.reverse {
        grid-template-columns: 1fr;
    }

    .bordered-feature__box.reverse .bordered-feature__text,
    .bordered-feature__box.reverse .bordered-feature__img {
        order: initial;
    }

    .footer-columns {
        grid-template-columns: 1fr 1fr;
        row-gap: 40px;
    }
}

/* ============ 768px : mobile landscape / large phones ============ */
@media (max-width: 768px) {
    :root {
        --section-padding: var(--section-padding-mobile);
    }

    .container,
    .container-small,
    .site-header .container {
        width: min(100% - 24px, var(--container));
    }

    .site-header .container {
        gap: 16px;
    }

    h1 {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
    }

    h2 {
        font-size: clamp(1.6rem, 6vw, 2rem);
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .inner-banner {
        min-height: 260px;
    }

    .home-hero {
        padding-top: calc(var(--header-h-mobile) + 30px);
    }

    .accordion-trigger h3 {
        font-size: 1.05rem;
    }

    .why-cards-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .contact-info h2 {
        max-width: 100%;
    }

    .blog-grid,
    .tiktok-services-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .circular-platform-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-item {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        padding-top: 18px;
    }

    .stat-item:first-child {
        border-top: none;
        padding-top: 0;
    }

    .footer-columns {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .footer-newsletter {
        flex-direction: column;
        align-items: flex-start;
    }

    .newsletter-form {
        min-width: 100%;
    }

    .testimonial-card {
        width: 300px;
    }

    .whatsapp-btn span {
        display: none;
    }

    .whatsapp-btn {
        padding: 13px;
    }

    .video-modal__close {
        top: -46px;
    }
}

/* ============ 480px : phones ============ */
@media (max-width: 480px) {
    .site-header {
        padding: 12px 0;
    }

    .header-logo img {
        height: 60px;
    }

    .hero-badges {
        grid-template-columns: 1fr;
    }

    .hero-badge {
        font-size: 0.76rem;
        padding: 8px 14px 8px 8px;
    }

    .hero-cta-row {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta-row .btn {
        width: 100%;
    }

    .outcome-card {
        width: 150px;
    }

    .review-strip__track {
        grid-template-columns: 1fr;
    }

    .review-item {
        justify-content: center;
        text-align: left;
    }

    .stat-number {
        font-size: 1.9rem;
    }

    .footer-newsletter__brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* ============ Fine breakpoints requested for QA ============ */
@media (max-width: 430px) {
    .contact-form-card,
    .why-choose__form {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 390px) {
    .header-logo img {
        height: 28px;
    }

    .testimonial-card {
        width: 260px;
    }
}

@media (max-width: 360px) {
    .btn {
        padding: 13px 22px;
        font-size: 0.88rem;
    }

    .container,
    .container-small,
    .site-header .container {
        width: min(100% - 20px, var(--container));
    }
}

/* ============ Extra overflow-safe rules for homepage and general layout ============ */
@media (max-width: 1024px) {
    .home-page .home-hero__inner,
    .home-page .service-accordion-section .container,
    .home-page .industry-showcase__layout,
    .home-page .ecom-process-header,
    .home-page .ecom-why-header,
    .home-page .ecom-why-layout,
    .home-page .contact-section .container {
        width: min(100%, 100%);
    }
}

@media (max-width: 680px) {
    .home-page .home-hero__content,
    .home-page .home-hero__inner,
    .home-page .industry-showcase__container,
    .home-page .ecom-process-container,
    .home-page .ecom-why-container,
    .home-page .outcome-section .container,
    .home-page .client-stories-container,
    .home-page .insights-preview .container,
    .home-page .contact-section .container {
        width: 100%;
    }

    .home-page .client-story-card {
        width: min(100%, 320px);
        min-width: 0;
        max-width: none;
        flex-basis: auto;
        margin-inline: auto;
    }
}