/* Gallery (Swiper) — Figma node 278:170 «Демонстрация функционала» */

.gallery {
    padding: var(--section-padding-y) var(--section-padding-x);
    max-width: 1440px;
    margin: 0 auto;
    background: var(--color-bg-page);
}

.gallery__heading {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-extrabold);
    color: var(--color-text-primary);
    margin-bottom: 60px;
    letter-spacing: -0.01em;
    text-align: center;
}

.gallery__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 100%;
}

.gallery__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 100%;
}

.gallery__viewport {
    flex: 1;
    min-width: 0;
    max-width: 1280px;
}

.gallery__swiper {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-white);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.gallery__slide {
    aspect-ratio: 1024 / 540;
}

.gallery__slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.gallery__inner--single .gallery__dots {
    display: none;
}

.gallery__row--single .gallery__arrow {
    display: none;
}

/* Swiper: отключаем стрелки из темы Swiper (::after) */
.gallery .gallery__arrow.swiper-button-prev,
.gallery .gallery__arrow.swiper-button-next {
    position: static;
    top: auto;
    margin-top: 0;
    width: 60px;
    height: 60px;
    color: inherit;
}

.gallery .gallery__arrow.swiper-button-prev::after,
.gallery .gallery__arrow.swiper-button-next::after {
    content: none !important;
    display: none !important;
}

.gallery .swiper-pagination {
    position: relative;
    margin-top: 0;
    bottom: auto;
    left: auto;
    width: 100%;
}

.gallery .swiper-pagination-bullet {
    margin: 0 !important;
    opacity: 1;
}

/* Figma: кнопки 60×60, обводка #D5D5D5, тень 0 4px 9px rgba(0,0,0,0.05), иконка #00CED1 */
.gallery__arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 1px solid #d5d5d5;
    border-radius: 0;
    background: var(--color-white);
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    z-index: 2;
}

.gallery__arrow:hover {
    background: var(--color-white);
    border-color: #d5d5d5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.gallery__arrow:hover img {
    filter: none;
}

.gallery__arrow img {
    display: block;
    width: 58px;
    height: 58px;
}

.gallery__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 10px;
}

.gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d5d5d5;
    cursor: pointer;
    transition: background var(--transition-fast);
    opacity: 1;
}

.gallery__dot--active,
.gallery .gallery__dot.swiper-pagination-bullet-active {
    background: #000000;
}