/* Страница «Услуги»: верх как у «Контактов», ниже таблица в сетке с крестиками —
	слева закреплённый список услуг, справа карточки: фото в уголках видоискателя,
	описание с кнопками, справа от него таблица вагонов или вопросы по услуге */
.spage-hero__lead {
	max-width: 30em;
	font-size: var(--fs-lead);
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--text-muted-dark);
}

.spage {
	--line: var(--grid-line);
	--cross: var(--grid-cross);
	--pad: clamp(20px, 2.4vw, 32px);
	padding: var(--space-xl) var(--gutter) var(--space-2xl);
	background: var(--bg-light);
	color: var(--text-on-light);
}

.spage__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr);
	max-width: var(--container);
	margin: 0 auto;
	border: 1px solid var(--line); /* taste-skill-ignore: сетка — фирменный приём */
}

/* Крестики по углам таблицы и на стыке колонок */
.spage__grid::before,
.spage__grid::after,
.spage__toc::before,
.spage__toc::after,
.spage__item::before {
	content: "";
	position: absolute;
	z-index: 2;
	width: 11px;
	height: 11px;
	background:
		linear-gradient(var(--cross), var(--cross)) center / 1px 100% no-repeat, /* taste-skill-ignore: крестик сетки */
		linear-gradient(var(--cross), var(--cross)) center / 100% 1px no-repeat; /* taste-skill-ignore: крестик из двух линий */
	pointer-events: none;
}

.spage__grid::before { left: -6px; top: -6px; }
.spage__grid::after { right: -6px; bottom: -6px; }
.spage__toc::before { right: -6px; top: -6px; }
.spage__toc::after { right: -6px; bottom: -6px; }

/* ---------- Список слева ---------- */
.spage__toc {
	position: relative;
	border-right: 1px solid var(--line); /* taste-skill-ignore: граница колонки */
}

.spage__toc ul {
	position: sticky;
	top: calc(var(--header-top) + var(--header-h) + 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.spage__toc li + li {
	border-top: 1px solid var(--line); /* taste-skill-ignore: линии строк */
}

.spage__toc li:last-child {
	border-bottom: 1px solid var(--line); /* taste-skill-ignore */
}

.spage__toc-link {
	--vf: 8px;
	display: block;
	padding: 16px var(--pad);
	font-size: 16px;
	line-height: 1.35;
	color: var(--text-muted-ink);
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.spage__toc-link:hover {
	background: var(--c-graphite-06);
	color: var(--text-on-light);
}

/* услуга на экране — уголки видоискателя */
.spage__toc-link.is-active {
	color: var(--text-on-light);
}

.spage__toc-link.is-active::before {
	inset: 4px;
}

/* ---------- Карточка услуги ---------- */
.spage__list {
	min-width: 0;
}

.spage__item {
	position: relative;
	scroll-margin-top: calc(var(--header-top) + var(--header-h) + 16px);
}

.spage__item + .spage__item {
	border-top: 1px solid var(--line); /* taste-skill-ignore: линии между услугами */
}

/* крестик на стыке линии между услугами и колонки списка */
.spage__item + .spage__item::before { left: -6px; top: -6px; }
.spage__item:first-child::before { display: none; }

.spage__media {
	--vf: 16px;
	--vf-color: var(--accent);
	aspect-ratio: 21 / 8;
	margin: 0;
	overflow: hidden;
	background: var(--c-black);
}

.spage__media::before {
	z-index: 1;
	inset: 12px;
	opacity: 1;
	scale: 1;
}

.spage__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 1.2s var(--ease-out);
}

.spage__item:hover .spage__media img {
	scale: 1.03;
}

.spage__body {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	border-top: 1px solid var(--line); /* taste-skill-ignore: линия под фото */
}

.spage__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	padding: var(--pad);
}

.spage__name {
	font-size: var(--fs-h3);
	font-weight: var(--fw-regular);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.spage__text {
	max-width: 34em;
	font-size: 18px;
	line-height: 1.5;
}

.spage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: var(--space-s);
}

.spage__actions .btn {
	min-height: 52px;
	font-size: 12px;
}

.spage__side {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--line); /* taste-skill-ignore: граница колонки */
}

/* Таблица вагонов / контактов */
.spage__table {
	margin: 0;
}

.spage__table div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 16px;
	min-height: 56px;
	padding: 16px var(--pad);
	border-bottom: 1px solid var(--line); /* taste-skill-ignore: линии таблицы */
}

.spage__table dt {
	font-size: 17px;
}

.spage__table dd {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0;
	color: var(--text-muted-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.spage__table dd .label {
	color: var(--accent-ink);
}

.spage__table--contacts dt {
	color: var(--text-muted-ink);
	font-family: var(--font-mono); /* taste-skill-ignore: подписи как в таблицах сайта */
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.spage__table--contacts dd {
	color: var(--text-on-light);
	font-size: 17px;
}

.spage__table--contacts a:hover {
	color: var(--accent-ink);
}

.spage__table div:last-child,
.spage__faq:last-child {
	border-bottom: 0;
}

/* Вопросы по услуге — строки с плюсом */
.spage__faq {
	border-bottom: 1px solid var(--line); /* taste-skill-ignore: линии списка */
}

.spage__table + .spage__faq {
	border-top: 1px solid var(--line); /* taste-skill-ignore */
}

.spage__faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 14px var(--pad);
	font-size: 17px;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
	transition: background-color var(--dur-fast) var(--ease-out);
}

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

.spage__faq summary:hover {
	background: var(--c-graphite-06);
}

.spage__faq summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.spage__plus {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
}

.spage__plus::before,
.spage__plus::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1.5px;
	background: var(--accent);
	translate: 0 -50%;
	transition: rotate var(--dur-base) var(--ease-out);
}

.spage__plus::after { rotate: 90deg; }
.spage__faq[open] .spage__plus::after { rotate: 0deg; }

.spage__faq p {
	max-width: 40em;
	padding: 0 var(--pad) 18px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-muted-ink);
}

/* у формы заявки ниже — отступ перед подвалом, как на «Контактах» */
.spage + .contact {
	padding-bottom: var(--space-2xl);
}

@media (max-width: 1100px) {
	.spage__body { grid-template-columns: 1fr; }
	.spage__side { border-left: 0; border-top: 1px solid var(--line); /* taste-skill-ignore */ }
}

@media (max-width: 900px) {
	.spage__grid { grid-template-columns: 1fr; }
	.spage__toc { display: none; }
	.spage__media { aspect-ratio: 16 / 9; }
	.spage__item + .spage__item::before { display: none; }
}

@media (max-width: 640px) {
	.spage__table div { grid-template-columns: 1fr; gap: 4px; }
	.spage__actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.spage__media img { transition: none; }
	.spage__item:hover .spage__media img { scale: 1; }
}