/* Start:/bitrix/templates/leslab/components/bitrix/news.list/hero_random/style.css?17924126772759*/
/* Стили компонента bitrix:news.list, шаблон hero_random.
   Координаты сверены с Section/Hero (desktop, id 52:284) и
   Section/Hero (mobile, id 107:15915) через MCP-коннектор. */

.hero {
    background-color: var(--color-bg-dark);
    padding-block: 10px;
}

.hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Порядок по умолчанию: логотип слева, иллюстрация справа (LAYOUT_SIDE=Left) */
.hero--side-right .hero__inner {
    flex-direction: row-reverse;
}

.hero__logo {
    flex-shrink: 0;
    margin: 0;          /* это h1 — сбрасываем отступы и размер шрифта браузера */
    font-size: inherit;
    line-height: 0;
}

.hero__logo img {
    width: 325px;
    height: 188px;
    display: block;
}

.hero__item {
    position: relative;
    width: 620px;
    max-width: 100%;
    flex-shrink: 0;
}

.hero__illustration {
    display: block;
    width: 100%;
    height: 498px;
    object-fit: cover;
    border-radius: 24px;
}

.hero__sticker {
    position: absolute;
    top: 16px;
    left: -42px;
    width: 207px;
    height: 207px;
    transform: rotate(-16.26deg);
}

.hero__heading {
    position: absolute;
    left: 20px;
    bottom: 30px;
    width: 424px;
    max-width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero__heading-main {
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.hero__heading-accent {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.1;
    color: var(--color-accent-yellow);
}

/* ============================================================
   MOBILE — брейкпоинт 767.98px.
   На мобиле логотип и стикер скрыты (hidden=true у обоих
   слоёв в реальном мобильном фрейме Figma) — иллюстрация
   занимает всю ширину.
   ============================================================ */

@media (max-width: 767.98px) {
    .hero__logo,
    .hero__sticker {
        display: none;
    }

    .hero__inner {
        padding-inline: 0;
    }

    .hero__item {
        width: 100%;
    }

    .hero__illustration {
        height: 380px;
        border-radius: 0;
    }

    .hero__heading {
        left: 20px;
        bottom: 20px;
        width: auto;
        max-width: calc(100% - 40px);
    }

    .hero__heading-main {
        font-size: 24px;
    }

    .hero__heading-accent {
        font-size: 18px;
    }
}

/* End */


/* Start:/bitrix/templates/leslab/components/bitrix/news.list/main_places/style.css?17878452926828*/
/* ============================================================
   Карусель площадок. Сверено с Figma:
     Place card    — id 90:20
     стрелки       — 91:26 / 91:29 (16×25)
     точки         — 92:11 (#D9D9D9 20%) / активная 92:19 (#D9D9D9)
     кнопка        — 97:265, общий .leslab-btn
   Стили секции и карты — в template_styles.css (разметка секции
   живёт в index.php, а не в этом шаблоне).
   ============================================================ */

.places-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 10px;
}

/* --- стрелки --------------------------------------------- */

.places-carousel__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    align-self: stretch;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.places-carousel__arrow:hover,
.places-carousel__arrow:focus-visible {
    opacity: 1;
}

.places-carousel__arrow img {
    display: block;
    width: 16px;
    height: 25px;
}

/* --- область слайдов -------------------------------------- */

.places-carousel__viewport {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Высота карточки в макете 329px. Фиксируем минимум, иначе блок
       прыгает при переключении: описания у площадок разной длины. */
    min-height: 329px;
}

/* Все слайды лежат в одной ячейке грида друг поверх друга, а не
   выкидываются из потока через display:none. За счёт этого высота
   блока считается по самому длинному описанию и не меняется при
   перелистывании — иначе карусель прыгает, потому что тексты у
   площадок разной длины. */
.places-carousel__slides {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr;
    /* stretch, а не start: карточка растягивается на всю высоту ячейки,
       чтобы нижнюю полоску можно было прижать к краю блока. */
    align-items: stretch;
}

.places-card {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* visibility, а не opacity: скрытые слайды выпадают и из
       навигации с клавиатуры, и из дерева доступности */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.places-card.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* --- содержимое карточки ---------------------------------- */

.places-card__title {
    margin: 0;
    padding-bottom: 11px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
    color: #fff;
}

.places-card__badge {
    display: inline-block;
    background-color: var(--color-accent-yellow);
    color: var(--color-border-muted);
    border-radius: 5px;
    padding: 4px 5px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.1;
}

.places-card__anonce {
    padding: 0 2px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.1;
    color: #fff;
}

.places-card__anonce p {
    margin: 0 0 0.4em 0;
}

.places-card__anonce p:last-child {
    margin-bottom: 0;
}

/* --- пиктограммы + кнопка --------------------------------- */

.places-card__bottom {
    /* Прижимаем строку пиктограмм и кнопку к низу блока. Высота
       карусели считается по самому длинному описанию, и без этого
       полоска у коротких карточек болталась бы посередине. */
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* ⚠️ Переноса в Figma нет: там пять иконок в строке, а объектов
       справочника уже двенадцать. На узких экранах строка не влезает
       рядом с кнопкой, поэтому разрешаем перенос — инженерное решение. */
    flex-wrap: wrap;
}

.places-card__features {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Стили пиктограмм (.places-feature*) вынесены в template_styles.css:
   тот же набор выводится на детальной странице площадки. */

.places-card__action {
    flex: 0 0 auto;
    margin-left: auto;
}

/* --- точки ------------------------------------------------ */

.places-carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 15px;
    padding-top: 10px;
}

.places-carousel__dot {
    width: 15px;
    height: 15px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}

.places-carousel__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(217, 217, 217, 0.2);
    transition: background-color 0.2s ease;
}

.places-carousel__dot.is-active::before,
.places-carousel__dot:hover::before {
    background-color: #D9D9D9;
}

/* ============================================================
   MOBILE — до 767.98px. Сверено с Section / Places (107:15929):
   карта сверху, текст, карточка со стрелками по бокам.
   ============================================================ */

@media (max-width: 767.98px) {
    .places-carousel {
        gap: 8px;
        padding: 12px 0;
    }

    .places-carousel__arrow {
        width: 26px;
        padding: 0 5px;
    }

    .places-carousel__viewport {
        min-height: 0;
    }

    .places-card__title {
        font-size: 20px;
        padding-bottom: 6px;
    }

    /* Кнопка уезжает под пиктограммы: в строку они вместе не встают */
    .places-card__action {
        margin-left: 0;
    }
}

/* End */


/* Start:/bitrix/templates/leslab/components/bitrix/news.list/main_news/style.css?17878447173906*/
/* ============================================================
   Стили компонента bitrix:news.list, шаблон main_news.
   Все размеры/цвета сверены через MCP-коннектор:
     Section / News — desktop id 92:115, mobile id 107:15980
     News-card      — компонент id 32:3
   ============================================================ */

.news-section {
    position: relative;
    overflow: hidden;                       /* фрейм секции в Figma обрезает ветку */
    background-color: var(--color-text-primary);   /* #51342A */
    padding-block: 60px;
}

/* Декоративная ветка (Figma: "vetka", id 92:124).
   Сам слой в макете — 452x160 и сдвинут за верхнюю границу секции,
   но фрейм секции его обрезает, поэтому реально видно ровно
   368x80 в правом верхнем углу — именно это и отдаёт экспорт.
   Ставим блок в натуральную величину вплотную к углу, без
   отрицательных отступов и без масштабирования.
   На мобиле видимый кусок такой же (576 - 208 = 368), правило одно.

   ⚠️ Если экспортированный файл получился не 368x80, а полный
   452x160 — используй вместо блока ниже вот этот вариант:
     top: -80px; right: -84px; width: 452px; height: 160px;
     background: url(/bitrix/templates/leslab/components/bitrix/news.list/main_news/...) no-repeat top right / 452px 160px;
*/

.news-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 368px;
    height: 80px;
    background: url(/bitrix/templates/leslab/components/bitrix/news.list/main_news/../../../../images/vetka-news.svg) no-repeat top right / 368px 80px;
    pointer-events: none;
}

