/**
 * ps-lp-video.css — стили лендинга /video-pozdravlenie-na-zakaz/.
 *
 * Подключается только на этой странице (packages/loader.php, ветка LP).
 * Базовые стили лендингов лежат в ps-lp.css и НЕ переопределяются —
 * здесь только новые селекторы .lpv-*, поэтому файл не может задеть
 * /pozdravlenie-iz-afriki или любую другую страницу.
 * Токены (--color-*, --*-radius) — из css/main.css.
 */

/* ------------------------------------------------------ первый экран */

/* Кнопки должны попадать в первый экран на мобильном — лид не растягиваем. */
/* Крошки уезжали под фиксированную шапку: её высота совпадала с отступом
   сверху, зазора не оставалось. Даём запас. */
.lpv .lp-crumbs__wrap {
	padding-top: 6.5rem;
}

/* ---------------------------------------- первый экран: текст + видео */

.lpv-hero__grid {
	grid-column-gap: 2.5rem;
	grid-row-gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "head media"
	                     "actions media";
	align-items: start;
	display: grid;
}

.lpv-hero__grid--novideo {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head"
	                     "actions";
}

.lpv-hero__grid > .lp-hero__head    { grid-area: head; }
.lpv-hero__grid > .lp-hero__actions { grid-area: actions; margin-top: 0; }

.lpv-hero__media {
	border-radius: var(--big-radius);
	align-self: center;
	grid-area: media;
	overflow: hidden;
	box-shadow: 0 1rem 2.5rem #3a322c1f;
}

.lpv-hero__video {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	background-color: var(--color-bg-dark);
}

.lpv-hero .lp-hero__head {
	max-width: none;
}

.lpv-hero .lp-hero__actions {
	margin-top: 2rem;
}

/* --------------------------------------------------- плашка доверия */

.lpv-trust {
	padding-top: 0 !important;
}

.lpv-trust__items {
	background-color: var(--color-white);
	border-radius: var(--big-radius);
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 1.75rem 1.5rem;
	display: grid;
	list-style: none;
}

.lpv-trust__item {
	text-align: center;
	flex-direction: column;
	grid-row-gap: .25rem;
	display: flex;
}

.lpv-trust__item + .lpv-trust__item {
	border-left: 1px solid var(--color-bg-dark);
}

.lpv-trust__item b {
	color: var(--color-accent);
	font-size: 1.375rem;
	line-height: 1.2;
}

.lpv-trust__item span {
	color: var(--color-brown);
	font-size: .875rem;
	line-height: 1.4;
}

/* ------------------------------------ текстовые блоки и подводки */

