/*
 * Оформление длинных страниц: статья дневника и каталог направлений.
 * Вынесено из main.css, чтобы не раздувать основной файл.
 */

/* ============================================================
   1. Статья
   ============================================================ */

.st-post__hero {
	position: relative;
	min-height: 72vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.st-post__hero-bg { position: absolute; inset: 0; }
.st-post__hero-bg::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(15, 44, 63, .32) 0%,
		rgba(15, 44, 63, .18) 16%,
		rgba(15, 44, 63, .07) 30%,
		rgba(196, 219, 239, .34) 46%,
		rgba(214, 232, 246, .66) 58%,
		rgba(230, 241, 250, .9) 72%,
		var(--sky) 100%);
}
.st-post__hero-inner {
	position: relative;
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	padding: calc(var(--index) * 9) var(--pad) calc(var(--index) * 3);
}

.st-post__cat {
	display: inline-block;
	font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
	color: var(--sun-ink);
	border: 1px solid rgba(232, 145, 47, .4);
	padding: 8px 16px;
}
.st-post__cat:hover { background: var(--sun); color: var(--deep); }

.st-post__title {
	margin-top: calc(var(--index) * 1.4);
	font-size: calc(var(--index) * 2);
	font-weight: 200;
	line-height: 1.08;
	letter-spacing: calc(var(--index) / 16);
	max-width: 20ch;
}
.st-post__standfirst {
	margin-top: calc(var(--index) * 1.4);
	max-width: 54ch;
	font-size: calc(var(--index) * .88);
	line-height: 1.7;
	font-weight: 300;
	color: rgba(15, 44, 63, .78);
}
.st-post__meta {
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	margin-top: calc(var(--index) * 2);
	font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
	color: var(--muted-2);
}
.st-post__meta span + span::before { content: '· '; }

/* ---- сетка: оглавление + текст ---- */

.st-post__grid {
	display: grid;
	grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
	gap: calc(var(--index) * 3.4);
	max-width: 1180px;
	margin: 0 auto;
	padding: calc(var(--index) * 4) var(--pad) calc(var(--index) * 3);
	align-items: start;
}
.st-post__grid > .st-post__body:only-child { grid-column: 1 / -1; max-width: 68ch; margin: 0 auto; }

.st-post__aside { position: sticky; top: 110px; }
.st-post__toc ol {
	list-style: none;
	margin: 16px 0 0;
	padding: 0 0 0 18px;
	border-left: 1px solid var(--line);
	display: grid; gap: 12px;
	counter-reset: toc;
}
.st-post__toc a {
	font-size: 13.5px; font-weight: 300; line-height: 1.5;
	color: rgba(15, 44, 63, .6);
}
.st-post__toc a::before {
	counter-increment: toc;
	content: counter(toc, decimal-leading-zero) '  ';
	color: var(--sun-ink);
	font-size: 11px;
	letter-spacing: .1em;
}
.st-post__toc a:hover { color: var(--deep); }

.st-post__side-tour {
	display: block;
	margin-top: calc(var(--index) * 2.4);
	border: 1px solid var(--line);
	padding: 16px;
	transition: border-color .4s ease;
}
.st-post__side-tour:hover { border-color: rgba(232, 145, 47, .5); }
.st-post__side-tour img {
	width: 100%; height: 130px; object-fit: cover;
	margin: 12px 0 12px;
}
.st-post__side-tour strong {
	display: block;
	font-size: 14px; font-weight: 400;
	letter-spacing: .1em; text-transform: uppercase;
	line-height: 1.35;
}
.st-post__side-tour em {
	display: block; margin-top: 8px; font-style: normal;
	font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
	color: var(--muted-2);
}

/* ---- сам текст ---- */

.st-post__body { min-width: 0; }
.st-post__intro .st-article__body,
.st-post__intro { font-size: 18px; }
.st-post__intro p:first-child::first-letter {
	float: left;
	font-size: 4.1em;
	line-height: .82;
	padding: 6px 14px 0 0;
	color: var(--sun-ink);
	font-weight: 200;
}

.st-post__part { padding-top: calc(var(--index) * 2.6); }
.st-post__h2 {
	display: flex; align-items: baseline; gap: 18px;
	font-size: calc(var(--index) * 1.12);
	font-weight: 300;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.3;
	padding-bottom: calc(var(--index) * .9);
	border-bottom: 1px solid var(--line);
	margin-bottom: calc(var(--index) * 1.2);
}
.st-post__h2-num {
	font-size: 12px; letter-spacing: .2em; color: var(--sun-ink);
	flex: 0 0 auto;
}
.st-post__part .st-article__body { max-width: 68ch; }
.st-post__part .st-article__body h2 { display: none; }

.st-post__foot {
	margin-top: calc(var(--index) * 3.4);
	padding-top: calc(var(--index) * 1.6);
	border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; gap: calc(var(--index) * 1.6);
	justify-content: space-between; align-items: center;
}
.st-post__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.st-post__tags a {
	font-size: 11px; letter-spacing: .12em;
	color: var(--muted-2);
}
.st-post__tags a:hover { color: var(--azure); }
.st-post__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.st-post__share a {
	font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
	color: rgba(15, 44, 63, .6);
	border-bottom: 1px solid transparent;
	padding-bottom: 3px;
}
.st-post__share a:hover { color: var(--sun-ink); border-bottom-color: var(--sun-ink); }

/* ---- призыв в конце статьи ---- */

