/*
 * Единый вид записей блога: шапка с параллаксом, ширины содержимого
 * и фирменные стили блоков (сноска с волной, промо-полоса, галерея-слайдер).
 *
 * Подключается только к записям, собранным на блоках, — см. inc/blog-blocks.php.
 * Цвета и размеры взяты из прежнего оформления записей в css/blog.css,
 * чтобы старые и новые статьи выглядели одинаково.
 */

.blog-post {
	--blog-navy: #00235f;
	--blog-blue: #1ac1ff;
	--blog-text: #333;
	--blog-width: 1170px;
	--blog-gutter: 15px;
}

/* --- шапка ---------------------------------------------------------- */

.blog-post__title {
	max-width: var(--blog-width);
	margin: 40px auto 50px;
	padding: 0 var(--blog-gutter);
	font-family: "Google Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: var(--blog-text);
}

/*
 * Внутри шапки лежит слой с картинкой в полтора раза выше неё — его двигает
 * js/parallax.js, поэтому фон отстаёт от текста при прокрутке. Правила слоя
 * общие с рядами-параллаксами и живут в css/vc-compat.css; здесь только
 * размеры самой шапки.
 */
.blog-post__hero {
	position: relative;
	height: clamp(220px, 34vw, 510px);
	margin-bottom: 45px;
	overflow: hidden;
}

