/*
 * Страница тура: программа шагами, «что входит», цены и частые вопросы.
 * Hero, справка и широкий кадр с цитатой оформлены в main.css и не меняются.
 */

/* ============================================================
   1. Программа
   ============================================================ */

.st-program { padding-bottom: calc(var(--index) * 5); }

.st-program__body { position: relative; }

.st-steps { border-top: 1px solid var(--line); }

.st-step {
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0);
	transition: background .5s ease;
}
.st-step[open] { background: rgba(255, 255, 255, .72); }

.st-step__head {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) 44px;
	align-items: center;
	gap: calc(var(--index) * 1.2);
	padding: calc(var(--index) * 1.5) calc(var(--index) * 1.4);
	cursor: pointer;
	list-style: none;
	transition: padding .45s var(--ease);
}
.st-step__head::-webkit-details-marker { display: none; }
.st-step__head:hover { padding-left: calc(var(--index) * 1.9); }

/* Номер шага — крупно и тонко, он же метка на рельсе слева. */
.st-step__no {
	font-size: calc(var(--index) * 1.6);
	font-weight: 200; line-height: 1;
	color: rgba(15, 44, 63, .22);
	transition: color .45s ease;
}
.st-step[open] .st-step__no,
.st-step__head:hover .st-step__no { color: var(--sun); }

.st-step__name {
	font-size: calc(var(--index) * .96);
	font-weight: 300; letter-spacing: .1em; text-transform: uppercase;
	line-height: 1.35;
}

/* Плюс, который на раскрытом шаге становится минусом. */
.st-step__mark {
	position: relative;
	width: 34px; height: 34px;
	border: 1px solid var(--line);
	border-radius: 999px;
	justify-self: end;
	transition: border-color .4s ease, transform .5s var(--ease);
}
.st-step__mark::before,
.st-step__mark::after {
	content: '';
	position: absolute; left: 50%; top: 50%;
	background: var(--deep);
	transition: transform .45s var(--ease), background .4s ease;
}
.st-step__mark::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.st-step__mark::after { width: 1px; height: 11px; transform: translate(-50%, -50%); }
.st-step[open] .st-step__mark { border-color: rgba(232, 145, 47, .55); transform: rotate(180deg); }
.st-step[open] .st-step__mark::after { transform: translate(-50%, -50%) scaleY(0); }
.st-step[open] .st-step__mark::before,
.st-step__head:hover .st-step__mark::before,
.st-step__head:hover .st-step__mark::after { background: var(--sun); }

.st-step__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	gap: calc(var(--index) * 2.4);
	align-items: start;
	padding: 0 calc(var(--index) * 1.4) calc(var(--index) * 2) calc(var(--index) * 1.4);
	animation: st-step-open .55s var(--ease) both;
}
@keyframes st-step-open {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}
.st-step__text { padding-left: calc(92px + var(--index) * 1.2); }
.st-step__panel p { max-width: 52ch; font-size: calc(var(--index) * .78); }

/* Где мы в дне: короткая подпись и полоска — иначе слева зияла пустота. */
.st-step__count {
	margin-top: calc(var(--index) * 1.6);
	font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--muted-2);
}
.st-step__bar {
	display: block;
	height: 1px;
	margin-top: 12px;
	max-width: 260px;
	background: var(--line);
}
.st-step__bar i { display: block; height: 100%; background: var(--sun); }

.st-step__shot {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* Такое же паспарту, как у кадров галереи: снимок должен читаться
	   отпечатком, а не куском фона. */
	border: 8px solid #FFF;
	box-shadow:
		0 2px 6px rgba(15, 44, 63, .1),
		0 18px 42px rgba(15, 44, 63, .16);
}
.st-step__shot img { transition: transform 1.2s var(--ease); }
.st-step:hover .st-step__shot img { transform: scale(1.05); }

