.bootstrap-simple-review-text {
	max-height: 21rem;
	overflow: auto;
	padding-right: 0.5rem;
}

.simple-review-image {
	width: 100%;
	max-width: 300px;
}


/* --- Должность автора — бейдж ---
   Имя и должность приходят одним куском разметки из поля
   bootstrap-simple-review-info (textarea без форматирования): <h3> с именем,
   следом <p> с должностью. Классы в контент не добавляем — тогда пришлось бы
   править каждую запись и помнить про это в новых. Цепляемся за структуру:
   «первый абзац сразу после имени» — правило само подхватит и старые отзывы,
   и будущие.

   :first-child + p, а не h3 + p — имя может быть оформлено любым заголовком
   (h3/h4) или просто абзацем; бейджем становится ровно следующий за ним
   элемент, третий и далее абзацы остаются обычным текстом.

   .simple-review-post — то же самое для отдельного поля -info-post,
   когда должность заполняют не разметкой, а строкой. */
.simple-review-author > :first-child + p,
.simple-review-post {
	display: inline-block;
	/* Потолок ширины — чтобы совсем длинная должность переносилась внутри
	   бейджа и он оставался плашкой, а не растянулся полосой во всю колонку.
	   На реальном контенте (самое длинное — «Директор АНО «Ресурс»», 196px)
	   не срабатывает. Первая строка — фолбэк для браузеров без min(). */
	max-width: 100%;
	max-width: min(100%, 26rem);
	margin-top: 0.5rem;
	margin-bottom: 0;
	padding: 0.375rem 0.9375rem;

	/* Цвет — только из контекстной палитры: на кейсе это его собственная пара,
	   на остальных страницах — фирменная. Пара accent / on-accent взята
	   намеренно: --ctx-on-accent считает header.php от самой заливки по яркости
	   (WCAG), поэтому читаемость держится при любом авторском цвете кейса,
	   а не подбирается на глаз. Фолбэки — для превью блока в редакторе,
	   где --ctx-* может не быть. */
	background-color: var(--ctx-accent, #172747);
	color: var(--ctx-on-accent, #ffffff);

	/* Радиус «сам себя подгоняет»: в одну строку высота меньше суммы радиусов,
	   браузер их ужимает — получается пилюля; если должность длинная и уедет
	   в две строки, останется скруглённый прямоугольник, а не растянутый овал. */
	border-radius: 1.25rem;

	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.02em;

	/* Длинную должность переносим внутри бейджа, а не вылезаем за колонку.
	   text-align в контенте приходит инлайн-стилем (center) — не перебиваем. */
	overflow-wrap: break-word;

	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Тёмная тема на не-кейсовых страницах: правило темы
   `.dark-theme … { color: … }` бьёт по потомкам и перекрасило бы подпись
   на заливке. Возвращаем цвет, посчитанный от самой заливки. */
body.dark-theme .simple-review-author > :first-child + p,
body.dark-theme .simple-review-post {
	color: var(--ctx-on-accent, #ffffff);
}

/* Переход нужен только чтобы бейдж не «моргал» при переключении темы;
   без анимации он ничего не теряет. */
@media (prefers-reduced-motion: reduce) {
	.simple-review-author > :first-child + p,
	.simple-review-post {
		transition: none;
	}
}

/* На узком экране колонка и так по центру, бейджу важно лишь не упереться
   в края: чуть меньше горизонтального паддинга и запас по ширине. */
@media (max-width: 575.98px) {
	.simple-review-author > :first-child + p,
	.simple-review-post {
		max-width: calc(100% - 1rem);
		padding-inline: 0.75rem;
	}
}