.news-section__inner {
    position: relative;   /* чтобы контент лёг поверх ветки */
    z-index: 1;
}

.news-section__heading {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 25px 0;
}

.news-section__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.news-section__more {
    margin-top: 20px;
    text-align: right;
}

/* Стили самой карточки (.news-card*) вынесены в template_styles.css:
   та же карточка используется в правой колонке страницы площадки. */

/* ============================================================
   TABLET — 768…991.98px.
   ⚠️ Промежуточного состояния в Figma нет (есть только Desktop 1440
   и Mobile 576). Две колонки — инженерный дефолт, чтобы карточки
   не растягивались до нечитаемой ширины. Если нужен точный вид —
   оформи фрейм на 768 в макете, подставлю по нему.
   ============================================================ */

@media (max-width: 991.98px) {
    .news-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   MOBILE — до 767.98px. Сверено с Section / News (id 107:15980):
   одна колонка, тот же gap 24, отступы секции 30px по вертикали
   и 20px по горизонтали.
   ============================================================ */

@media (max-width: 767.98px) {
    .news-section {
        padding-block: 30px;
    }

    .news-section__inner {
        padding-inline: 20px;
    }

    .news-section__grid {
        grid-template-columns: 1fr;
    }
}

/* End */


/* Start:/bitrix/templates/leslab/components/bitrix/news.list/main_values/style.css?17875274415949*/
/* ============================================================
   Блок «Ценности» на главной.
   Сверено с Figma: Section / Values — десктоп 92:190, мобила 107:15990.
   Единственная секция главной с собственной заливкой — оранжевой.

   Навигация карусели повторяет площадки: стрелки 16×25 по бокам,
   точки 9px в слоте 15px. Число экранов считает скрипт по фактической
   ширине, поэтому брейкпоинтов под планшет здесь нет — и не нужно.
   ============================================================ */

.values-section {
    background-color: var(--color-accent-orange);   /* #ED6A22 */
    padding-block: 60px;
}

.values-section__heading {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 10px 0;
}

/* --- карусель --------------------------------------------- */

.values-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
}

