/* =========================================================
   AKUSTA — Hero, вариант «блочный паттерн» (.ak-heroblk)
   Паттерн: «Hero-блок (AKUSTA)» в категории AKUSTA.
   Подключается глобально + в редакторе из patterns/register.php.

   Отличие от hero/hero.css: тот стилизует разметку шорткода
   [akusta_hero], а этот — DOM блоков Kadence:

     .kb-row-layout-wrap.ak-heroblk          ← wp:kadence/rowlayout
       └ .kt-row-column-wrap                 ← сетка (Kadence: display:grid)
           ├ .ak-heroblk__content            ← wp:kadence/column
           │   └ .kt-inside-inner-col        ← сюда кладётся контент
           └ .ak-heroblk__visual             ← wp:kadence/column
               └ .kt-inside-inner-col        ← плашка

   Вся графика — CSS: волна у бренда и обе панели визуала рисуются
   псевдоэлементами, поэтому в паттерне нет ни одного HTML-блока
   и весь текст редактируется в Гутенберге.

   !important здесь — как в patterns/pages.css: Kadence генерирует
   свой CSS по uniqueID блока, его нужно перебивать.
   ========================================================= */

.ak-heroblk {
	/* ── цвет (та же палитра, что в hero/hero.css) ── */
	--ak-ink: #1a202c;
	--ak-muted: #5f5e66;
	--ak-subtle: #8a8890;
	--ak-line: #e2e0da;
	--ak-border: #d5d3cd;
	--ak-bg: #ffffff;
	--ak-bg-visual: #e7e5df;
	--ak-accent: var(--global-palette-highlight-alt, #7b0193);
	--ak-panel-rail: #c9c2b4;
	--ak-panel-perf: #f2f0ea;

	/* ── геометрия ── */
	--ak-perf-step: 18px;
	--ak-visual-w: 620px;
	--ak-min-h: 640px;
	--ak-content-width: 1200px;
	/* Текст выравнивается по контенту контейнера сайта.
	   .site-container = max-width 1200px + padding 0 var(--global-content-edge-padding),
	   поэтому к половине «полей» нужно прибавить это внутреннее поле —
	   иначе текст встаёт по краю КОНТЕЙНЕРА, а не по краю его контента,
	   и уезжает влево ровно на edge-padding (24px, на мобильных 16px).
	   Kadence сам меняет --global-content-edge-padding на <=767px,
	   так что формула подстраивается и там. */
	--ak-pad-l: max(
		var(--global-content-edge-padding, 1.5rem),
		calc((var(--global-vw, 100vw) - var(--ak-content-width)) / 2 + var(--global-content-edge-padding, 1.5rem))
	);
	--ak-pad-r: 72px;

	/* ── шрифты сайта ── */
	--ak-font-head: 'Good Timing W00 SemiBold', 'GoodTiming', var(--global-body-font-family, system-ui), sans-serif;
	--ak-font-body: var(--global-body-font-family, system-ui), sans-serif;

	/* Full-bleed — та же формула, что у .alignfull в теме Kadence
	   (assets/css/content.min.css), чтобы блок вёл себя как штатный
	   полноширинный блок сайта. --scrollbar-offset тема выставляет
	   только при открытом попапе, в обычном режиме тут 100vw. */
	width: var(--global-vw, 100vw);
	max-width: 100vw;
	margin-left: calc(50% - var(--global-vw, 100vw) / 2);
	margin-right: calc(50% - var(--global-vw, 100vw) / 2);
	background: var(--ak-bg);
	color: var(--ak-ink);
	font-family: var(--ak-font-body);
}

/* ---------- сетка ряда ---------- */
.ak-heroblk > .kt-row-column-wrap {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--ak-visual-w)) !important;
	gap: 0 !important;
	align-items: stretch !important;
	min-height: var(--ak-min-h);
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ak-heroblk .wp-block-kadence-column { min-width: 0; }

/* ---------- левая колонка ---------- */
.ak-heroblk__content > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	height: 100%;
	padding: 88px var(--ak-pad-r) 88px var(--ak-pad-l);
}

.ak-heroblk .ak-accent { color: var(--ak-accent); }

/* ---------- бренд-строка + волна ----------
   Волна — 6 полосок, нарисованных фоновыми градиентами
   на ::before, чтобы обойтись без HTML-блока. */
/* Не flex: иначе <span class="ak-accent">™</span> станет флекс-элементом
   и получит gap с обеих сторон, отрывая ™ от «AKUSTA». */
.ak-heroblk .ak-heroblk__brand {
	display: block;
	margin: 0 !important;
	font-family: var(--ak-font-head);
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: .16em;
	line-height: 1.2;
	color: var(--ak-ink);
}

