/*
 * Industries — Figma 748:43541 (паттерн baserd/industries): разделитель (divider.css), слева надзаголовок и h2,
 * под ними вкладки, ниже ряд в рамке на всю ширину окна: текст отрасли и квадрат 568 со схемой на поле точек.
 * Вкладки — блоки ядра «Tabs» (core/tabs): кнопки с role="tab" и aria-selected, стрелки клавиатуры переводят
 * фокус; активную вкладку сервер знает сам (inc/tabs.php). Уже 1440 текст и квадрат сжимаются поровну, квадрат —
 * не уже схемы; телефон и планшет — front#808.
 *
 * Селекторы раскладки весят (0,2,0), как в hero.css: иначе в редакторе их перебивают правила
 * самого редактора, ядра и отступы потока.
 */

.baserd-industries.has-grid-lines {
	padding-bottom: var(--wp--preset--spacing--72);
}

/* 748:43550: поля 72 сверху и 48 по бокам, надзаголовок и h2 через 8; блок заходит на нижнюю половину разделителя. */
.baserd-industries .baserd-industries__heading {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	margin-top: -29px;
	padding: var(--wp--preset--spacing--72) var(--wp--preset--spacing--48) 0;
}

.baserd-industries .baserd-industries__heading > * {
	margin: 0;
}

.baserd-industries .baserd-industries__tabs {
	margin-top: var(--wp--preset--spacing--16);
}

/*
 * 748:43558: ряд вкладок 48 в высоту в рамке 1px line, вкладки разделены той же линией, поля 24 и 14, текст 14/20
 * белым. Обводка в макете идёт по краю (центр линии на границе), поэтому у каждой вкладки своя рамка, соседние
 * делят одну линию: следующая заходит на рамку предыдущей на 1, а поле сбоку на полпикселя меньше 24. Высота 48 —
 * палец попадает и без отдельного правила. Активная (748:43559) — рамка и текст primary, заливка primary 8%; её
 * рамка поверх соседней. В макете заливка — квадрат 48 у левого края вкладки шириной 99: здесь она во всю вкладку.
 * Наведённая (888:3962, front#1048) — заливка цвета выделения (surface #231735), текст белым; фокус с клавиатуры
 * показывает то же и кольцо. У активной своя заливка, её наведение не меняет.
 */
.baserd-industries .wp-block-tab-list {
	gap: 0;
	padding: 0 var(--wp--preset--spacing--48);
}

.baserd-industries .wp-block-tab-list button {
	position: relative;
	padding: 13px 23.5px;
	border: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--size-14);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--contrast);
}

.baserd-industries .wp-block-tab-list button + button {
	margin-left: -1px;
}

/* Подчёркивание активной вкладки, которое рисует ядро, заменено рамкой макета. */
.baserd-industries .wp-block-tab-list button::before {
	content: none;
}

.baserd-industries .wp-block-tab-list button[aria-selected="true"] {
	z-index: 1;
	border-color: var(--wp--preset--color--primary);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
	color: var(--wp--preset--color--primary);
}

@media (hover: hover) {
	.baserd-industries .wp-block-tab-list button:not([aria-selected="true"]):hover {
		background-color: var(--wp--custom--highlight);
	}
}

.baserd-industries .wp-block-tab-list button:not([aria-selected="true"]):focus-visible {
	background-color: var(--wp--custom--highlight);
}

.baserd-industries .wp-block-tab-list button:focus-visible {
	z-index: 2;
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/*
 * 748:43572: через 48 от вкладок ряд 568 в рамке 1px line на всю ширину окна. В нём текст (748:43573) с полями 48
 * по центру по высоте и через 48 квадрат 568 (748:43576) у правой линии сетки. Текст — отрасль 40/48 500 белым и
 * через 16 абзац 20/28 muted. Рамка ряда — линии сверху и снизу: боковые в макете на краях окна (x 0 и 1440),
 * от них видна половина пикселя. Линии выведены за колонку картинкой рамки (border-image с outset): она рисуется
 * за краем блока, но в прокрутку не входит, и страница не едет вбок.
 */
.baserd-industries .baserd-industries__panels {
	margin-top: var(--wp--preset--spacing--48);
	border-block: 1px solid var(--wp--preset--color--line);
	border-image: linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line)) 1 / 1px 0 / 0 100vw;
}

