/* Страница гида — редизайн по шаблону «Шаблон страницы гида (одно фото)».
   Разметка: single-guide.php и inc/guide-page.php.

   Первый экран — две колонки: слева фотография (и ролик рядом, если он есть),
   справа имя, описание и плашки. Ролик — та же обложка `.guide-video`, что в
   списке гидов и в карточке тура, со своими стилями в css/guide-video.css. */

.guide-page {
	--guide-forest: #06652e;
	--guide-forest-2: #064923;
	--guide-ink: #152019;
	--guide-muted: #65716a;
	--guide-line: #dce4de;
	--guide-mist: #f3f6f2;
	--guide-paper: #fff;

	color: var(--guide-ink);
}

/* ==========================================================================
   Хлебные крошки
   ========================================================================== */

/* Общие стили темы дают 16 px, светло-серые ссылки и почти чёрное имя;
   в макете вся цепочка одного приглушённого цвета, 14 px. */
.guide-page .brcr {
	margin: 0 0 16px;
	color: var(--guide-muted);
	font-size: 14px;
	line-height: 1.4;
}

.guide-page .brcr > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.guide-page .brcr a,
.guide-page .brcr .breadcrumb_last {
	color: inherit;
	font-size: inherit;
	font-weight: 400;
}

.guide-page .brcr a:hover {
	color: var(--guide-forest);
}

.guide-page .brcr .separator {
	margin: 0;
	color: #9ba79e;
}

/* ==========================================================================
   Первый экран: медиа и текст
   ========================================================================== */

.guide-top {
	--guide-top-gap: clamp(24px, 4vw, 54px);

	margin-top: 4px;
}

.guide-media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.guide-media[data-layout='single'] {
	grid-template-columns: minmax(0, 1fr);
}

/* Плитки одинаковые: ролик и фотография встают рядом одного размера. */
.guide-media__tile {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 22px;
	background: #e8f2eb;
}

.guide-media__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Лица на портретах выше центра кадра. */
	object-position: center 25%;
}

/* ==========================================================================
   Имя, описание от СканТур
   ========================================================================== */

.guide-page .guide-intro {
	padding: 32px 0 0;
}

.guide-page__title {
	margin: 0;
	font-size: clamp(34px, 4.5vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.035em;
	font-weight: 700;
	color: var(--guide-ink);
}

.guide-description {
	margin-top: 22px;
}

.guide-description p {
	margin: 0 0 18px;
	max-width: 71ch;
	font-size: 17px;
	line-height: 1.75;
}

.guide-description p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Плашки: рейтинг, опыт, направления
   ========================================================================== */

.guide-facts {
	margin-top: 21px;
}

/* Колонка текста уже прежней, поэтому плашки стоят лентой и прокручиваются,
   когда не помещаются. Кегль значения выбирает PHP по длине строки: у
   направлений бывает список на десяток городов. */
.guide-facts__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(144px, 1fr);
	gap: 10px;
	margin: 0;
	padding: 2px 2px 9px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: #aac6b4 #edf3ee;
	-webkit-overflow-scrolling: touch;
}

.guide-fact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	min-height: 98px;
	padding: 13px 13px 14px;
	border: 1px solid #dce7df;
	border-radius: 14px;
	background: #f2f7f3;
	scroll-snap-align: start;
}

