/* ============================================================
   Corrections for the block renderer.

   styles.css is the design asset carried over from the old theme
   and is not edited. Everything the block architecture needs on
   top of it lives here, so every deviation is visible in one file.

   The reason this file exists: the old markup nested blocks inside
   .container / .section wrappers written by hand per page. Our
   pages are a flat list of blocks, so each block carries its own
   wrapper — and the vertical rhythm that used to come from that
   hand-written nesting has to be restated here.
   ============================================================ */

/* ── the block wrapper ──────────────────────────────────────
   Every block renders inside <section class="block block--type">.
   The wrapper itself is inert; it exists so that rules which used
   to rely on hand-written sibling markup can be restated against
   something that survives a flat block list. */
.block{ }

/* Consecutive splits were divided by a hairline via `.split + .split`.
   That worked when a page wrote them as siblings by hand. Ours are
   separate blocks, so the rule moves up to the wrapper. */
.block--split + .block--split .split{ border-top:1px solid var(--border); }

/* ── generic tabs ───────────────────────────────────────────
   styles.css switches tabs with per-page id selectors written by
   hand (#pb-about:checked ~ .ptab--about). A generic block cannot
   use those: its ids are generated. These positional rules replace
   them — input n drives panel n and label n.

   This is why tabs.php keeps the panels as the only <section>
   children of .ptabs and in the same order as the inputs.

   Eight is headroom: the largest tab set in the theme is five. */
.ptabs > input:nth-of-type(1):checked ~ section.ptab:nth-of-type(1),
.ptabs > input:nth-of-type(2):checked ~ section.ptab:nth-of-type(2),
.ptabs > input:nth-of-type(3):checked ~ section.ptab:nth-of-type(3),
.ptabs > input:nth-of-type(4):checked ~ section.ptab:nth-of-type(4),
.ptabs > input:nth-of-type(5):checked ~ section.ptab:nth-of-type(5),
.ptabs > input:nth-of-type(6):checked ~ section.ptab:nth-of-type(6),
.ptabs > input:nth-of-type(7):checked ~ section.ptab:nth-of-type(7),
.ptabs > input:nth-of-type(8):checked ~ section.ptab:nth-of-type(8){ display:block; }

.ptabs > input:nth-of-type(1):checked ~ .ptabs__bar label:nth-of-type(1),
.ptabs > input:nth-of-type(2):checked ~ .ptabs__bar label:nth-of-type(2),
.ptabs > input:nth-of-type(3):checked ~ .ptabs__bar label:nth-of-type(3),
.ptabs > input:nth-of-type(4):checked ~ .ptabs__bar label:nth-of-type(4),
.ptabs > input:nth-of-type(5):checked ~ .ptabs__bar label:nth-of-type(5),
.ptabs > input:nth-of-type(6):checked ~ .ptabs__bar label:nth-of-type(6),
.ptabs > input:nth-of-type(7):checked ~ .ptabs__bar label:nth-of-type(7),
.ptabs > input:nth-of-type(8):checked ~ .ptabs__bar label:nth-of-type(8){ color:var(--teal); }

.ptabs > input:nth-of-type(1):checked ~ .ptabs__bar label:nth-of-type(1)::after,
.ptabs > input:nth-of-type(2):checked ~ .ptabs__bar label:nth-of-type(2)::after,
.ptabs > input:nth-of-type(3):checked ~ .ptabs__bar label:nth-of-type(3)::after,
.ptabs > input:nth-of-type(4):checked ~ .ptabs__bar label:nth-of-type(4)::after,
.ptabs > input:nth-of-type(5):checked ~ .ptabs__bar label:nth-of-type(5)::after,
.ptabs > input:nth-of-type(6):checked ~ .ptabs__bar label:nth-of-type(6)::after,
.ptabs > input:nth-of-type(7):checked ~ .ptabs__bar label:nth-of-type(7)::after,
.ptabs > input:nth-of-type(8):checked ~ .ptabs__bar label:nth-of-type(8)::after{ background:var(--teal); }

/* ── vertical rhythm between blocks ─────────────────────────
   The old pages got their spacing from hand-written nesting:
   a .container holding hero+stats, .section{padding-block:40px}
   around groups, .ptabs{margin-top:44px}. A flat block list has
   none of that, so the rhythm is restated here.

   This is fixed decision #1 coming due — it was always the part
   most likely to drift. */
.block + .block{ margin-top:var(--gap); }

/* Splits stack flush and are divided by their hairline, not by a gap. */
.block--split + .block--split{ margin-top:0; }

/* The tab strip keeps its own 44px; do not add to it. */
.block--tabs{ margin-top:44px; }
.block--tabs .ptabs{ margin-top:0; }

/* Inside a panel the padding comes from .ptab, so the first block
   must not add its own margin on top of it. */
.ptab > .block:first-child{ margin-top:0; }

/* .ptab__h2 carried its own 80px top margin because the old markup put the
   heading directly next to the previous element. The wrapper now contributes
   var(--gap), so the heading's share drops to keep the total at 80. */
.block--heading .ptab__h2{ margin-top:60px; }


