/* ==========================================================================
   YACHTSWRAP — responsive.css
   Breakpoints: 1280 / 1024 / 768 / 480
   ========================================================================== */

/* ---------- 1280px ---------- */
@media (max-width: 1280px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3) var(--space-3);
    }

    .quote-layout {
        grid-template-columns: 1fr 320px;
    }
}

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

    /* Header collapses to hamburger */
    .site-nav,
    .header-actions .btn--quote,
    .header-actions .btn--whatsapp {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .header-actions .wa-icon {
        display: inline-flex;
    }

    .service-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }

    .process {
        grid-template-columns: repeat(3, 1fr);
        row-gap: var(--space-4);
    }

    .process::before {
        display: none;
    }

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

    .split--reverse> :first-child {
        order: 0;
    }

    .split--reverse .split__media {
        order: -1;
    }

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

    .quote-aside {
        position: static;
        grid-template-columns: repeat(2, 1fr);
    }

    .quote-aside__item {
        border-right: 1px solid var(--c-line);
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin-inline: auto;
    }

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

    .hero h1 {
        max-width: 20ch;
    }
}

/* ---------- 768px ---------- */
@media (max-width: 768px) {
    .service-cards {
        grid-template-columns: 1fr;
    }

    .service-card .media {
        aspect-ratio: 4 / 3;
    }

    .project-grid,
    .project-grid--featured {
        grid-template-columns: 1fr;
    }

    .project-grid--featured .project-card:first-child {
        grid-column: auto;
    }

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

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

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

    .gallery--masonry {
        grid-auto-rows: 200px;
    }

    .ratio-hero,
    .ratio-cine {
        aspect-ratio: 16 / 9;
    }

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

    .compare__label {
        grid-column: 1 / -1;
        padding-bottom: 0;
    }

    .compare__row:not(.compare__head)> :not(.compare__label) {
        padding-top: .4rem;
    }

    .form__row--3 {
        grid-template-columns: 1fr;
    }

    .hero-meta {
        gap: 1.25rem 2.5rem;
    }

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

    .wa-float {
        right: 1rem;
        bottom: 1rem;
        padding: 1rem;
    }

    .wa-float .wa-float__label {
        display: none;
    }

    /* compact circular on mobile */
    .wa-float {
        border-radius: 50%;
    }

    .scroll-indicator {
        display: none;
    }
}

/* ---------- 480px ---------- */
@media (max-width: 480px) {

    .feature-grid,
    .process,
    .contact-grid {
        grid-template-columns: 1fr;
    }

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

    .form--forminator .forminator-col-6,
    .form--forminator .forminator-col-md-6 {
        grid-column: span 12;
    }

    .form--forminator .forminator-col-4 {
        grid-column: span 12;
    }

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

    .gallery__item--wide,
    .gallery__item--tall {
        grid-column: auto;
        grid-row: auto;
    }

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

    .hero__actions .btn {
        width: 100%;
    }

    .cta-banner__actions .btn {
        width: 100%;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }

    .marquee__track span {
        font-size: 1.1rem;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .hero__media img {
        animation: none;
    }

    .marquee__track {
        animation: none;
    }
}