/*
 * Matland — секции и карточки.
 *
 * Разметку собирают паттерны из блоков ядра; сетки сделаны через layout
 * "grid" с minimumColumnWidth, поэтому число колонок подстраивается само
 * и почти нигде не нужны медиазапросы.
 */

/* ---------------------------------------------------- Общие элементы --- */

.matland-eyebrow {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--gold-dark);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	margin: 0;
}

/* На тёмном фоне песочная плашка слепит — приглушаем. */
.matland-eyebrow--light {
	background: rgba(234, 179, 8, 0.18);
	color: #f5cf3d;
}

.matland-section-head {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

.matland-muted {
	color: var(--wp--preset--color--muted);
}

/* Список с галочками — вместо маркеров ядра. */
.matland-check-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.matland-check-list li {
	position: relative;
	padding: 6px 0 6px 24px;
}

.matland-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 6px;
	color: var(--wp--preset--color--gold);
	font-weight: 700;
}

/* Вариант с кружком — в блоке про кабинет. */
.matland-check-list--circle li {
	padding-left: 34px;
}

.matland-check-list--circle li::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	top: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--base);
	font-size: 12px;
}

/* ---------------------------------------------------------------- Hero --- */

.matland-hero__card {
	border-radius: var(--wp--custom--radius--xl);
}

.matland-hero__lead p {
	margin: 0 0 14px;
	text-indent: 28px;
	line-height: 1.75;
	color: var(--wp--preset--color--muted);
}

.matland-hero__lead p:last-child {
	margin-bottom: 0;
}

.matland-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 4;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--raised);
}

/* Кнопки hero: на телефоне тянутся во всю ширину — три подряд иначе
   рвутся на неровные строки и по ним трудно попасть. */
@media (max-width: 600px) {
	.matland-hero__actions .matland-btn,
	.matland-hero__actions .wp-block-button__link {
		width: 100%;
	}
}

/* Портрет на мобильном идёт первым — лицо важнее текста в первом экране. */
@media (max-width: 781px) {
	.matland-hero__card {
		display: flex;
		flex-direction: column;
	}

	.matland-hero__visual {
		order: -1;
		max-width: 320px;
		margin-inline: auto;
	}
}

/* -------------------------------------------------------- Полоса классов --- */

.matland-classes-bar {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
	font-size: 14px;
}

.matland-classes-bar p {
	margin: 0;
	opacity: 0.9;
	text-align: center;
}

/* ------------------------------------------------------------ Карточки --- */

.matland-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
}

.matland-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
}

.matland-card__icon img,
.matland-card__icon svg {
	width: 26px;
	height: 26px;
}

/* ------------------------------------------------------- Форматы и цены --- */

.matland-price {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--lg);
}

.matland-price--featured {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--teal);
	box-shadow: var(--wp--preset--shadow--card);
}

.matland-price--featured .matland-check-list li::before {
	color: var(--wp--preset--color--teal);
}

.matland-price__badge {
	position: absolute;
	top: -12px;
	right: 20px;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--base);
	font-size: 11px;
	font-weight: 700;
	margin: 0;
}

.matland-price__amount {
	font-size: 26px;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	margin: 0;
}

.matland-price__amount small {
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* Обёртка тянется на всю высоту карточки, чтобы кнопка прижималась к низу:
   иначе в ряду с разной длиной списков кнопки скачут. Только :only-child —
   в карточках, где группа лежит среди других элементов (заголовок, текст),
   растянутая на 100% группа выталкивала бы соседей за пределы карточки. */
.matland-price > .wp-block-group:only-child,
.matland-card > .wp-block-group:only-child {
	height: 100%;
}

/* ---------------------------------------------------------- Программы --- */

.matland-programs__title {
	display: inline-block;
	padding: 12px 28px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}

.matland-program-intro {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
}

.matland-program-intro__text p {
	font-size: clamp(16px, 2.2vw, 19px);
	line-height: 1.7;
	font-weight: 500;
	color: var(--wp--preset--color--navy);
	margin: 0 0 14px;
}

/* Последний абзац, а не последний элемент: под текстом стоит кнопка,
   свой отступ она задаёт сама. */
.matland-program-intro__text p:last-of-type {
	margin-bottom: 0;
}

.matland-program-intro__logo img {
	width: 384px;
	max-width: 100%;
	border-radius: var(--wp--custom--radius--md);
}

.matland-program-card {
	position: relative;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
}

.matland-program-card__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 40px;
	font-weight: 900;
	line-height: 1;
	color: #dbe1ea;
	margin: 0;
}

.matland-program-card__meta {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--gold-dark);
	margin: 0;
}

/* Вся карточка кликабельна, но в разметке ссылка одна — на заголовке.
   Псевдоэлемент растягивает её зону нажатия на карточку целиком. */