.blog-post__hero .clear-parallax__inner {
	--parallax-scale: 1.8;
	position: absolute;
	top: calc((1 - var(--parallax-scale)) * 50%);
	right: 0;
	left: 0;
	height: calc(var(--parallax-scale) * 100%);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

@supports (animation-timeline: view()) {
	.blog-post__hero {
		view-timeline-name: --clear-parallax;
		view-timeline-axis: block;
	}

	.blog-post__hero .clear-parallax__inner {
		animation: clear-parallax-move linear both;
		animation-timeline: --clear-parallax;
		animation-range: cover 0% cover 100%;
	}

	@keyframes clear-parallax-move {
		from {
			transform: translate3d(0, calc((var(--parallax-scale) - 1) / var(--parallax-scale) * -50%), 0);
		}

		to {
			transform: translate3d(0, calc((var(--parallax-scale) - 1) / var(--parallax-scale) * 50%), 0);
		}
	}
}

/* На узком экране слой слабее — иначе панорама обрезается почти вдвое. */
@media (max-width: 767px) {
	.blog-post__hero .clear-parallax__inner {
		--parallax-scale: 1.35;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blog-post__hero .clear-parallax__inner {
		animation: none;
		transform: none !important;
	}
}

.blog-post__meta {
	max-width: var(--blog-width);
	margin: -30px auto 40px;
	padding: 0 var(--blog-gutter);
	font-family: "Google Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	font-size: 9px;
	text-align: center;
	text-transform: uppercase;
	color: var(--blog-navy);
}

.blog-post__meta a {
	color: inherit;
}

/* --- ширины содержимого --------------------------------------------- */

/*
 * Контейнера вокруг содержимого нет: обычные блоки сами держат ширину,
 * а «на всю ширину» и «широкий» из панели блока честно выходят за неё.
 * Так не нужно ни vw-математики, ни борьбы с горизонтальной прокруткой.
 */
.blog-post__body > * {
	max-width: var(--blog-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--blog-gutter);
	padding-left: var(--blog-gutter);
}

.blog-post__body > .alignwide {
	max-width: 1400px;
}

.blog-post__body > .alignfull {
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

.blog-post__body > * + * {
	margin-top: 28px;
}

.blog-post__body p,
.blog-post__body li {
	font-size: 16px;
	line-height: 26px;
	color: var(--blog-text);
}

.blog-post__body h2,
.blog-post__body h3,
.blog-post__body h4 {
	font-family: "Google Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	color: var(--blog-text);
}

.blog-post__body h2 {
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.15;
	margin: 60px auto 40px;
}

.blog-post__body h3 {
	font-size: clamp(20px, 2.2vw, 32px);
	line-height: 1.2;
	margin: 40px auto 24px;
}

.blog-post__body h3 a,
.blog-post__body h2 a {
	color: var(--blog-blue);
	text-decoration: none;
}

.blog-post__body h3 a:hover,
.blog-post__body h2 a:hover {
	color: #89c603;
}

/* Заголовок по центру — обычное выравнивание блока «Заголовок». */
.blog-post__body h2.has-text-align-center,
.blog-post__body h3.has-text-align-center {
	margin-top: 60px;
	margin-bottom: 50px;
}

/* --- колонки --------------------------------------------------------- */

.blog-post__body .wp-block-columns {
	gap: 30px;
	align-items: flex-start;
}

@media (max-width: 781px) {
	.blog-post__body .wp-block-columns {
		gap: 24px;
	}
}

/* --- сноска с волной -------------------------------------------------- */

/*
 * Волна — вертикальный повторяющийся штрих слева (img/quote.png, 12×250).
 * Блок «Цитата» подходит по смыслу и уже умеет хранить абзацы внутри.
 */
.wp-block-quote.is-style-wave {
	margin: 0;
	padding: 0 35px 0 35px;
	border: 0;
	background: url(../img/quote.png) repeat-y left center;
	color: var(--blog-navy);
	font-style: normal;
	quotes: none;
}

.wp-block-quote.is-style-wave::before,
.wp-block-quote.is-style-wave::after {
	content: none;
}

.blog-post__body .wp-block-quote.is-style-wave p {
	font-family: "Google Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 300;
	font-style: italic;
	font-size: 16px;
	line-height: 24px;
	color: var(--blog-navy);
}

.wp-block-quote.is-style-wave strong,
.wp-block-quote.is-style-wave b {
	font-size: 25px;
	font-style: normal;
}

.wp-block-quote.is-style-wave cite {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	font-style: normal;
	opacity: .75;
}

/* --- промо-полоса ----------------------------------------------------- */

/*
 * Широкая полоса с фирменным узором. Ставится блоку «Группа»:
 * выравнивание «На всю ширину» + стиль «Промо-полоса».
 */
.wp-block-group.is-style-promo {
	padding: 40px var(--blog-gutter);
	background: var(--blog-navy) url(../img/promo_pattern.png) repeat 0 0;
	color: #fff;
	text-align: center;
}

.wp-block-group.is-style-promo > * {
	max-width: min(90%, 1050px);
	margin-right: auto;
	margin-left: auto;
}

.blog-post__body .wp-block-group.is-style-promo p,
.blog-post__body .wp-block-group.is-style-promo li {
	margin-bottom: 20px;
	font-family: "Google Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 300;
	font-style: italic;
	font-size: 18px;
	line-height: 30px;
	color: #fff;
}

.wp-block-group.is-style-promo strong,
.wp-block-group.is-style-promo b {
	font-size: 28px;
	font-style: normal;
	text-transform: uppercase;
}

.blog-post__body .wp-block-group.is-style-promo h2,
.blog-post__body .wp-block-group.is-style-promo h3 {
	max-width: min(90%, 1050px);
	margin: 0 auto 24px;
	color: #fff;
}

.blog-post__body .wp-block-group.is-style-promo a {
	color: #fff;
	text-decoration: underline;
}

/* Та же полоса, но поверх фотографии — блок «Обложка». */
.wp-block-cover.is-style-promo {
	min-height: 340px;
	padding: 60px var(--blog-gutter);
	text-align: center;
}

.blog-post__body .wp-block-cover.is-style-promo p,
.blog-post__body .wp-block-cover.is-style-promo h2,
.blog-post__body .wp-block-cover.is-style-promo h3 {
	max-width: min(90%, 1050px);
	margin-right: auto;
	margin-left: auto;
	color: #fff;
}

.blog-post__body .wp-block-cover.is-style-promo p {
	font-family: "Google Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 30px;
}

.blog-post__body .wp-block-cover.is-style-promo h2,
.blog-post__body .wp-block-cover.is-style-promo h3 {
	line-height: 1.3;
	margin-bottom: 24px;
}

/* --- призыв с кнопкой ------------------------------------------------- */

/* Крупный текст и кнопка в конце статьи. */
.wp-block-group.is-style-cta {
	margin-top: 60px;
	margin-bottom: 60px;
	text-align: center;
}

.blog-post__body .wp-block-group.is-style-cta p {
	margin: 0 0 8px;
	font-family: "Google Sans", "Segoe UI", Tahoma, sans-serif;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.4;
	color: var(--blog-navy);
}

.blog-post__body .wp-block-group.is-style-cta strong {
	font-weight: 700;
}

.blog-post__body .wp-block-group.is-style-cta .btn {
	margin-top: 28px;
	font-size: clamp(18px, 2vw, 25px);
	font-weight: 800;
	text-transform: uppercase;
}

/* Длинная надпись на кнопке переносится, а не выпихивает страницу вбок. */
.blog-post__body .btn {
	max-width: 100%;
	white-space: normal;
}

/* --- галерея ---------------------------------------------------------- */

.blog-post__body .clear-gallery {
	margin: 0;
}

/* Сетка — запасной вариант, если слайдер не нужен. */
.blog-post__body .wp-block-gallery.is-style-grid img {
	border-radius: 4px;
}

/* --- подвал записи ---------------------------------------------------- */

.blog-post__footer {
	max-width: var(--blog-width);
	margin: 60px auto;
	padding: 0 var(--blog-gutter);
}

.blog-post__tags {
	background: url(../img/wave_pattern.png) repeat-x bottom left;
	padding: 0 0 40px;
	margin-bottom: 35px;
}

.blog-post__tags-title {
	margin: 0 0 16px;
	font-family: "Google Sans", "Segoe UI", Tahoma, sans-serif;
	font-weight: 600;
	color: #000;
}