/* Start:/local/templates/vodohod/components/bitrix/news/blog/bitrix/news.detail/.default/style.css?17885009336252*/
/* Карточки объектов на детальной странице блога (свойства INFO_<i>) и попап с картой.
   Файл подключает Битрикс автоматически, через postcss он НЕ проходит — поэтому здесь только
   плоский CSS: настоящие @media вместо @custom-media и никакой вложенности.
   var(--d-red) / var(--blue-d) работают: переменные объявлены в :root в основном бандле (main.css).
   font-family: "object-fit:cover" — для полифила object-fit-images, он инициализируется в app.js. */

/* ---------- карточка объекта ---------- */

.s-temp-info { /* static-template-info (place / point of interest card) */
    display: flex;
    align-items: center;
    gap: 37px;
    padding: 20px;
    background-color: #fff;
    border: 2px solid var(--d-red);
}

/* в одном блоке страницы выводятся все карточки раздела */
.s-temp-info + .s-temp-info {
    margin-top: 35px;
}

.s-temp-info__image {
    flex-shrink: 0;
    width: 42%;
    height: 307px;
}

.s-temp-info__image img {
    width: 100%;
    height: 100%;
    font-family: "object-fit:cover";
    object-fit: cover;
}

.s-temp-info__content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.s-temp-info__title {
    font-size: 36px;
    font-weight: 500;
    line-height: 46px;
    color: #000;
}

.s-temp-info__desc {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    color: var(--blue-d); /* #0C2241 */
}

.s-temp-info__meta {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.s-temp-info__meta-i {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 400;
    line-height: 100%;
    color: #000;
}

.s-temp-info__icon {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
}

/* адрес-ссылка: открывает попап с картой, если у карточки заполнен MAP_URL */
.s-temp-info__address-link {
    color: inherit;
    text-decoration: underline;
    -webkit-text-decoration-color: var(--d-red);
    text-decoration-color: var(--d-red);
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .2s;
}

.s-temp-info__address-link:hover {
    color: var(--d-red);
}

.s-temp-info__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.s-temp-info__price {
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
    color: #000;
}

.s-temp-info__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 15px 39px;
    border-radius: 2px;
    background-color: var(--d-red);
    font-size: 12px;
    font-weight: 500;
    line-height: 100%;
    text-transform: uppercase;
    color: #fff;
    transition: background-color .2s, opacity .2s;
}

.s-temp-info__btn:hover {
    opacity: .9;
}

@media (max-width: 1279px) {
    .s-temp-info + .s-temp-info {
        margin-top: 20px;
    }

    .s-temp-info__image {
        height: 260px;
    }

    .s-temp-info__title {
        font-size: 28px;
        line-height: 36px;
    }
}

@media (max-width: 1023px) {
    .s-temp-info {
        gap: 24px;
        padding: 16px;
    }

    .s-temp-info__image {
        width: 40%;
        height: 220px;
    }

    .s-temp-info__content {
        gap: 15px;
    }
}

@media (max-width: 767px) {
    .s-temp-info {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 12px;
    }

    .s-temp-info + .s-temp-info {
        margin-top: 10px;
    }

    .s-temp-info__image {
        width: 100%;
        height: 200px;
    }

    .s-temp-info__title {
        font-size: 22px;
        line-height: 28px;
    }

    .s-temp-info__desc {
        font-size: 16px;
        line-height: 22px;
    }

    .s-temp-info__meta {
        gap: 12px;
    }

    .s-temp-info__meta-i {
        font-size: 16px;
        align-items: flex-start;
    }

    .s-temp-info__foot {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- попап с картой (MAP_URL, HOW_TO_GET) ---------- */
/* Блок лежит в разметке скрытым (display: none), fancybox сам ставит ему display: inline-block. */

.s-temp-info-map {
    width: 660px;
    max-width: 100%;
}

.s-temp-info-map__title {
    margin-bottom: 16px;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
}

.s-temp-info-map__row {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--blue-d); /* #0C2241 */
}

/* карты в попапе может не быть, тогда последняя строка текста — последний элемент */
.s-temp-info-map__row:last-child {
    margin-bottom: 0;
}

.s-temp-info-map__label {
    font-weight: 700;
    color: #000;
}

.s-temp-info-map__frame {
    display: block;
    width: 100%;
    height: 400px;
    margin-top: 16px;
    border: 0;
}

.s-temp-info-map-fancybox .fancybox-content {
    padding: 24px;
    background-color: #fff;
}

@media (max-width: 767px) {
    .s-temp-info-map__title {
        font-size: 22px;
    }

    .s-temp-info-map__row {
        font-size: 15px;
    }

    .s-temp-info-map__frame {
        height: 300px;
    }

    .s-temp-info-map-fancybox .fancybox-content {
        padding: 16px;
    }
}

/* ---------- видеоблок (WEB-4417) ---------- */
/* Пропорции 16:9 держим padding-ом контейнера, плеер растягиваем абсолютом: у iframe нет
   aspect-ratio в старых браузерах, а высоту в процентах он не понимает. */

.s-temp-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 9 / 16 */
    overflow: hidden;
}

.s-temp-video__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* End */
/* /local/templates/vodohod/components/bitrix/news/blog/bitrix/news.detail/.default/style.css?17885009336252 */