/* MegaMasterok — front page. Slice 1: hero, search, primary entry points. Slice 2: user jobs, popular sections. Slice 3: tools band (calculators from the megam-tools plugin). Slice 4: schemes, materials reference. */

.megam-front .site-content {
	display: block;
}

.megam-home {
	/* One vertical rhythm for the whole page: the gap above every section (and below the last one). */
	--megam-section-gap: clamp(22px, 1.8vw, 26px);

	display: block;
	width: 100%;
}

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

.megam-hero {
	--megam-hero-bg: #f4f6f9;

	position: relative;
	overflow: hidden;
	background: var(--megam-hero-bg);
	isolation: isolate;
}

.megam-hero__media {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	width: 62%;
}

/* Slot homepage.hero: see docs/assets/homepage-hero.md for the crop contract. */
.megam-hero__media .megam-visual__img {
	object-position: 70% 50%;
}

/* Blend the image into the text side. */
.megam-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--megam-hero-bg) 0%,
		rgba(244, 246, 249, 0.92) 12%,
		rgba(244, 246, 249, 0.55) 26%,
		rgba(244, 246, 249, 0) 44%
	);
}

.megam-hero__inner {
	padding-top: clamp(24px, 2.2vw, 32px);
	padding-bottom: clamp(20px, 2vw, 28px);
}

.megam-hero__title {
	margin: 0;
	color: var(--megam-ink);
	font-family: var(--megam-font);
	font-size: var(--megam-fs-hero);
	font-weight: 800;
	line-height: var(--megam-lh-tight);
	letter-spacing: -0.022em;
}

.megam-hero__title-line,
.megam-hero__title-accent {
	display: block;
}

.megam-hero__title-accent {
	color: var(--megam-accent);
}

.megam-hero__lead {
	max-width: 31em;
	margin: 14px 0 0;
	color: var(--megam-text);
	font-size: var(--megam-fs-lead);
	font-weight: 400;
	line-height: 1.42;
	text-wrap: balance;
}

.megam-hero .megam-search {
	max-width: 884px;
	margin-top: 22px;
}

/* Quick actions ------------------------------------------------------------ */

.megam-quick {
	margin-top: 20px;
}

