@import url('../vars.css');

.mr-page {
	--mr-canvas: #f6f6f6;

	margin-bottom: var(--mb);
	color: var(--text);
	font-family: var(--desktop-body-font), sans-serif;
	font-size: var(--desktop-body-size);
	line-height: 1.45;
}

.mr-page *,
.mr-page *::before,
.mr-page *::after {
	box-sizing: border-box;
}

.mr-page a {
	color: var(--primary-brand-2);
}

.page-content .mr-page p,
.mr-page p {
	margin: 0;
	margin-bottom: 0;
}

/* ——— Headings vs extrastyles ——— */
.page-content .mr-page h2.mr-title,
.mr-page h2.mr-title,
.page-content .mr-page h3.mr-subtitle,
.mr-page h3.mr-subtitle {
	margin: 0;
	margin-bottom: 0;
	color: var(--text);
	font-family: var(--desktop-h2-font), serif;
	font-weight: 800;
	line-height: 1.1;
}

.page-content .mr-page h2.mr-title,
.mr-page h2.mr-title {
	font-size: var(--desktop-h2-size);
	line-height: normal;
}

.page-content .mr-page h3.mr-subtitle,
.mr-page h3.mr-subtitle {
	max-width: 1000px;
	font-size: var(--desktop-h3-size);
	line-height: var(--desktop-h3-line);
}

/* ——— Order ——— */
.mr-order {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	margin-bottom: var(--mb);
}

.mr-order__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 705px);
	gap: var(--spacing-5);
	align-items: start;
}

.mr-info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	min-width: 0;
	padding: var(--spacing-6) var(--spacing-8);
	border-radius: var(--radius-l);
	background: var(--mr-canvas);
	box-shadow: var(--drop-shadow-100);
}

.mr-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-5);
}

.mr-alert__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: var(--radius-xs);
	background: var(--primary-brand-1);
}

.mr-alert__icon img {
	display: block;
	width: 20px;
	height: 20px;
}

.mr-alert__text,
.mr-info__lead,
.mr-docs-box__intro,
.mr-docs-col__title {
	color: var(--text);
	font-size: var(--desktop-body-size);
	line-height: normal;
}

.mr-alert__text strong,
.mr-info__lead,
.mr-docs-box__intro,
.mr-docs-col__title {
	font-weight: 600;
}

.mr-docs-box {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	width: 100%;
	padding: var(--spacing-4);
	border-radius: var(--radius-m);
	background: var(--white);
	box-shadow: var(--drop-shadow-100);
}

.mr-docs-box__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-6);
}

.mr-docs-col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	min-width: 0;
}

.mr-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mr-list li {
	position: relative;
	padding-left: 14px;
	color: var(--text);
	font-size: var(--desktop-body-size);
	font-weight: 400;
	line-height: normal;
}

.mr-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--secondary-2);
}

/* ——— Samples / files ——— */
.mr-aside {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	min-width: 0;
}

.mr-samples {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--white);
	box-shadow: var(--drop-shadow-200);
}

.mr-samples__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	padding: var(--spacing-6) var(--spacing-8);
}

.page-content .mr-page p.mr-samples__title,
.mr-page .mr-samples__title {
	color: var(--text);
	font-family: var(--desktop-h5-font), sans-serif;
	font-size: var(--desktop-h5-size);
	font-weight: 700;
	line-height: normal;
}

.mr-samples__groups {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--spacing-5) 76px;
}

.mr-samples__group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.mr-samples__label {
	color: var(--text);
	font-size: var(--desktop-body-size);
	font-weight: 600;
	line-height: normal;
}

.mr-samples__photos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-5);
}

.mr-samples__photos img {
	display: block;
	flex: 0 0 160px;
	width: 160px;
	height: 222px;
	object-fit: cover;
	border-radius: 12px;
}

.mr-samples__note {
	padding: var(--spacing-3) var(--spacing-8);
	background: var(--primary-brand-1);
	color: var(--white);
	font-size: var(--desktop-body-size);
	font-weight: 600;
	line-height: normal;
}