.matland-program-card__link {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

.matland-program-card__link a {
	display: inline-block;
	padding: 5px 0;
}

.matland-program-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.matland-program-card:hover {
	background: #e7ebef;
}

@media (max-width: 781px) {
	.matland-program-intro {
		text-align: center;
	}

	.matland-program-intro__logo img {
		width: 240px;
		margin-inline: auto;
	}

	/* Колонка на телефоне выравнена по центру, но flex-ряд про text-align
	   не знает — кнопку центрируем явно. */
	.matland-program-intro__actions {
		justify-content: center;
	}
}

/* ------------------------------------------------------------- Кабинет --- */

.matland-cabinet__shot {
	background: var(--wp--preset--color--navy);
	border-radius: 28px;
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--raised);
}

.matland-cabinet__path {
	font-size: var(--wp--preset--font-size--x-small);
	color: #8b95b3;
	margin: 0;
}

.matland-cabinet__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	margin: 0;
}

.matland-cabinet__row--done {
	opacity: 0.6;
}

.matland-cabinet__status {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}

.matland-cabinet__row--done .matland-cabinet__status {
	color: var(--wp--preset--color--teal);
}

/* -------------------------------------------------------------- Отзывы --- */

.matland-review {
	background: var(--wp--preset--color--base);
	border: 1px solid #e6e8ee;
	border-radius: var(--wp--custom--radius--lg);
}

.matland-review__badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--gold-dark);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	margin: 0;
}

.matland-review__quote {
	font-size: 14px;
	margin: 0;
}

.matland-review__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
	font-size: 13px;
	font-weight: 700;
	margin: 0;
}

.matland-review__name {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.matland-review__role {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* --------------------------------------------------------- Баннер CTA --- */

.matland-cta-banner {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
	border-radius: 28px;
	text-align: center;
}

.matland-cta-banner h2 {
	color: var(--wp--preset--color--base);
}

.matland-cta-banner p {
	color: #c9d0e0;
}

/* --------------------------------------------------------------- FAQ --- */

.matland-faq .wp-block-details {
	margin-bottom: 12px;
}

.matland-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: var(--matland-tap);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
	list-style: none;
}

.matland-faq summary::-webkit-details-marker {
	display: none;
}

.matland-faq summary::after {
	content: "+";
	flex: none;
	font-size: 22px;
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}

.matland-faq details[open] summary::after {
	content: "–";
}

.matland-faq details p {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------ Каталог тестов --- */

.matland-exams__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	list-style: none;
	padding: 0;
	margin: 0;
}

.matland-exams--cols-1 .matland-exams__grid {
	grid-template-columns: 1fr;
}

.matland-exams--cols-2 .matland-exams__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.matland-exams--cols-4 .matland-exams__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.matland-exams__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
}

.matland-exams__section {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--gold-dark);
}

.matland-exams__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.matland-exams__meta {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Кнопка прижата к низу карточки при разной длине названий. */
.matland-exams__cta {
	margin-top: auto;
}

.matland-exams__notice {
	margin-top: 20px;
	padding: 12px 16px;
	border-left: 3px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--sand);
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------- Наведение --- */

/*
 * Один слой на все карточки: подъём, тень и подсветка рамки. Держим здесь,
 * а не рядом с каждым блоком, чтобы движение по сайту было одинаковым.
 * Всё через transform и box-shadow — они не вызывают перерасчёт раскладки,
 * поэтому не дёргают страницу при наведении.
 */
.matland-card,
.matland-price,
.matland-program-card,
.matland-review,
.matland-exams__item,
.matland-facts li {
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease,
		border-color 0.18s ease;
}

@media (hover: hover) {
	.matland-card:hover,
	.matland-review:hover,
	.matland-exams__item:hover,
	.matland-facts li:hover {
		transform: translateY(-3px);
		box-shadow: var(--wp--preset--shadow--card);
	}

	.matland-price:hover {
		transform: translateY(-3px);
		box-shadow: var(--wp--preset--shadow--raised);
		border-color: var(--wp--preset--color--gold);
	}

	/* Выделенный тариф уже с рамкой — ему меняем только глубину. */
	.matland-price--featured:hover {
		border-color: var(--wp--preset--color--teal);
		box-shadow: 0 24px 55px rgba(2, 43, 54, 0.16);
	}

	.matland-program-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--wp--preset--shadow--card);
	}

	/* Номер программы разгорается вместе с карточкой. */
	.matland-program-card__num {
		transition: color 0.18s ease;
	}

	.matland-program-card:hover .matland-program-card__num {
		color: var(--wp--preset--color--gold);
	}

	.matland-exams__item:hover .matland-exams__title {
		color: var(--wp--preset--color--teal);
	}

	/* Строки учебного плана и кабинета подсвечиваются под курсором. */
	.matland-syllabus li,
	.matland-cabinet__row {
		transition: background-color 0.18s ease, padding-left 0.18s ease;
	}

	.matland-syllabus li:hover {
		background: var(--wp--preset--color--base);
	}

	.matland-cabinet__row:hover {
		background: rgba(255, 255, 255, 0.06);
	}

	/* Картинки чуть приближаются — рамка обрезает вылет. */
	.matland-hero__visual,
	.matland-program-intro__logo {
		overflow: hidden;
		border-radius: var(--wp--custom--radius--lg);
	}

	.matland-hero__visual img,
	.matland-program-intro__logo img {
		transition: transform 0.4s ease;
	}

	.matland-hero__visual:hover img,
	.matland-program-intro__logo:hover img {
		transform: scale(1.03);
	}
}