.ak-heroblk .ak-heroblk__brand::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 31px;
	height: 24px;
	margin-right: 14px;
	position: relative;
	top: -1px;
	background-image:
		linear-gradient(var(--ak-accent), var(--ak-accent)),
		linear-gradient(var(--ak-accent), var(--ak-accent)),
		linear-gradient(var(--ak-accent), var(--ak-accent)),
		linear-gradient(var(--ak-accent), var(--ak-accent)),
		linear-gradient(var(--ak-accent), var(--ak-accent)),
		linear-gradient(var(--ak-accent), var(--ak-accent));
	background-repeat: no-repeat;
	background-size: 3px 8px, 3px 16px, 3px 24px, 3px 14px, 3px 20px, 3px 9px;
	background-position:
		0 center, 5.5px center, 11px center,
		16.5px center, 22px center, 27.5px center;
}

/* ---------- заголовок ----------
   Тема задаёт h1 { font-size: 25px; line-height: 25px } —
   перебиваем размер, интерлиньяж, шрифт и цвет. */
.ak-heroblk .ak-heroblk__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--ak-font-head) !important;
	font-size: clamp(34px, 3.75vw, 54px) !important;
	line-height: 1.12 !important;
	font-weight: 600 !important;
	color: var(--ak-ink) !important;
	text-transform: none;
	text-wrap: balance;
}

.ak-heroblk .ak-heroblk__lead {
	margin: 0 !important;
	max-width: 520px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ak-muted) !important;
}

/* ---------- кнопки (core/buttons) ---------- */
.ak-heroblk .ak-heroblk__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 !important;
}

.ak-heroblk .ak-heroblk__actions .wp-block-button { margin: 0; }

.ak-heroblk .ak-heroblk__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	padding: 17px 32px !important;
	font-family: var(--ak-font-head);
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: .04em;
	line-height: 1.2 !important;
	text-decoration: none;
	border-radius: 3px !important;
	box-shadow: none !important;
	background: var(--ak-ink) !important;
	border: 1px solid var(--ak-ink) !important;
	color: #fff !important;
	transition: background .2s, border-color .2s, color .2s;
}

.ak-heroblk .ak-heroblk__actions .wp-block-button__link:hover,
.ak-heroblk .ak-heroblk__actions .wp-block-button__link:focus-visible {
	background: var(--ak-accent) !important;
	border-color: var(--ak-accent) !important;
	color: #fff !important;
}

/* Вторая кнопка — стиль «контур» (is-style-outline) */
.ak-heroblk .ak-heroblk__actions .is-style-outline .wp-block-button__link,
.ak-heroblk .ak-heroblk__actions .wp-block-button__link.is-style-outline {
	padding: 16px 28px !important;
	background: #fff !important;
	border: 1px solid var(--ak-border) !important;
	color: var(--ak-ink) !important;
}

.ak-heroblk .ak-heroblk__actions .is-style-outline .wp-block-button__link:hover,
.ak-heroblk .ak-heroblk__actions .wp-block-button__link.is-style-outline:hover {
	border-color: var(--ak-ink) !important;
	background: #fff !important;
	color: var(--ak-ink) !important;
}

/* ---------- цифры (core/list) ---------- */
.ak-heroblk .ak-heroblk__stats {
	display: flex;
	margin: 16px 0 0 !important;
	padding: 26px 0 0 !important;
	list-style: none !important;
	border-top: 1px solid var(--ak-line);
}

.ak-heroblk .ak-heroblk__stats li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 !important;
	padding: 0 40px;
	border-left: 1px solid var(--ak-line);
	list-style: none !important;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ak-subtle);
}

.ak-heroblk .ak-heroblk__stats li::marker { content: none; }
.ak-heroblk .ak-heroblk__stats li:first-child { padding-left: 0; border-left: 0; }
.ak-heroblk .ak-heroblk__stats li:last-child { padding-right: 0; }

.ak-heroblk .ak-heroblk__stats strong {
	font-family: var(--ak-font-head);
	font-size: 28px;
	font-weight: 600;
	color: var(--ak-ink);
}

/* ---------- правая колонка: визуал ----------
   Фон — перфорация, ::before — рейка, ::after — панель. */
.ak-heroblk__visual {
	position: relative;
	overflow: hidden;
	background-color: var(--ak-bg-visual);
	background-image: radial-gradient(circle, rgba(23, 22, 26, .34) 1.7px, transparent 2px);
	background-size: var(--ak-perf-step) var(--ak-perf-step);
}

