@media (max-width: 768px) {
    /* 1. Родительский контейнер колонок */
    .custom-list-item.wp-block-columns {
        display: flex !important;
        flex-direction: row !important; /* Принудительно в ряд, отменяем стек темы */
        flex-wrap: wrap !important;    /* Разрешаем перенос, если не влезает */
        align-items: flex-start !important;
        column-gap: 20px !important;    /* Расстояние между иконкой и текстом */
        row-gap: 12px !important;       /* Расстояние сверху, когда текст ушел вниз */
        margin-left: 0 !important;
		margin-bottom: 28px !important;
    }

    /* 2. Левая колонка (иконки) */
    .custom-list-item.wp-block-columns > .wp-block-column:first-child {
        flex: 0 0 auto !important; /* Фиксируем ширину по контенту иконок */
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    /* 3. Правая колонка (текст) */
    .custom-list-item.wp-block-columns > .wp-block-column:last-child {
        /* КЛЮЧЕВАЯ ЛОГИКА:
           flex-grow: 1 (занимает всё место в строке или под иконкой)
           flex-shrink: 1 (может сжиматься)
           flex-basis: 180px (если места меньше 180px — прыгает вниз) */
        flex: 1 1 180px !important; 
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    /* 4. Убираем стандартные отступы WP, которые ломают выравнивание */
    .custom-list-item.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        margin-left: 0 !important;
    }

    /* Универсальный фикс размера для PNG и SVG иконок */
    .custom-list-item.wp-block-columns .wp-block-image img,
    .custom-list-item.wp-block-columns .wp-block-image svg,
    .custom-list-item.wp-block-columns .wp-block-image {
        width: 48px !important;
        height: 48px !important; /* Фиксируем высоту для SVG */
        max-width: 48px !important;
        min-width: 48px !important;
        flex-shrink: 0 !important; /* Запрещаем сжатие при узком экране */
        object-fit: contain !important; /* Сохраняем пропорции внутри 48px */
    }
}

@media screen and (max-width: 480px) {	
	body {
		--wp--style--root--padding-left: 0;
		--wp--style--root--padding-right: 0;
	}
	.head-row {
		margin: 0 auto;
		justify-content: center;
	}
	.learn-process {
		flex-wrap: wrap !important;
		flex-direction: column;
		padding-left: 24px;
		padding-right: 24px;
	}
	.learn-process-cover .wp-block-cover {
		min-height: 280px !important;
	}
	.learn-process-cover .wp-block-group {
		background-size: 50% !important;
	}
	
	.wp-container-core-group-is-layout-6af8e42f > div, .school-history, .border-radius-0 {
		border-radius: 0 !important;
	}
	.wp-container-core-group-is-layout-232afeed, .wp-container-core-group-is-layout-caa2d89a, .wp-container-core-group-is-layout-38a4c746, .contacts-block {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.wp-container-core-group-is-layout-f9cb6abc {
		padding-left: 24px !important;
		padding-right: 0 !important;
	}
	.main-block-padding {
		padding-left: 0;
		padding-right: 0;
	}
	.director-stack {
		padding: 12px !important;
	}
	.h2-quote {
		padding-right: 12px !important;
	}
	.director-title {
		padding-left: 12px !important;
	}
	.history-title {
		padding: 24px 0 !important;
	}
	
	.history-titles-column figure,
	.history-details-column figure,
	.history-details-columns figure,
	.order-1 figure {
		padding: 0 24px !important;
	}

	/* Раскрывающийся список */
	
	.wp-block-details summary::before,
	.wp-block-details > summary::before {
		width: 48px !important;
		height: 48px !important;
		left: 24px !important;
	}
	.details-teachers summary::after,
	.details-teachers > summary::after {
		width: 48px !important;
		height: 48px !important;
		right: 24px !important;
	}
	.wp-block-details summary {
		padding-left: 32px !important;		
	}
	.details-teachers summary {
		font-size: 18px !important;
		min-height: 80px !important;           /* подогнать под высоту иконки + отступы */
		line-height: 1.1 !important;
		white-space: normal !important;
		overflow-wrap: break-word !important;
		padding-right: 58px !important;
	}
	
	.teachers-team,
	.banner-block {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.document-group {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}	
	.teachers-team h3 {
		padding-left: 12px !important;
		font-size: 1.4em !important;
		line-height: 1.2 !important;
	}
	.teachers-team p {
		padding-left: 12px !important;
		font-size: 1em !important;
		line-height: 1.1 !important;
		margin-bottom: 28px !important;
	}
	.document-group h3 {
		padding-left: 0 !important;
		font-size: 1.2em !important;
		line-height: 1 !important;
	}
	.document-group p {
		padding-left: 0 !important;
		font-size: 0.8em !important;
		line-height: 1.1 !important;
		margin-bottom: 28px !important;		
	}
	
	#popmake-1225 .pum-close {
		top: 12px !important;
		right: 12px !important;
	}
	
	.border-radius-script {
		max-height: 520px;
	}
	
	#modal-6-content {
		padding-left: 24px !important;
	}
}

/* Секция Документы */

@media screen and (max-width: 480px) {
    
	/* 1. Принудительно возвращаем колонке свойства флекс-контейнера */
	.wp-block-column.column-vertical {
        display: flex !important;
        align-items: center !important; /* Центрирует содержимое по вертикали */
        justify-content: flex-start !important;
        min-height: 40px !important; /* Высота строки для попадания пальцем */
    }

    /* 2. Сбрасываем внешние отступы у всех элементов внутри этой колонки */
	.wp-block-column.column-vertical > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

	.wp-block-column.column-vertical a {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.2 !important; /* Стандартная высота строки для текста */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
		text-decoration: underline;
    }
}

/* Секция История Создания Школы */
@media screen and (max-width: 480px) {
	/* Обнуляем внутренние отступы для всех уровней вложенности внутри секции */
	.history-section,
	.history-section .wp-block-group,
	.history-section .wp-block-columns,
	.history-section .wp-block-column,
	.history-section .wp-block-row {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}
	.history-section {
		--side-padding: 0; /* Базовый отступ для мобильных */
		padding-left: var(--side-padding) !important;
		padding-right: var(--side-padding) !important;
	}
	.history-section p,
	.history-section h1,
	.history-section h2,
	.history-section h3,
	.history-section .wp-block-details__summary {
		padding-left: 24px !important;
	}
	.history-title p,
	.history-section h3 {
		padding-right: 24px;
	}
	.history-section .img-contain {
		padding: 32px !important;
	}
	.history-section .h2-left {
		text-align: left !important;
	}

	/* 1. Убираем лишние отступы у самого контейнера спойлера */
	.history-section details {
		padding-right: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		box-sizing: border-box; /* Гарантирует, что padding не расширяет блок */
	}
	
	/* 2. Убираем отступ у заголовка спойлера (кнопки раскрытия) */
	.history-section details summary {
		padding-right: 0 !important;
		list-style-position: inside; /* Чтобы маркер не уходил за край */
	}

	/* 3. Ограничиваем контент внутри раскрытого спойлера */
	.history-section details[open] > *:not(summary) {
		padding-right: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
	}
	
	/* 4. Костыли для глобальной отмены прокрутки */
	html, body {
        overflow-x: hidden;
        position: relative;
    }
}

/* Задаем единый контролируемый отступ для контента */


@media screen and (max-width: 480px) {
    
    /* Основной flex-контейнер хедера (тот самый, в котором лежат логотип, bvi, соцсети и телефон) */
    .header-group .wp-block-group.alignwide.is-layout-flex {
        flex-direction: column !important;     /* ← главное изменение */
        align-items: center !important;       /* центрируем по горизонтали */
        gap: 32px !important;                 /* расстояние между блоками */
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Логотип — по центру */
    .header-group .custom-logo-link {
        margin: 0 auto !important;
		padding-left: 20px;
		padding-right: 20px;
        text-align: center;
    }

    /* Кнопка «Версия для слабовидящих» — растягиваем на всю ширину (удобно на мобильных) */
    .bvi-shortcode {
        width: 100% !important;
        max-width: 328px;
    }

    /* Блок социальных иконок (он остаётся горизонтальным внутри себя) */
    .header-group .wp-block-group.is-layout-flex:not(.alignwide) {
        justify-content: center !important;
    }

    /* Кнопка с телефоном — тоже на всю ширину */
    .header-group .wp-block-buttons {
        width: 100% !important;
        max-width: 320px;
    }
    
    /* Убираем лишние отступы/выравнивания, которые могут ломать стек */
    .header-group .wp-block-buttons.is-layout-flex {
        justify-content: center !important;
    }
}

/* Исправляем социальные иконки в футере */

.wp-block-group.is-content-justification-left.is-nowrap.is-layout-flex {
	justify-content: flex-start;
	padding-left: 0;
	margin-left: 0;
}

@media screen and (max-width: 768px) {
	/* Секция Директор */
	.position-relative {
		gap: 0.2rem !important;
	}
	.position-relative img {
		padding: 0 12px !important;
	}
	.director-title {
		position: static !important;
		margin-top: 28px !important;
		width: 100%;
		gap: 0.4rem !important;
	}

	.director-title p {
		font-size: 14px !important;
		line-height: 1 !important;
	}

	.director-title .h2-name {
		line-height: 1.1 !important;
	}

	.wp-block-group.alignwide.heading-bottom-adj {
		height: auto !important;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}
@media (min-width: 481px) and (max-width: 1024px) {
	body {
		--wp--style--root--padding-left: 40px;
		--wp--style--root--padding-right: 40px;
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) /* 768 source! */ {
	.director-stack .h2-quote {
		padding-right: 24px;
	}
	.position-relative .director-photo {
		padding: 0 12px !important;
	}
	.history-open-column {
		padding: 0 40px !important;
	}
}

@media (min-width: 769px) and (max-width: 1440px) {

	/* Настройка для секции "Наши ценности" */
	
	/* 1. Заставляем основной контейнер разрешить перенос */
    .wp-block-columns.values-section-container {
        flex-wrap: wrap !important;
        display: flex !important;
    }

    /* 2. Обнуляем стандартные отступы и фиксированную ширину колонок */
    .wp-block-columns.values-section-container > .wp-block-column {
        /* Занимаем ровно 50% минус отступ между колонками */
        flex-basis: calc(50% - 15px) !important;
        /* Разрешаем блоку расти и сжиматься */
        flex-grow: 1 !important;
        /* Убираем внешние отступы, которые могут выталкивать блок */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Добавляем расстояние между колонками и рядами */
    .wp-block-columns.values-section-container {
        gap: 30px !important; /* Настройте это число для нужного зазора */
    }

	/* Настройка секции "Директор" */
	.position-relative {
		gap: 1.8rem;
	}
	.director-column {
		padding-right: 0 !important /* 12px ??? */;
	}
	.director-column .h2-quote {
		font-size: 1.6em !important;
		line-height: 1 !important;
	}
	.director-column .h2-name {
		font-size: clamp(1.2rem, 3vw, 3rem) !important;
		line-height: 1 !important;
	}
	.director-title {
		padding-left: var(--wp--preset--spacing--30) !important;
	}
	.director-title > p {
		font-size: 1em !important;
		line-height: 0.4 !important;
	}
}

/* Баннер */

@media screen and (max-width: 480px) {
	.main-block-padding,
	.swiper-main {
		border-radius: 0 !important;
	}
	.swiper-main,
	.slide-block {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.slide-row {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
	.wp-swiper-slide-block {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
	.slide-block .slide-row .slide-block-group,
	.slide-block .slide-row .banner-block-group {
		padding-left: 12px !important;
		padding-right: 12px !important;
		padding-top: 0 !important;
		margin-top: 0 !important;	
		width: 100%;
	}
	.banner-block-group {
		padding-left: 14px;
		padding-right: 14px;
	}
	.slide-block .slide-block-group .slide-block-h1 {
		line-height: 1 !important;
		font-size: 32px !important;		
	}
	.slide-block .slide-block-group > p {
		padding-left: 8px;
	}
	.slide-block-image,
	.banner-block-image {
		display: none !important;
	}
}

@media screen and (min-width: 481px) {
    .swiper-pagination {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .slide-block {
        background-image: none !important;
    }
	.director-group {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (min-width: 481px) and (max-width: 1465px) {
	.slide-block .slide-block-group .slide-block-h1 {
		line-height: 1.1 !important;
		font-size: 44px !important;
	}
}

@media (min-width: 1466px) and (max-width: 1680px) {
	.slide-block .slide-block-group .slide-block-h1 {
		line-height: 1.2 !important;
		font-size: 50px !important;
	}
}

@media screen and (max-width: 480px) {
	.cs-slide-box-prev,
	.cs-slide-box-next {
		display: none !important;
	}
}

@media (min-width: 481px) and (max-width: 1465px) {
	.slide-block .slide-block-button a {
		padding: 17px 24px !important;
		font-size: 14px !important;
	}
	.wp-block-group .slide-block-row {
		gap: 0 !important;
	}
	.wp-block-group .slide-block-row-arrows {
		gap: 24px !important;
	}
	.cs-slide-box-prev {
		width: 60px !important;
		height: 60px !important;
	}
	.cs-slide-box-next {
		width: 60px !important;
		height: 60px !important;
	}
}

@media screen and (min-width: 1229px) {
	.wp-block-navigation {
		column-gap: clamp(30px, 7.82vw - 50.17px, 100px) !important;
	}
}

@media screen and (min-width: 1025px) and (max-width: 1228px) {
	.wp-block-navigation {
		column-gap: 30px !important;
	}
}

@media screen and (min-width: 769px) and (max-width: 1920px) {
	.director-group {
		padding-left: clamp(60px, -33.31px + 12.15vw, 200px);
		padding-right: clamp(60px, -33.31px + 12.15vw, 200px);
	}
}

@media screen and (min-width: 1921px) {
    .director-group {
		padding-left: 200px;
		padding-right: 200px;
	}
}

/* Планшеты */
@media screen and (max-width: 1120px) {
    /* 1. Показываем кнопку открытия принудительно */
    header .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    /* 2. Скрываем основной десктопный список меню */
    header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.always-shown) {
        display: none !important;
    }

    /* 3. Убираем ограничение на открытие */
    /* Если JS добавил класс открытия, меню ДОЛЖНО стать видимым */
    header .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100000;
    }

    /* 4. Показываем кнопку закрытия ("крестик") */
    header .wp-block-navigation__responsive-container-close {
        display: flex !important;
    }
}

@media screen and (min-width: 481px) and (max-width: 1378px) /* and (pointer: coarse) and (orientation: landscape) */ {
	.history-titles-columns {
        display: flex !important;
        flex-direction: column !important;
		padding: 0 40px 12px !important;
    }

    /* Растягиваем обе колонки на всю ширину */
    .history-titles-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
    }
	
	.history-titles-column {
		align-items: center;
		justify-content: center;
		margin: auto;
	}

	.history-titles-column .wp-block-image {
		margin: 0 !important;
	}
	.history-titles-column .wp-block-image img {
		width: 100% !important;
	}
}

@media screen and (min-width: 481px) and (max-width: 1378px) {
    /* Обращаемся к контейнеру колонок */
    .history-details-columns {
        display: flex !important;
        flex-direction: column-reverse !important; /* Разворачиваем порядок: 2-я колонка станет первой */
    }

    /* Растягиваем обе колонки на всю ширину */
    .history-details-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

	.history-details-columns {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	.history-title {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	.details-heading {
		padding: 60px !important;
	}
	.details-heading h3 {
		padding-bottom: 0 !important;
	}
	
    /* Добавляем отступ между фото и текстом, когда они в стеке */
    .history-details-column:nth-child(2) {
        margin-bottom: 0; /* Отступ под фотографией */
    }
	
	.rotate-image {
		padding-bottom: 30px;
	}
	
	.order-1 {
		order: 2;
	}
	
	.order-2 {
		order: 1;
	}
	
	.history-details-stack {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	.img-contain-goethe img {
		max-width: 68% !important;
	}
}