.baserd-industries .baserd-industries__panel {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--48);
}

.baserd-industries .baserd-industries__panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/*
 * Поля 48 со всех сторон, а не только по бокам: на 1440 текст ниже квадрата и стоит по центру, но уже ~1100 он
 * выше квадрата, ряд растёт по тексту, и без полей сверху и снизу отрасль и последняя строка абзаца ложатся
 * на линии ряда (на 1024 зазор 0, замер Baser в #863).
 */
.baserd-industries .baserd-industries__text {
	display: flex;
	box-sizing: border-box;
	flex: 0 1 664px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	min-width: 0;
	padding: var(--wp--preset--spacing--48);
}

.baserd-industries .baserd-industries__text > * {
	margin: 0;
}

.baserd-industries .baserd-industries__text h3 {
	font-size: var(--wp--preset--font-size--size-40);
	line-height: var(--wp--custom--line-height--size-40);
	color: var(--wp--preset--color--contrast);
}

.baserd-industries .baserd-industries__text p {
	font-size: var(--wp--preset--font-size--size-20);
	line-height: var(--wp--custom--line-height--size-20);
	color: var(--wp--preset--color--muted);
}

/*
 * Квадрат без заливки, в рамке 1px line; верх и низ рамки ложатся на рамку ряда (поля -1). Квадрат не уже схемы
 * (370 × 383 и поля по 20): дальше сжимается только текст. Когда текст выше квадрата (узкий десктоп), квадрат
 * тянется по высоте ряда, чтобы рамки не разошлись.
 */
.baserd-industries .baserd-industries__scheme {
	position: relative;
	isolation: isolate;
	display: flex;
	box-sizing: border-box;
	flex: 0 1 568px;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	min-width: 410px;
	aspect-ratio: 1;
	margin: -1px 0;
	border: 1px solid var(--wp--preset--color--line);
}

/*
 * 748:43577: поле точек в 10 от рамки квадрата (545 × 548, обрезано по краю): точки 6 px с шагом 18, белый 6%
 * (белый 20% при прозрачности слоя 30%). Поле в макете из двух групп, и на стыке шаг 14, а не 18: левая (748:43578)
 * — 14 столбцов с x 802, правая (748:44027) — с x 1050. Поэтому рисунок — маска scheme-dots.svg по геометрии узлов,
 * а не повтор одной точки. Точки — ::before (::after блока в редакторе занят рамкой выделения). В сжатом квадрате
 * ширина и высота слоя — целое число столбцов правой группы и строк, обрезанной точки нет (браузер без round() —
 * Chrome до 125 — берёт всё поле).
 */
.baserd-industries .baserd-industries__scheme::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 9px;
	z-index: -1;
	width: calc(100% - 21px);
	width: calc(round(down, 100% - 275px, 18px) + 254px);
	height: calc(100% - 18px);
	height: calc(round(down, 100% - 24px, 18px) + 6px);
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	-webkit-mask: url("../icons/scheme-dots.svg") 0 0 / 545px 548px no-repeat;
	mask: url("../icons/scheme-dots.svg") 0 0 / 545px 548px no-repeat;
	pointer-events: none;
}

/*
 * 748:44604: схема 370 шириной. Сверху подпись Users (Inter 16/19 600), под ней блоки 150 с заливкой surface
 * в рамке 2px line внутрь, поля 8 и 12, текст Inter 14/17 500 по центру: Gateway, два App/API Server через 70,
 * Database, Backup. Отступы между ними — из макета: 33, 75, 58, 33. Высота строки 17 и 19, как у текстовых слоёв
 * макета. Заливка блоков закрывает точки поля.
 */
