/* ===== header_block_mob.css (Мобильный) ===== */

/* Основной блок всей страницы */
main.body_container {
    position: relative;
    padding-top: 5em;
}

/* ===== СЕКЦИЯ page_head_block ===== */
.page_head_block {
    position: relative;
    display: grid;
    width: 100%;
    height: auto;
    min-height: 50px;
}

.page_head_left,
.page_head_right {
    grid-area: 1 / 1;
}

.page_head_left {
    position: relative;
    width: 100%;
    padding-top: 150px;
    z-index: 2;
}

/* Скрываем десктопную SVG-волну  */
.page_head_left .head_layer_image {
    display: none; 
}

.page_head_right {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}

.header_picture {
    display: block;
    width: 100%;
}

.header_picture .header_image {
    display: block;
    width: 100%;
    height: auto;
    object-position: top center;
}

.page_head_content_wrapper {
    position: relative;
    width: 100%;
    height: auto;
}

.page_head_content__container {
    position: relative;
    width: 100%;
    height: auto;
}

/* ===== БЛОК ДЛЯ КНОПОК: */
.overlay-buttons-wrapper {
    position: absolute; /* ДОБАВЛЕНО: Позиционируем абсолютно внутри page_head_content__container */
    top: 0.1em; /* ОТСТУП: Примерный отступ снизу от края картинки */
    left: 20px; /* ОТСТУП: Примерный отступ слева от края картинки */
    width: auto; /* ДОБАВЛЕНО: Занимает ширину по содержимому */
    z-index: 3; /* ДОБАВЛЕНО: Выше блока заголовков */

    display: flex;        /* ДОБАВЛЕНО: Flex-контейнер для своих детей */
    flex-direction: column; /* ДОБАВЛЕНО: Дети располагаются в колонку */
    align-items: flex-start; /* ДОБАВЛЕНО: Выравниваем детей по левому краю */
}
/* ===== БЛОК ДЛЯ ЗАГОЛОВКОВ:  */
.overlay-titles-wrapper {
    padding-top: 15em; /* ОТСТУП: Примерный отступ снизу (выше кнопок), можно подстроить */
    left: 20px; /* ОТСТУП: Примерный отступ слева */
    width: auto; /* ДОБАВЛЕНО: Занимает ширину по содержимому */
    z-index: 2; /* ДОБАВЛЕНО: Ниже блока кнопок */
    
    text-align: left; /* ДОБАВЛЕНО: Выравнивание текста по левому краю */
    color: white; /* ДОБАВЛЕНО: Цвет текста для читаемости */
}

.call_to_action_text {
    color: white; /* ДОБАВЛЕНО: Цвет текста для читаемости на фоне картинки */
    font-size: 1.3em; /* ДОБАВЛЕНО: Размер шрифта */
    margin-bottom: 15px; /* ДОБАВЛЕНО: Отступ между текстом и кнопками */
    text-align: left; /* ДОБАВЛЕНО: Выравнивание текста */
}

.buttons_block {
    display: flex; /* ДОБАВЛЕНО: Для кнопок в ряд */
    gap: 1em; /* ДОБАВЛЕНО: Отступ между кнопками */
    justify-content: flex-start; /* ДОБАВЛЕНО: Прижимаем кнопки к левому краю */
}

.page_head_content_wrapper h1 {font-size: 2.7em; 
}


/* ===== СЕКЦИЯ текстового блоку ===== */


.page_content__container {
    display: block;
}

.article_sidebar {
    display: none;
}

.article_image img {
    display: block;
    width: 100%;
    height: auto;
}


/* Проміжна версія */
@media (min-width: 768px) and (max-width: 1024px) {
	
	    .breadcrumbs {
        font-size: 1.2em;
    }
	
	 .page_head_content_wrapper h1 {
        font-size: 3.2em;
  
    }

    .subtitle {
        font-size: 1.3em;
    }
	
	.page_title_break {
    display: none;
}

    .page_head_block {
        display: flex;
        flex-direction: column;
    }

    .page_head_right {
        order: 1;
    }

    .page_head_left {
		 margin-top: -5em;
        position: relative;
        top: auto;
        left: auto;
        order: 2;
        width: 100%;
        height: auto;
    }

    .page_head_content_wrapper,
    .page_head_content__container {
        height: auto;
    }

    .overlay-titles-wrapper {
        padding-top: 0;
    }

  .overlay-buttons-wrapper {
    display: none;
}
}