/* Cards size to their content (as in the reference), and share space when narrow. */
.megam-quick__list {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.megam-quick__item {
	display: flex;
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.megam-quick__card {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	min-height: 84px;
	padding: 14px 18px 14px 14px;
	border: 1px solid rgba(208, 214, 223, 0.7);
	border-radius: var(--megam-radius);
	background: var(--megam-surface);
	box-shadow: var(--megam-shadow-1);
	color: var(--megam-text);
	text-decoration: none;
}

a.megam-quick__card {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.megam-quick__card:hover,
a.megam-quick__card:focus-visible {
	border-color: var(--megam-accent);
	box-shadow: var(--megam-shadow-2);
	color: var(--megam-text);
}

a.megam-quick__card:focus-visible {
	outline: none;
	box-shadow: var(--megam-shadow-2), var(--megam-focus);
}

a.megam-quick__card:hover .megam-quick__title {
	color: var(--megam-accent);
}

/* Informational cards without a destination yet: no link affordance. */
.megam-quick__card--static {
	cursor: default;
}

.megam-quick__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: var(--megam-radius);
	background: var(--megam-accent-soft);
	color: var(--megam-accent);
}

.megam-quick__card--blue .megam-quick__icon {
	background: var(--megam-blue-soft);
	color: var(--megam-blue);
}

.megam-quick__card--amber .megam-quick__icon {
	background: var(--megam-amber-soft);
	color: var(--megam-amber);
}

.megam-quick__card--coral .megam-quick__icon {
	background: var(--megam-coral-soft);
	color: var(--megam-coral);
}

.megam-quick__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.megam-quick__title {
	color: var(--megam-ink);
	font-size: 0.890625rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.megam-quick__text {
	color: var(--megam-muted);
	max-width: 10.5em;
	font-size: 0.78125rem;
	line-height: 1.35;
	text-wrap: balance;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1200px) {
	.megam-hero__media {
		width: 60%;
	}

	.megam-hero .megam-search {
		max-width: 760px;
	}
}

@media (max-width: 1024px) {
	.megam-hero__media {
		width: 72%;
		opacity: 0.55;
	}

	.megam-hero__media::after {
		background: linear-gradient(
			90deg,
			var(--megam-hero-bg) 0%,
			rgba(244, 246, 249, 0.9) 30%,
			rgba(244, 246, 249, 0.4) 70%,
			rgba(244, 246, 249, 0.15) 100%
		);
	}

	.megam-quick__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.megam-quick__text {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.megam-hero__media {
		position: relative;
		z-index: auto;
		width: auto;
		height: 170px;
		opacity: 1;
	}

	.megam-hero__media::after {
		background: linear-gradient(
			180deg,
			rgba(244, 246, 249, 0) 55%,
			var(--megam-hero-bg) 100%
		);
	}

	/* Used only when no hero-mobile file is installed. */
	.megam-hero__media .megam-visual__img {
		object-position: 68% 55%;
	}

	.megam-hero__inner {
		padding-top: 4px;
		padding-bottom: 24px;
	}

	.megam-hero__lead {
		margin-top: 12px;
	}

	.megam-hero .megam-search {
		margin-top: 20px;
		padding: 5px;
	}

	.megam-hero .megam-search__icon {
		display: none;
	}

	.megam-hero .megam-search input.megam-search__input {
		padding-left: 10px;
		font-size: 1rem;
	}

	.megam-quick {
		margin-top: 16px;
	}

	.megam-quick__list {
		gap: 10px;
	}

	.megam-quick__card {
		gap: 10px;
		min-height: 64px;
		padding: 10px;
	}

	.megam-quick__icon {
		width: 36px;
		height: 36px;
		border-radius: var(--megam-radius-sm);
	}

	.megam-quick__icon .megam-icon {
		width: 20px;
		height: 20px;
	}

	.megam-quick__title {
		font-size: var(--megam-fs-sm);
		white-space: normal;
		overflow-wrap: normal;
	}

	.megam-quick__text {
		display: none;
	}
}

/* ==========================================================================
   Slice 2: section heading row, "Что вы сейчас делаете?", "Популярные разделы"
   ========================================================================== */

.megam-section {
	padding-top: var(--megam-section-gap);
}

.megam-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	margin-bottom: 14px;
}

.megam-section .megam-section__title {
	margin: 0;
	color: var(--megam-ink);
	font-family: var(--megam-font);
	font-size: clamp(1.5rem, 1.12rem + 1.05vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.018em;
}

.megam-section__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--megam-accent);
	font-size: var(--megam-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.megam-section__more:hover,
.megam-section__more:focus-visible {
	color: var(--megam-accent-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* In-place disclosure styled as the "all …" link (e.g. "Все разделы"). */
.megam-section .megam-section__toggle,
.megam-section .megam-section__toggle:hover,
.megam-section .megam-section__toggle:focus {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--megam-accent);
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
}

.megam-section .megam-section__toggle:hover,
.megam-section .megam-section__toggle:focus-visible {
	color: var(--megam-accent-strong);
}

.megam-section .megam-section__toggle[hidden] {
	display: none;
}

.megam-section__toggle .megam-icon {
	transition: transform 0.15s ease;
}

.megam-section__toggle[aria-expanded="true"] .megam-icon {
	transform: rotate(180deg);
}

.megam-intent a:focus-visible,
.megam-section__more:focus-visible,
.megam-section .megam-section__toggle:focus-visible,
.megam-cat:focus-visible {
	outline: none;
	border-radius: 4px;
	box-shadow: var(--megam-focus);
}

/* "Что вы сейчас делаете?" ------------------------------------------------ */

.megam-intents__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.megam-intent {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 16px 14px;
	border: 1px solid var(--megam-line);
	border-radius: var(--megam-radius);
	background: var(--megam-surface);
	container-type: inline-size;
}

/* Slots homepage.intent-*: cut-out subjects on white, never cropped (see the specs). */
.megam-intent__media {
	height: 92px;
	margin-bottom: 8px;
}

.megam-intent__media .megam-visual__img {
	object-fit: contain;
	object-position: 0% 50%;
}

.megam-intent__media .megam-visual--placeholder {
	overflow: hidden;
	border-radius: var(--megam-radius-sm);
}

/* Two-line box, bottom-aligned: single-line titles share the link row start. */
.megam-intent .megam-intent__title {
	display: flex;
	align-items: flex-end;
	min-height: 2.4em;
	margin: 0 0 8px;
	color: var(--megam-ink);
	font-family: var(--megam-font);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.megam-intent__title a {
	color: inherit;
	text-decoration: none;
}

.megam-intent__title a:hover {
	color: var(--megam-accent);
}

.megam-intent__links {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0 46px 0 0;
	list-style: none;
}

.megam-intent__links li {
	margin: 0;
	/* Own line box: the inherited body line-height would add ~6 px per row. */
	font-size: 0.9375rem;
	line-height: 1.3;
}

.megam-intent__link {
	font-size: 0.9375rem;
	line-height: 1.3;
}

/* Reference-backed affordance: a light arrow after each sub-link label. */
a.megam-intent__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--megam-blue);
	text-decoration: none;
}

.megam-intent__link .megam-icon {
	width: 14px;
	height: 14px;
	opacity: 0.75;
}

a.megam-intent__link:hover .megam-icon {
	opacity: 1;
}

a.megam-intent__link:hover {
	color: var(--megam-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.megam-intent__go {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--megam-surface-alt);
	color: var(--megam-ink);
	transition: background-color 0.15s ease, color 0.15s ease;
}

a.megam-intent__go:hover {
	background: var(--megam-accent);
	color: #fff;
}

/* Wide cards (tablet first row): links in two columns. Measured on the card's content box. */
@container (min-width: 290px) {
	.megam-intent__links {
		grid-template-columns: repeat(2, max-content);
		column-gap: 32px;
	}
}

/* "Популярные разделы" ---------------------------------------------------- */

.megam-popular__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.megam-popular__list li {
	display: flex;
	margin: 0;
}

.megam-cat {
	display: flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	min-height: 84px;
	padding: 12px 14px;
	border: 1px solid var(--megam-line);
	border-radius: var(--megam-radius);
	background: var(--megam-surface);
	color: var(--megam-text);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.megam-cat:hover {
	border-color: var(--megam-accent);
	color: var(--megam-text);
}

.megam-cat__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--megam-radius);
	color: var(--megam-muted);
	transition: color 0.15s ease;
}

.megam-cat__visual--icon {
	background: var(--megam-surface-alt);
}

.megam-cat__visual--empty .megam-visual--placeholder {
	border-radius: var(--megam-radius);
}

.megam-cat__visual--photo .megam-visual__img {
	object-fit: contain;
}

.megam-cat:hover .megam-cat__visual--icon {
	color: var(--megam-accent);
}

.megam-cat__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.megam-cat__name {
	color: var(--megam-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
	transition: color 0.15s ease;
}

.megam-cat:hover .megam-cat__name {
	color: var(--megam-accent);
}

.megam-cat__count {
	color: var(--megam-muted);
	font-size: var(--megam-fs-sm);
	line-height: 1.3;
	white-space: nowrap;
}

/* "Все разделы": the remaining categories as compact text cards under the curated grid. */
.megam-popular__list--more {
	margin-top: 12px;
}

.megam-popular__list--more[hidden] {
	display: none;
}

.megam-cat--compact {
	min-height: 64px;
	padding: 10px 14px;
}

/* Slice 2 responsive -------------------------------------------------------- */

/* Tablet: two wide cards over three, so no card is squeezed below ~230 px. */
@media (max-width: 1100px) {
	.megam-intents__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.megam-intent {
		grid-column: span 2;
	}

	.megam-intent:nth-child(-n+2) {
		grid-column: span 3;
	}

	.megam-intent__media {
		height: 96px;
	}

	.megam-popular__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.megam-popular__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Mobile: compact job rows (thumb + title + arrow, links in a 2-column grid). */
@media (max-width: 600px) {
	.megam-section__head {
		row-gap: 4px;
		margin-bottom: 12px;
	}

	/* Seven stacked heading blocks on a phone: the H2 and its "all" link carry the section; the descriptor is dropped. */
	.megam-section .megam-section__lead {
		display: none;
	}

	.megam-intents__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.megam-intent,
	.megam-intent:nth-child(-n+2) {
		display: grid;
		grid-column: auto;
		grid-template-columns: 60px minmax(0, 1fr) auto;
		grid-template-areas:
			"media title go"
			"links links links";
		align-items: center;
		column-gap: 12px;
		row-gap: 6px;
		padding: 10px 10px 4px 12px;
	}

	.megam-intent__media {
		grid-area: media;
		width: 60px;
		height: 60px;
		margin: 0;
	}

	.megam-intent__media .megam-visual__img {
		object-position: 50% 50%;
	}

	.megam-intent .megam-intent__title {
		grid-area: title;
		min-height: 0;
		margin: 0;
		font-size: 1.0625rem;
	}

	.megam-intent .megam-intent__links {
		grid-area: links;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 12px;
		padding: 2px 0 0;
		border-top: 1px solid var(--megam-line);
	}

	.megam-intent__link {
		display: flex;
		align-items: center;
		min-height: 42px;
	}

	.megam-intent__go {
		position: static;
		grid-area: go;
		width: 40px;
		height: 40px;
	}

	.megam-popular__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.megam-popular__list--more {
		margin-top: 10px;
	}

	.megam-cat {
		gap: 10px;
		min-height: 64px;
		padding: 10px;
	}

	.megam-cat__visual {
		width: 40px;
		height: 40px;
		border-radius: var(--megam-radius-sm);
	}

	.megam-cat__visual .megam-icon {
		width: 22px;
		height: 22px;
	}

	.megam-cat__name {
		font-size: 0.9375rem;
	}
}

/* ==========================================================================
   Slice 3: "Инструменты мастера" (template-parts/home/tools.php; calculators from megam-tools)
   ========================================================================== */

/* Section heading with an inline muted descriptor (reference: H2 + descriptor + "all" link). */
.megam-section__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 20px;
	min-width: 0;
}

.megam-section .megam-section__lead {
	margin: 0;
	color: var(--megam-muted);
	font-size: var(--megam-fs-sm);
	line-height: 1.35;
}

.megam-tools {
	--megam-tools-bleed: min(var(--megam-gutter), 24px);
	--megam-tools-tint: color-mix(in srgb, var(--megam-accent-soft) 50%, #fff);
	padding-bottom: var(--megam-section-gap);
}

/* The band reaches slightly past the content edges, so the cards stay on the container grid. */
.megam-tools__band {
	margin-inline: calc(-1 * var(--megam-tools-bleed));
	padding: 20px var(--megam-tools-bleed) 24px;
	border-radius: var(--megam-radius-lg);
	background: var(--megam-tools-tint);
}

.megam-tools__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.megam-tool {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 14px 14px 16px;
	border: 1px solid var(--megam-line);
	border-radius: var(--megam-radius);
	background: var(--megam-surface);
}

.megam-tool__head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

.megam-tool__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--megam-radius);
	background: var(--megam-accent-soft);
	color: var(--megam-accent);
}

.megam-tools .megam-tool__title {
	margin: 0;
	color: var(--megam-ink);
	font-family: var(--megam-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Calculator form (markup and behaviour from the megam-tools plugin): fields,
   optional "Дополнительно" disclosure, error line, button, result. */
.megam-tools .megam-calc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
}

/* One label column per card: labels stay on one line where they fit, controls line up. */
.megam-tools .megam-calc__fields {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(64px, 1fr);
	align-items: center;
	gap: 8px 10px;
}

.megam-tools .megam-calc__field {
	display: contents;
}

.megam-tools .megam-calc__label {
	color: var(--megam-muted);
	font-size: 0.78125rem;
	line-height: 1.25;
}

.megam-tools .megam-calc__control {
	box-sizing: border-box;
	width: 100%;
	height: 32px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid var(--megam-line-strong);
	border-radius: var(--megam-radius-sm);
	background: var(--megam-surface);
	color: var(--megam-text);
	font-family: var(--megam-font);
	font-size: var(--megam-fs-sm);
	line-height: 30px;
}

.megam-tools .megam-calc__control:focus {
	border-color: var(--megam-blue);
	outline: 0;
	box-shadow: var(--megam-focus);
}

.megam-tools .megam-calc__control[aria-invalid="true"] {
	border-color: var(--megam-caution);
}

.megam-tools .megam-calc__hint {
	grid-column: 1 / -1;
	margin-top: -3px;
	color: var(--megam-muted);
	font-size: 0.75rem;
	line-height: 1.3;
}

.megam-tools .megam-calc__more > summary {
	width: fit-content;
	color: var(--megam-muted);
	font-size: 0.78125rem;
	line-height: 1.3;
	cursor: pointer;
}

.megam-tools .megam-calc__more > summary:hover {
	color: var(--megam-ink);
}

.megam-tools .megam-calc__more > summary:focus-visible {
	border-radius: 2px;
	outline: 0;
	box-shadow: var(--megam-focus);
}

.megam-tools .megam-calc__more[open] > summary {
	margin-bottom: 8px;
}

.megam-tools .megam-calc__error {
	margin: 0;
	color: var(--megam-caution);
	font-size: 0.78125rem;
	line-height: 1.3;
}

.megam-tools .megam-calc__error:empty {
	display: none;
}

.megam-tools .megam-calc__submit {
	box-sizing: border-box;
	width: 100%;
	min-height: 38px;
	margin: auto 0 0;
	padding: 0 12px;
	border: 0;
	border-radius: var(--megam-radius-sm);
	background: var(--megam-accent);
	color: #fff;
	font-family: var(--megam-font);
	font-size: var(--megam-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.megam-tools .megam-calc__submit:hover {
	background: var(--megam-accent-strong);
}

.megam-tools .megam-calc__submit:focus-visible {
	outline: 0;
	box-shadow: var(--megam-focus);
}

/* Disabled only until the plugin script runs (never submittable without JS). */
.megam-tools .megam-calc__submit:disabled {
	background: var(--megam-accent);
	opacity: 0.55;
	cursor: not-allowed;
}

.megam-tools .megam-calc__output {
	padding-top: 10px;
	border-top: 1px solid var(--megam-line);
}

.megam-tools .megam-calc__values {
	display: grid;
	gap: 4px;
	margin: 0;
}

.megam-tools .megam-calc__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 8px;
}

.megam-tools .megam-calc__row[hidden] {
	display: none;
}

.megam-tools .megam-calc__row dt {
	color: var(--megam-muted);
	font-size: 0.78125rem;
	font-weight: 400;
	line-height: 1.3;
}

.megam-tools .megam-calc__row dd {
	margin: 0 0 0 auto;
	color: var(--megam-ink);
	font-size: var(--megam-fs-sm);
	font-weight: 700;
	line-height: 1.3;
	text-align: right;
	overflow-wrap: anywhere;
}

/* The first value is the answer. */
.megam-tools .megam-calc__row:first-child dd {
	font-size: 1rem;
}

.megam-tools .megam-calc__note {
	margin: 8px 0 0;
	color: var(--megam-muted);
	font-size: 0.75rem;
	line-height: 1.35;
}

.megam-tools .megam-calc__noscript {
	margin: 0 0 12px;
	color: var(--megam-muted);
	font-size: var(--megam-fs-sm);
}

/* Slice 3 responsive -------------------------------------------------------- */

@media (max-width: 1200px) {
	.megam-tools__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Mobile: compact cards, two per row; each label sits above its field. */
@media (max-width: 600px) {
	.megam-tools__band {
		padding-top: 18px;
		padding-bottom: 18px;
		border-radius: 0;
	}

	.megam-tools__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.megam-tool {
		gap: 10px;
		padding: 12px;
	}

	.megam-tool__head {
		gap: 8px;
		min-height: 36px;
	}

	.megam-tool__icon {
		width: 36px;
		height: 36px;
		border-radius: var(--megam-radius-sm);
	}

	.megam-tool__icon .megam-icon {
		width: 20px;
		height: 20px;
	}

	.megam-tools .megam-tool__title {
		font-size: 0.875rem;
	}

	.megam-tools .megam-calc__fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 3px;
	}

	.megam-tools .megam-calc__label:not(:first-child) {
		margin-top: 5px;
	}

	.megam-tools .megam-calc__control {
		height: 40px;
		font-size: 1rem;
	}

	.megam-tools .megam-calc__submit {
		min-height: 44px;
	}
}


/* ==========================================================================
   Slice 4: "Схемы и узлы", "Справочник материалов"
   ========================================================================== */

/* The tools band carries its own bottom spacing for when it ends the page; drop it before a following section. */
.megam-tools:has(+ .megam-section) {
	padding-bottom: 0;
}

/* "Схемы и узлы": the diagram dominates, the title is a caption above it. */

.megam-schemes__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.megam-scheme {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 12px 12px 12px;
	border: 1px solid var(--megam-line);
	border-radius: var(--megam-radius);
	background: var(--megam-surface);
}

.megam-schemes .megam-scheme__title {
	margin: 0;
	color: var(--megam-ink);
	font-family: var(--megam-font);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.megam-scheme__title a {
	color: inherit;
	text-decoration: none;
}

/* The whole card is the link target when a destination exists. */
.megam-scheme__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--megam-radius);
}

.megam-scheme--link:hover {
	border-color: var(--megam-line-strong);
}

.megam-scheme__title a:focus-visible {
	outline: none;
}

.megam-scheme__title a:focus-visible::after {
	box-shadow: var(--megam-focus);
}

/* Slots schemes.*: 3:2 diagrams, shown whole (never cropped: labels live at the edges). */
.megam-scheme__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--megam-radius-sm);
}

.megam-scheme__media .megam-visual__img {
	object-fit: contain;
}

/* "Справочник материалов": denser; name, what it is, object photo, short notes. */

.megam-materials__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.megam-material {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	min-width: 0;
	margin: 0;
	padding: 12px 14px 14px;
	border: 1px solid var(--megam-line);
	border-radius: var(--megam-radius);
	background: var(--megam-surface);
}

.megam-materials .megam-material__title {
	margin: 0;
	color: var(--megam-ink);
	font-family: var(--megam-font);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
}

.megam-material__title a {
	color: inherit;
	text-decoration: none;
}

.megam-material__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--megam-radius);
}

.megam-material--link:hover {
	border-color: var(--megam-line-strong);
}

.megam-material__title a:focus-visible {
	outline: none;
}

.megam-material__title a:focus-visible::after {
	box-shadow: var(--megam-focus);
}

.megam-materials .megam-material__kind {
	margin: 2px 0 0;
	color: var(--megam-muted);
	font-size: var(--megam-fs-xs);
	line-height: 1.3;
}

/* Slots materials.*: cut-out objects on white, contained, never cropped. */
.megam-material__media {
	height: 88px;
	margin-top: 6px;
}

.megam-material__media .megam-visual__img {
	object-fit: contain;
}

.megam-material__media .megam-visual--placeholder {
	overflow: hidden;
	border-radius: var(--megam-radius-sm);
}

.megam-material__points {
	display: grid;
	gap: 3px;
	align-self: end;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.megam-material__point {
	position: relative;
	margin: 0;
	padding-left: 18px;
	color: var(--megam-text);
	font-size: var(--megam-fs-xs);
	line-height: 1.35;
}

/* Marker: a plain dot; green/red only for verified points (tokens in style.css). */
.megam-material__point::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--megam-positive);
}