/* ── bento: переключатель «физ./юр. лица» ─────────────────────────────────
   В styles.css правила написаны на конкретные id (#aud-fiz), а рендерер выдаёт
   уникальные на каждый блок — иначе два бенто на странице переключались бы
   вместе. Поэтому те же правила, но позиционные: первая радиокнопка — «физ.»,
   вторая — «юр.». */
.block--bento .tabs input:first-of-type:checked ~ .bento .only-ur,
.block--bento .tabs input:nth-of-type(2):checked ~ .bento .only-fiz { display: none; }

.block--bento .tabs input:first-of-type:checked ~ .tabs__switch label:first-child,
.block--bento .tabs input:nth-of-type(2):checked ~ .tabs__switch label:nth-child(2) { color: #fff; }

.block--bento .tabs input:nth-of-type(2):checked ~ .tabs__switch::before { transform: translateX(100%); }


/* ── Переключатель языка в шапке ──────────────────────────────────────────
   Стоит между меню и бургером, поэтому на узких экранах остаётся видимым:
   меню там прячется, а язык переключать всё равно нужно. */
.lang { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

.lang__item {
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	border-radius: 8px;
	transition: color .18s, background-color .18s;
}

.lang__item:hover { color: var(--teal); }

.lang__item--on {
	color: var(--ink);
	background: var(--bg-soft);
	cursor: default;
}

@media (max-width: 900px) {
	.lang { margin-left: auto; }
}


/* ── Отступ после шапки ───────────────────────────────────────────────────
   В старой теме его давало `.section:first-of-type{ padding-top:44px }` —
   секций у нас больше нет, а отступ остался нужен: без него первый блок (или
   хлебные крошки) прилипает к нижней границе шапки.

   Задаётся первому ребёнку `<main>`, а не блоку: на внутренних страницах
   первыми идут крошки, на главной — сразу блок. */
main > :first-child { margin-top: 44px; }


/* ── Мероприятия: поиск, фильтры, сетка карточек ──────────────────────────
   Блок приходит фрагментом (см. Cpark\Site\Fragments), но CSS у него обычный
   и лежит здесь же: styles.css — актив старой темы, его не трогаем. */

.esearch {
	display: flex;
	gap: 12px;
	margin-bottom: 34px;
}

.esearch__input {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding: 0 22px;
	font: inherit;
	color: var(--ink);
	background: var(--bg-soft);
	border: 0;
	border-radius: var(--r-sm);
	outline: none;
}

.esearch__input::placeholder { color: var(--ink-soft); }
.esearch__input:focus { box-shadow: inset 0 0 0 1.5px var(--teal); }

/* Колонка фильтров слева — ширина как у подписи в макете. */
.elayout {
	display: grid;
	grid-template-columns: 201px 1fr;
	gap: var(--gap);
	align-items: start;
}

/* Колонка фильтров едет за списком: он длинный, а фильтры нужны наверху. */
.efilters { position: sticky; top: 24px; }

.efilter { margin-bottom: 30px; }

.efilter__head {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 800;
}

.efilter__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 15px;
	color: var(--ink);
	cursor: pointer;
}

/* Точка вместо радиокнопки: своя, потому что системная не красится. */
.efilter__item input { position: absolute; opacity: 0; pointer-events: none; }

.efilter__item span::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	vertical-align: 1px;
	border: 1.5px solid var(--ink-soft);
	border-radius: 50%;
	transition: background-color .18s, border-color .18s;
}

.efilter__item input:checked + span::before { background: var(--red); border-color: var(--red); }
.efilter__item input:focus-visible + span::before { outline: 2px solid var(--teal); outline-offset: 2px; }

/* min-width:0 обязателен: без него длинное название карточки распирает
   колонку сетки и ломает раскладку. */
.elist { min-width: 0; }

.elist__title { margin: 0 0 24px; }

.egrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
	align-items: start;
}

.ecard {
	display: flex;
	flex-direction: column;
	padding: 26px;
	background: #fff;
	border: 1.5px solid var(--border);
	border-radius: 19px;
}

/* У вебинаров рамка цветная — платный или бесплатный видно до чтения. */
.ecard--free { border-color: var(--teal); }
.ecard--paid { border-color: var(--red); }

/* Прошедшее приглушаем, но не прячем: программу и запись ищут и после даты. */
.ecard--past { opacity: .62; }

.ecard__meta {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 14px;
}

.ecard__title {
	margin: 16px 0 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
}

.ecard__price {
	margin: 20px 0 0;
	padding: 16px 18px;
	background: var(--bg-soft);
	border-radius: var(--r-sm);
	font-size: 14px;
}

.ecard__price div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
}

.ecard__price div + div { margin-top: 8px; }
.ecard__price dt { color: var(--ink-soft); }
.ecard__price dd { margin: 0; font-weight: 800; }

.ecard__foot {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 22px;
}

.ecard__foot .btn { flex: 1; min-height: 44px; padding: 0 16px; font-size: 14px; }

.ecard .pills { margin-bottom: 16px; }

.elist__empty {
	padding: 40px 0;
	color: var(--ink-soft);
}

@media (max-width: 900px) {
	.elayout { grid-template-columns: 1fr; }
	.egrid { grid-template-columns: 1fr; }
}