.st-post__cta { position: relative; padding: calc(var(--index) * 6) var(--pad); text-align: center; overflow: hidden; }
.st-post__cta-bg { position: absolute; inset: 0; opacity: .3; }
.st-post__cta-veil {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		var(--sky) 0%,
		rgba(226, 239, 250, .92) 18%,
		rgba(215, 232, 245, .84) 50%,
		rgba(226, 239, 250, .92) 82%,
		var(--sky) 100%);
}
.st-post__cta-inner { position: relative; max-width: 900px; margin: 0 auto; }
.st-post__cta-facts {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: calc(var(--index) * 1.2) calc(var(--index) * 3);
	margin-top: calc(var(--index) * 2.2);
}
.st-post__cta-facts dt { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted-2); }
.st-post__cta-facts dd { margin: 8px 0 0; font-size: calc(var(--index) * .92); font-weight: 300; }

/* ---- предыдущая / следующая ---- */

.st-post__nav {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px; background: var(--line);
	border-top: 1px solid var(--line);
}
.st-post__nav-item {
	background: var(--sky);
	display: flex; align-items: center; gap: calc(var(--index) * 1.2);
	padding: calc(var(--index) * 1.6) var(--pad);
	transition: background .5s ease;
}
.st-post__nav-item:hover { background: var(--sky-3); }
.st-post__nav-item--next { flex-direction: row-reverse; text-align: right; }
.st-post__nav-item .st-cover-wrap {
	flex: 0 0 auto; width: 92px; height: 92px; overflow: hidden;
}
.st-post__nav-item img { width: 100%; height: 100%; object-fit: cover; }
.st-post__nav-text em {
	display: block; font-style: normal;
	font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--sun-ink);
}
.st-post__nav-text strong {
	display: block; margin-top: 10px;
	font-size: calc(var(--index) * .86); font-weight: 300; line-height: 1.4;
}

@media (max-width: 1000px) {
	.st-post__grid { grid-template-columns: 1fr; }
	.st-post__aside { position: static; }
	.st-post__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.st-post__hero { min-height: 62vh; }
	.st-post__title { font-size: calc(var(--index) * 1.7); max-width: none; }
	.st-post__toc ol { grid-template-columns: 1fr; }
	.st-post__nav { grid-template-columns: 1fr; }
	.st-post__nav-item--next { flex-direction: row; text-align: left; }
	.st-post__intro p:first-child::first-letter { font-size: 3.2em; }
}

/* ============================================================
   2. Каталог
   ============================================================ */

.st-chip i {
	font-style: normal;
	margin-left: 8px;
	opacity: .55;
	font-size: 9px;
}

.st-tours--rich { gap: calc(var(--index) * 2); }

.st-tour--rich {
	background: #FFF;
	border: 1px solid var(--line);
	box-shadow: var(--shade-1);
	padding: 0 0 calc(var(--index) * 1.6);
	display: flex; flex-direction: column;
	transition: border-color .5s ease, transform .5s var(--ease), box-shadow .5s ease;
}
.st-tour--rich:hover {
	border-color: rgba(232, 145, 47, .45);
	transform: translateY(-4px);
	box-shadow: var(--shade-2);
}

/* Длинное название и цена в одну строку не помещаются — ставим их столбиком. */
.st-tour--rich .st-tour__row { flex-direction: column; align-items: flex-start; gap: 8px; }
.st-tour--rich .st-tour__shot { aspect-ratio: 16 / 11; }
.st-tour--rich .st-tour__row,
.st-tour--rich > p,
.st-tour--rich .st-tour__facts,
.st-tour--rich .st-tour__more { padding: 0 calc(var(--index) * 1.4); }
.st-tour--rich .st-tour__row { margin-top: calc(var(--index) * 1.3); }
.st-tour--rich > p { flex: 1 1 auto; }

.st-tour__season {
	position: absolute; left: 0; top: 0; z-index: 2;
	background: rgba(255, 255, 255, .92);
	box-shadow: var(--shade-1);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 9px 14px;
	font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
	color: rgba(15, 44, 63, .6);
}
.st-tour__season.is-on { color: var(--sun-ink); border-color: rgba(232, 145, 47, .45); }

.st-tour.is-off-season .st-tour__shot img { filter: saturate(.5) brightness(1.04); }

.st-tour__facts {
	display: flex; flex-wrap: wrap; gap: 12px calc(var(--index) * 1.3);
	margin-top: calc(var(--index) * 1.2);
	padding-top: calc(var(--index) * 1.1);
	border-top: 1px solid var(--line-soft);
}
.st-tour__facts dt { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-2); }
.st-tour__facts dd { margin: 5px 0 0; font-size: 13px; font-weight: 300; }

.st-tour__more {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: calc(var(--index) * 1.2);
	font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
	color: var(--muted-2);
}
.st-tour__more em { font-style: normal; color: var(--sun-ink); transition: transform .4s var(--ease); display: inline-block; }
.st-tour--rich:hover .st-tour__more em { transform: translateX(5px); }

/* ---- сводная таблица ---- */

.st-compare {
	max-width: var(--max);
	margin: calc(var(--index) * 5) auto 0;
}
.st-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-compare__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 760px;
	font-size: 13.5px;
	font-weight: 300;
}
.st-compare__table th,
.st-compare__table td {
	text-align: left;
	padding: 15px 18px 15px 0;
	border-bottom: 1px solid var(--line-soft);
	white-space: nowrap;
}
.st-compare__table thead th {
	font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
	color: var(--muted-2); font-weight: 400;
	border-bottom-color: var(--line);
}
.st-compare__table tbody th {
	font-weight: 400;
	letter-spacing: .06em;
	white-space: normal;
	min-width: 200px;
}
.st-compare__table tbody tr:hover td,
.st-compare__table tbody tr:hover th { background: rgba(232, 145, 47, .05); }
.st-compare__table tbody th a:hover { color: var(--sun-ink); }

@media (max-width: 620px) {
	.st-tour--rich .st-tour__shot { aspect-ratio: 16 / 10; }
}