/**
 * Contact landing (contact-us) — V4 design layer.
 * Loaded only when page has ACF flag use_v4_contact = true (body.t4-contact).
 * Layers on tour-v4.css (tokens/hero/footer/.t4-widget__stage field re-skin),
 * home-v4.css (t4-hcontact cards) and longread-v4.css (t4ge hero accent).
 * This file adds: the two-column contact-info + form layout, the info list
 * and the callback-form re-skin (category chips, titles, submit button).
 */

/* ====================== TWO-COLUMN MAIN ====================== */
body.t4-contact .t4ct-main { padding: 72px 0 84px; background: var(--t4-bg-1); }
body.t4-contact .t4ct-main__inner {
	max-width: var(--t4-container);
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 48px;
	align-items: start;
}

/* ====================== CONTACT INFO LIST ====================== */
body.t4-contact .t4ct-info__title { margin: 10px 0 10px; }
body.t4-contact .t4ct-info__desc {
	font-size: var(--t4-fs-body);
	color: var(--t4-body);
	margin: 0 0 26px;
}
body.t4-contact .t4ct-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
body.t4-contact .t4ct-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-r-lg);
	padding: 16px 18px;
	box-shadow: var(--t4-sh-sm);
}
body.t4-contact .t4ct-item__icon {
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 12px;
	background: var(--t4-red-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}
body.t4-contact .t4ct-item__icon svg {
	width: 20px;
	height: 20px;
	fill: var(--t4-red);
	stroke: var(--t4-red);
}
body.t4-contact .t4ct-item__title {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
	margin-bottom: 4px;
}
body.t4-contact .t4ct-item__value {
	font-size: var(--t4-fs-small);
	line-height: 1.55;
	color: var(--t4-body);
	margin: 0 0 2px;
}
body.t4-contact .t4ct-item__value a {
	color: var(--t4-ink);
	font-weight: 600;
	text-decoration: none;
	transition: color 160ms var(--t4-ease);
}
body.t4-contact .t4ct-item__value a:hover { color: var(--t4-red); }
body.t4-contact .t4ct-item__maplink {
	color: var(--t4-red);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	text-decoration: none;
}
body.t4-contact .t4ct-item__maplink:hover { text-decoration: underline; }

/* ====================== FORM CARD (re-skin of the original .callback) ====================== */
body.t4-contact .t4ct-formcard {
	background: #fff;
	border: 1px solid var(--t4-line);
	border-top: 3px solid var(--t4-red);
	border-radius: var(--t4-r-xl);
	box-shadow: var(--t4-sh-md);
	padding: 32px 34px 30px;
}
/* Neutralize legacy .callback card visuals (it carries its own bg/padding) */
body.t4-contact .t4ct-stage .callback {
	background: transparent;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	max-width: 100%;
}
body.t4-contact .t4ct-stage .callback__title {
	font-family: var(--t4-sans);
	font-size: clamp(var(--t4-fs-lg), 2.1vw, var(--t4-fs-h3));
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--t4-ink);
	font-weight: 800;
	margin: 0 0 22px;
	background: transparent;
	padding: 0;
}
body.t4-contact .t4ct-stage .callback__title { margin-bottom: 8px; }
/* Подзаголовок карточки (макет владельца 27.07) */
body.t4-contact .t4ct-stage .t4ct-form__lede {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	line-height: 1.5;
	color: var(--t4-body);
	margin: 0 0 22px;
	max-width: 52ch;
}
body.t4-contact .t4ct-stage .t4ct-form__lede b { color: var(--t4-ink); font-weight: 600; }

body.t4-contact .t4ct-stage .callback__body { padding: 0; }
body.t4-contact .t4ct-stage .callback__inputs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 16px;
	margin: 0;
}
/* Подписи НАД полями вместо плавающих плейсхолдеров (макет 27.07) */
body.t4-contact .t4ct-stage .t4ct-lab {
	display: block;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
	margin-bottom: 7px;
	line-height: 1.3;
}
body.t4-contact .t4ct-stage .t4ct-lab__opt {
	font-style: normal;
	font-weight: 400;
	color: var(--t4-muted);
}
body.t4-contact .t4ct-stage .field__label { margin: 0; }
body.t4-contact .t4ct-stage .callback__item { margin: 16px 0 0; }
/* Запас под переносящимися чипсами, чтобы лейбл «Message» не липнул к последнему ряду */
body.t4-contact .t4ct-stage .t4ct-chipsblock { margin-bottom: 6px; }
/* 27.07: подписи блоков приведены к тем же лейблам, что и над полями (макет владельца).
   Моно-капс здесь читался как заголовок секции и «кричал» на длинном вопросе про туры;
   правило моно-шрифта в проекте — только короткие микролейблы. */
