main{
    overflow-x: hidden;
}

/* ======================================================= */
/* ====================== HERO БЛОК ====================== */
/* ======================================================= */

.program-hero{
    position: relative;
    width: 100%;
    height: 500px;
    min-height: 450px;
    overflow: hidden;

    background:
        radial-gradient(
            120% 80% at 78% 50%,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.06) 38%,
            rgba(255, 255, 255, 0) 62%
        ),
        linear-gradient(180deg, #0f0f10 0%, #0a0a0a 100%);
}

.program-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: radial-gradient(
        140% 100% at 50% 10%,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(0, 0, 0, 0) 55%
    );
}

.program-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.55) 0%,
            transparent 55%
        ),
        linear-gradient(
            180deg,
            transparent 75%,
            #0a0a0a 100%
        );
}

.program-hero-photo{
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 10%;
    filter: brightness(0.55) saturate(1.1);
}

.program-hero-text{
    position: absolute;
    top: 50%;
    left: 6%;
    z-index: 2;

    width: 44%;
    max-width: 640px;

    text-align: left;
    transform: translateY(-50%);
}

.program-hero-text h1{
    margin: 0 0 12px;
    color: rgba(255, 165, 90, 0.95) !important;

    font-family: 'Avenir-Heavy', sans-serif !important;
    font-size: 48px;
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: 3px;

    text-shadow: 0 20px 50px rgba(255, 115, 0, 0.95);
}

/* ======================================================= */
/* ================= ОПИСАНИЕ ПРОГРАММЫ ================= */
/* ======================================================= */

.program-description{
    position: relative;
    min-height: 500px;
    padding: 80px 50% 80px 8%;
    box-sizing: border-box;

    background: linear-gradient(
        180deg,
        #0a0a0a 0%,
        #1a1210 35%,
        rgb(70, 45, 20) 75%,
        rgb(120, 66, 20) 100%
    );
}

/*
    Поддерживается оба формата HTML.

    Старый:
    <section class="program-description">
        <h2>...</h2>
        <p>...</p>
        <img>
    </section>

    Новый:
    <section class="program-description">
        <div class="program-description-content">
            <h2 class="program-description-title">...</h2>
            <p class="program-description-text">...</p>
        </div>
        <img class="program-description-photo">
    </section>
*/

.program-description-content{
    position: relative;
    z-index: 2;
}