@media (max-width: 900px) {
	.st-step__head { grid-template-columns: 56px minmax(0, 1fr) 34px; gap: calc(var(--index) * .9); padding-inline: calc(var(--index) * .8); }
	.st-step__no { font-size: calc(var(--index) * 1.2); }
	.st-step__panel { grid-template-columns: 1fr; padding-inline: calc(var(--index) * .8); }
	.st-step__text { padding-left: 0; }
	.st-step__shot { border-width: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.st-step__panel { animation: none; }
}

/* ============================================================
   2. Что входит и что нет
   ============================================================ */

.st-deal {
	position: relative; z-index: 10;
	padding: calc(var(--index) * 2) var(--pad) calc(var(--index) * 5);
}

.st-deal__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.st-deal__col { background: rgba(255, 255, 255, .82); padding: calc(var(--index) * 1.8); }

.st-deal__title {
	display: flex; align-items: center; gap: 12px;
	font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
	padding-bottom: calc(var(--index) * 1.2);
	border-bottom: 1px solid var(--line);
}
.st-deal__title i {
	font-style: normal; margin-left: auto;
	font-size: 10px; color: var(--muted-2); letter-spacing: .1em;
}
.st-deal__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	border: 1px solid currentColor;
	font-size: 13px; line-height: 1;
}
.st-deal__col--in .st-deal__title { color: var(--sun-ink); }
.st-deal__col--out .st-deal__title { color: rgba(15, 44, 63, .5); }

.st-deal__list { list-style: none; margin: 0; padding: 0; }
.st-deal__list li {
	padding: calc(var(--index) * 1.15) 0;
	border-bottom: 1px solid var(--line-soft);
}
.st-deal__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.st-deal__list strong {
	display: block;
	font-size: calc(var(--index) * .8);
	font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
	line-height: 1.35;
}
.st-deal__list span {
	display: block; margin-top: 9px;
	font-size: 13.5px; line-height: 1.75; font-weight: 300;
	color: var(--muted);
}
.st-deal__col--out .st-deal__list strong { color: rgba(15, 44, 63, .72); }

/*
 * Что взять — строкой чипов внутри правой колонки: «не входит» короче
 * «входит», и без этого блока справа зияла пустота в половину экрана.
 */
.st-pack {
	margin-top: calc(var(--index) * 2);
	padding-top: calc(var(--index) * 1.6);
	border-top: 1px solid var(--line);
}
.st-pack__title {
	font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--muted-2);
	margin-bottom: calc(var(--index) * 1.1);
}
.st-pack__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.st-pack__list li {
	border: 1px solid var(--line);
	padding: 8px 14px;
	font-size: 12px; font-weight: 300;
	color: rgba(15, 44, 63, .78);
	transition: border-color .35s ease, color .35s ease;
}
.st-pack__list li:hover { border-color: rgba(232, 145, 47, .45); color: var(--deep); }

@media (max-width: 820px) {
	.st-deal__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   3. Цена и вопросы
   ============================================================ */

/* Дети бесплатно — строка под прайсом: этот вопрос задают чаще всего. */
.st-price__kids {
	margin-top: calc(var(--index) * 1.2);
	padding-top: calc(var(--index) * 1.2);
	border-top: 1px solid var(--line);
	font-size: calc(var(--index) * .82);
	font-weight: 300;
	color: var(--sun-ink);
}

.st-price__row {
	transition: background .35s ease;
	padding-inline: calc(var(--index) * .8);
	margin-inline: calc(var(--index) * -.8);
}
.st-price__row:hover { background: rgba(232, 145, 47, .06); }
.st-price__who { position: relative; padding-left: 22px; }
.st-price__who::before {
	content: '';
	position: absolute; left: 0; top: .55em;
	width: 8px; height: 1px; background: var(--sun);
}

.st-faq details {
	transition: border-color .4s ease;
}
.st-faq details[open] { border-top-color: rgba(232, 145, 47, .45); }
.st-faq summary { padding: calc(var(--index) * .4) 0; }
.st-faq summary:hover { color: var(--azure); }

/* ============================================================
   4. Похожие туры
   ============================================================ */

.st-journal .st-tour--rich {
	background: #FFF;
	box-shadow: var(--shade-1);
	transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.st-journal .st-tour--rich:hover {
	box-shadow: var(--shade-2);
	transform: translateY(-4px);
}

/* ============================================================
   5. Рассказ о маршруте
   ============================================================ */

/*
 * Три колонки: содержание, текст и карточка. Одна колонка текста посреди
 * пустого экрана выглядела бедно, а разгонять строку до полутора тысяч
 * пикселей нельзя — её невозможно читать.
 */
.st-story {
	position: relative; z-index: 10;
	padding: calc(var(--index) * 4) var(--pad) calc(var(--index) * 5);
}
.st-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 320px);
	gap: calc(var(--index) * 3);
	align-items: start;
}

