/* ==========================================================================
   EMMS Technical Services LLC — Responsive Styles
   Breakpoints: 1920 / 1440 / 1366 / 1024 / 768 / 430 / 390 / 360
   ========================================================================== */

/* Large desktops already covered by fluid clamp() in style.css */

/* ≤ 1200px ----------------------------------------------------------------- */
@media (max-width: 1200px) {
    .nav__list { gap: 14px; }
    .navbar__call span { display: none; }
    .service-card:nth-child(1),
    .service-card:nth-child(6) { grid-column: span 6; }
    .service-card:nth-child(2),
    .service-card:nth-child(5) { grid-column: span 6; }
    .service-card:nth-child(3),
    .service-card:nth-child(4),
    .service-card:nth-child(7),
    .service-card:nth-child(8) { grid-column: span 6; }
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
    .hero__index { display: none; }
    .hero__aside { display: none !important; }
    .hero__content { grid-template-columns: 1fr; }
}

/* ≤ 1024px — tablet landscape ---------------------------------------------- */
@media (max-width: 1024px) {
    .nav { display: none; }
    .nav-toggle { display: grid; }
    .navbar__cta { display: none; }

    .services-intro__head,
    .about-preview,
    .featured-project,
    .contact-layout,
    .detail-overview,
    .cta-band__inner {
        grid-template-columns: 1fr;
    }

    .featured-project__media { min-height: 360px; }
    .about-preview__accent {
        right: 4%;
        bottom: -6%;
        width: 36%;
    }
    .cta-band__meta { display: none; }

    .trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .trust-item:nth-child(2) { border-right: none; }
    .trust-item:nth-child(1),
    .trust-item:nth-child(2) {
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--color-border);
    }

    .process-timeline { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
    .process-timeline::before { display: none; }

    .gallery-masonry { columns: 2; }
    .testimonials-grid { grid-template-columns: 1fr 1fr; }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: 1fr 1fr; }
    .related-services { grid-template-columns: 1fr 1fr; }

    .service-row {
        grid-template-columns: 200px 1fr;
    }
    .service-row .btn { grid-column: 2; justify-self: start; }

    .split-audience { grid-template-columns: 1fr; }
    .split-panel { min-height: 480px; }
}

/* ≤ 768px — tablet / large phone ------------------------------------------- */
@media (max-width: 768px) {
    .topbar__item--muted { display: none; }

    .hero {
        min-height: auto;
        align-items: stretch;
    }
    .hero__media img {
        object-position: 72% center;
    }
    .hero__overlay {
        background:
            linear-gradient(180deg,
                rgba(20, 10, 28, 0.78) 0%,
                rgba(43, 18, 64, 0.88) 55%,
                rgba(20, 10, 28, 0.94) 100%);
    }
    .hero__content {
        padding: 56px 0 48px;
    }
    .hero h1 { max-width: 14ch; }
    .hero__stat { display: none !important; }

    .services-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .service-card,
    .service-card:nth-child(n) {
        grid-column: span 1;
        min-height: 0;
    }
    .service-card__media,
    .service-card:nth-child(1) .service-card__media,
    .service-card:nth-child(6) .service-card__media {
        height: 180px;
    }

    .about-preview__main { aspect-ratio: 5 / 4; }
    .about-preview__accent {
        width: 40%;
        bottom: -8%;
        right: 5%;
    }

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

    .featured-meta { grid-template-columns: 1fr; gap: var(--space-4); }

    .process-timeline { grid-template-columns: 1fr; }
    .process-step {
        text-align: left;
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 0 var(--space-4);
        align-items: start;
        padding: 0 0 var(--space-5);
        border-left: 1px solid var(--color-border);
        margin-left: 28px;
        padding-left: var(--space-5);
    }
    .process-step__num {
        grid-row: 1 / span 2;
        margin: 0 0 0 -56px;
    }
    .process-step p { margin-inline: 0; max-width: none; }

    .testimonials-grid { grid-template-columns: 1fr; }
    .gallery-masonry { columns: 2; }

    .form-grid { grid-template-columns: 1fr; }
    .service-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    .service-row .btn { grid-column: 1; }

    .projects-grid { grid-template-columns: 1fr; }
    .key-services-grid { grid-template-columns: 1fr; }
    .related-services { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }

    .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .site-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-band__actions .btn { width: 100%; }
    .hero__actions .btn { width: 100%; justify-content: center; }

    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
}

/* ≤ 430px — mobile --------------------------------------------------------- */
@media (max-width: 430px) {
    :root {
        --gutter: 20px;
    }

    .trust-strip__grid { grid-template-columns: 1fr; }
    .trust-item {
        border-right: none !important;
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-3) 0;
    }
    .trust-item:last-child { border-bottom: none; }

    .gallery-masonry { columns: 1; }
    .gallery-item img,
    .gallery-item:nth-child(n) img {
        aspect-ratio: 4 / 3;
    }

    .hero__trust {
        flex-direction: column;
        gap: var(--space-3);
    }

    .page-hero h1,
    .hero h1 {
        font-size: clamp(1.9rem, 9vw, 2.4rem);
    }

    .btn { padding: 14px 20px; }
    .split-panel { min-height: 420px; }
    .split-list li { font-size: 0.75rem; padding: 7px 10px; }
}

/* ≤ 390px ------------------------------------------------------------------ */
@media (max-width: 390px) {
    .brand__sub { display: none; }
    .topbar__inner { justify-content: center; }
    .topbar__right { display: none; }
}

/* ≤ 360px — small mobile --------------------------------------------------- */
@media (max-width: 360px) {
    :root { --gutter: 16px; }
    .navbar__call { display: none; }
    .form-card { padding: 20px 16px; }
    .status-page__actions { flex-direction: column; }
    .status-page__actions .btn { width: 100%; }
}

/* Prevent horizontal overflow ---------------------------------------------- */
@media (max-width: 1024px) {
    .about-preview__media { overflow: visible; margin-bottom: 32px; }
}

html, body { max-width: 100%; }
img, video, iframe, svg { max-width: 100%; }