.megam-material__point--minus::before {
	background: var(--megam-caution);
}

/* Titles of different lengths: share row tracks across a grid row so the visuals line up. */
@supports (grid-template-rows: subgrid) {
	.megam-scheme {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 10px;
	}

	.megam-material {
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
}

/* Slice 4 responsive -------------------------------------------------------- */

@media (max-width: 1000px) {
	.megam-materials__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Tablet: two lead diagrams wide, three narrow, so none shrinks below ~200 px. */
@media (max-width: 959px) {
	.megam-schemes__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.megam-scheme {
		grid-column: span 2;
	}

	.megam-scheme:nth-child(-n + 2) {
		grid-column: span 3;
	}
}

/* Mobile: one lead diagram, then two per row; materials two per row, compact. */
@media (max-width: 600px) {
	.megam-schemes__list,
	.megam-materials__list {
		gap: 10px;
	}

	.megam-schemes__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.megam-scheme,
	.megam-scheme:nth-child(-n + 2) {
		grid-column: auto;
	}

	.megam-scheme:first-child {
		grid-column: 1 / -1;
	}

	.megam-scheme {
		gap: 8px;
		row-gap: 8px;
		padding: 10px;
	}

	.megam-schemes .megam-scheme__title {
		font-size: var(--megam-fs-sm);
	}

	.megam-materials__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.megam-material {
		padding: 10px 12px 12px;
	}

	.megam-material__media {
		height: 80px;
		margin-top: 6px;
	}

	.megam-material__points {
		margin-top: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.megam-section__toggle .megam-icon,
	.megam-intent__go,
	.megam-cat,
	.megam-cat__visual,
	.megam-cat__name {
		transition: none;
	}
}

/* ==========================================================================
   Slice 5: "Новое и полезное" (template-parts/home/articles.php)
   ========================================================================== */

/* The last section closes the page rhythm before the footer. */
.megam-articles {
	padding-bottom: var(--megam-section-gap);
}

.megam-articles__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Editorial card: photo edge to edge, then category tag, title, two-line summary. No date (see articles.php). */
.megam-article {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--megam-line);
	border-radius: var(--megam-radius);
	background: var(--megam-surface);
}

.megam-article:hover {
	border-color: var(--megam-line-strong);
}

/* Featured image from the media library (legacy photos, mostly ~3:2): wide editorial crop, as in the reference (~8:3). */
.megam-article__media {
	position: relative;
	aspect-ratio: 8 / 3;
	overflow: hidden;
	background: var(--megam-surface-alt);
}

.megam-article__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

/* Local/development only: the post's image file is not on this machine. */
.megam-article__media--placeholder {
	background: var(--megam-placeholder);
	box-shadow: inset 0 0 0 1px var(--megam-placeholder-line);
	cursor: help;
}

.megam-article__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	padding: 12px 16px 14px;
}

.megam-article__meta {
	display: flex;
	margin-bottom: 8px;
}

/* Category: a real link above the card's stretched title link. */
.megam-article__tag {
	position: relative;
	z-index: 1;
	display: inline-block;
	max-width: 100%;
	padding: 2px 8px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--megam-blue-soft);
	color: var(--megam-blue);
	font-size: var(--megam-fs-xs);
	font-weight: 500;
	line-height: 1.45;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.megam-article__tag:hover {
	background: color-mix(in srgb, var(--megam-blue) 16%, #fff);
	color: var(--megam-blue);
}

.megam-articles .megam-article__title {
	margin: 0;
	color: var(--megam-ink);
	font-family: var(--megam-font);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

.megam-article__title a {
	display: -webkit-box;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* The whole card is the title link's hit area. */
.megam-article__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--megam-radius);
}

.megam-article:hover .megam-article__title a {
	color: var(--megam-accent-strong);
}

.megam-article__title a:focus-visible,
.megam-article__tag:focus-visible {
	outline: none;
}

.megam-article__title a:focus-visible::after,
.megam-article__tag:focus-visible {
	box-shadow: var(--megam-focus);
}

.megam-articles .megam-article__excerpt {
	display: -webkit-box;
	margin: 6px 0 0;
	overflow: hidden;
	color: var(--megam-muted);
	font-size: var(--megam-fs-sm);
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Slice 5 responsive -------------------------------------------------------- */

/* Small desktop: four narrow cards; real titles get a fourth line instead of being cut. */
@media (max-width: 1100px) {
	.megam-articles .megam-article__title {
		font-size: 1rem;
		line-height: 1.28;
	}

	.megam-article__title a {
		-webkit-line-clamp: 4;
	}
}

/* Tablet: two columns of horizontal cards (photo left), so portrait-tall cards do not dominate the page. */
@media (max-width: 900px) {
	.megam-articles__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.megam-article {
		display: grid;
		grid-template-columns: 38% minmax(0, 1fr);
		align-items: stretch;
	}

	.megam-article--no-media {
		grid-template-columns: minmax(0, 1fr);
	}

	.megam-article__media {
		aspect-ratio: auto;
		min-height: 112px;
	}

	.megam-article__body {
		padding: 12px 14px 14px;
	}

	.megam-articles .megam-article__excerpt {
		display: none;
	}
}

/* Mobile: compact rows (small photo left, tag and title right, no summary). */
@media (max-width: 600px) {
	.megam-articles__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.megam-article {
		grid-template-columns: 112px minmax(0, 1fr);
	}

	.megam-article--no-media {
		grid-template-columns: minmax(0, 1fr);
	}

	.megam-article__media {
		min-height: 88px;
	}

	.megam-article__media .megam-visual__label {
		right: 6px;
		bottom: 6px;
		padding: 2px 5px;
		font-size: 10px;
	}

	.megam-article__body {
		padding: 10px 12px 12px;
	}

	.megam-article__meta {
		margin-bottom: 6px;
	}

	.megam-articles .megam-article__title {
		font-size: 0.9375rem;
	}
}