/* ============================================================
   RESPONSIVE — Адаптивні breakpoints
   Правила для hero — у hero.css
   Правила для footer — у footer.css
   ============================================================ */

/* ============================================================
   ≤ 1200px
   ============================================================ */
@media (max-width: 1200px) {
    :root { --section-py: 4rem; }

    /* Cooperation — одна колонка */
    .coop-grid    { grid-template-columns: 1fr; }
    .coop-featured { gap: var(--sp-6); padding: var(--sp-8); }
}

/* ============================================================
   ≤ 992px — Планшети
   ============================================================ */
@media (max-width: 992px) {
    :root { --container-pad: 1.25rem; }

    /* Хедер: приховати десктопну навігацію, показати бургер */
    .header-nav    { display: none; }
    .header-burger { display: flex; }

    /* CTA-банери */
    .cta-banner-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--sp-6);
    }

    .cta-banner-features { gap: var(--sp-3); }

    .cta-banner-feature {
        flex: 1 1 auto;
        min-width: 140px;
        font-size: 0.9rem;
        padding: var(--sp-2) var(--sp-3);
    }

    /* Переваги — 2 колонки */
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }

    /* Формати — 1 колонка з обмеженою шириною */
    .formats-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-inline: auto;
    }

    /* Cooperation featured — 1 колонка */
    .coop-featured { grid-template-columns: 1fr; }

    .coop-featured-right {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: var(--sp-6);
    }

    .coop-featured-left .btn {
        align-self: stretch;
        text-align: center;
    }

    .coop-extras { grid-template-columns: 1fr 1fr; }

    /* Контакт — 1 колонка */
    .contact-inner {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }

    .contact-image {
        min-height: 240px;
        max-height: 300px;
        order: -1;
    }
}

/* ============================================================
   ≤ 768px — Великі телефони
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --section-py: 3rem;
        --header-h: 60px;
    }

    .section-title  { font-size: var(--text-2xl); }
    .section-header { margin-bottom: var(--sp-8); }

    .cta-banner-title { font-size: var(--text-xl); }

    .cta-banner-features {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp-2);
    }

    .cta-banner-feature {
        flex: 0 0 auto;
        width: fit-content;
        white-space: nowrap;
        padding: 5px 10px;
        font-size: 0.78rem;
        justify-content: center;
    }

    .cta-banner-text {
        font-size: 0.8rem;
        line-height: 1.3;
        margin-bottom: var(--sp-1);
    }

    /* Переваги та «що не перевозимо» — 1 колонка */
    .benefits-grid         { grid-template-columns: 1fr; }
    .what-we-dont-list     { grid-template-columns: 1fr; }

    .coop-extras           { grid-template-columns: 1fr; }

    /* Більший відступ між «Переваги» і «Варіанти співпраці»;
       фон секції = білий (як картки), щоб простір під картками
       був однотонним з ними, а не виглядав як інший блок */
    .benefits                { background: var(--color-white); }
    .benefits .benefits-grid { margin-bottom: var(--sp-12); }

    .cooperation .section-header { padding: var(--sp-3) var(--sp-5); }

    .contact-title { font-size: var(--text-xl); }

    /* Картинка чоловіка ширша і "заходить" під форму через negative margin */
    .contact-image {
        min-height: 220px;
        max-height: 280px;
        margin-bottom: calc(var(--sp-12) * -1);
        position: relative;
        z-index: 1;
    }

    .contact-image__img { max-width: 75%; }

    /* Форма поверх картинки */
    .contact-form-card {
        position: relative;
        z-index: 2;
    }

    /* Попап — знизу екрана (sheet) */
    .popup-inner {
        padding: var(--sp-6);
        border-radius: var(--radius-lg);
        max-height: 95dvh;
    }

    .popup-title { font-size: var(--text-xl); }

    .popup-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .popup-overlay .popup-inner {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        width: 100%;
        max-width: 100%;
    }

    .hero-stats-inner { gap: var(--sp-6); }
}

/* ============================================================
   ≤ 576px — Малі телефони
   ============================================================ */
@media (max-width: 576px) {
    :root { --container-pad: 1rem; }

    .btn-lg { padding: 0.75rem 2rem; font-size: var(--text-base); }

    .benefit-number { font-size: 2.625rem; }

    .coop-card-header     { padding: var(--sp-5); }
    .coop-card-desc       { padding: 0 var(--sp-5) var(--sp-5); }
    .coop-details-content { padding: var(--sp-5); }

    .coop-featured        { padding: var(--sp-6); gap: var(--sp-5); }
    .coop-featured-icon   { width: 64px; height: 64px; }
    .coop-featured-title  { font-size: var(--text-xl); }

    .faq-question         { padding: var(--sp-4) var(--sp-5); }
    .faq-answer-content   { padding: var(--sp-4) var(--sp-5) var(--sp-5); }

    .hero-stat strong     { font-size: var(--text-xl); }

    .ps-solution-header   { padding: var(--sp-3) var(--sp-4); }

    /* Відступ між синім хедером і текстом всередині розкритого пункту */
    .ps-solution-body[data-open="true"] .ps-solution-body-inner {
        padding-top: var(--sp-4);
    }

    .format-card          { padding: var(--sp-6); }
    .format-card-timing   { font-size: clamp(1.375rem, 4vw, 1.75rem); }

    /* padding на inner-контейнері — top/bottom хвилі залишаються притисненими до країв секції */
    .cta-banner-inner     { padding-block: var(--sp-12); }

    .cta-banner-feature {
        font-size: 0.85rem;
        padding: var(--sp-1) var(--sp-2);
    }

    .cta-banner-feature-icon { width: 18px; height: 18px; }

    .footer-socials       { gap: var(--sp-2); }

    .what-we-dont         { margin-top: var(--sp-8); }
}

/* ============================================================
   Prefers reduced motion — вимикаємо анімації
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}