/* Заголовок описания */
.program-description > h2,
.program-description-content h2,
main .program-description .program-description-title{
    position: relative;
    z-index: 2;

    margin: 0 0 18px;
    color: #ffffff !important;

    font-family: 'Avenir-Bold', sans-serif !important;
    font-size: 34px !important;
    font-weight: normal !important;
    line-height: 1.2;

    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* Абзацы описания */
.program-description > p,
.program-description-content p,
main .program-description .program-description-text{
    position: relative;
    z-index: 2;

    margin: 0;
    color: rgba(255, 255, 255, 0.92) !important;

    font-family: 'Avenir-Medium', sans-serif !important;
    font-size: 17px !important;
    font-weight: normal !important;
    line-height: 1.75;
}

/* Отступ между двумя абзацами */
.program-description > p + p,
.program-description-content p + p,
main .program-description .program-description-text
+ .program-description-text{
    margin-top: 18px;
}

/* Фото справа в описании */
.program-description > img,
.program-description-photo{
    position: absolute;
    top: 50%;
    right: 8%;
    z-index: 1;

    width: 34%;
    max-width: 480px;
    height: 340px;

    object-fit: cover;
    object-position: center;

    border-radius: 24px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
    filter: brightness(0.94);

    transform: translateY(-50%);
    transition: transform 0.4s ease, filter 0.4s ease;
}

.program-description > img:hover,
.program-description-photo:hover{
    filter: brightness(1);
    transform: translateY(-50%) scale(1.02);
}

/* ======================================================= */
/* ================= НАПРАВЛЕНИЯ СЕЛЕКЦИИ ================ */
/* ======================================================= */

.program-directions{
    position: relative;
    min-height: 0;
    overflow: hidden;

    padding: 54px 8% 64px;
    box-sizing: border-box;

    background: linear-gradient(
        180deg,
        rgb(120, 66, 20) 0%,
        rgb(223, 93, 5) 100%
    );
}

/*
    Контейнер нового HTML и прямые элементы старого HTML.
    Все направления будут растягиваться на всю ширину секции.
*/
.program-directions-content,
.program-directions > h2,
.program-directions > .program-directions-list{
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: none;
}

/* Заголовок третьей секции */
.program-directions h2,
main .program-directions .program-directions-title{
    margin: 0;
    color: #ffffff !important;

    font-family: 'Avenir-Bold', sans-serif !important;
    font-size: 32px !important;
    font-weight: normal !important;
    line-height: 1.2;
    letter-spacing: 0.5px;

    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

/* Линия под заголовком */
.program-directions h2::after{
    content: "";
    display: block;

    width: 75px;
    height: 4px;
    margin-top: 22px;
    margin-bottom: 30px;

    border-radius: 4px;
    background: rgba(255, 255, 255, 0.65);
}

/* Список направлений в один столбец */
.program-directions-list{
    display: block;

    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    list-style: none;
}

/* Одна строка направления */
.program-directions-list li{
    position: relative;
    display: flex;
    align-items: center;

    min-height: 71px;
    padding: 16px 44px 16px 42px;
    box-sizing: border-box;

    border-top: 1px solid rgba(255, 255, 255, 0.18);

    color: rgba(255, 255, 255, 0.96) !important;

    font-family: 'Avenir-Medium', sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.45;

    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

/* У первого пункта нет линии сверху */
.program-directions-list li:first-child{
    border-top: 0;
}

/* Иконка перед пунктом */
.program-directions-list li::before{
    content: var(--program-icon, "🌾");
    position: absolute;
    top: 50%;
    left: 4px;

    font-size: 20px;
    line-height: 1;

    transform: translateY(-50%);
}

/*
    В новом дизайне третьей секции фото выключаем:
    вся ширина нужна для единого списка с линиями.
*/
.program-directions > img,
.program-directions-photo{
    display: none;
}

/* ======================================================= */
/* ======================== FOOTER ======================= */
/* ======================================================= */

.footer{
    background: linear-gradient(
        180deg,
        rgb(223, 93, 5) 0%,
        rgb(150, 65, 15) 40%,
        rgb(73, 77, 78) 100%
    );
}

/* ======================================================= */
/* ===== ПЛАНШЕТЫ И НЕБОЛЬШИЕ НОУТБУКИ: ДО 1024px ======= */
/* ======================================================= */

@media (max-width: 1024px){
    .program-hero{
        height: 440px;
    }

    .program-hero-text{
        width: 55%;
    }

    .program-hero-text h1{
        font-size: 40px;
    }

    .program-hero-text p{
        font-size: 26px;
    }

    .program-description{
        min-height: 460px;
        padding: 60px 47% 60px 6%;
    }

    .program-description > h2,
    .program-description-content h2,
    main .program-description .program-description-title{
        font-size: 28px !important;
    }

    .program-description > img,
    .program-description-photo{
        right: 6%;
        width: 35%;
        height: 290px;

        border-radius: 22px;
    }

    .program-directions{
        padding: 50px 6% 58px;
    }
}

/* ======================================================= */
/* ========= БОЛЬШИЕ ТЕЛЕФОНЫ И ПЛАНШЕТЫ: ДО 768px ====== */
/* ======================================================= */

@media (max-width: 768px){
    .program-hero{
        height: 380px;
        min-height: 0;
    }

    .program-hero-text{
        left: 5%;
        width: 80%;
    }

    .program-hero-text h1{
        font-size: 30px;
        letter-spacing: 1px;
    }

    .program-hero-text p{
        font-size: 20px;
        letter-spacing: 1.5px;
    }

    .program-description{
        min-height: 0;
        padding: 50px 6%;
    }

    .program-description > h2,
    .program-description-content h2,
    main .program-description .program-description-title{
        font-size: 24px !important;
    }

    .program-description > p,
    .program-description-content p,
    main .program-description .program-description-text{
        font-size: 15px !important;
    }

    .program-description > img,
    .program-description-photo{
        position: static;
        display: block;

        width: 100%;
        max-width: 620px;
        height: 260px;
        margin: 30px auto 0;

        border-radius: 20px;
        transform: none;
    }

    .program-description > img:hover,
    .program-description-photo:hover{
        transform: scale(1.02);
    }

    .program-directions{
        padding: 45px 6% 52px;
    }

    .program-directions h2,
    main .program-directions .program-directions-title{
        font-size: 24px !important;
    }

    .program-directions h2::after{
        width: 58px;
        height: 3px;
        margin-top: 16px;
        margin-bottom: 22px;
    }

    .program-directions-list li{
        min-height: 0;
        padding: 15px 28px 15px 34px;

        font-size: 15px !important;
    }

    .program-directions-list li::before{
        left: 2px;
        font-size: 18px;
    }
}

/* ======================================================= */
/* ================= ТЕЛЕФОНЫ: ДО 480px ================= */
/* ======================================================= */

@media (max-width: 480px){
    .program-hero{
        height: 300px;
    }

    .program-hero-text{
        left: 5%;
        width: 90%;
    }

    .program-hero-text h1{
        margin-bottom: 8px;
        font-size: 22px;
    }

    .program-hero-text p{
        font-size: 16px;
        letter-spacing: 1px;
    }

    .program-description{
        padding: 35px 5%;
    }

    .program-description > h2,
    .program-description-content h2,
    main .program-description .program-description-title{
        margin-bottom: 14px;
        font-size: 20px !important;
    }

    .program-description > p,
    .program-description-content p,
    main .program-description .program-description-text{
        font-size: 14px !important;
        line-height: 1.6;
    }

    .program-description > p + p,
    .program-description-content p + p,
    main .program-description .program-description-text
    + .program-description-text{
        margin-top: 14px;
    }

    .program-description > img,
    .program-description-photo{
        height: 200px;
        margin-top: 22px;

        border-radius: 14px;
    }

    .program-directions{
        padding: 35px 5% 42px;
    }

    .program-directions h2,
    main .program-directions .program-directions-title{
        font-size: 20px !important;
    }

    .program-directions h2::after{
        width: 42px;
        height: 3px;
        margin-top: 14px;
        margin-bottom: 18px;
    }

    .program-directions-list li{
        padding: 13px 12px 13px 30px;

        font-size: 14px !important;
        line-height: 1.5;
    }

    .program-directions-list li::before{
        left: 0;
        font-size: 16px;
    }
}

/* ======================================================= */
/* ================ САМЫЕ УЗКИЕ ЭКРАНЫ ================== */
/* ======================================================= */

@media (max-width: 360px){
    .program-hero{
        height: 260px;
    }

    .program-hero-text h1{
        font-size: 18px;
    }

    .program-hero-text p{
        font-size: 14px;
    }

    .program-description > h2,
    .program-description-content h2,
    main .program-description .program-description-title{
        font-size: 18px !important;
    }

    .program-description > p,
    .program-description-content p,
    main .program-description .program-description-text{
        font-size: 13px !important;
    }

    .program-directions-list li{
        font-size: 13px !important;
    }
}

/* ======================================================= */
/* ====== ПОДСОЛНЕЧНИК: СПИСОК БЕЗ ПУСТЫХ ПРОМЕЖУТКОВ ==== */
/* ======================================================= */

.sunflower-directions .program-directions-list{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sunflower-directions .program-directions-list li{
    width: 100%;
    min-height: 0;
}

.sunflower-directions .program-directions-list li:nth-child(4){
    margin-bottom: 0;
}

/* ======================================================= */
/* ================= КНОПКА НАЗАД К КАТАЛОГУ ============= */
/* ======================================================= */

/*
    Кнопка находится поверх hero-блока.

    Чтобы она не конфликтовала с фото и текстом:
    - z-index: 3 выше, чем фон/затемнения hero;
    - hero использует position: relative, которое у тебя уже есть;
    - top/left задают положение в верхнем левом углу.
*/
/* ======================================================= */
/* ================= КНОПКА НАЗАД К КАТАЛОГУ ============= */
/* ======================================================= */

.program-back-link{
    position: absolute;
    top: 96px;
    left: 6%;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 16px 10px 12px;

    color: rgba(255, 255, 255, 0.96);
    font-family: "Avenir-Medium", sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;

    background: rgba(10, 10, 10, 0.42);

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.program-back-link__arrow{
    display: inline-block;

    color: rgba(255, 165, 90, 0.98);
    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 0.7;

    transition: transform 0.25s ease;
}

.program-back-link:hover{
    color: #ffffff;

    background: rgba(255, 115, 0, 0.32);

    border-color: rgba(255, 185, 120, 0.82);

    transform: translateX(-4px);
}

.program-back-link:hover .program-back-link__arrow{
    transform: translateX(-3px);
}

.program-back-link:focus-visible{
    outline: 3px solid rgba(255, 202, 148, 0.95);
    outline-offset: 4px;
}


/* ======================================================= */
/* ======================= АДАПТИВ ======================= */
/* ======================================================= */

@media (max-width: 768px){
    .program-back-link{
        top: 76px;
        left: 5%;

        gap: 8px;
        padding: 9px 13px 9px 10px;

        font-size: 13px;
    }

    .program-back-link__arrow{
        font-size: 20px;
    }
}

@media (max-width: 480px){
    .program-back-link{
        top: 66px;

        padding: 8px 11px 8px 9px;

        font-size: 12px;
    }

    .program-back-link__arrow{
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce){
    .program-back-link,
    .program-back-link__arrow{
        transition: none;
    }
}