/* =========================================
   Block: Why Us
   ========================================= */

.why-us {
    padding: 96px 0;
    background: var(--color-bg);
    overflow: hidden;
}

.why-us__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}

/* --- Content --- */
.why-us__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Дочерние элементы скрываются через GSAP — не нужно скрывать контейнер */
}

.why-us__heading {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--color-text);
}

.why-us__description {
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text-muted);
}

.why-us__description p {
    margin-bottom: 12px;
}

.why-us__description p:last-child {
    margin-bottom: 0;
}

/* --- Media --- */
.why-us__media {
    position: relative;
    height: clamp(300px, 38vw, 480px);
    overflow: hidden;
}

.why-us__img {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    /* Скрыты до запуска GSAP */
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease,
                filter 0.4s ease, box-shadow 0.4s ease, z-index 0s;
    cursor: pointer;
}

.why-us__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Первое фото */
.why-us__img--1 {
    width: 62%;
    height: 72%;
    top: 0;
    right: 0;
    z-index: 2;
}

/* Второе фото */
.why-us__img--2 {
    width: 52%;
    height: 58%;
    bottom: 0;
    left: 0;
    z-index: 3;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
}

/* Третье фото */
.why-us__img--3 {
    width: 40%;
    height: 44%;
    top: 10%;
    left: 8%;
    z-index: 1;
    opacity: 0.75;
}

/* Hover — только на устройствах с курсором */
@media (hover: hover) {
    /* Dim non-hovered images — класс .is-dimmed управляется через JS (вместо :has()) */
    .why-us__media.is-ready .why-us__img.is-dimmed {
        opacity: 0.35;
        filter: blur(2px);
        transform: scale(0.97);
    }

    .why-us__media.is-ready .why-us__img:hover {
        z-index: 10 !important;
        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);
        transform: scale(1.03);
    }

    .why-us__media.is-ready .why-us__img:hover img {
        transform: scale(1.04);
    }
}

/* --- Carousel (mobile only) --- */
.why-us__carousel {
    display: none !important;
    overflow: hidden;
    max-width: 100%;
}

/* --- Tablet --- */
@media (max-width: 900px) {
    .why-us__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-us__media { height: clamp(220px, 55vw, 360px); }
    .why-us__img--1 { width: 62%; height: 68%; }
    .why-us__img--2 { width: 52%; height: 54%; }
    .why-us__img--3 { display: none; }
}

/* --- Mobile --- */
@media (max-width: 600px) {
    .why-us { padding: 48px 0; }

    .why-us__inner { gap: 28px; }

    /* Скрываем desktop коллаж, показываем карусель */
    .why-us__media    { display: none !important; }
    .why-us__carousel { display: block !important; }

    .why-us__subheading { padding-left: 0; }
    .why-us__description { max-width: 100%; font-size: 14px; }

    .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }

    /* ── Swiper карусель ── */
    .why-us__carousel { position: relative; width: 100%; }

    .why-us__carousel-slide {
        border-radius: 16px;
        overflow: hidden;
        aspect-ratio: 4 / 3;
    }

    @supports not (aspect-ratio: 4 / 3) {
        .why-us__carousel-slide { padding-top: 75%; height: 0; position: relative; }
        .why-us__carousel-slide img { position: absolute; top: 0; left: 0; }
    }

    .why-us__carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Swiper pagination dots — стилизуем под бренд */
    .why-us__carousel-dots { margin-top: 14px; }

    .why-us__carousel-dots .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: var(--color-border);
        opacity: 1;
        transition: background 0.25s ease, width 0.25s ease;
        border-radius: 3px;
    }

    .why-us__carousel-dots .swiper-pagination-bullet-active {
        background: var(--color-primary);
        width: 20px;
    }
}