/* =========================
   HERO BLOCK (universal)
   - internal hero for pages
   - main hero for home/corporate
   ========================= */

.hero_block{
    padding: 44px 0;
}

/* optional helper if you want hero width != .container */
.hero_block__container{
    width: min(1240px, calc(100% - 64px));
    margin: 0 auto;
}

/* Card (single structure) */
.hero_block__inner{
    position: relative;
    display: flex;
    align-items: center;

    min-height: 150px;
    padding: 40px;

    background: #ffffff;
    border-radius: 32px;
    overflow: hidden;

    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}

/* Right image layer */
.hero_block__inner::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;

    width: var(--hb-image-width, 60%);
    height: 100%;

    background-image:
            linear-gradient(
                    to right,
                    rgba(255,255,255,1) 0%,
                    rgba(255,255,255,0.8) 15%,
                    rgba(255,255,255,0) 45%,
                    rgba(255,255,255,0) 65%
            ),
            var(--bg-image);

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;

    pointer-events: none;
}

/* Content slot */
.hero_block__content{
    position: relative;
    z-index: 2;
    max-width: var(--hb-content-max, 560px);
}

/* Eyebrow */
.hero_block__eyebrow{
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, .55);
}

/* Title / Subtitle */
.hero_block__title{
    margin: 0 0 12px;
    font-size: var(--hb-title-size, 36px);
    font-weight: 800;
    line-height: 1.12;
    color: #0f172a;

    white-space: normal;
    overflow-wrap: anywhere;
}

.hero_block__subtitle{
    margin: 0;
    font-size: var(--hb-subtitle-size, 16px);
    line-height: 1.65;
    color: #475569;
}

/* Гео-пруф: снимает главное возражение «а с моей страной вы работаете?»
   до того, как посетитель начнёт искать ответ по сайту.
   Сами флаги описаны в flags.css (класс .flag). */