.guide-fact dt {
	margin: 0;
	color: #4f6658;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

.guide-fact dd {
	margin: 0;
	color: var(--guide-forest-2);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.018em;
	overflow-wrap: anywhere;
}

.guide-fact--lg dd {
	font-size: 25px;
	line-height: 1.06;
}

.guide-fact--sm dd {
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.guide-fact--xs dd {
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0;
}

/* ==========================================================================
   Секции: «Гид о себе», отзывы, туры
   ========================================================================== */

.guide-section {
	padding-top: 70px;
}

.guide-section__head {
	margin-bottom: 28px;
}

.guide-section__head h2 {
	margin: 0;
	font-size: clamp(27px, 3.2vw, 38px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 600;
	color: var(--guide-ink);
}

.guide-voice__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* Короткий текст от первого лица. */
.guide-voice__card {
	padding: 30px;
	border: 1px solid #d2e6d7;
	border-radius: 22px;
	background: #e8f2eb;
}

.guide-voice__quote {
	margin: 0;
	padding: 0;
	/* main.css рисует линию у любой цитаты — в зелёной плашке она лишняя. */
	border: 0;
	color: #00441d;
}

.guide-voice__quote p {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.65;
}

.guide-voice__quote p:last-child {
	margin-bottom: 0;
}

/* Полный рассказ гида — за вертикальной линией, отдельным полем. */
.guide-voice__text {
	margin: 0;
	padding: 0 0 0 22px;
	border-left: 3px solid #a8c7b1;
	color: var(--guide-ink);
}

.guide-voice__text p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.75;
}

.guide-voice__text p:last-child {
	margin-bottom: 0;
}

.guide-voice__sign {
	display: flex;
	justify-content: flex-end;
	margin: 22px 0 0;
	color: var(--guide-forest-2);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

/* Образование — обычной строкой под рассказом, отдельной плашки у него нет. */
.guide-education {
	margin: 18px 0 0;
	color: var(--guide-ink);
	font-size: 17px;
	line-height: 1.75;
	overflow-wrap: anywhere;
}

.guide-education strong {
	font-weight: 600;
}

/* ==========================================================================
   Отзывы о гиде — карточка та же, что в /reviews и на странице тура
   ========================================================================== */

.guide-reviews__wrap {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.guide-reviews .tour-review-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	background: var(--guide-paper);
	border: 1px solid rgba(6, 101, 46, 0.1);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(20, 40, 30, 0.06);
}

.guide-reviews .tour-review-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 13px;
}

.guide-reviews .tour-review-card__user {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.guide-reviews .tour-review-card__avatar {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #dcecdf;
	color: var(--guide-forest);
	display: grid;
	place-items: center;
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.guide-reviews .tour-review-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.guide-reviews .tour-review-card__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--guide-ink);
	line-height: 1.25;
}

.guide-reviews .tour-review-card__meta {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--guide-muted);
	line-height: 1.35;
}

.guide-reviews .tour-review-card__stars {
	flex: 0 0 auto;
	color: #f5a000;
	letter-spacing: 1px;
	font-size: 13px;
	line-height: 1;
}

.guide-reviews .tour-review-card__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #46534b;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.guide-reviews .tour-review-card__text.is-expanded {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.guide-reviews .tour-review-card__toggle {
	display: block;
	margin-top: 10px;
	border: 0;
	background: none;
	padding: 0;
	color: var(--guide-forest);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}

.guide-reviews .tour-review-card__source {
	display: inline-block;
	margin-top: 10px;
	color: var(--guide-forest);
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
}

.guide-reviews .tour-review-card__source:hover {
	text-decoration: none;
}

.guide-reviews .tour-review-card__match {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--guide-line);
	color: var(--guide-forest);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

/* ==========================================================================
   Туры с гидом
   ========================================================================== */

.guide-tours .tours-block-inner {
	margin-top: 0;
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

/* Две колонки первого экрана: медиа слева, текст справа. Пара «ролик + фото»
   просит места больше, чем одна фотография, — отсюда разные доли. */
@media (min-width: 900px) {
	.guide-top[data-media-layout='pair'],
	.guide-top[data-media-layout='single'] {
		display: grid;
		gap: var(--guide-top-gap);
		align-items: center;
	}

	.guide-top[data-media-layout='pair'] {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	}

	.guide-top[data-media-layout='single'] {
		grid-template-columns: clamp(220px, 22vw, 264px) minmax(0, 1fr);
		column-gap: 36px;
	}

	.guide-top[data-media-layout='pair'] .guide-intro,
	.guide-top[data-media-layout='single'] .guide-intro {
		padding: 0 0 16px;
	}
}

@media (max-width: 760px) {
	/* Контейнер темы без боковых полей — в старой вёрстке их давали .row/.col.
	   На редизайне колонок нет, поэтому поля задаём сами. */
	.guide-page > .container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

@media (max-width: 899px) {
	.guide-media {
		max-width: 500px;
		margin-inline: auto;
	}

	.guide-media[data-layout='single'] {
		max-width: min(70%, 300px);
	}
}

@media (max-width: 1199px) {
	.guide-reviews__wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.guide-reviews__wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

@media (max-width: 760px) {
	.guide-page .guide-intro {
		padding: 26px 0 0;
	}

	.guide-description {
		margin-top: 18px;
	}

	.guide-description p {
		font-size: 16px;
		line-height: 1.7;
	}

	.guide-section {
		padding-top: 48px;
	}

	.guide-section__head {
		margin-bottom: 24px;
	}

	.guide-media {
		gap: 8px;
	}

	.guide-media__tile {
		border-radius: 18px;
	}

	.guide-facts {
		margin: 19px 0 0;
	}

	.guide-facts__list {
		grid-auto-columns: minmax(148px, 44%);
		gap: 8px;
		padding: 2px 10px 9px 2px;
	}

	.guide-fact {
		min-height: 89px;
		padding: 11px 12px;
	}

	.guide-fact dd {
		font-size: 19px;
	}

	.guide-fact--lg dd {
		font-size: 23px;
	}

	.guide-education {
		margin-top: 16px;
		font-size: 16px;
		line-height: 1.7;
	}

	.guide-voice__layout {
		gap: 24px;
	}

	.guide-voice__card {
		padding: 24px;
	}

	.guide-voice__quote p {
		font-size: 18px;
		line-height: 1.65;
	}

	.guide-voice__text {
		padding-left: 18px;
	}

	.guide-voice__text p {
		font-size: 16px;
		line-height: 1.7;
	}

	.guide-voice__sign {
		margin-top: 18px;
		font-size: 14px;
	}
}