/*
 * acf/media-text - основная пара блоков страницы (112 экземпляров).
 * Двухколоночная раскладка темы держится на width:calc(50% - 2rem) + gap,
 * поэтому ширины колонок не трогаем - только оформление внутри.
 */

main .media-text {
	margin-top: 0;
}

/* --------------------------------------------------- одноколоночная раскладка <=850px

   Тема до 850px переводит блок в grid с одной колонкой через grid-template-areas,
   но саму колонку не объявляет - трек получается auto и растягивается до min-content
   самого широкого потомка. Бонус-плашка (white-space:nowrap + кнопка, 434px) распирала
   его на всех страницах: заголовок, абзацы и таблицы выезжали за экран и обрезались
   по overflow:hidden секции. Фиксируем колонку и разрешаем детям сжиматься. */
@media (max-width: 850px) {
	main .media-text__block {
		grid-template-columns: minmax(0, 1fr);
	}
}

main .media-text__block > * {
	min-width: 0;
}

main .media-text__media img {
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
	display: block;
	width: 100%;
}

main .media-text__content > * + * {
	margin-top: 12px;
}

main .media-text__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

/* Бонус-плашка рядом с кнопкой: тёмная поверхность, акцентный номинал. */
main .media-text__buttons .bonus-button {
	background: var(--gs-surface);
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
}

main .media-text__buttons .bonus-button__value-text {
	color: var(--gs-accent);
	font-weight: 700;
}

main .media-text__buttons .bonus-button__value-icon {
	color: var(--gs-muted);
}

/* Плашка "промокод + кнопка" в одну строку на 360px не помещается: у значения
   white-space:nowrap, поэтому две половины по 50% дают min-content ~434px.
   Ниже 600px разворачиваем её в две строки на всю ширину. */
@media (max-width: 600px) {
	/* align-items:stretch задавал .bonus-button определённую высоту, от неё считался
	   height:100% значения - и высота второй строки в контейнер уже не попадала:
	   кнопку срезал его overflow:hidden. */
	main .media-text__buttons {
		align-items: flex-start;
		width: 100%;
	}

	main .media-text__buttons .bonus-button {
		flex-wrap: wrap;
	}

	main .media-text__buttons .bonus-button__value {
		box-sizing: border-box;
		height: auto;
		padding: 12px 14px;
		white-space: normal;
		width: 100%;
	}

	main .media-text__buttons .bonus-button .site-button {
		border-radius: 0;
		box-sizing: border-box;
		width: 100%;
	}
}