.hero_block__geo{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.hero_block__geo_label{
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.hero_block__geo_flags{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Actions */
.hero_block__actions{
    margin-top: 22px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Buttons (base) */
.hero_block__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    height: 56px;
    padding: 0 22px;
    border-radius: 16px;

    font-weight: 700;
    text-decoration: none;
    user-select: none;

    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.hero_block__btn:active{
    transform: translateY(1px);
}

.hero_block__btn_icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    border-radius: 12px;

    background: rgba(255,255,255,.18);
}

/* Button variants */
.hero_block__btn--primary{
    background: #0a8f2a;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(10, 143, 42, .22);
}

.hero_block__btn--ghost{
    background: rgba(15, 23, 42, .06);
    color: #0f172a;
}

/* =========================
   MODES
   ========================= */

/* Internal: compact */
.hero_block--internal{
    --hb-title-size: 36px;
    --hb-subtitle-size: 16px;
    --hb-content-max: 500px;
    --hb-image-width: 40%;
}

/* Main: bigger */
.hero_block--main{
    --hb-title-size: 42px;
    --hb-subtitle-size: 20px;
    --hb-content-max: 720px;
    --hb-image-width: 45%;
}

.hero_block--main .hero_block__title{
    letter-spacing: -0.02em;
}

.hero_block--main .hero_block__eyebrow{
    font-size: 13px;
    color: rgba(15, 23, 42, .45);
}

/* =========================
   PRESETS (images only)
   ========================= */
/* =========================
   MAIN PAGES
   ========================= */

.hero_block--index{
    --bg-image: image-set(
            url('../images/hero_blocks/main/avif/index.avif') type('image/avif'),
            url('../images/hero_blocks/main/png/index.png') type('image/png')
    );
}

.hero_block--corporate{
    --bg-image: image-set(
            url('../images/hero_blocks/main/avif/corporate.avif') type('image/avif'),
            url('../images/hero_blocks/main/png/corporate.png') type('image/png')
    );
}

.hero_block--courses{
    --bg-image: image-set(
            url('../images/hero_blocks/main/avif/courses.avif') type('image/avif'),
            url('../images/hero_blocks/main/png/courses.png') type('image/png')
    );
}

.hero_block--check{
    --bg-image: image-set(
            url('../images/hero_blocks/main/avif/check.avif') type('image/avif'),
            url('../images/hero_blocks/main/png/check.png') type('image/png')
    );
}


/* =========================
   INTERNAL / INFO PAGES
   ========================= */

.hero_block--about{
    --bg-image: image-set(
            url('../images/hero_blocks/internal/avif/about.avif') type('image/avif'),
            url('../images/hero_blocks/internal/png/about.png') type('image/png')
    );
}

.hero_block--how-we-work{
    --bg-image: image-set(
            url('../images/hero_blocks/internal/avif/how-we-work.avif') type('image/avif'),
            url('../images/hero_blocks/internal/png/how-we-work.png') type('image/png')
    );
}

.hero_block--delivery{
    --bg-image: image-set(
            url('../images/hero_blocks/internal/avif/delivery.avif') type('image/avif'),
            url('../images/hero_blocks/internal/png/delivery.png') type('image/png')
    );
}

.hero_block--organization{
    --bg-image: image-set(
            url('../images/hero_blocks/internal/avif/organization.avif') type('image/avif'),
            url('../images/hero_blocks/internal/png/organization.png') type('image/png')
    );
}

.hero_block--contacts{
    --bg-image: image-set(
            url('../images/hero_blocks/internal/avif/contacts.avif') type('image/avif'),
            url('../images/hero_blocks/internal/png/contacts.png') type('image/png')
    );
}

.hero_block--faq{
    --bg-image: image-set(
            url('../images/hero_blocks/internal/avif/faq.avif') type('image/avif'),
            url('../images/hero_blocks/internal/png/faq.png') type('image/png')
    );
}




/*.hero_block--corporate{ --bg-image: url('../images/general/intro-img-2.webp'); }*/

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1024px){
    .hero_block__inner{
        padding: 48px;
        min-height: auto;
    }

    .hero_block--main{
        --hb-title-size: 46px;
        --hb-subtitle-size: 18px;
        --hb-content-max: 640px;
        --hb-image-width: 52%;
    }
    .hero_block__title{
        font-size: 26px;
    }
}

@media (max-width: 980px){
    .hero_block__container{
        width: min(720px, calc(100% - 32px));
    }
}

@media (max-width: 768px){
    .hero_block{
        padding: 28px 0;
    }

    .hero_block__inner{
        padding: 32px;
        border-radius: 24px;
    }

    .hero_block--internal{
        --hb-title-size: 28px;
        --hb-subtitle-size: 15px;
        --hb-content-max: 560px;
        --hb-image-width: 55%;
    }

    .hero_block--main{
        --hb-title-size: 34px;
        --hb-subtitle-size: 16px;
        --hb-content-max: 560px;
        --hb-image-width: 56%;
    }

    .hero_block__inner::after{
        background-image:
                linear-gradient(
                        to right,
                        rgba(255,255,255,1) 0%,
                        rgba(255,255,255,0.97) 30%,
                        rgba(255,255,255,0.8) 50%,
                        rgba(255,255,255,0) 70%
                ),
                var(--bg-image);

        background-size: cover;
        background-position: center right;
    }

    .hero_block__actions{
        margin-top: 18px;
        gap: 12px;
    }

    /* На узком экране подпись уходит на свою строку, а флаги остаются
       в один ряд — шесть штук по 26px влезают даже в 320px. */
    .hero_block__geo{
        margin-top: 16px;
        gap: 8px;
    }

    .hero_block__geo_label{
        flex: 1 1 100%;
        font-size: 13px;
    }

    .hero_block__geo_flags .flag--lg{
        width: 26px;
        height: 20px;
    }

    .hero_block__title{
        font-size: 20px;
    }
    .hero_block__subtitle{
        width: 80%;
    }

    .hero_block__btn{
        height: 52px;
        width: 100%;
        padding: 0 18px;
        border-radius: 14px;
    }

    .hero_block__btn_icon{
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }
}