/* ============================================================
   Sabi Logistics — Responsive (5 breakpoints, fluid-first)
   1440 | 1200 | 1024 | 768 | 576
   ============================================================ */

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* --- 1440px --- */
@media (max-width: 1440px) {
    :root {
        --container: min(94%, 1320px);
    }
}

/* --- 1200px --- */
@media (max-width: 1200px) {
    .process-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-line {
        display: none;
    }

    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cta-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-top {
        flex-direction: column;
        gap: 2rem;
    }

    .about-page-container,
    .about-story-container,
    .mission-vision-container,
    .services-page-container,
    .services-support-container,
    .contact-page-container,
    .contact-main-container,
    .quote-page-container,
    .quote-form-container {
        grid-template-columns: 1fr;
    }
}

/* --- 1024px --- */
@media (max-width: 1024px) {
    :root {
        --header-h: 72px;
    }

    .services-grid,
    .services-grid-wrap,
    .industries-grid-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .industry-card.large,
    .industry-card.wide {
        grid-column: span 1;
    }

    .about-page-actions,
    .services-page-actions {
        flex-wrap: wrap;
    }

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

    .site-header.scrolled .site-header__glass,
    .site-header.is-scrolled .site-header__glass {
        backdrop-filter: blur(10px) saturate(1.15);
        -webkit-backdrop-filter: blur(10px) saturate(1.15);
    }
}

/* --- 768px --- */
@media (max-width: 768px) {
    .services-grid,
    .services-grid-wrap,
    .industries-grid-wrap,
    .process-wrap,
    .footer-main,
    .about-why-grid {
        grid-template-columns: 1fr;
    }

    .industry-card.large,
    .industry-card.wide {
        grid-column: span 1;
        min-height: auto;
    }

    .service-card,
    .industry-card {
        min-height: auto;
    }

    .service-image img,
    .industry-image img {
        width: 100%;
        max-height: clamp(280px, 42vw, 360px);
        object-fit: cover;
    }

    /* Inner page floating cards only */
    .about-floating-card,
    .services-floating-card,
    .about-visual-wrap,
    .services-visual-wrap {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 100%;
        margin-top: 1.25rem;
        transform: none;
    }

    .about-visual-wrap,
    .services-visual-wrap,
    .about-story-image,
    .services-support-image {
        height: auto;
        min-height: clamp(260px, 40vw, 360px);
        max-height: none;
        aspect-ratio: 4 / 3;
    }

    .about-btn,
    .cta-btn,
    .why-section__cta,
    .about-page-btn,
    .services-page-btn,
    .hero-primary-btn,
    .hero-secondary-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .about-page-actions,
    .services-page-actions,
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .about-page-hero,
    .services-page-hero,
    .contact-page-hero,
    .quote-page-hero {
        padding: clamp(7rem, 20vw, 9rem) 0 clamp(4rem, 10vw, 5.5rem);
    }

    .contact-form-wrap,
    .quote-form-wrap,
    .contact-form-section,
    .quote-form-section,
    .testimonials-container,
    .cta-container {
        padding-inline: clamp(1.25rem, 4vw, 1.75rem);
    }

    .sabi-form-modal__dialog {
        width: min(calc(100% - 2rem), 400px);
    }
}

/* --- 576px --- */
@media (max-width: 576px) {
    :root {
        --container: min(92%, 100%);
    }

    .container,
    .header-container {
        width: var(--container);
    }

    .hotline-btn span:not(.phone-icon) {
        display: none;
    }

    .mobile-drawer__panel {
        width: min(90vw, 380px);
    }
}

/* --- Wide screens --- */
@media (min-width: 1600px) {
    .about-floating-visual img {
        max-width: min(720px, 42vw);
    }

    .services-section::before,
    .services-section::after {
        width: 100%;
        left: 0;
    }
}

@media (min-width: 992px) {
    .sabi-form--columns .form-grid,
    .sabi-form--columns .quote-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .sabi-form--columns .form-group:last-child,
    .sabi-form--columns .quote-group:last-child,
    .sabi-form--columns .form-group:has(textarea),
    .sabi-form--columns .quote-group:has(textarea) {
        grid-column: 1 / -1;
    }
}