.values-carousel__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* Соседние элементы по краям затухают, показывая, что лента
   продолжается. Маска гасит содержимое в прозрачность, а не в цвет
   фона: не нужно синхронизировать с оранжевой заливкой секции, и при
   смене фона ничего не сломается. Там, где масок нет, край окажется
   резким — карусель от этого не перестанет работать. */
.values-carousel__viewport.has-peek {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 12%,
        #000 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

.values-carousel__track {
    display: flex;
    align-items: flex-start;
    /* Зазор задаёт скрипт: остаток ширины раскидывается по промежуткам,
       чтобы справа не оставалось хвоста. 35px — только стартовое
       значение из макета, до первого пересчёта. */
    gap: 35px;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* Все пять влезли — навигация не нужна, ряд распределяется
   по ширине, как в макете */
.values-carousel.is-static .values-carousel__track {
    justify-content: space-between;
}

.values-carousel.is-static .values-carousel__arrow {
    display: none;
}

/* Когда карусель выключена, лента стоит в нулевой позиции — а там
   первыми идут клоны. Без этого правила они лезут в кадр и вытесняют
   настоящие элементы за правый край. */
.values-carousel.is-static .value-item--clone {
    display: none;
}

.values-carousel__dots.is-hidden {
    display: none;
}

/* --- стрелки ---------------------------------------------- */

.values-carousel__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.values-carousel__arrow:hover,
.values-carousel__arrow:focus-visible {
    opacity: 1;
}

.values-carousel__arrow img {
    display: block;
    width: 16px;
    height: 25px;
}

/* --- элемент ---------------------------------------------- */

.value-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

/* Клоны для бесшовной прокрутки. Скопированы вместе с содержимым,
   но идентификаторы областей редактирования у них сняты в скрипте —
   иначе кнопка «Изменить» в публичной части открывала бы не тот
   элемент. */
.value-item--clone {
    pointer-events: none;
    user-select: none;
}

.value-item__icon {
    display: block;
    width: 118px;
    height: 118px;
}

.value-item__title {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.1;
    color: #fff;
    text-align: center;
}

/* --- точки ------------------------------------------------ */

.values-carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 15px;
}

.values-carousel__dot {
    width: 15px;
    height: 15px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}

.values-carousel__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(217, 217, 217, 0.2);
    transition: background-color 0.2s ease;
}

.values-carousel__dot.is-active::before,
.values-carousel__dot:hover::before {
    background-color: #D9D9D9;
}

@media (max-width: 767.98px) {
    .values-section {
        padding-block: 60px 30px;
    }

    .values-section__inner {
        padding-inline: 20px;
    }

    .values-carousel {
        gap: 8px;
    }

    .values-carousel__arrow {
        width: 26px;
        padding: 0 5px;
    }
}

/* End */


/* Start:/bitrix/templates/leslab/components/bitrix/news.list/main_facts/style.css?17874879692128*/
/* ============================================================
   Блок «Знали ли вы?» — один случайный лесной факт.
   Сверено с Figma: Section / Facts — десктоп 101:507, мобила 107:15999.
   Собственной заливки у секции нет — наследует фон <body>,
   как About и Площадки.
   ============================================================ */

.facts-section {
    padding-block: 60px;
}

.facts-section__heading {
    font-family: var(--font-family-base);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 10px 0;
}

.facts-section__items {
    display: flex;
    align-items: center;
    gap: 35px;
    padding-block: 10px;
}

.facts-section__illustration {
    flex: 0 0 268px;
    max-width: 268px;
}

.facts-section__illustration img {
    display: block;
    width: 100%;
    height: auto;
}

.facts-section__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.1;
    color: #fff;
}

.facts-section__text p {
    margin: 0 0 0.5em 0;
}

.facts-section__text p:last-child {
    margin-bottom: 0;
}

.facts-section__more {
    margin-top: 10px;
    padding-bottom: 20px;
    text-align: right;
}

/* ============================================================
   MOBILE — до 767.98px. Сверено с 107:15999: отступы секции
   40px по вертикали и 20px по горизонтали, иллюстрация встаёт
   над текстом и центрируется, тот же зазор 35px.
   ============================================================ */

@media (max-width: 767.98px) {
    .facts-section {
        padding-block: 40px;
    }

    .facts-section__inner {
        padding-inline: 20px;
    }

    .facts-section__items {
        flex-direction: column;
        align-items: center;
    }

    .facts-section__illustration {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .facts-section__more {
        padding-bottom: 0;
    }
}

/* End */
/* /bitrix/templates/leslab/components/bitrix/news.list/hero_random/style.css?17924126772759 */
/* /bitrix/templates/leslab/components/bitrix/news.list/main_places/style.css?17878452926828 */
/* /bitrix/templates/leslab/components/bitrix/news.list/main_news/style.css?17878447173906 */
/* /bitrix/templates/leslab/components/bitrix/news.list/main_values/style.css?17875274415949 */
/* /bitrix/templates/leslab/components/bitrix/news.list/main_facts/style.css?17874879692128 */