.lpv-why__text,
.lpv-lead__text {
	color: var(--content-dark);
	max-width: 56rem;
	margin: 0 auto;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.lpv-lead {
	padding-bottom: 0;
}

.lpv-lead__text {
	text-align: center;
}

.lpv-lead__text a,
.lpv-why__text a {
	color: var(--color-accent);
	font-weight: 600;
	text-decoration: underline;
}

/* ------------------------------------------ кому и на какой повод */

.lpv-cases__items {
	grid-column-gap: 1.25rem;
	grid-row-gap: 1.25rem;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	display: grid;
	list-style: none;
}

.lpv-cases__item {
	background-color: var(--color-white);
	border-radius: var(--big-radius);
	flex-direction: column;
	grid-row-gap: .75rem;
	padding: 1.75rem 1.5rem;
	display: flex;
}

.lpv-cases__tag {
	color: var(--color-accent);
	margin: 0;
	font-size: 1.0625rem;
}

.lpv-cases__text {
	color: var(--content-dark);
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
}

/* --------------------------------------------- что входит в ролик */

.lpv-inside__items {
	grid-column-gap: 1.25rem;
	grid-row-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	max-width: 60rem;
	margin: 0 auto;
	padding: 0;
	display: grid;
	list-style: none;
}

.lpv-inside__item {
	background-color: var(--color-white);
	border-radius: var(--medium-radius);
	grid-column-gap: .75rem;
	align-items: flex-start;
	padding: 1.125rem 1.25rem;
	display: flex;
}

.lpv-inside__check {
	color: var(--color-white);
	background-color: var(--color-orange);
	border-radius: 50%;
	flex: none;
	justify-content: center;
	align-items: center;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: .125rem;
	display: flex;
}

.lpv-inside__check svg {
	width: .75rem;
	height: .75rem;
}

.lpv-inside__body {
	flex-direction: column;
	display: flex;
}

.lpv-inside__name {
	color: var(--content-dark);
	font-size: .9375rem;
}

.lpv-inside__text {
	color: var(--color-brown);
	font-size: .875rem;
	line-height: 1.5;
}

/* ------------------------------------------------- каталог команд */

/* Цены на карточках команд не показываем — как на главной, где это делает
   штатный модуль packages/catalog-simplify.php. */
.lpv-catalog .product-item__price,
.lpv-catalog .product-old__price {
	display: none !important;
}

/* --------------------------------------- кнопка «Скопировать» у фраз */

.lpv-copy {
	color: var(--color-accent);
	cursor: pointer;
	background: none;
	border: 1px solid var(--color-bg-dark);
	border-radius: var(--small-radius);
	grid-column-gap: .375rem;
	align-self: flex-start;
	align-items: center;
	margin-top: auto;
	padding: .5rem .75rem;
	font-family: inherit;
	font-size: .8125rem;
	font-weight: 600;
	transition: background-color .15s, border-color .15s;
	display: inline-flex;
}

.lpv-copy:hover {
	background-color: var(--color-bg-light);
	border-color: var(--color-orange);
}

.lpv-copy__ico {
	width: 1rem;
	height: 1rem;
	flex: none;
}

.lpv-copy__ico svg {
	width: 100%;
	height: 100%;
	display: block;
}

.lpv-copy.is-copied {
	color: var(--color-white);
	background-color: var(--color-orange);
	border-color: var(--color-orange);
}

/* ------------------------------------------- отзывы с вкладками */

.lpv-reviews__panes {
	margin-top: 1.5rem;
}

/* Слайдер реакций внутри вкладки не должен обрезаться контейнером. */
.lpv-reviews .swiper.reaction-slider {
	overflow: visible;
}

/* -------------------------------------------- гарантии и оплата */

.lpv-gp__grid {
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
	/* minmax(0, 1fr), а не 1fr: иначе колонка не может стать уже своего
	   min-content, и aspect-ratio видео раздувает левую половину. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	display: grid;
}

.lpv-gp__col {
	background-color: var(--color-white);
	border-radius: var(--big-radius);
	flex-direction: column;
	padding: 2rem;
	display: flex;
}

.lpv-gp__subtitle {
	margin: 0 0 1rem;
	font-size: 1.375rem;
}

.lpv-gp__text {
	color: var(--content-dark);
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	line-height: 1.6;
}

.lpv-gp__list {
	flex-direction: column;
	grid-row-gap: .625rem;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	list-style: none;
}

.lpv-gp__list li {
	color: var(--content-dark);
	grid-column-gap: .625rem;
	align-items: flex-start;
	font-size: .9375rem;
	line-height: 1.5;
	display: flex;
}

.lpv-gp__check {
	color: var(--color-white);
	background-color: var(--color-orange);
	border-radius: 50%;
	flex: none;
	justify-content: center;
	align-items: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .0625rem;
	display: flex;
}

.lpv-gp__check svg {
	width: .6875rem;
	height: .6875rem;
}

.lpv-gp__note {
	color: var(--color-brown);
	margin: 0 0 1.25rem;
	font-size: .875rem;
}

.lpv-gp__note a {
	color: var(--color-accent);
	text-decoration: underline;
}

.lpv-gp__video {
	border-radius: var(--medium-radius);
	margin-top: auto;
	display: block;
	position: relative;
	overflow: hidden;
}

.lpv-gp__pay {
	flex-direction: column;
	grid-row-gap: .75rem;
	margin: 0;
	padding: 0;
	display: flex;
	list-style: none;
}

.lpv-gp__pay-item {
	background-color: var(--color-bg-light);
	border-radius: var(--small-radius);
	flex-direction: column;
	grid-row-gap: .25rem;
	padding: .875rem 1rem;
	display: flex;
}

.lpv-gp__pay-name {
	color: var(--content-dark);
	font-size: .9375rem;
}

.lpv-gp__pay-desc {
	color: var(--color-brown);
	font-size: .8125rem;
	line-height: 1.45;
}

/* ------------------------------------------- подробно об услуге */

.lpv-details__box {
	background-color: var(--color-white);
	border-radius: var(--big-radius);
	padding: 1.5rem 2rem;
}

/* Блок читается как часть FAQ: тот же ритм и без разрыва перед вопросами. */
.lpv-details {
	padding-bottom: 0;
}

.lpv-details__head {
	flex-direction: column;
	grid-row-gap: .25rem;
	display: flex;
}

.lpv-details__eyebrow {
	color: var(--color-accent);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .75rem;
	font-weight: 700;
}

.lpv-details__summary {
	cursor: pointer;
	justify-content: space-between;
	align-items: center;
	grid-column-gap: 1rem;
	list-style: none;
	display: flex;
}

.lpv-details__summary::-webkit-details-marker {
	display: none;
}

.lpv-details__title {
	margin: 0;
	font-size: 1.5rem;
}

.lpv-details__chevron {
	color: var(--color-accent);
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	transition: transform .2s;
}

.lpv-details__chevron svg {
	width: 100%;
	height: 100%;
	display: block;
}

.lpv-details__box[open] .lpv-details__chevron {
	transform: rotate(180deg);
}

.lpv-details__body {
	border-top: 1px solid var(--color-bg-dark);
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

.lpv-details__body h3 {
	margin: 1.5rem 0 .5rem;
	font-size: 1.125rem;
}

.lpv-details__body h3:first-child {
	margin-top: 0;
}

.lpv-details__body p {
	color: var(--content-dark);
	margin: 0 0 1rem;
	font-size: .9375rem;
	line-height: 1.65;
}

.lpv-details__body a {
	color: var(--color-accent);
	text-decoration: underline;
}

/* ------------------------------------ полоса благотворительности */

.lpv-charity {
	padding-top: 2.5rem !important;
}

.lpv-charity__bar {
	background-color: var(--color-white);
	border-radius: var(--big-radius);
	grid-column-gap: 1.25rem;
	align-items: center;
	padding: 1rem 1.5rem;
	display: flex;
}

.lpv-charity__img {
	object-fit: cover;
	border-radius: var(--small-radius);
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
}

.lpv-charity__text {
	color: var(--content-dark);
	flex: 1;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
}

.lpv-charity__text b {
	color: var(--color-accent);
	margin-right: .25rem;
}

.lpv-charity__link {
	flex: none;
}

/* ------------------------------------------------------- адаптив */

@media screen and (max-width: 991px) {
	.lpv-trust__items {
		grid-template-columns: repeat(2, 1fr);
	}

	.lpv-trust__item:nth-child(odd) {
		border-left: 0;
	}

	.lpv-cases__items {
		grid-template-columns: repeat(2, 1fr);
	}

	.lpv-gp__grid {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 767px) {
	.lpv-trust__items {
		grid-template-columns: 1fr;
		padding: 1.25rem;
	}

	.lpv-trust__item + .lpv-trust__item {
		border-top: 1px solid var(--color-bg-dark);
		border-left: 0;
		padding-top: 1rem;
	}

	.lpv-cases__items {
		grid-template-columns: 1fr;
	}

	.lpv-why__text,
	.lpv-lead__text {
		text-align: left;
		font-size: 1rem;
	}

	.lpv-gp__col,
	.lpv-details__box {
		padding: 1.5rem 1.25rem;
	}

	.lpv-details__title {
		font-size: 1.25rem;
	}

	.lpv-charity__bar {
		flex-direction: column;
		align-items: flex-start;
		grid-row-gap: .75rem;
	}
}

/* ---------------------------------------- ссылка в финальном CTA */

/* Была неотличима от текста: тот же цвет, без подчёркивания. */
.lpv .cta-descr a {
	color: var(--color-accent);
	font-weight: 600;
	text-decoration: underline;
}

/* ---------------------------------------- адаптив новых блоков */

@media screen and (max-width: 991px) {
	.lpv-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head"
		                     "media"
		                     "actions";
	}

	.lpv .lp-crumbs__wrap {
		padding-top: 5.5rem;
	}
}

@media screen and (max-width: 767px) {
	/* Первый экран на мобильном ужат: видео стоит перед кнопками, и без этого
	   кнопка «Заказать» уходит за сгиб. */
	.lpv .lp-crumbs__wrap {
		padding-top: 4.5rem;
		padding-bottom: 0;
	}

	.lpv-hero.lp-hero {
		padding-top: 1rem !important;
	}

	.lpv-hero__grid {
		grid-row-gap: 1rem;
	}

	.lpv-hero .lp-hero__title {
		margin-bottom: .75rem;
	}

	.lpv-hero .lp-hero__subtitle {
		margin-bottom: 1rem;
	}

	.lpv-hero .lp-hero__lead {
		margin-bottom: 0;
	}

	/* Компактная полоса вместо полного 16:9 — кадр центрируется по object-fit. */
	.lpv-hero__video {
		max-height: 10rem;
	}
}

/* ==========================================================================
   Правки 2026-08-04: текстовые блоки в стиле сайта, пропорции видео гарантий.
   ========================================================================== */

/* ------------------------------------------- eyebrow-плашка над заголовком */
/* Стиль снят с .pa-fest__eyebrow (ps-catalog.css), чтобы секции выглядели
   одинаково с блоком пакетов. */

.lp-eyebrow {
	color: #e54a00;
	background-color: var(--color-white);
	border: 1.5px solid #ff6a1a;
	border-radius: 999px;
	align-items: center;
	grid-column-gap: .5rem;
	margin-bottom: .25rem;
	padding: .4375rem .875rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
	display: inline-flex;
}

.lp-eyebrow__dot {
	background-color: #ff6a1a;
	border-radius: 50%;
	flex: none;
	width: .375rem;
	height: .375rem;
}

/* ------------------------------------------------ дескриптор под H2 */

.section-descr--lp {
	max-width: 720px;   /* rem в теме плавающий, поэтому в px */
	margin-left: auto;
	margin-right: auto;
}

.section-descr--center { text-align: center; }
.section-descr--left   { text-align: left; }

/* ------------------------------------------------ текстовая карточка */

.lp-textcard {
	background-color: var(--color-white);
	border-radius: var(--big-radius);
	padding: 2.5rem;
	position: relative;
	overflow: hidden;
}

.lp-textcard__pattern {
	opacity: .5;
	pointer-events: none;
	width: 18rem;
	position: absolute;
	top: -2rem;
	right: -4rem;
}

.lp-textcard__body {
	max-width: 70ch;   /* 70–75 символов в строке */
	position: relative;
}

.lp-textcard__title {
	margin: .5rem 0 1rem;
}

.lp-textcard__text {
	color: var(--content-dark);
	text-align: left;
	font-size: 1rem;
	line-height: 1.7;
}

.lp-textcard__text p {
	margin: 0 0 .875rem;
}

.lp-textcard__text p:last-child { margin-bottom: 0; }

.lp-textcard__text a {
	color: var(--color-accent);
	font-weight: 600;
	text-decoration: underline;
}

.lp-textcard__note {
	color: var(--color-secondary);
	border-top: 1px solid var(--color-bg-light);
	margin: 1.25rem 0 0;
	padding-top: .875rem;
	font-size: .8125rem;
	line-height: 1.5;
}

/* Комментарий к пакетам примыкает к блоку пакетов сверху. */
.lpv-pricing {
	padding-top: 1.5rem !important;
}

.lp-textcard--pricing .lp-textcard__title {
	margin-top: 0;
	font-size: 1.375rem;
}

/* ------------------------------------------- подсказка у панели вкладок */

.lp-tabs-note {
	color: var(--color-secondary);
	text-align: left;
	align-items: center;
	grid-column-gap: .375rem;
	margin: 0 0 .75rem;
	font-size: .75rem;
	line-height: 1.4;
	display: inline-flex;
}

.lp-tabs-note__ico {
	color: var(--color-white);
	background-color: var(--color-secondary);
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: .875rem;
	height: .875rem;
	flex: none;
	font-size: .625rem;
	font-style: italic;
	font-weight: 700;
	display: inline-flex;
}

/* ------------------------------- п.2: видео гарантий в своих пропорциях */

/* Было: контейнер вытягивался по остатку высоты колонки (527×654) и резал
   кадр 16:9 с боков через object-fit: cover. */
.lpv-gp__video {
	/* Тема задаёт .video-lbox { height: 46.3rem } — фиксированная высота бьёт
	   aspect-ratio и режет кадр 16:9 в узкой колонке. Снимаем её. */
	height: auto;
	aspect-ratio: 16 / 9;
	width: 100%;
	margin-top: 1.5rem;
}

.lpv-gp__video img.full-image {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px) {
	.lp-textcard {
		padding: 1.5rem 1.25rem;
	}

	.lp-textcard__pattern { display: none; }

	.section-descr--lp {
		text-align: left;
	}
}

/* ==========================================================================
   Правки 2026-08-04 (2): отступы первого экрана, крошки, чипы пакетов,
   стрелки карусели реакций.
   ========================================================================== */

/* ------------------------------------------------ п2: хлебные крошки */

/* Отдельная обёртка вместо .container напрямую: та не получала
   горизонтальных отступов секции и уезжала мимо сетки контента. */
.lpv-crumbs {
	padding-top: 7rem;
	padding-left: 8.13rem;
	padding-right: 8.13rem;
}

.lpv-crumbs .ps-bright__crumbs {
	color: var(--color-secondary);
	margin: 0;
	font-size: .8125rem;
	line-height: 1.4;
}

.lpv-crumbs .ps-bright__crumbs a {
	color: var(--color-secondary);
	text-decoration: none;
}

.lpv-crumbs .ps-bright__crumbs a:hover {
	color: var(--color-accent);
}

/* ------------------------------------------- п1: воздух на первом экране */

/* Крошки уже дали отступ от шапки — у героя убираем собственный верхний. */
.lpv-hero.lp-hero {
	padding-top: 2rem !important;
}

.lpv-hero .lp-hero__title {
	margin-top: .5rem;
}

/* Кнопки почти касались плашки доверия. */
.lpv-hero__grid > .lp-hero__actions {
	margin-bottom: 1.5rem;
}

.lpv-trust {
	padding-top: 1.5rem !important;
}

/* --------------------------- п5: ссылки внутри дескриптора секции */

/* Слот дескриптора разметку НЕ вырезает (wp_kses_post пропускает <a>),
   ссылка была в HTML — но визуально не отличалась от текста. */
.section-descr--lp a {
	color: var(--color-accent);
	font-weight: 600;
	text-decoration: underline;
}

/* ------------------------------ п6: подсказка по пакетам внутри секции */

.lpv-hint {
	border-top: 1px solid #ffffff40;
	margin-top: 2rem;
	padding-top: 1.75rem;
	text-align: center;
}

.lpv-hint__text {
	color: var(--content-dark);
	max-width: 52rem;
	margin: 0 auto 1.25rem;
	font-size: .9375rem;
	line-height: 1.6;
}

.lpv-hint__chips {
	flex-wrap: wrap;
	justify-content: center;
	grid-column-gap: .625rem;
	grid-row-gap: .625rem;
	display: flex;
}

.lpv-chip {
	color: var(--content-dark);
	background-color: var(--color-white);
	border: 1.5px solid #0000;
	border-radius: 999px;
	align-items: baseline;
	grid-column-gap: .5rem;
	padding: .5625rem 1rem;
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s, transform .15s;
	display: inline-flex;
}

.lpv-chip:hover {
	border-color: var(--color-orange);
	transform: translateY(-1px);
}

.lpv-chip__price {
	color: var(--color-accent);
	font-size: .8125rem;
	font-weight: 800;
}

.lpv-hint__note {
	color: var(--color-brown);
	margin: 1rem 0 0;
	font-size: .75rem;
	line-height: 1.5;
}

/* ------------------------------------- п7: стрелки карусели реакций */

.lpv-slider {
	position: relative;
}

.lpv-slider__arrow {
	color: var(--color-accent);
	cursor: pointer;
	background-color: var(--color-white);
	border: 0;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 3rem;
	margin-top: -1.5rem;
	padding: 0;
	transition: background-color .15s, opacity .15s;
	display: none;
	position: absolute;
	top: 50%;
	z-index: 5;
	box-shadow: 0 .375rem 1.25rem #3a322c26;
}

.lpv-slider__arrow--prev { left: -1rem; }
.lpv-slider__arrow--next { right: -1rem; }

.lpv-slider__arrow:hover {
	background-color: var(--color-bg-light);
}

.lpv-slider__arrow .slide-arrow__ico {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.lpv-slider__arrow .slide-arrow__ico svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Swiper выключает кнопку в крайнем положении; при loop:true это не наступает. */
.lpv-slider__arrow.swiper-button-disabled {
	opacity: .35;
	pointer-events: none;
}

/* Стрелки нужны там, где нет тач-скролла. */
@media screen and (min-width: 992px) {
	.lpv-slider__arrow { display: flex; }
	.lpv-slider .swiper.reaction-slider { cursor: grab; }
	.lpv-slider .swiper.reaction-slider.is-dragging { cursor: grabbing; }
}

/* ------------------------------- п8: правая карточка по своему контенту */

.lpv-gp__grid {
	align-items: start;
}

@media screen and (max-width: 991px) {
	.lpv-crumbs {
		padding-top: 6rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 767px) {
	.lpv-crumbs {
		padding-top: 5.25rem;
		/* .section темы на этой ширине даёт 15px — совпадаем с ним, чтобы
		   крошки стояли в той же сетке, что заголовок. */
		padding-left: 15px;
		padding-right: 15px;
	}

	.lpv-hero.lp-hero {
		padding-top: 1rem !important;
	}

	.lpv-hint__text {
		text-align: left;
	}
}