/* ==========================================================================
   «Гідна праця для всіх» — адаптивна (мобільна) версія.
   Підключається після style.css. Контрольні точки: 1024px / 768px / 480px.
   ========================================================================== */

/* ---------- Планшет у горизонтальному положенні, 1024px ---------- */
@media (max-width: 1024px) {
    .container {
        padding: 0 32px;
    }

    .header-menu,
    .header-menu__list {
        gap: 20px;
    }

    .hero__title {
        font-size: 54px;
    }

    .hero__image,
    .hero__fade {
        width: 68%;
    }

    .card {
        padding: 40px;
    }

    .direction {
        padding: 30px;
    }

    .digest__cover {
        flex-basis: 150px;
        width: 150px;
    }

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

/* ---------- Планшет у вертикальному положенні та телефон, 768px ---------- */
@media (max-width: 768px) {
    :root {
        --header-height: 76px;
    }

    .container {
        padding: 0 20px;
    }

    /* Шапка: меню ховається за «бургер» */
    .header__logo-img {
        height: 56px;
    }

    .header__burger {
        display: flex;
    }

    .header-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 20px;
        border-top: 1px solid var(--color-border);
        background: var(--color-white);
        box-shadow: 0 16px 24px rgba(20, 48, 95, 0.12);
    }

    .header-menu--open {
        display: flex;
    }

    .header-menu__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .header-menu__link {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--color-border);
        font-size: 17px;
    }

    .header-menu__cta {
        padding: 15px 20px;
        font-size: 16px;
    }

    /* Перший екран: темний фон, текст світлий, фото внизу */
    .hero {
        display: block;
        min-height: 740px;
        background: var(--color-navy);
    }

    .hero__image {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 310px;
        object-position: 55% 30%;
    }

    .hero__fade {
        top: auto;
        right: auto;
        bottom: 170px;
        left: 0;
        width: 100%;
        height: 150px;
        background: linear-gradient(180deg, var(--color-navy) 0%, rgba(20, 48, 95, 0) 100%);
    }

    .hero__inner {
        padding-top: 36px;
        padding-bottom: 0;
    }

    .hero__content {
        gap: 18px;
        max-width: none;
    }

    .hero__title {
        font-size: 42px;
        color: var(--color-white);
    }

    .hero__text {
        font-size: 17px;
        color: #e6edfb;
    }

    .hero__actions {
        flex-direction: column;
        align-self: stretch;
        gap: 12px;
        margin-top: 4px;
    }

    .hero__btn {
        width: 100%;
    }

    .hero__btn--primary {
        background: var(--color-yellow);
        color: var(--color-navy);
    }

    .hero__btn--secondary {
        background: transparent;
        border-color: var(--color-white);
        color: var(--color-white);
    }

    .hero__btn--secondary:hover {
        background: var(--color-white);
        color: var(--color-navy);
    }

    /* Секції та картки */
    .section {
        padding-top: 24px;
    }

    #directions,
    #partners {
        padding-top: 48px;
    }

    .section--last {
        padding-bottom: 48px;
    }

    .section__title {
        margin-bottom: 22px;
        font-size: 30px;
    }

    .card {
        padding: 28px 22px;
        border-radius: 24px;
    }

    .about {
        gap: 22px;
    }

    .about__content {
        flex-basis: auto;
        gap: 18px;
    }

    .about__text,
    .launch__text,
    .contacts__text {
        font-size: 16px;
    }

    .about__values {
        flex-basis: auto;
        align-self: stretch;
        gap: 10px;
    }

    .value {
        gap: 14px;
        padding: 12px 16px;
        border-radius: 14px;
    }

    .value__icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .value__label {
        font-size: 16px;
    }

    .launch {
        gap: 20px;
    }

    .launch__main {
        flex-basis: auto;
        width: 100%;
        gap: 16px;
    }

    .launch__event {
        font-size: 21px;
    }

    .launch__details {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px 18px;
        border-radius: 16px;
        background: var(--color-white);
    }

    .launch__badge {
        display: none;
    }

    /* Напрями — один під одним */
    .directions {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .direction {
        gap: 16px;
        padding: 24px 22px;
    }

    .direction__title {
        font-size: 23px;
    }

    .direction__more,
    .direction__actions .btn {
        width: 100%;
    }

    .direction__actions {
        flex-direction: column;
    }

    .digest {
        gap: 18px;
    }

    .digest__cover {
        flex-basis: 140px;
        width: 140px;
    }

    /* Партнери та контакти */
    .partners {
        gap: 24px 16px;
    }

    .partner__logo {
        height: 88px;
        border-radius: 16px;
    }

    .partner__name {
        font-size: 15px;
    }

    .partner__role {
        font-size: 14px;
    }

    .contacts {
        gap: 22px;
        padding: 28px 22px;
    }

    .contacts__main {
        flex-basis: auto;
    }

    .contacts__person {
        flex-basis: auto;
        width: 100%;
        padding: 22px;
        border-radius: 16px;
    }

    .contacts__name {
        font-size: 20px;
    }

    .footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .footer__logo {
        height: 52px;
    }
}

/* ---------- Невеликі телефони, 480px ---------- */
@media (max-width: 480px) {
    .hero {
        min-height: 720px;
    }

    .hero__title {
        font-size: 38px;
        line-height: 40px;
    }

    .section__title {
        font-size: 28px;
    }

    .digest {
        flex-direction: column;
    }

    .digest__cover {
        flex-basis: auto;
        width: 160px;
    }

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