.baserd-industries .baserd-industries__flow {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 370px;
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--contrast);
}

.baserd-industries .baserd-industries__users {
	margin: 0;
	font-size: var(--wp--preset--font-size--size-16);
	font-weight: 600;
	line-height: 19px;
}

.baserd-industries .baserd-industries__node {
	position: relative;
	box-sizing: border-box;
	width: 150px;
	margin: 0;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
	border: 2px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--size-14);
	font-weight: 500;
	line-height: 17px;
	text-align: center;
}

.baserd-industries .baserd-industries__gateway {
	margin-top: 33px;
}

.baserd-industries .baserd-industries__servers {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-self: stretch;
	margin: 75px 0 0;
}

.baserd-industries .baserd-industries__database {
	margin-top: 58px;
}

.baserd-industries .baserd-industries__backup {
	margin-top: 33px;
}

/*
 * Линии схемы 1.2 px primary со стрелкой (равносторонний треугольник 6.93 × 6, scheme-arrow.svg) — ::before блока,
 * к которому линия ведёт; линия кончается в 2 px от него. Рисунок — слои маски поверх заливки primary: отрезки —
 * сплошные градиенты, стрелки — картинка. Координаты — от узлов макета 748:44606–748:44623. У блока в рамке они
 * считаются от края поля, внутри рамки 2: поэтому на 2 больше, чем зазор в макете.
 */
.baserd-industries :is(.baserd-industries__gateway, .baserd-industries__servers, .baserd-industries__database, .baserd-industries__backup)::before {
	content: "";
	position: absolute;
	background-color: var(--wp--preset--color--primary);
	pointer-events: none;
}