.st-story__toc { position: sticky; top: 120px; }
.st-story__toc ol {
	list-style: none;
	margin: calc(var(--index) * 1.2) 0 0;
	padding: 0 0 0 18px;
	display: grid; gap: 14px;
	border-left: 1px solid var(--line);
	counter-reset: st-toc;
}
.st-story__toc a {
	font-size: 13px; line-height: 1.5; font-weight: 300;
	color: var(--muted);
	transition: color .35s ease;
}
.st-story__toc a::before {
	counter-increment: st-toc;
	content: counter(st-toc) ' · ';
	color: var(--sun-ink);
}
.st-story__toc a:hover { color: var(--deep); }

.st-story__body { max-width: 64ch; margin: 0; }
.st-story__body > h2:first-child { margin-top: 0; }

.st-story__aside { position: sticky; top: 120px; }
.st-story__card {
	background: #FFF;
	border: 1px solid var(--line);
	border-top: 2px solid var(--sun);
	box-shadow: var(--shade-2);
	padding: calc(var(--index) * 1.5);
	display: grid;
}
.st-story__shot {
	display: block; aspect-ratio: 4 / 3; overflow: hidden;
	margin: calc(var(--index) * -1.5) calc(var(--index) * -1.5) calc(var(--index) * 1.3);
}
.st-story__lead {
	font-size: 14px; line-height: 1.75; font-weight: 300; color: var(--muted);
}
.st-story__kicker {
	font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--azure);
	margin-bottom: calc(var(--index) * .8);
}
.st-story__cta { margin-top: calc(var(--index) * 1.4); }
.st-story__phone {
	margin-top: calc(var(--index) * 1);
	text-align: center;
	font-size: 12px; letter-spacing: .18em; color: var(--muted);
}
.st-story__phone:hover { color: var(--azure); }

@media (max-width: 1200px) {
	.st-story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
	.st-story__toc { display: none; }
}
@media (max-width: 900px) {
	.st-story__grid { grid-template-columns: 1fr; }
	.st-story__aside { position: static; }
	.st-story__body { max-width: none; }
}

/* ============================================================
   6. Условия брони
   ============================================================ */

.st-terms {
	position: relative; z-index: 10;
	padding: 0 var(--pad) calc(var(--index) * 4);
}
.st-terms__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.st-terms__item {
	background: rgba(255, 255, 255, .82);
	padding: calc(var(--index) * 1.7);
}
.st-terms__item h3 {
	font-size: 11px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
	color: var(--azure);
	padding-bottom: calc(var(--index) * 1.1);
	margin-bottom: calc(var(--index) * 1.1);
	border-bottom: 1px solid var(--line);
}
.st-terms__item p { max-width: 42ch; }

/* Бесплатные дети — заметная строка, её спрашивают чаще прочего. */
.st-terms__item--kids { background: rgba(255, 255, 255, .95); }
.st-terms__item--kids h3 { color: var(--sun-ink); }
.st-terms__item--kids p { font-size: calc(var(--index) * .84); color: var(--deep); }

.st-terms__meals { list-style: none; margin: 0; padding: 0; }
.st-terms__meals li {
	padding: calc(var(--index) * .9) 0;
	border-bottom: 1px solid var(--line-soft);
}
.st-terms__meals li:last-child { border-bottom: 0; padding-bottom: 0; }
.st-terms__meals b {
	display: block;
	font-size: calc(var(--index) * .78);
	font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
}
.st-terms__meals span {
	display: block; margin-top: 7px;
	font-size: 13.5px; line-height: 1.7; font-weight: 300; color: var(--muted);
}