/*
 * Разделитель секций главной — core/separator с классом baserd-divider: полоса 58 фона base
 * закрывает линии сетки, посередине линия 1px contrast-10, на линиях сетки звёзды 36×36.
 * В макете одинаковый над полосой логотипов (657:7356, 657:7362) и над тарифами (657:4458), поэтому
 * общий, а не в файле одной секции.
 *
 * Селекторы весят (0,2,0): иначе в редакторе их перебивают правила самого редактора и отступы потока.
 */
.wp-block-separator.baserd-divider {
	position: relative;
	box-sizing: border-box;
	height: 58px;
	/* Только по вертикали: по бокам у alignfull отрицательные поля, они выводят линию на всю ширину. */
	margin-block: 0;
	border: 0;
	background-color: var(--wp--preset--color--base);
	opacity: 1;
	/* На телефоне поля страницы 12 — половина звезды: край правой не должен выйти за экран. */
	overflow-x: clip;
}

.wp-block-separator.baserd-divider::before {
	content: "";
	position: absolute;
	top: 29px;
	right: 0;
	left: 0;
	height: 1px;
	background-color: var(--wp--preset--color--contrast-10);
}

/*
 * Звёзды 36×36 в разрывах линии: левая по центру на краю колонки (657:7360, x 62–98), правая в макете
 * на 1 px правее края (657:7361, x 1343–1379). Разрывы — плашки фона 57 и 58: x 52–109 и 1332–1390.
 */
.wp-block-separator.baserd-divider::after {
	content: "";
	position: absolute;
	top: 11px;
	right: calc(max(var(--wp--style--root--padding-right), (100% - var(--wp--style--global--content-size)) / 2) - 30px);
	left: calc(max(var(--wp--style--root--padding-left), (100% - var(--wp--style--global--content-size)) / 2) - 28px);
	height: 36px;
	background:
		url("../icons/star.svg") left 10px center / 36px 36px no-repeat,
		url("../icons/star.svg") right 11px center / 36px 36px no-repeat,
		linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) left / 57px 100% no-repeat,
		linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) right / 58px 100% no-repeat;
}

/*
 * Планшет и телефон — кадры 846:23476 и 858:35778 (front#1044): полоса 48, звёзды 24 по центру на
 * линиях сетки, линия между ними с зазором 12 от звёзд, до краёв экрана не доходит. Картинки слоёв
 * те же (у светлой секции свои), меняются только размеры и места.
 */
@media (max-width: 1023px) {
	.wp-block-separator.baserd-divider {
		height: 48px;
	}

	.wp-block-separator.baserd-divider::before {
		top: 24px;
		right: calc(var(--wp--style--root--padding-right) + 24px);
		left: calc(var(--wp--style--root--padding-left) + 24px);
	}

	.wp-block-separator.baserd-divider::after {
		top: 12px;
		right: calc(var(--wp--style--root--padding-right) - 12px);
		left: calc(var(--wp--style--root--padding-left) - 12px);
		height: 24px;
		background-position: left center, right center, left, right;
		background-size: 24px 24px, 24px 24px, 0 0, 0 0;
	}
}