/*
 * Единый вид верхних баннеров-слайдеров разделов (контракт № 12/26, услуга 5).
 * Подключается после основных стилей шаблона и переопределяет их.
 * Разделы: «Чем заняться» (.header-slider-id), «Где поесть» (.header-eat-id),
 * «Где разместиться» (.header-place-id), «О Мордовии» (.header-about-id),
 * «Маршруты» (.routes-id).
 */

:root {
    --t4b-height: 720px;
    --t4b-top: 150px;          /* шапка + хлебные крошки поверх баннера */
    --t4b-h1: 76.8px;
    --t4b-h2: 40px;
    --t4b-card-w: 340px;
    --t4b-card-h: 470px;
    --t4b-nav-h: 56px;         /* полоса прогресса и стрелки под карточкой */
}

@media (max-width: 1279.98px) {
    :root {
        --t4b-height: 640px;
        --t4b-h1: 64px;
        --t4b-h2: 34px;
        --t4b-card-w: 300px;
        --t4b-card-h: 420px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --t4b-height: 600px;
        --t4b-top: 130px;
        --t4b-h1: clamp(32px, 6vw, 48px);
        --t4b-h2: clamp(20px, 3.5vw, 28px);
        --t4b-card-w: 220px;
        --t4b-card-h: 320px;
        --t4b-nav-h: 0px;
    }
}

/* --- Общий каркас баннера --- */
section.header-slider-id,
section.header-eat-id,
section.header-place-id,
section.header-about-id {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--t4b-height) !important;
    min-height: 0 !important;
    margin-top: -120px;
    padding-top: var(--t4b-top);
    overflow: hidden;
    background-color: #000;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Затемнение строго по размеру баннера */
section.header-slider-id::after,
section.header-eat-id::after,
section.header-place-id::after,
section.header-about-id::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* В «Чем заняться» контейнер не задаёт позиционирование — карточка отсчитывается от баннера */
section.header-slider-id > .container-fluid,
section.header-about-id > .container-fluid {
    position: static;
}

section.header-slider-id > .container-fluid .row > div {
    position: relative;
    z-index: 2;
}

section.header-about-id h1 {
    position: relative;
    z-index: 2;
}

section.header-about-id .header-about-menu {
    z-index: 2;
    width: calc(100% - 32px);
}

section.header-eat-id > .container-fluid,
section.header-place-id > .container-fluid {
    position: relative;
    z-index: 2;
}

/* --- Заголовки --- */
section.header-slider-id h1,
section.header-eat-id h1,
section.header-place-id h1,
section.header-about-id h1,
section.routes-id .routes-id__title h1 {
    margin: 0 !important;
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: var(--t4b-h1) !important;
    line-height: 1.1 !important;
    color: #fff;
}

section.header-slider-id h2,
section.header-eat-id h2,
section.header-place-id h2 {
    margin: 16px 0 0 !important;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: var(--t4b-h2) !important;
    line-height: 1.15 !important;
    color: #fff;
}

section.header-slider-id h2 svg,
section.header-eat-id h2 svg,
section.header-place-id h2 svg {
    width: calc(var(--t4b-h2) * 1.1);
    height: calc(var(--t4b-h2) * 1.1);
    vertical-align: -0.15em;
}

/* --- Карточка-слайдер «Чем заняться» --- */
section.header-slider-id .header-slider-id__right {
    position: absolute !important;
    top: calc(var(--t4b-top) + (var(--t4b-height) - var(--t4b-top) - var(--t4b-card-h) - var(--t4b-nav-h)) / 2) !important;
    right: 8% !important;
    left: auto !important;
    width: var(--t4b-card-w) !important;
    height: var(--t4b-card-h) !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 2;
}

section.header-slider-id .swiper-wrapper--post__slider-id {
    position: relative !important;
    right: auto !important;
    width: 100%;
    height: 100%;
}

section.header-slider-id .swiper-nav-position--slider-id {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    width: 100%;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

section.header-slider-id .swiper-progressbar--slider-id {
    width: auto !important;
    flex: 1 1 auto;
    margin: 0 !important;
}

section.header-slider-id .swiper-btn--slider-id {
    position: static !important;
    margin: 0 !important;
}

section.header-slider-id .swiper--slider-id {
    width: var(--t4b-card-w) !important;
    height: var(--t4b-card-h) !important;
}

section.header-slider-id .swiper-slide--slider-id .post {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

section.header-slider-id .swiper-slide--slider-id .post > div:first-child {
    flex: 1 1 auto;
    min-height: 0;
}

section.header-slider-id .carousel-event-img-wrapper,
section.header-slider-id .carousel-event-img {
    width: 100%;
    height: 100%;
}

section.header-slider-id .carousel-event-img {
    object-fit: cover;
}

@media (max-width: 991.98px) {
    section.header-slider-id .header-slider-id__right {
        top: auto !important;
        bottom: 24px;
        right: 16px !important;
    }

    section.header-slider-id .post-slider--content h3 {
        font-size: 14px;
        line-height: 1.25;
    }

    section.header-slider-id .post-slider--content ul,
    section.header-slider-id .swiper-nav-position--slider-id {
        display: none !important;
    }
}

/* --- «О Мордовии»: тот же размер, заголовок по центру, как в макете раздела --- */
section.header-about-id h1 {
    text-align: center;
}

/* --- «Маршруты»: слайдер на всю ширину той же высоты --- */
section.routes-id {
    position: relative;
    margin-top: -120px;
}

section.routes-id .routes-id__title {
    position: absolute;
    top: var(--t4b-top);
    left: 0;
    right: 0;
    margin: 0 !important;
    padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 12px);
    z-index: 3;
}

section.routes-id .swiper-slide--routes > div {
    position: relative;
    height: var(--t4b-height);
    overflow: hidden;
}

section.routes-id .swiper-slide--routes > div > img {
    width: 100%;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
}

section.routes-id .swiper-slide--routes-content {
    top: auto !important;
    bottom: 40px !important;
    max-width: min(710px, calc(100% - 32px));
}

@media (max-width: 991.98px) {
    section.routes-id .swiper-slide--routes-content {
        left: 16px !important;
        right: 16px;
        bottom: 24px !important;
        max-width: none;
    }

    section.routes-id .swiper-slide--routes-content p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/*
 * Атрибуты width/height у оптимизированных изображений задают только пропорции.
 * Высоту определяет ширина блока, как и до оптимизации; явные правила высоты
 * в стилях шаблона сохраняют приоритет (у :where нулевая специфичность).
 */
:where(img[width][height]) {
    height: auto;
}