/* Рейка */
.ak-heroblk__visual::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 10.3%;
	top: 72px;
	bottom: 72px;
	width: 35.5%;
	border-radius: 4px;
	background-color: var(--ak-panel-rail);
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 3px, transparent 3px 26px),
		repeating-linear-gradient(90deg, rgba(23, 22, 26, .16) 0 1px, transparent 1px 26px);
	box-shadow: 0 24px 60px rgba(23, 22, 26, .22);
}

/* Перфорированная панель */
.ak-heroblk__visual::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 38%;
	top: 130px;
	bottom: 130px;
	width: 42%;
	border-radius: 4px;
	background-color: var(--ak-panel-perf);
	background-image: radial-gradient(circle, rgba(23, 22, 26, .4) 2px, transparent 2.4px);
	background-size: 22px 22px;
	background-position: 11px 11px;
	box-shadow: 0 24px 60px rgba(23, 22, 26, .24);
}

/* Внутренняя обёртка колонки не должна перекрывать панели */
.ak-heroblk__visual > .kt-inside-inner-col {
	position: static;
	height: 100%;
	padding: 0 !important;
	background: none !important;
}

/* Плашка — поверх панелей */
.ak-heroblk .ak-heroblk__tag {
	position: absolute;
	z-index: 3;
	left: 38%;
	bottom: 78px;
	margin: 0 !important;
	padding: 12px 18px;
	border-radius: 3px;
	background: var(--ak-accent);
	color: #fff !important;
	font-family: var(--ak-font-head);
	font-size: 12.5px !important;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.2;
	box-shadow: 0 12px 32px rgba(123, 1, 147, .4);
}

/* =========================================================
   Адаптив — те же брейкпоинты, что у шорткода
   ========================================================= */

@media (max-width: 1200px) {
	.ak-heroblk {
		--ak-visual-w: 460px;
		--ak-pad-r: 48px;
	}
}

@media (max-width: 900px) {
	.ak-heroblk {
		--ak-pad-r: var(--global-content-edge-padding, 1.5rem);
	}

	.ak-heroblk > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr) !important;
		min-height: 0;
	}

	.ak-heroblk__content > .kt-inside-inner-col {
		padding: 56px var(--ak-pad-r) 40px var(--ak-pad-l);
		gap: 22px;
	}

	.ak-heroblk .ak-heroblk__lead { font-size: 17px; }

	.ak-heroblk__visual {
		height: 340px;
		order: 2;
	}

	.ak-heroblk__visual::before { top: 40px; bottom: 40px; }
	.ak-heroblk__visual::after { top: 80px; bottom: 80px; }
	.ak-heroblk .ak-heroblk__tag { bottom: 40px; }
}

@media (max-width: 560px) {
	.ak-heroblk .ak-heroblk__actions { flex-direction: column; align-items: stretch; }
	.ak-heroblk .ak-heroblk__actions .wp-block-button { width: 100%; }
	.ak-heroblk .ak-heroblk__actions .wp-block-button__link { width: 100%; }

	.ak-heroblk .ak-heroblk__stats { flex-direction: column; gap: 16px; }
	.ak-heroblk .ak-heroblk__stats li { padding: 0; border-left: 0; }
	.ak-heroblk .ak-heroblk__stats strong { font-size: 24px; }

	.ak-heroblk__visual { height: 260px; }

	.ak-heroblk .ak-heroblk__tag { font-size: 11px !important; padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ak-heroblk .ak-heroblk__actions .wp-block-button__link { transition: none; }
}

/* =========================================================
   Редактор: в Гутенберге ряд не вырывается на 100vw,
   иначе паттерн уезжает за пределы холста.
   ========================================================= */
.block-editor-block-list__layout .ak-heroblk,
.editor-styles-wrapper .ak-heroblk {
	width: auto;
	margin-left: 0;
	margin-right: 0;
	--ak-pad-l: 48px;
}

/* =========================================================
   Горизонтальный скроллбар ~8-15px (необязательно)
   ---------------------------------------------------------
   Любой полноширинный блок Kadence (.alignfull) и существующий
   .promo-slider используют width:100vw. 100vw включает ширину
   скроллбара, поэтому страница шире вьюпорта на его ширину и
   внизу появляется горизонтальная полоса прокрутки.
   Это поведение всего сайта, а не только этого блока.

   Если полоса мешает — раскомментируйте правило ниже.
   Проверено: overflow-x на html и body НЕ помогает (браузер
   пробрасывает overflow корня), нужен именно контейнер, из
   которого блок вырывается. Именно clip, а не hidden: clip не
   создаёт контекст прокрутки и не ломает position:sticky
   у шапки Kadence.
   После включения проверьте бегущую строку партнёров (.part)
   и другие блоки, которым overflow нужен намеренно.

.content-container { overflow-x: clip; }
   ========================================================= */