/* Nature's Lines — страница цветочного обслуживания свадеб (волна W2).
   Эталон раскладки: handoff 2.3, файл Natureslines_2.2.dc.html, экран
   Pulmateenindus, все три ширины. Из эталона взята ТОЛЬКО раскладка.

   Разметка одна на все ширины, три копии блоков не заводились. Поля страницы
   приходят из nl-page.css переменной --nl-wg (18 / 32 / 40), от неё же считаются
   вылеты иллюстраций и лент за поля.

   Ширины: мобильная до 767, планшет 768..1023, десктоп от 1024. */

.nl-wed {
	/* Ширина колонки контента секции «букет невесты». Число объявлено ОДИН раз и
	   читается двумя местами: сеткой самой секции (.nl-wed-sec--bride ниже) и
	   ограничением иллюстраций (.nl-wed-ill). Правится в одном месте. */
	--nl-wed-bride-col: 520px;
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	color: var(--nl-ink, #222222);
	padding-bottom: 48px;
}

@media (min-width: 1024px) {
	.nl-wed { padding-bottom: 80px; }
}

/* ---------- заголовок и вводный блок ---------- */

.nl-wed__h1 {
	font-weight: 300;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
}

.nl-wed-intro__text > p { margin: 0; }
.nl-wed-intro__text > p + p { margin-top: 13px; }
.nl-wed-intro__text p { font-size: 14px; line-height: 1.75; color: var(--nl-mute, #6e6e6e); }
.nl-wed-intro__lead { font-size: 15px !important; line-height: 1.7 !important; color: var(--nl-ink, #222222) !important; }

@media (min-width: 768px) {
	.nl-wed__h1 { font-size: 38px; margin-bottom: 22px; }
	/* Планшет: текст и кадр 250px рядом, как в макете 2.4. */
	.nl-wed-intro {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 250px;
		gap: 32px;
		align-items: start;
	}
	.nl-wed-intro__text { max-width: 620px; }
	.nl-wed-intro__text p { font-size: 14.5px; }
	.nl-wed-intro__lead { font-size: 16px !important; }
}

@media (min-width: 1024px) {
	.nl-wed__h1 { font-size: 46px; line-height: 1.08; margin-bottom: 0; }
	.nl-wed-intro {
		display: grid;
		grid-template-columns: minmax(0, 620px) 360px;
		gap: 64px;
		align-items: start;
		margin-top: 34px;
	}
	.nl-wed-intro__text { max-width: none; display: flex; flex-direction: column; gap: 15px; }
	.nl-wed-intro__text > p + p { margin-top: 0; }
	.nl-wed-intro__text p { font-size: 15px; line-height: 1.8; }
	.nl-wed-intro__lead { font-size: 17px !important; line-height: 1.75 !important; }
}

/* ---------- сквозная сетка разделов ----------
   Десктоп: слева колонка метки 190px, справа колонка контента до 700px, зазор 48.
   Уже 1024 колонка метки исчезает, метка становится надстрочником над разделом.
   Приём один и тот же во всех разделах. */

.nl-wed-sec { margin-top: 44px; }

.nl-wed-sec--rule {
	border-top: 1px solid var(--nl-ink, #222222);
	padding-top: 14px;
}

.nl-wed-sec__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nl-mute, #6e6e6e);
	line-height: 1.6;
	margin: 0 0 18px;
}

.nl-wed-sec__label:empty { display: none; }

/* Метки букета, сметы, заявки и контактов в макете 2.4 есть ТОЛЬКО на десктопе:
   на планшете и мобильном эти разделы показывают лишь свой заголовок. Метки услуг
   и портфолио показываются на всех ширинах, поэтому модификатора у них нет. */
.nl-wed-sec__label--wide { display: none; }

.nl-wed-sec__title {
	font-weight: 300;
	font-size: 22px;
	line-height: 1.15;
	margin: 0 0 13px;
}

.nl-wed-sec__body > p { font-size: 14px; line-height: 1.75; color: var(--nl-mute, #6e6e6e); margin: 0; }
.nl-wed-sec__body > p + p { margin-top: 12px; }
.nl-wed-sec__lead { color: var(--nl-ink, #222222) !important; }
.nl-wed-sec__close { color: var(--nl-ink, #222222) !important; font-weight: 600; margin-top: 18px !important; }

@media (min-width: 768px) {
	.nl-wed-sec { margin-top: 56px; }
	.nl-wed-sec__title { font-size: 26px; }
	.nl-wed-sec__body { max-width: 620px; }
	.nl-wed-sec__body > p { font-size: 14.5px; }
}

/* Ряды с иллюстрацией: на планшете колонка контента и колонка кадра 250px, метка
   уходит внутрь колонки контента надстрочником. Макет 2.4, планшет. */
@media (min-width: 768px) and (max-width: 1023px) {
	.nl-wed-sec--ill {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 250px;
		gap: 32px;
		align-items: start;
	}
	.nl-wed-sec--ill > .nl-wed-sec__label { grid-column: 1; grid-row: 1; }
	.nl-wed-sec--ill > .nl-wed-sec__body  { grid-column: 1; grid-row: 2; }
	.nl-wed-sec--ill > .nl-wed-ill        { grid-column: 2; grid-row: 1 / span 2; }
}

@media (min-width: 1024px) {
	.nl-wed-sec {
		margin-top: 76px;
		display: grid;
		grid-template-columns: 190px minmax(0, 700px);
		gap: 48px;
		align-items: start;
	}
	/* Ряды с иллюстрацией: 190 / 520 / 300. Ряды формы, работ и кнопок: 190 / 700. */
	.nl-wed-sec--ill { grid-template-columns: 190px minmax(0, var(--nl-wed-bride-col)) 300px; }
	.nl-wed-sec--ill > .nl-wed-sec__label { grid-column: 1; grid-row: 1; }
	.nl-wed-sec--ill > .nl-wed-sec__body  { grid-column: 2; grid-row: 1; }
	.nl-wed-sec--ill > .nl-wed-ill        { grid-column: 3; grid-row: 1; }
	.nl-wed-sec--rule { padding-top: 16px; }
	.nl-wed-sec__label { margin-bottom: 0; }
	.nl-wed-sec__label:empty { display: block; }
	.nl-wed-sec__label--wide { display: block; }
	/* У длинных разделов метка липкая. Отсчёт от высоты шапки: она объявлена sticky,
	   и nl-header.js держит --nl-header-h актуальной. */
	.nl-wed-sec--sticky .nl-wed-sec__label {
		position: sticky;
		top: calc(var(--nl-header-h, 0px) + 18px);
	}
	.nl-wed-sec__title { font-size: 30px; margin-bottom: 16px; }
	.nl-wed-sec__body { max-width: 620px; }
	.nl-wed-sec__body > p { font-size: 15px; line-height: 1.8; }
	.nl-wed-sec--works .nl-wed-sec__title { font-size: 34px; margin-bottom: 0; }
}

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

.nl-wed-list { list-style: none; margin: 18px 0 0; padding: 0; }

.nl-wed-list__item {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 12px;
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--nl-line, #e6e3dc);
}

.nl-wed-list__item:last-child { margin-bottom: 0; }

.nl-wed-list__n {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--nl-mute, #6e6e6e);
	padding-top: 3px;
}

.nl-wed-list__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.nl-wed-list__body {
	margin: 9px 0 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--nl-mute, #6e6e6e);
}

/* Список стоимости: те же номера и линии, но плотнее, и линия сверху у всего списка. */
.nl-wed-list--tight {
	margin-top: 16px;
	border-top: 1px solid var(--nl-line, #e6e3dc);
}

.nl-wed-list--tight .nl-wed-list__item {
	padding: 12px 0;
	margin-bottom: 0;
	align-items: baseline;
}

.nl-wed-list--tight .nl-wed-list__body { color: var(--nl-ink, #222222); font-size: 14px; line-height: 1.5; }

@media (min-width: 768px) {
	.nl-wed-list__title { font-size: 18px; }
	.nl-wed-list__body { font-size: 14.5px; }
	.nl-wed-list--tight .nl-wed-list__body { font-size: 14.5px; }
}

@media (min-width: 1024px) {
	.nl-wed-list { margin-top: 0; }
	.nl-wed-list__item { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding-bottom: 30px; margin-bottom: 30px; }
	.nl-wed-list__n { font-size: 12px; padding-top: 5px; }
	.nl-wed-list__title { font-size: 20px; }
	.nl-wed-list__body { font-size: 15px; line-height: 1.8; margin-top: 11px; }
	.nl-wed-list--tight .nl-wed-list__item { padding: 14px 0; margin-bottom: 0; }
	.nl-wed-list--tight .nl-wed-list__body { font-size: 15px; line-height: 1.6; }
	.nl-wed-list--tight .nl-wed-list__n { padding-top: 3px; }
}

/* ---------- иллюстрации ----------
   Макет 2.4: ВСЕ ЧЕТЫРЕ слота ПОРТРЕТНЫЕ. Горизонтальных полос в макете нет ни на
   одной ширине, отрицательных полей и выхода за поля страницы у иллюстраций тоже
   нет нигде. Вводная на десктопе 2/3 в колонке 360px, остальные три 3/4 в колонке
   300px; у иллюстраций услуг и сметы position:sticky. На планшете все четыре 3/4
   липкие в колонке 250px, на мобильном все четыре 3/4 в потоке текста. */

.nl-wed-ill {
	margin: 20px 0 0;
	aspect-ratio: 3 / 4;
	max-width: var(--nl-wed-bride-col);
	/* Без overflow объявленная пропорция не действует: img с height:100% при
	   неопределённой высоте родителя разворачивается в собственные 2:3. */
	overflow: hidden;
	/* flex, а не block: только во флекс-контексте height:100% у img получает
	   определённую высоту, и объявленный object-fit:cover кадрирует ПО ЦЕНТРУ. */
	display: flex;
}

.nl-wed-ill__img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
	/* Планшет: колонка 250px, все четыре липкие, пропорция та же 3/4. */
	.nl-wed-ill { margin: 0; position: sticky; top: calc(var(--nl-header-h, 0px) + 16px); }
}

@media (min-width: 1024px) {
	/* Десктоп: вводная 2/3 в колонке 360px, три остальные 3/4 в колонке 300px.
	   Липкие только иллюстрации услуг и сметы, как в макете. */
	.nl-wed-ill { position: static; }
	.nl-wed-ill--intro { aspect-ratio: 2 / 3; }
	.nl-wed-ill--serv,
	.nl-wed-ill--price { position: sticky; top: calc(var(--nl-header-h, 0px) + 18px); }
}

/* ---------- кнопки ---------- */

.nl-wed-btn {
	display: inline-block;
	border: 1px solid var(--nl-ink, #222222);
	border-radius: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	padding: 13px 22px;
	cursor: pointer;
}

.nl-wed-btn--ghost { background: none; color: var(--nl-ink, #222222); }
.nl-wed-btn--ghost:hover { background: var(--nl-ink, #222222); color: #fff; }
.nl-wed-btn--solid { background: var(--nl-ink, #222222); color: #fff; }
.nl-wed-btn--solid:hover { background: none; color: var(--nl-ink, #222222); }

.nl-wed-sec__body .nl-wed-btn { margin-top: 18px; }

.nl-wed-cta { margin-top: 44px; }

/* Две копии кнопки «смотреть работы», по одной на ширину, см. комментарий в
   inc/wedding-page.php. Скрытая копия уходит из дерева доступности и из порядка
   обхода клавиатурой, поэтому пользователю всегда доступна ровно одна. */
.nl-wed-cta--intro { display: none; margin-top: 18px; }

@media (max-width: 1023px) {
	.nl-wed-cta--intro { display: inline-block; }
	.nl-wed-cta--desk { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.nl-wed-cta--intro { margin-top: 22px; }
}

@media (min-width: 1024px) {
	.nl-wed-btn { font-size: 13px; padding: 16px 30px; }
	.nl-wed-sec__body .nl-wed-btn { padding: 15px 28px; margin-top: 24px; }
	.nl-wed-cta { margin-top: 40px; margin-left: 238px; }
}

/* ---------- форма заявки ---------- */

.nl-wed-errhead {
	background: var(--nl-blush, #fbf3f3);
	border: 1px solid var(--nl-ink, #222222);
	padding: 13px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 20px;
}

.nl-wed-form { display: grid; gap: 16px; }

/* Ловушка. Не display:none: часть ботов такие поля пропускает. */
.nl-wed-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nl-wed-field__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nl-mute, #6e6e6e);
	margin-bottom: 7px;
}

.nl-wed-field__opt {
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	font-size: 11px;
}

.nl-wed-field__input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--nl-line, #e6e3dc);
	border-radius: 0;
	padding: 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	background: var(--nl-canvas, #ffffff);
	color: var(--nl-ink, #222222);
	outline: none;
}

textarea.nl-wed-field__input { line-height: 1.6; resize: vertical; }
.nl-wed-field__input:focus { border-color: var(--nl-ink, #222222); }

.nl-wed-field.is-bad .nl-wed-field__input {
	border-color: var(--nl-ink, #222222);
	border-width: 1.6px;
	background: var(--nl-blush, #fbf3f3);
}

.nl-wed-field__err {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--nl-ink, #222222);
	margin-top: 6px;
}

.nl-wed-form__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.nl-wed-form__note { font-size: 11.5px; line-height: 1.5; color: var(--nl-mute, #6e6e6e); }
.nl-wed-form__foot .nl-wed-btn { width: 100%; text-align: center; padding: 16px; }

.nl-wed-ok {
	border: 1px solid var(--nl-line, #e6e3dc);
	background: var(--nl-warm, #faf7f2);
	padding: 24px;
}

.nl-wed-ok__head { font-size: 22px; font-weight: 300; margin: 0; }
/* Экран отказа по частоте: та же карточка, но контакты в строку под заголовком. */
.nl-wed-ok--limit .nl-wed-contact--inline { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 768px) {
	.nl-wed-ok--limit .nl-wed-contact--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
.nl-wed-ok__body { font-size: 14px; line-height: 1.7; color: var(--nl-mute, #6e6e6e); margin: 10px 0 18px; max-width: 440px; }

@media (min-width: 768px) {
	.nl-wed-form { grid-template-columns: 1fr 1fr; gap: 18px; }
	.nl-wed-field--wide { grid-column: 1 / -1; }
	.nl-wed-form__foot { grid-column: 1 / -1; }
	.nl-wed-form__foot .nl-wed-btn { width: auto; padding: 16px 34px; }
	.nl-wed-field__label { font-size: 11px; margin-bottom: 8px; }
	.nl-wed-ok__head { font-size: 26px; }
}

@media (min-width: 1024px) {
	.nl-wed-errhead { padding: 14px 16px; font-size: 13.5px; margin-bottom: 24px; }
	.nl-wed-form__foot { flex-direction: column; gap: 11px; margin-top: 8px; }
	.nl-wed-form__note { font-size: 12px; }
	.nl-wed-ok { padding: 32px; }
}

/* ---------- портфолио ----------
   Семь полос, у каждой номер вида 01 / 07, заголовок события, счётчик кадров и
   горизонтальная лента со снапом. Полосы чередуются фоном и шириной кадра. */

.nl-wed-gals { margin-top: 8px; }

.nl-wed-gal {
	margin: 0 calc(var(--nl-wg) * -1);
	padding: 28px var(--nl-wg) 26px;
}

.nl-wed-gal--warm { background: var(--nl-warm, #faf7f2); }

.nl-wed-gal__head { display: flex; flex-direction: column; gap: 5px; }
.nl-wed-gal__meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nl-wed-gal__n { font-size: 11.5px; font-weight: 700; color: var(--nl-mute, #6e6e6e); letter-spacing: 0.06em; }
.nl-wed-gal__count { font-size: 11.5px; color: var(--nl-mute, #6e6e6e); }
.nl-wed-gal__title { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 0; }

.nl-wed-gal__strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin: 14px calc(var(--nl-wg) * -1) 0;
	padding: 1px var(--nl-wg);
}

.nl-wed-gal__strip::-webkit-scrollbar { display: none; }

.nl-wed-gal__frame {
	flex: 0 0 200px;
	aspect-ratio: 3 / 4;
	scroll-snap-align: start;
	margin: 0;
	overflow: hidden;
	background: var(--nl-surface, #f7f5f1);
}

.nl-wed-gal__strip.is-narrow .nl-wed-gal__frame { flex-basis: 168px; }
.nl-wed-gal__img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
	.nl-wed-gal { padding: 34px var(--nl-wg) 30px; }
	.nl-wed-gal__title { font-size: 18px; }
	.nl-wed-gal__frame { flex-basis: 250px; }
	.nl-wed-gal__strip.is-narrow .nl-wed-gal__frame { flex-basis: 210px; }
}

@media (min-width: 1024px) {
	.nl-wed-gal { padding: 44px var(--nl-wg) 40px; }
	.nl-wed-gal__head {
		display: grid;
		grid-template-columns: 190px minmax(0, 1fr);
		gap: 48px;
		align-items: baseline;
	}
	.nl-wed-gal__n { font-size: 12px; }
	.nl-wed-gal__meta { gap: 16px; }
	.nl-wed-gal__title { font-size: 22px; }
	.nl-wed-gal__count { font-size: 12px; }
	.nl-wed-gal__strip { gap: 14px; margin-top: 20px; }
	.nl-wed-gal__frame { flex-basis: 300px; }
	.nl-wed-gal__strip.is-narrow .nl-wed-gal__frame { flex-basis: 250px; }
}

/* ---------- контакты ---------- */

.nl-wed-sec--contact {
	border-top: 1px solid var(--nl-line, #e6e3dc);
	padding-top: 22px;
}

.nl-wed-contact { display: grid; grid-template-columns: 1fr; gap: 20px; font-size: 14px; }
.nl-wed-contact__item a { color: var(--nl-ink, #222222); text-decoration: none; }
.nl-wed-contact__item a:hover { color: var(--nl-mute, #6e6e6e); }

.nl-wed-contact__label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nl-mute, #6e6e6e);
	margin-bottom: 6px;
}

@media (min-width: 768px) {
	.nl-wed-contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.nl-wed-sec--contact { padding-top: 26px; grid-template-columns: 190px minmax(0, 1fr); }
	.nl-wed-contact { gap: 48px; font-size: 15px; }
	.nl-wed-contact__label { font-size: 11px; margin-bottom: 8px; }
}

/* Мягкая посадка для тех, кто просит меньше движения: снап отключаем. */
@media (prefers-reduced-motion: reduce) {
	.nl-wed-gal__strip { scroll-snap-type: none; }
}