/**
 * Service / materials pages (Figma 606:*).
 */

.md-nav a[aria-current="page"] {
	position: relative;
	color: var(--md-color-action-secondary-text, #5a4b7a);
}

@media (min-width: 1024px) {
	.md-nav a[aria-current="page"]::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -21px;
		height: 2px;
		border-radius: 1px;
		background: var(--md-color-action-primary-bg, #5a4b7a);
	}
}

.md-page {
	padding: 64px 0 96px;
}

.md-page-intro {
	max-width: 900px;
	margin: 0 0 48px;
}

.md-page-intro .md-eyebrow {
	margin: 0 0 10px;
}

.md-page-intro__title {
	margin: 0;
	font: 400 52px/56px var(--md-font-serif);
	color: var(--md-color-text-primary);
}

.md-page-intro__lead {
	margin: 18px 0 0;
	max-width: 760px;
	font: 400 19px/26px var(--md-font-sans);
	color: var(--md-color-text-secondary);
}

.md-page-section__title {
	margin: 56px 0 18px;
	font: 400 34px/40px var(--md-font-serif);
	color: var(--md-color-text-primary);
}

.md-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.md-chip-select {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--md-color-border-control, #857991);
	border-radius: 20px;
	background: var(--md-color-bg-surface);
	color: var(--md-color-text-primary);
	font: 500 14px/15px var(--md-font-sans);
	text-decoration: none;
}

.md-chip-select.is-selected {
	background: var(--md-color-action-soft-bg);
	border-color: var(--md-color-border-action);
	color: var(--md-color-action-secondary-text);
}

.md-mgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.md-mgrid--home {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md-materials--live::after {
	content: none !important;
}

.md-mcard {
	display: flex;
	flex-direction: column;
	min-height: 374px;
	justify-content: space-between;
}

.md-mcard__media {
	display: block;
	border-radius: 20px;
	overflow: hidden;
	height: 176px;
	background: var(--md-color-action-soft-bg);
}

.md-mcard__media img,
.md-mcard__placeholder {
	display: block;
	width: 100%;
	height: 176px;
	object-fit: cover;
}

.md-mcard__placeholder {
	background: linear-gradient(135deg, var(--md-color-action-soft-bg), var(--md-color-bg-section-warm, #f5efe8));
}

.md-mcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: 12px;
	min-width: 0;
}

.md-mcard__meta {
	margin: 0 0 8px;
	color: var(--md-color-text-secondary);
	font: 400 12px/18px var(--md-font-sans);
}

.md-mcard__title {
	margin: 0 0 8px;
	font: 600 18px/26px var(--md-font-sans);
}

.md-mcard__title a {
	color: inherit;
	text-decoration: none;
}

.md-mcard__excerpt {
	margin: 0 0 12px;
	color: var(--md-color-text-secondary);
	font: 400 14px/22px var(--md-font-sans);
}

.md-mcard__read {
	margin-top: auto;
	align-self: flex-start;
	color: var(--md-color-action-secondary-text);
	font: 600 14px/20px var(--md-font-sans);
	text-decoration: none;
}

.md-button--soft {
	background: var(--md-color-action-soft-bg);
	color: var(--md-color-action-soft-text, #5a4b7a);
	border: 0;
	font: 600 12px/16px var(--md-font-sans);
	min-height: 44px;
	padding: 0 20px;
}

.md-page__more {
	margin-top: 16px;
}

.md-crumbs {
	margin: 0 0 16px;
	font: 400 13px/18px var(--md-font-sans);
	color: var(--md-color-text-secondary);
}

.md-crumbs a {
	color: inherit;
	text-decoration: none;
}

.md-article {
	max-width: 760px;
}

.md-article .md-eyebrow {
	margin: 0 0 10px;
}

.md-article__body {
	margin-top: 48px;
	font: 400 16px/26px var(--md-font-sans);
	color: var(--md-color-text-primary);
}

.md-article__body h2 {
	margin: 32px 0 10px;
	font: 400 22px/27px var(--md-font-serif);
}

.md-article__body h3 {
	margin: 28px 0 10px;
	font: 400 20px/26px var(--md-font-serif);
}

.md-article__body p,
.md-article__body ul,
.md-article__body ol {
	margin: 0 0 12px;
}

.md-article__body ul,
.md-article__body ol {
	padding-left: 1.25em;
}

.md-notice--soft {
	box-sizing: border-box;
	width: 100%;
	max-width: 760px;
	margin: 32px 0 0;
	padding: 16px 20px;
	border-radius: 16px;
	background: var(--md-color-action-soft-bg);
}

.md-notice--soft .md-notice__title {
	margin: 0 0 4px;
	font: 700 14px/20px var(--md-font-sans);
	color: var(--md-color-text-primary);
}

.md-notice--soft .md-notice__text {
	margin: 0;
	font: 400 16px/24px var(--md-font-sans);
	color: var(--md-color-text-primary);
}

.md-article__cta {
	margin: 16px 0 0;
}

.md-article__related {
	margin-top: 56px;
	max-width: 1200px;
}

/* Info cards — Про сервіс / Допомога */
.md-icards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 18px 0 0;
}

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

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

.md-icard {
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid var(--md-color-border-subtle, #eee8e3);
	border-radius: 20px;
	background: var(--md-color-bg-surface);
}

.md-icard__num {
	margin: 0 0 8px;
	font: 700 11px/16px var(--md-font-sans);
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--md-color-action-secondary-text);
}

.md-icard__title {
	margin: 0 0 8px;
	font: 400 22px/27px var(--md-font-serif);
	color: var(--md-color-text-primary);
}

.md-icard__text {
	margin: 0;
	font: 400 16px/26px var(--md-font-sans);
	color: var(--md-color-text-secondary);
}

.md-icard a {
	color: inherit;
	text-decoration: none;
}

.md-faq {
	max-width: 800px;
	margin: 18px 0 0;
}

.md-faq__item {
	border-bottom: 1px solid var(--md-color-border-subtle, #eee8e3);
	padding: 18px 0;
}

.md-faq__item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font: 600 17px/22px var(--md-font-sans);
	color: var(--md-color-text-primary);
}

.md-faq__item summary::-webkit-details-marker {
	display: none;
}

.md-faq__item summary::after {
	content: "+";
	flex: 0 0 auto;
	font: 700 14px/20px var(--md-font-sans);
	color: var(--md-color-action-secondary-text);
}

.md-faq__item[open] summary::after {
	content: "−";
}

.md-faq__item p {
	margin: 12px 0 0;
	font: 400 16px/26px var(--md-font-sans);
	color: var(--md-color-text-secondary);
}

.md-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Contacts (Figma 606:702) */
.md-contacts-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 760px;
	margin: 0 0 16px;
}

.md-contacts-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.md-contacts-form .md-field__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2367616f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

.md-contacts-form .md-field__area {
	height: 140px;
	min-height: 140px;
	padding: 14px 16px;
	resize: vertical;
	line-height: 21px;
}

.md-contacts-form__under {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	min-height: 18px;
}

.md-contacts-form__actions {
	display: flex;
	align-items: center;
}

.md-contacts-form__actions .md-button {
	min-width: 236px;
	min-height: 48px;
}

.md-contacts-form__legal {
	margin: 0;
	font: 400 13px/18px var(--md-font-sans);
	color: var(--md-color-text-secondary);
}

.md-contacts-form__legal a {
	color: inherit;
	text-decoration: underline;
}

.md-contacts__flash {
	max-width: 760px;
	margin: 0 0 32px;
}

.md-contacts__flash--error {
	border-color: var(--md-color-feedback-error, #b3261e);
}

.md-contacts-req .md-page-section__title {
	margin-top: 40px;
}

.md-detail-rows {
	max-width: 800px;
}

.md-detail-row {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--md-color-border-subtle, #eee8e3);
}

.md-detail-row__label {
	margin: 0;
	flex: 0 0 200px;
	width: 200px;
	font: 400 13px/18px var(--md-font-sans);
	color: var(--md-color-text-secondary);
}

.md-detail-row__value {
	flex: 1 1 auto;
	min-width: 0;
}

.md-detail-row__primary {
	margin: 0;
	font: 600 15px/19px var(--md-font-sans);
	color: var(--md-color-text-primary);
}

.md-detail-row__secondary {
	margin: 2px 0 0;
	font: 400 13px/18px var(--md-font-sans);
	color: var(--md-color-text-secondary);
}

@media (max-width: 767px) {
	.md-detail-row {
		flex-direction: column;
		gap: 6px;
	}

	.md-detail-row__label {
		flex: none;
		width: auto;
	}

	.md-contacts-form__actions .md-button {
		width: 100%;
		min-width: 0;
	}
}

.md-help-search {
	max-width: 760px;
	margin: 0 0 24px;
}

.md-help-search label {
	display: block;
	margin: 0 0 8px;
	font: 600 14px/20px var(--md-font-sans);
}

.md-help-search input[type="search"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--md-color-border-control, #857991);
	border-radius: var(--md-radius-12, 12px);
	background: var(--md-color-bg-surface);
	font: 400 14px/21px var(--md-font-sans);
	color: var(--md-color-text-primary);
}

@media (max-width: 1023px) {
	.md-mgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.md-icards,
	.md-icards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.md-page {
		padding: 28px 0 48px;
	}

	.md-page-intro__title {
		font-size: 32px;
		line-height: 40px;
	}

	.md-page-intro__lead {
		font-size: 16px;
		line-height: 26px;
	}

	.md-page-section__title {
		font-size: 26px;
		line-height: 32px;
	}

	.md-mgrid,
	.md-icards,
	.md-icards--2,
	.md-icards--4 {
		grid-template-columns: 1fr;
	}

	.md-mcard {
		min-height: 0;
	}

	.md-article__body h2 {
		font-size: 18px;
		line-height: 24px;
	}

	.md-button--soft {
		width: 100%;
	}

	.md-page__actions .md-button {
		width: 100%;
	}
}

/* Info pages and Materials: same backdrop as the catalogs (lilac gradient into white), owner 19.10. */
.md-main:has(> .md-page) { position: relative; background: linear-gradient(180deg, #eee9f3 0, #f4f0f5 240px, var(--md-color-bg-surface) 460px); overflow-x: clip; }
.md-main:has(> .md-page)::before { content: ""; position: absolute; top: -150px; left: calc(50% + 350px); width: 400px; height: 400px; background: url("../images/catalog-orbit.svg") no-repeat center / contain; pointer-events: none; }
.md-main:has(> .md-page) > .md-page { position: relative; }
@media (max-width: 767px) { .md-main:has(> .md-page)::before { display: none; } }