/* ==========================================================================
   Design Concepts Int. — Responsive CSS
   Breakpoints: 1280px, 1024px, 768px, 375px
   ========================================================================== */

/* ─── 1280px — Container max ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
    :root {
        --pad-x: 40px;
    }
    .nav { padding: 0 40px; }
    .footer-main { padding: 60px 40px; }
}

/* ─── 1024px — Tablet landscape ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --pad-x: 32px;
        --pad-y: 64px;
    }

    /* Nav — hide desktop links, show hamburger */
    .nav__links,
    .nav__ctas { display: none; }
    .nav__hamburger { display: flex; }
    .nav { padding: 0 32px; }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr 1fr;
        padding: 60px 32px;
        gap: 2.5rem;
    }

    /* Metrics bar */
    .metrics-bar__inner { grid-template-columns: repeat(2, 1fr); }
    .metric:nth-child(2) { border-right: none; }
    .metric:nth-child(1),
    .metric:nth-child(2) { border-bottom: 1px solid var(--border); }

    /* Services grid */
    .services-grid { grid-template-columns: repeat(2, 1fr); }

    /* Feature cards */
    .feature-cards { grid-template-columns: 1fr 1fr; }

    /* Value cards */
    .value-cards { grid-template-columns: repeat(2, 1fr); }

    /* Team grid */
    .team-grid { grid-template-columns: repeat(3, 1fr); }

    /* Two col layout */
    .two-col { grid-template-columns: 1fr; gap: 2rem; }
    .two-col--reversed { grid-template-columns: 1fr; }
    .sidebar { position: static; }

    /* Projects featured */
    .projects-featured {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .projects-featured__main { grid-row: auto; }

    /* Contact layout */
    .contact-layout { grid-template-columns: 1fr; }

    /* Locations section */
    .locations-section { grid-template-columns: 1fr; }
    .locations-map { min-height: 360px; }
    .locations-list { border-left: none; border-top: 1px solid var(--border); }

    /* Blog grid */
    .blog-grid { grid-template-columns: repeat(2, 1fr); }

    /* Gallery grid */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    /* Breadcrumb */
    .breadcrumb { padding: 0.75rem 32px; }

    /* Hero */
    .hero__content { padding: calc(var(--nav-height) + 40px) 32px 60px; }
    .hero__trust { right: 32px; }

    /* Process steps */
    .process-steps {
        flex-wrap: wrap;
    }
    .process-step {
        flex: 0 0 calc(33.333% - 1px);
    }
}

/* ─── 768px — Tablet portrait / Mobile landscape ─────────────────────────── */
@media (max-width: 768px) {
    :root {
        --pad-x: 20px;
        --pad-y: 48px;
        --nav-height: 64px;
        --nav-height-sm: 56px;
    }

    /* Body padding for mobile bottom bar */
    body {
        padding-bottom: 64px;
    }

    /* Show mobile bottom bar */
    .mobile-bottom-bar { display: block; }

    /* Nav */
    .nav { padding: 0 20px; }

    /* Hero */
    .hero__content {
        padding: calc(var(--nav-height) + 32px) 20px 48px;
    }

    .hero__trust {
        display: none;
    }

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

    /* Metrics bar */
    .metrics-bar__inner { grid-template-columns: repeat(2, 1fr); }
    .metric { padding: 1.75rem 1.25rem; }

    /* Services */
    .services-grid { grid-template-columns: 1fr; }

    /* Feature cards */
    .feature-cards { grid-template-columns: 1fr; }

    /* Value cards */
    .value-cards { grid-template-columns: 1fr 1fr; }

    /* Projects featured */
    .projects-featured {
        grid-template-columns: 1fr;
    }

    /* Blog grid */
    .blog-grid { grid-template-columns: 1fr; }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr;
        padding: 48px 20px;
        gap: 2rem;
    }

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
    }

    /* WhatsApp float — push above mobile bar */
    .whatsapp-float {
        bottom: 80px;
    }

    /* Scroll popup */
    .scroll-popup {
        width: calc(100vw - 32px);
        right: 16px;
        bottom: 80px;
    }

    /* Breadcrumb */
    .breadcrumb { padding: 0.625rem 20px; }

    /* Hero content */
    h1 { font-size: clamp(2rem, 8vw, 3.5rem); }
    h2 { font-size: clamp(1.625rem, 6vw, 2.5rem); }

    /* CTA band */
    .cta-band__inner {
        flex-direction: column;
        text-align: center;
    }

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

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

    /* Contact layout */
    .contact-info,
    .contact-form-wrap {
        padding: 48px 20px;
    }

    /* Process steps */
    .process-step {
        flex: 0 0 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* Team */
    .team-grid { grid-template-columns: repeat(2, 1fr); }

    /* Gallery */
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-grid img { height: 220px; }

    /* Project details bar */
    .project-details-bar {
        flex-direction: column;
    }
    .project-detail { border-right: none; border-bottom: 1px solid var(--border); }
    .project-detail:last-child { border-bottom: none; }

    /* Filter bar */
    .filter-bar { gap: 0.375rem; }
    .filter-btn { font-size: 0.7rem; padding: 0.375rem 0.875rem; }

    /* Author bio */
    .author-bio { flex-direction: column; }

    /* Sidebar CTAs stacked */
    .sidebar-cta .btn { margin-bottom: 0.625rem; }
}

/* ─── 480px — Smaller mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Value cards full width */
    .value-cards { grid-template-columns: 1fr; }

    /* Team grid */
    .team-grid { grid-template-columns: 1fr; }

    /* Metrics bar */
    .metrics-bar__inner { grid-template-columns: 1fr 1fr; }
    .metric { padding: 1.25rem 1rem; }
    .metric__number { font-size: 2rem; }

    /* Nav overlay fonts */
    .nav-overlay__links a { font-size: 2rem; }

    /* Buttons full width in hero */
    .hero__actions .btn { width: 100%; justify-content: center; }

    /* Blog card */
    .blog-grid { grid-template-columns: 1fr; }

    /* Footer bottom links */
    .footer-bottom__links { gap: 1rem; flex-wrap: wrap; justify-content: center; }

    /* Client bar */
    .client-bar__logos { gap: 0.625rem; }
    .client-logo { padding: 0.5rem 1rem; font-size: 0.7rem; }

    /* Popup form */
    .scroll-popup { width: calc(100vw - 24px); right: 12px; }

    h1 { font-size: clamp(1.875rem, 9vw, 3rem); }
    h2 { font-size: clamp(1.5rem, 7vw, 2rem); }

    /* WhatsApp float */
    .whatsapp-float { width: 52px; height: 52px; }
}

/* ─── Print styles ───────────────────────────────────────────────────────── */
@media print {
    .site-header,
    .mobile-bottom-bar,
    .whatsapp-float,
    .scroll-popup,
    .sidebar,
    .cta-band { display: none !important; }

    body { padding-bottom: 0; background: white; color: black; }
    a { color: black; text-decoration: underline; }

    .hero { min-height: auto; background: none; }
    .hero__overlay { display: none; }
    .hero h1, .hero p { color: black; }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}