body.t4-contact .t4ct-stage .callback__item-title {
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--t4-ink);
	line-height: 1.3;
	margin-bottom: 9px;
}
body.t4-contact .t4ct-stage .field__input--textarea {
	min-height: 110px;
	resize: vertical;
	font-family: var(--t4-sans);
}

/* Category checkboxes → V4 toggle chips (input stays hidden by legacy CSS) */
body.t4-contact .t4ct-stage .callback__checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body.t4-contact .t4ct-stage .callback__checkbox { margin: 0; position: relative; }
/* Чекбокс прячем визуально, но НЕ display:none — иначе он выпадает из таба и с клавиатуры
   чипсы не выбрать (правило focus-within ниже без этого тоже мёртвое). */
body.t4-contact .t4ct-stage .callback__checkbox .checkbox__pointer {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
body.t4-contact .t4ct-stage .callback__checkbox .checkbox__text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px 9px 13px;
	background: var(--t4-bg-1);
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-small);
	font-weight: 600;
	color: var(--t4-ink);
	cursor: pointer;
	transition: background 160ms var(--t4-ease), border-color 160ms var(--t4-ease), color 160ms var(--t4-ease);
	user-select: none;
}
body.t4-contact .t4ct-stage .callback__checkbox:hover .checkbox__text {
	border-color: var(--t4-line-2);
	background: #fff;
}
/* Кружок-галочка внутри чипса (макет 27.07): выбранное состояние читается явно,
   а не только цветом — это же и есть смысл мульти-выбора. */
body.t4-contact .t4ct-stage .checkbox__text .t4ct-tick {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid var(--t4-line-2);
	background: #fff;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 160ms var(--t4-ease), border-color 160ms var(--t4-ease);
}
body.t4-contact .t4ct-stage .checkbox__text .t4ct-tick svg {
	width: 9px;
	height: 9px;
	stroke: #fff;
	fill: none;
	stroke-width: 3.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transition: opacity 160ms var(--t4-ease);
}
body.t4-contact .t4ct-stage .callback__checkbox:has(.checkbox__input:checked) .checkbox__text {
	background: var(--t4-red-soft, #fdece7);
	border-color: var(--t4-red);
	color: var(--t4-ink);
}
body.t4-contact .t4ct-stage .callback__checkbox:has(.checkbox__input:checked) .t4ct-tick {
	background: var(--t4-red);
	border-color: var(--t4-red);
}
body.t4-contact .t4ct-stage .callback__checkbox:has(.checkbox__input:checked) .t4ct-tick svg { opacity: 1; }
/* Клавиатурная доступность: инпут скрыт, поэтому фокус показываем на самом чипсе */
body.t4-contact .t4ct-stage .callback__checkbox:focus-within .checkbox__text {
	outline: 2px solid var(--t4-red);
	outline-offset: 2px;
}

/* Submit button */
body.t4-contact .t4ct-stage .callback__btn {
	width: 100%;
	justify-content: center;
	margin-top: 20px;
	padding: 14px 20px;
	background: var(--t4-red);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-body);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(255,40,0,0.22);
	transition: background 160ms var(--t4-ease), transform 160ms var(--t4-ease);
}
body.t4-contact .t4ct-stage .callback__btn:hover {
	background: var(--t4-red-dark);
	transform: translateY(-1px);
}
body.t4-contact .t4ct-stage .callback__btn:active { transform: scale(0.98); }
body.t4-contact .t4ct-stage .callback__btn .btn__icon { width: 14px; height: 14px; fill: currentColor; }

/* Строка про приватность под кнопкой (макет 27.07) */
body.t4-contact .t4ct-stage .t4ct-form__privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 13px 0 0;
	font-family: var(--t4-sans);
	font-size: var(--t4-fs-micro);
	color: var(--t4-muted);
	text-align: center;
}
body.t4-contact .t4ct-stage .t4ct-form__privacy svg {
	width: 13px;
	height: 13px;
	flex: none;
	stroke: #1F7A3D;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ====================== MAP LINK SECTION (info_block, off by default) ====================== */
body.t4-contact .t4ct-map { padding: 64px 0; text-align: center; }
body.t4-contact .t4ct-map__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--t4-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

/* The mobile 2-line Travelers' Choice rating pill (owl 18px + 9px wordmark) now
   lives globally in tour-v4.css and applies to every V4 hero rating pill, so
   nothing page-specific is needed here. */

/* ====================== RESPONSIVE ====================== */
@media (max-width: 1024px) {
	body.t4-contact .t4ct-main__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	body.t4-contact .t4ct-formcard { padding: 26px 24px 24px; }
}

@media (max-width: 768px) {
	body.t4-contact .t4ct-main { padding: 52px 0 60px; }
	body.t4-contact .t4ct-stage .callback__inputs { grid-template-columns: 1fr; gap: 0; }
	body.t4-contact .t4ct-formcard {
		padding: 20px 16px 18px;
		border-radius: var(--t4-r-lg);
	}
}