/* ——— File list ——— */
.mr-files {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	padding: var(--spacing-4) var(--spacing-2);
	border: 1px solid var(--primary-brand-2);
	border-radius: var(--radius-m);
}

.mr-file {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
	padding: var(--spacing-2) var(--spacing-4);
	border-radius: var(--radius-xs);
	background: var(--white);
}

.mr-file__row {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-2);
}

.mr-file__icon {
	display: block;
	flex: 0 0 21px;
	width: 21px;
	height: 24px;
}

.page-content .mr-page a.mr-file__link,
.mr-page a.mr-file__link {
	min-width: 0;
	color: var(--primary-brand-2);
	font-size: var(--desktop-body-size);
	font-weight: 400;
	line-height: normal;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mr-file__meta {
	color: var(--gray-400);
	font-size: var(--desktop-subtitle-size);
	line-height: normal;
}

/* ——— Commissariat table ——— */
.mr-commissariat {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
}

.mr-table {
	overflow: hidden;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-l);
	background: var(--white);
	box-shadow: var(--drop-shadow-200);
}

.mr-table--mobile {
	display: none;
}

.mr-table--desktop .mr-table__row {
	display: grid;
	grid-template-columns: minmax(180px, 290px) repeat(3, minmax(0, 1fr));
}

.mr-table--desktop .mr-table__row--head {
	background: var(--gray-100);
}

.mr-table--desktop .mr-table__cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: var(--spacing-5);
	border-right: 1px solid var(--gray-200);
	border-bottom: 1px solid var(--gray-200);
	color: var(--text);
	font-size: var(--desktop-body-size);
	line-height: normal;
}

.mr-table--desktop .mr-table__row--head .mr-table__cell {
	align-items: center;
	justify-content: center;
	color: var(--gray-400);
	font-weight: 600;
	text-align: center;
}

.mr-table--desktop .mr-table__cell:last-child,
.mr-table--desktop .mr-table__cell--stub {
	border-right: 0;
}

.mr-table--desktop .mr-table__row:last-child .mr-table__cell {
	border-bottom: 0;
}

.mr-table--desktop .mr-table__cell--label {
	flex-direction: column;
	gap: var(--spacing-2);
	padding: var(--spacing-3) var(--spacing-2) var(--spacing-3) var(--spacing-5);
}

.mr-table--desktop .mr-table__cell--stub {
	background: var(--gray-100);
}

.mr-table__label {
	font-weight: 600;
	font-size: 20px;
	line-height: normal;
}

.mr-table--desktop .mr-table__cell p + p {
	margin-top: var(--spacing-1);
}

/* ——— Responsive ——— */
@media screen and (max-width: 1400px) {
	.mr-order__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
	}

	.mr-samples__groups {
		gap: var(--spacing-5);
	}
}

@media screen and (max-width: 1280px) {
	.page-content .mr-page h2.mr-title,
	.mr-page h2.mr-title {
		font-size: 36px;
	}

	.page-content .mr-page h3.mr-subtitle,
	.mr-page h3.mr-subtitle {
		font-size: 32px;
	}

	.mr-table--desktop .mr-table__row {
		grid-template-columns: minmax(160px, 220px) repeat(3, minmax(0, 1fr));
	}

	.mr-table--desktop .mr-table__cell {
		padding: var(--spacing-4);
	}

	.mr-table__label {
		font-size: 18px;
	}
}