.matland-exams__title {
	transition: color 0.18s ease;
}

/* Вопрос реагирует на курсор, знак «плюс» доворачивается при раскрытии. */
.matland-faq summary {
	transition: color 0.18s ease;
}

.matland-faq summary:hover {
	color: var(--wp--preset--color--teal);
}

.matland-faq summary::after {
	transition: transform 0.2s ease, color 0.18s ease;
}

.matland-faq summary:hover::after {
	color: var(--wp--preset--color--gold-dark);
}

.matland-faq details[open] summary::after {
	transform: rotate(180deg);
}

/* Ссылка «Подробнее» уезжает вправо вместе со стрелкой. */
.matland-program-card__link a {
	transition: color 0.18s ease, transform 0.18s ease;
}

.matland-program-card:hover .matland-program-card__link a {
	color: var(--wp--preset--color--teal);
	transform: translateX(4px);
}

/* Системная настройка «меньше движения» отключает всё смещение и масштаб,
   оставляя только смену цвета. */
@media (prefers-reduced-motion: reduce) {
	.matland-card,
	.matland-price,
	.matland-program-card,
	.matland-review,
	.matland-exams__item,
	.matland-facts li,
	.matland-hero__visual img,
	.matland-program-intro__logo img,
	.matland-program-card__link a {
		transition: none;
	}

	.matland-card:hover,
	.matland-price:hover,
	.matland-program-card:hover,
	.matland-review:hover,
	.matland-exams__item:hover,
	.matland-facts li:hover,
	.matland-hero__visual:hover img,
	.matland-program-intro__logo:hover img,
	.matland-program-card:hover .matland-program-card__link a {
		transform: none;
	}
}

/* ---------------------------------------------- Страница программы --- */

/* Хлебные крошки набраны мелко — растягиваем зону нажатия по вертикали. */
.matland-breadcrumbs a {
	display: inline-block;
	padding: 6px 0;
}

.matland-page-hero {
	background: var(--wp--preset--color--mint);
	border-radius: var(--wp--custom--radius--xl);
	/* Ширина текстовой колонки внутри карточки — та же, что задана в паттерне
	   шапки. Держим её здесь, чтобы плашка знала, куда равняться. */
	--matland-hero-content: 780px;
}

/*
 * Заголовок и абзацы — блочные: раскладка ограничивает их колонкой в 780px
 * и центрирует внутри карточки. Плашка над заголовком — inline-block, на неё
 * автоматические поля не действуют, поэтому она прижималась к левому краю
 * карточки и висела левее заголовка примерно на 130px.
 *
 * Сдвигаем её на тот же отступ, что раскладка даёт остальным. На экранах уже
 * колонки разность отрицательная, max() гасит её в ноль — и всё остаётся
 * прижатым к левому краю.
 */
.matland-page-hero > p.matland-eyebrow {
	/* !important здесь вынужденный: раскладка ядра печатает детям
	   constrained-группы `margin-inline: auto !important`, и обычным
	   правилом это не перебить — какой бы вес у селектора ни был. */
	margin-inline-start: max(0px, (100% - var(--matland-hero-content)) / 2) !important;
}

.matland-facts {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	list-style: none;
	padding: 0;
	margin: 0;
}

.matland-facts li {
	padding: 16px;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
}

.matland-facts strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	color: var(--wp--preset--color--navy);
}

.matland-facts span {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* Нумерованная программа занятий. */
.matland-syllabus {
	list-style: none;
	counter-reset: matland-lesson;
	padding: 0;
	margin: 0;
}

.matland-syllabus li {
	counter-increment: matland-lesson;
	position: relative;
	padding: 16px 16px 16px 60px;
	border-bottom: 1px solid #e6e8ee;
}

.matland-syllabus li::before {
	content: counter(matland-lesson, decimal-leading-zero);
	position: absolute;
	left: 16px;
	top: 16px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 900;
	color: #c3ccd6;
}

/* Липкая карточка записи — на десктопе едет рядом, на мобильном обычная. */
.matland-sticky-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
}

@media (min-width: 782px) {
	.matland-sticky-card {
		position: sticky;
		top: calc(var(--matland-header-height) + 20px);
	}
}