/* ═══════════════════════════════
   RESPONSIVE OVERRIDES
   All @media rules for the whole site live here, organized by breakpoint.
   Load this file LAST, after every other stylesheet, so overrides always win.
═══════════════════════════════ */

/* ───────────────────────────────
   TABLET: 481px – 1024px
   iPad portrait & landscape
─────────────────────────────── */
@media (min-width: 481px) and (max-width: 1024px) {

    /* forms.css */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 17px;
        padding: 1.5rem 1.2rem 0.65rem 1.2rem;
    }

    .field label {
        font-size: 0.95rem;
    }

    .contact-form textarea {
        min-height: 170px;
    }

    /* contact.css */
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ───────────────────────────────
   NARROW TABLET: 481px – 820px
   Narrower iPad portrait widths
─────────────────────────────── */
@media (min-width: 481px) and (max-width: 820px) {

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

    .contact-card {
        align-self: stretch;
    }
}

/* ───────────────────────────────
   MOBILE: max 760px
─────────────────────────────── */
@media (max-width: 760px) {

    /* footer.css */
    footer {
        padding: 1.2rem;
        gap: 1.5rem;
    }

    .footer-main {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .footer-brand {
        flex: 0.9;
        align-items: flex-start;
    }

    .footer-logo {
        width: 75px;
    }

    .footer-copy {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .footer-columns {
        flex: 1.1;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .footer-column {
        gap: 8px;
    }

    .footer-title {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
    }

    .footer-links {
        gap: 7px;
    }

    .footer-links a {
        font-size: 0.68rem;
        line-height: 1.3;
    }

    .contact-link {
        gap: 6px;
    }

    .contact-icon {
        width: 13px;
        height: 13px;
    }

    .footer-socials {
        gap: 10px;
        padding-top: 0.9rem;
    }

    .social {
        width: 34px;
        height: 34px;
    }

    .social img,
    .social svg {
        width: 15px;
        height: 15px;
    }

    .social::after {
        font-size: 11px;
        padding: 5px 8px;
    }

    /* home.css */
    .steps-grid,
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

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

    .step-card,
    .project-card,
    .benefit-item {
        width: 100%;
    }

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

    .hero-actions a {
        width: 100%;
        text-align: center;
    }
}

/* ───────────────────────────────
   PHONE ONLY: max 480px
   (iPads stay on desktop nav above this width)
─────────────────────────────── */
@media (max-width: 480px) {

    /* base.css */
    .stats-row {
        grid-template-columns: repeat(3, 1fr);
    }

    /* header-nav.css */
    header {
        top: 10px;
        margin-top: 0;
        box-shadow: none;
    }

    .burger-icon {
        display: flex;
    }

    nav {
        position: fixed;
        top: calc(10px + var(--header-nav-height) + var(--side-spacing));
        left: var(--side-spacing);
        right: auto;
        height: auto;
        width: calc(100% - 2 * var(--side-spacing));
        background: rgba(255, 255, 255, 0.12);
        -webkit-backdrop-filter: blur(var(--menu-blur-radius));
        backdrop-filter: blur(var(--menu-blur-radius));
        border-radius: var(--menu-border-radius);
        border: 1px solid white;
        padding: clamp(8px, 0.8vw, 14px) clamp(0.7rem, 1.5vw, 1rem);
        justify-content: center;
        opacity: 0;
        transform: translateY(-15px) scaleY(0) translateZ(0);
        transform-origin: top;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        z-index: 11;
    }

    nav ol {
        flex-direction: row;
        justify-content: center;
        width: auto;
        flex-wrap: wrap;
        height: auto;
    }

    nav ol li {
        margin: clamp(4px, 1.2vw, 8px) clamp(14px, 3vw, 22px);
        text-align: center;
        width: auto;
        white-space: nowrap;
        height: auto;
    }

    .nav-cta-item {
        margin-left: clamp(4px, 1.2vw, 8px);
        margin-right: clamp(4px, 1.2vw, 8px);
    }

    nav ol li:not(:last-child)::after {
        content: '•';
        position: absolute;
        top: 50%;
        right: clamp(-20px, -3vw, -16px);
        transform: translateY(-50%);
        color: white;
    }

    .nav-cta-item::after {
        content: none;
    }

    .burger-checkbox:checked~nav {
        opacity: 1;
        transform: translateY(0) scaleY(1) translateZ(0);
        pointer-events: auto;
    }

    /* footer.css */
    footer {
        text-align: center;
    }

    .footer-main,
    .footer-columns {
        grid-template-columns: 1fr;
    }

    .footer-brand,
    .footer-column {
        align-items: center;
    }

    .footer-links {
        align-items: center;
    }

    .footer-socials {
        justify-content: center;
    }

    /* toast.css */
    .toast-container {
        left: var(--side-spacing);
        right: var(--side-spacing);
        top: auto;
        bottom: calc(var(--side-spacing) + 10px);
        max-width: none;
    }

    .toast {
        transform: translateY(40px);
    }

    .toast-show {
        transform: translateY(0);
    }

    .toast-hide {
        transform: translateY(40px);
    }

    /* home.css */
    .steps-grid,
    .projects-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    /* contact.css */
    .contact-layout,
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ───────────────────────────────
   LARGE SCREENS: min 1856px
   (1800px + 2 × 28px side-spacing) — stop stretching edge-to-edge
─────────────────────────────── */
@media (min-width: calc(1800px + 2 * 28px)) {

    /* base.css */
    section {
        width: calc(var(--content-max-width) + 20 * var(--side-spacing));
        max-width: calc(var(--content-max-width) + 20 * var(--side-spacing));
        margin-left: auto;
        margin-right: auto;
    }

    /* footer.css */
    footer {
        margin-left: 0;
        margin-right: 0;
    }
}