@media screen and (max-width: 1024px) {
	.mr-order__grid {
		grid-template-columns: 1fr;
	}

	.mr-docs-box__cols {
		grid-template-columns: 1fr;
		gap: var(--spacing-4);
	}

	.mr-samples__photos img {
		flex-basis: 140px;
		width: 140px;
		height: 194px;
	}

	.mr-table--desktop {
		display: none;
	}

	.mr-table--mobile {
		display: flex;
		flex-direction: column;
		box-shadow: var(--drop-shadow-100);
		border-color: var(--gray-100);
	}

	.mr-table--mobile .mr-table__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.mr-table--mobile .mr-table__row--cat {
		grid-template-columns: 1fr;
		background: var(--mr-canvas);
	}

	.mr-table--mobile .mr-table__row--head {
		background: var(--gray-100);
		text-align: center;
	}

	.mr-table--mobile .mr-table__cell {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2);
		align-items: center;
		min-width: 0;
		padding: var(--spacing-3) var(--spacing-2);
		border-right: 1px solid var(--gray-200);
		color: var(--text);
		font-size: 12px;
		line-height: normal;
		text-align: left;
	}

	.mr-table--mobile .mr-table__row--head .mr-table__cell {
		text-align: center;
	}

	.mr-table--mobile .mr-table__cell:last-child {
		border-right: 0;
	}

	.mr-table--mobile .mr-table__row--cat .mr-table__cell {
		align-items: center;
		border-right: 0;
		font-weight: 700;
		text-align: center;
	}

	.mr-table--mobile .mr-table__label {
		font-size: 14px;
		font-weight: 700;
	}

	.mr-table--mobile .mr-table__hint {
		font-weight: 400;
	}
}

@media screen and (max-width: 768px) {
	.mr-order {
		gap: var(--spacing-3);
		margin-bottom: var(--spacing-8);
	}

	.page-content .mr-page h2.mr-title,
	.mr-page h2.mr-title,
	.page-content .mr-page h3.mr-subtitle,
	.mr-page h3.mr-subtitle {
		font-size: var(--mobile-h2-size);
		line-height: normal;
	}

	.mr-info {
		gap: var(--spacing-3);
		padding: var(--spacing-4);
		border-radius: var(--radius-m);
	}

	.mr-alert {
		flex-direction: column;
		gap: var(--spacing-2);
	}

	.mr-alert__icon {
		flex: 0 0 24px;
		width: 24px;
		height: 24px;
		border-radius: var(--radius-3-xs);
	}

	.mr-alert__icon img {
		width: 12px;
		height: 12px;
	}

	.mr-alert__text,
	.mr-info__lead,
	.mr-docs-box__intro,
	.mr-docs-col__title,
	.mr-list li,
	.mr-info p,
	.mr-samples__label,
	.mr-samples__note,
	.page-content .mr-page a.mr-file__link,
	.mr-page a.mr-file__link {
		font-size: 12px;
	}

	.mr-alert__text strong,
	.mr-info__lead,
	.mr-docs-box__intro,
	.mr-docs-col__title,
	.mr-samples__label,
	.mr-samples__note {
		font-weight: 700;
	}

	.mr-docs-box {
		padding: var(--spacing-3);
		border-radius: var(--radius-s);
	}

	.mr-docs-col {
		gap: var(--spacing-2);
	}

	.mr-list {
		gap: var(--spacing-2);
	}

	.mr-samples__body {
		gap: var(--spacing-3);
		padding: var(--spacing-4);
	}

	.page-content .mr-page p.mr-samples__title,
	.mr-page .mr-samples__title {
		font-size: 14px;
	}

	.mr-samples__groups {
		flex-direction: column;
		gap: var(--spacing-3);
	}

	.mr-samples__group {
		width: 100%;
	}

	.mr-samples__photos {
		width: 100%;
		gap: var(--spacing-2);
	}

	.mr-samples__photos img {
		flex: 0 0 140px;
		width: 140px;
		max-width: 140px;
		height: 194px;
		border-radius: 10px;
	}

	.mr-samples__note {
		padding: var(--spacing-2) var(--spacing-4);
	}

	.mr-file__meta {
		font-size: 8px;
	}

	.mr-commissariat {
		gap: var(--spacing-3);
	}
}

@media screen and (max-width: 480px) {
	.mr-samples__photos img {
		height: 180px;
	}
}

@media screen and (max-width: 360px) {
	.mr-info,
	.mr-samples__body,
	.mr-samples__note {
		padding-left: 14px;
		padding-right: 14px;
	}

	.mr-table--mobile .mr-table__cell {
		padding: 8px;
	}
}