/* ===== CONTACTS ===== */
/* AICODE-NOTE: Компактная секция контактов — пропорции копируют оригинал
   magicfitness.pro: небольшое небо сверху + trees.png (деревья + земля)
   на нижнюю треть. Высоту задаём через padding-bottom, равный видимой
   части земли (верх trees.png прозрачный и накладывается на контент). */

.contacts {
    position: relative;
    padding: var(--sp-xl) 0 90px;
    background: var(--color-bg-contact-sky);
    text-align: center;
    /* AICODE-NOTE: overflow-x clip обрезает только горизонтально (если
       landscape вылезет за край), вертикально оставляем visible — чтобы
       пиксельная «перемычка» в ::before могла вылезти вверх в тарифы. */
    overflow-x: clip;
    overflow-y: visible;
}

/* AICODE-NOTE: Пиксельная «перемычка» apply_pixels.png — россыпь синих
   и бежевых квадратиков. Лежит ровно на границе тарифов и контактов,
   половиной вверх в бежевое, половиной вниз в синее — бежевые и синие
   пиксели «перемешиваются», как на magicfitness.pro. */
.contacts::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6.2vw;
    max-height: 86px;
    min-height: 24px;
    transform: translateY(-50%);
    background-image: url('../assets/images/general/apply_pixels.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 3;
}

.contacts__landscape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
    line-height: 0;
}

.contacts__landscape img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
}

.contacts__content {
    position: relative;
    z-index: 2;
}

.contacts__title {
    font-family: var(--font-pixel);
    font-size: var(--fs-xl);
    color: #ffffff;
    margin-bottom: var(--sp-sm);
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
}

.contacts__subtitle {
    font-family: var(--font-pixel);
    font-size: var(--fs-xs);
    color: #ffffff;
    margin-bottom: var(--sp-xl);
    opacity: 0.95;
}

.contacts__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-md);
}

.contacts__btn {
    --frame-w: 3px;
    --frame-step: 7px;
    --frame-color: var(--color-primary);
    --frame-bg: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-md);
    font-family: var(--font-pixel);
    font-size: var(--fs-sm);
    padding: 12px var(--sp-xl);
    color: var(--color-text);
    min-width: 200px;
    justify-content: center;
    transition: color var(--transition-fast);
    text-decoration: none;
    position: relative;
    isolation: isolate;
    background: var(--frame-color);
    clip-path: polygon(
        0 var(--frame-step),
        var(--frame-step) var(--frame-step),
        var(--frame-step) 0,
        calc(100% - var(--frame-step)) 0,
        calc(100% - var(--frame-step)) var(--frame-step),
        100% var(--frame-step),
        100% calc(100% - var(--frame-step)),
        calc(100% - var(--frame-step)) calc(100% - var(--frame-step)),
        calc(100% - var(--frame-step)) 100%,
        var(--frame-step) 100%,
        var(--frame-step) calc(100% - var(--frame-step)),
        0 calc(100% - var(--frame-step))
    );
}

.contacts__btn::before {
    content: '';
    position: absolute;
    inset: var(--frame-w);
    background: var(--frame-bg);
    z-index: -1;
    clip-path: inherit;
}

.contacts__btn:hover {
    --frame-bg: var(--color-primary);
    color: #fff;
}

.contacts__btn-icon {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    transition: filter var(--transition-fast);
}

/* AICODE-NOTE: Иконки (phone_pixel.png, tg_pixel.png, rkn_pixel.svg)
   нарисованы фиолетовым — тем же цветом, что становится фоном кнопки при
   ховере. Чтобы значок не «терялся» на фиолетовом, красим его в белый
   через filter: brightness(0) invert(1) — это работает и для PNG, и для
   SVG, в отличие от currentColor. */
.contacts__btn:hover .contacts__btn-icon {
    filter: brightness(0) invert(1);
}

@media (min-width: 768px) {
    .contacts {
        padding: var(--sp-2xl) 0 130px;
    }

    .contacts__buttons {
        flex-direction: row;
        justify-content: center;
        gap: var(--sp-lg);
    }

    .contacts__title {
        font-size: var(--fs-2xl);
    }
}

@media (min-width: 1024px) {
    .contacts {
        padding: var(--sp-2xl) 0 170px;
    }

    .contacts__title {
        font-size: var(--fs-3xl);
        margin-bottom: var(--sp-md);
    }

    .contacts__subtitle {
        margin-bottom: var(--sp-2xl);
    }
}

@media (min-width: 1440px) {
    .contacts {
        padding: var(--sp-3xl) 0 210px;
    }

    .contacts__title {
        font-size: 3rem;
    }

    .contacts__subtitle {
        font-size: var(--fs-sm);
    }

    .contacts__btn {
        font-size: var(--fs-base);
        padding: 14px var(--sp-2xl);
        min-width: 240px;
    }

    .contacts__btn-icon {
        width: 22px;
        height: 22px;
    }
}