/* Users → Gateway и Database → Backup: отрезок вниз со стрелкой, 28 и 30. */
.baserd-industries :is(.baserd-industries__gateway, .baserd-industries__backup)::before {
	top: -32px;
	left: calc(50% - 3.465px);
	width: 6.93px;
	height: 28px;
	-webkit-mask:
		linear-gradient(#000 0 0) 50% 0 / 1.2px 100% no-repeat,
		url("../icons/scheme-arrow.svg") 50% 100% / 6.93px 6px no-repeat;
	mask:
		linear-gradient(#000 0 0) 50% 0 / 1.2px 100% no-repeat,
		url("../icons/scheme-arrow.svg") 50% 100% / 6.93px 6px no-repeat;
}

.baserd-industries .baserd-industries__backup::before {
	top: -34px;
	height: 30px;
}

/* Gateway → два сервера: вниз 42, поперёк 220 между центрами серверов, в каждый вниз 30 со стрелкой. */
.baserd-industries .baserd-industries__servers::before {
	top: -74px;
	left: calc(75px - 3.465px);
	width: calc(220px + 6.93px);
	height: 72px;
	-webkit-mask:
		linear-gradient(#000 0 0) 50% 0 / 1.2px 42.6px no-repeat,
		linear-gradient(#000 0 0) 50% 41.4px / 220px 1.2px no-repeat,
		linear-gradient(#000 0 0) 2.865px 41.4px / 1.2px 30.6px no-repeat,
		linear-gradient(#000 0 0) right 2.865px top 41.4px / 1.2px 30.6px no-repeat,
		url("../icons/scheme-arrow.svg") 0 100% / 6.93px 6px no-repeat,
		url("../icons/scheme-arrow.svg") 100% 100% / 6.93px 6px no-repeat;
	mask:
		linear-gradient(#000 0 0) 50% 0 / 1.2px 42.6px no-repeat,
		linear-gradient(#000 0 0) 50% 41.4px / 220px 1.2px no-repeat,
		linear-gradient(#000 0 0) 2.865px 41.4px / 1.2px 30.6px no-repeat,
		linear-gradient(#000 0 0) right 2.865px top 41.4px / 1.2px 30.6px no-repeat,
		url("../icons/scheme-arrow.svg") 0 100% / 6.93px 6px no-repeat,
		url("../icons/scheme-arrow.svg") 100% 100% / 6.93px 6px no-repeat;
}

/* Два сервера → Database: из каждого вниз 25, поперёк 220, вниз 30 со стрелкой; левая ветка в 110 от центра блока. */
.baserd-industries .baserd-industries__database::before {
	top: -59px;
	left: calc(50% - 110px - 3.465px);
	width: calc(220px + 6.93px);
	height: 55px;
	-webkit-mask:
		linear-gradient(#000 0 0) 2.865px 0 / 1.2px 25.6px no-repeat,
		linear-gradient(#000 0 0) right 2.865px top 0 / 1.2px 25.6px no-repeat,
		linear-gradient(#000 0 0) 50% 24.4px / 220px 1.2px no-repeat,
		linear-gradient(#000 0 0) 50% 25px / 1.2px 30px no-repeat,
		url("../icons/scheme-arrow.svg") 50% 100% / 6.93px 6px no-repeat;
	mask:
		linear-gradient(#000 0 0) 2.865px 0 / 1.2px 25.6px no-repeat,
		linear-gradient(#000 0 0) right 2.865px top 0 / 1.2px 25.6px no-repeat,
		linear-gradient(#000 0 0) 50% 24.4px / 220px 1.2px no-repeat,
		linear-gradient(#000 0 0) 50% 25px / 1.2px 30px no-repeat,
		url("../icons/scheme-arrow.svg") 50% 100% / 6.93px 6px no-repeat;
}

/*
 * Без JavaScript вкладки не переключаются: список вкладок убран, панели идут одна под другой — у каждой свой
 * заголовок отрасли. Скрытые панели ядро прячет правилом [hidden] с !important весом (0,2,0).
 */
@media (scripting: none) {
	.baserd-industries .baserd-industries__tabs .wp-block-tab-list {
		display: none;
	}

	.baserd-industries .baserd-industries__tabs .baserd-industries__panel[hidden] {
		display: flex !important;
	}

	.baserd-industries .baserd-industries__panel + .baserd-industries__panel {
		margin-top: var(--wp--preset--spacing--48);
	}
}

/*
 * Режим высокой контрастности. Рамку и заливку вкладок браузер заменяет системными цветами, и выбранная вкладка
 * не отличается от остальных: у неё системная подсветка выделения. Линии и стрелки — маска на заливке: заливка —
 * системный цвет текста, иначе браузер закрасил бы её цветом фона.
 */
@media (forced-colors: active) {
	.baserd-industries .wp-block-tab-list button[aria-selected="true"] {
		forced-color-adjust: none;
		border-color: Highlight;
		background-color: Highlight;
		color: HighlightText;
	}

	.baserd-industries :is(.baserd-industries__gateway, .baserd-industries__servers, .baserd-industries__database, .baserd-industries__backup)::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/*
 * Планшет — кадр 846:28072 (768). Блок заголовка заходит на разделитель на 24, поля 48 сверху и 24 по бокам; через 24
 * ряд вкладок во всю колонку — четыре равные вкладки, текст у левого поля. Через 24 ряд в рамке: поля 48 сверху
 * и снизу, 24 по бокам (48 от края окна), сверху квадрат 400 со схемой по центру, через 24 отрасль 32/40 и абзац
 * 16/24 во всю ширину (отрасль — пресет 40, он здесь 32/40 и на телефоне не сжимается, layout.css). В DOM текст
 * идёт первым — порядок чтения не меняется, схему вперёд ставит order.
 * Нижнего поля нет: следующая секция заходит на ряд на 24 (workload.css), и линия её разделителя ложится на нижнюю
 * линию ряда, как в кадре.
 * Точки в квадрате — повтор одной точки с шагом 18, как на 1440.
 */
@media (max-width: 1023px) {
	.baserd-industries.has-grid-lines {
		padding-bottom: 0;
	}

	.baserd-industries .baserd-industries__heading {
		margin-top: -24px;
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24) 0;
	}

	.baserd-industries .baserd-industries__tabs {
		margin-top: var(--wp--preset--spacing--24);
	}

	.baserd-industries .wp-block-tab-list {
		padding: 0 var(--wp--preset--spacing--24);
	}

	/* Ядро (:where(.wp-block-tab-list button)) велит кнопкам наследовать flex-grow и flex-basis списка с !important
	 * и ставит ширину max-content: без !important здесь вкладки остаются по ширине текста. Важное объявление
	 * с весом (0,2,1) перебивает важное с весом 0. */
	.baserd-industries .wp-block-tab-list button {
		flex-grow: 1 !important;
		flex-basis: 0 !important;
		width: auto;
		min-width: 0;
		text-align: start;
	}

	.baserd-industries .baserd-industries__panels {
		margin-top: var(--wp--preset--spacing--24);
	}

	.baserd-industries .baserd-industries__panel {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--24);
		padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24);
	}

	.baserd-industries .baserd-industries__text {
		flex: none;
		padding: 0;
	}

	.baserd-industries .baserd-industries__text p {
		font-size: var(--wp--preset--font-size--size-16);
		line-height: var(--wp--custom--line-height--size-16);
	}

	.baserd-industries .baserd-industries__scheme {
		flex: none;
		order: -1;
		align-self: center;
		width: min(100%, 400px);
		min-width: 0;
		margin: 0;
	}

	.baserd-industries .baserd-industries__scheme::before {
		width: calc(round(down, 100% - 27px, 18px) + 6px);
		-webkit-mask: radial-gradient(circle at 3px 3px, #000 2.6px, transparent 3.4px) 0 0 / 18px 18px;
		mask: radial-gradient(circle at 3px 3px, #000 2.6px, transparent 3.4px) 0 0 / 18px 18px;
	}
}

/*
 * Телефон — кадр 851:34242 (375): поля 12 в колонке (24 от края экрана), вкладки по четверти колонки с полями 12,
 * ряд с полями 24 сверху и по бокам и 48 снизу, квадрат во всю колонку (327). Схема шириной 370 уменьшена целиком
 * (zoom 0.75, как картинка в кадре — 278 из 370), а подписи в ней — обратно в 1 / zoom (front#940): на экране
 * 14 и 16, как на 1440, меньше становятся только блоки и линии.
 */
@media (max-width: 767px) {
	.baserd-industries .baserd-industries__heading {
		padding-right: var(--wp--preset--spacing--12);
		padding-left: var(--wp--preset--spacing--12);
	}

	.baserd-industries .wp-block-tab-list {
		padding: 0 var(--wp--preset--spacing--12);
	}

	/* В кадре 375 подпись вкладки по центру, на 768 — от начала. */
	.baserd-industries .wp-block-tab-list button {
		padding-inline: 11.5px;
		text-align: center;
	}

	.baserd-industries .baserd-industries__panel {
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--12) var(--wp--preset--spacing--48);
	}

	.baserd-industries .baserd-industries__scheme {
		width: 100%;
	}

	.baserd-industries .baserd-industries__flow {
		--baserd-flow-zoom: 0.75;
		zoom: var(--baserd-flow-zoom);
	}

	.baserd-industries .baserd-industries__users {
		font-size: calc(var(--wp--preset--font-size--size-16) / var(--baserd-flow-zoom));
		line-height: calc(19px / var(--baserd-flow-zoom));
	}

	.baserd-industries .baserd-industries__node {
		font-size: calc(var(--wp--preset--font-size--size-14) / var(--baserd-flow-zoom));
		line-height: calc(17px / var(--baserd-flow-zoom));
	}
}

/*
 * Уже 360 квадрат меньше 300: поток 370 × 0.75 = 278 ложился бы на рамку; 370 × 0.68 = 252 входит в 272 (320).
 * Вкладкам с полями 12 не хватает места под «Fintech» — поля 8.
 */
@media (max-width: 359px) {
	.baserd-industries .wp-block-tab-list button {
		padding-inline: 7.5px;
	}

	.baserd-industries .baserd-industries__flow {
		--baserd-flow-zoom: 0.68;
	}
}