/* =============================================================================
   Текстовая секция: acf/text-image (основной несущий блок, ~118 вхождений).
   Варианты: .vertical-direction (текст на всю ширину), .reverse-block,
   .reversed-blocks (картинка первой), .text-image-heading (заголовок сверху).
   ========================================================================== */

/* Двухколоночный вариант тема считает через width:calc(50% - 2rem) + margin:1rem.
   Любой gap на контейнере ломает эту арифметику: колонки перестают помещаться
   в строку и переносятся. Поэтому gap только для вертикального варианта. */
.text-image { gap: 0; }

.text-image.vertical-direction { gap: clamp(.5rem, 1.5vw, 1rem); }

/* колонки выравниваем по верху: при высокой картинке тема центрировала текст
   и он повисал в середине блока */
.text-image:not(.vertical-direction) { align-items: flex-start; }

.text-image__heading { margin-bottom: .25rem; }

.text-image__heading .title { margin: 0; }

/* Комфортная длина строки, только когда текст на всю ширину секции */
.text-image.vertical-direction .text-image__content > p,
.text-image.vertical-direction .text-image__content > ul,
.text-image.vertical-direction .text-image__content > ol {
	max-width: 90ch;
}

.text-image__content > * { margin-bottom: 1rem; }
.text-image__content > *:last-child { margin-bottom: 0; }

.text-image__content h3,
.text-image__content h4 {
	margin: 1.75rem 0 .65rem;
}

.text-image__content h3:first-child,
.text-image__content h4:first-child { margin-top: 0; }

/* Картинка в двухколоночном варианте */
.text-image:not(.vertical-direction) .get-image img,
.text-image__media img {
	border-radius: var(--ms-radius);
	border: 1px solid var(--ms-border);
	box-shadow: var(--ms-shadow);
}

.text-image .get-image img { margin-top: 0; }

/* Видео */
.text-image .video video,
.text-image .video .get-image img {
	border-radius: var(--ms-radius);
}

/* Тема добавляет .text-image-heading{padding-top:5.5rem} с абсолютным заголовком -
   внутри карточки-секции это лишний воздух. */
.text-image-heading { padding-top: 0; }

/* Флекс-контейнер темы центрирует элементы (align-items:center), поэтому
   заголовку нужна явная ширина - иначе он схлопывается по тексту и уезжает
   в центр вместе с акцентной чертой. */
.text-image-heading .text-image__heading {
	position: static;
	text-align: left;
	width: 100%;
	align-self: stretch;
}