/* 1136, слой BE: выбор способа связи нативными radio-card.
 *
 * Контракт окна 2 (CONTACT_CHOICE_CONTRACT_v1): существующие каналы, тот же серверный
 * контракт, меняется только форма ввода. Карточка кликается целиком, стрелки клавиатуры
 * переключают канал, Tab входит в группу один раз, у группы один заголовок (legend).
 * Состояние дублируется классом is-selected — для браузеров без :has().
 *
 * 21.09 (решение root по форме). Композиция карточки: слева знак канала 24 px, затем
 * подпись, справа компактный индикатор выбора. Большой пустой кружок слева убран —
 * его место занял знак, а сам индикатор стал маленьким и переехал вправо.
 *
 * Почему знак рисуется здесь, а не в разметке. Карточки печатают три разных места:
 * inc/lead-forms.php (диалог «Задать вопрос»), blocks/application-form/functions.php
 * (форма заявки) и inc/site-language-worldwide.php (английская поверхность, сборка
 * через DOM). Во всех трёх порядок узлов один: input, затем .gt-channel__mark, затем
 * подпись. Поэтому знак выбирается соседним селектором по значению самой радиокнопки
 * (input[value=…] + .gt-channel__mark) — без :has(), без правки трёх мест и без
 * расхождения между ними.
 *
 * Знаки — файлы установленного набора темы images/icons/*.svg, тем же механизмом маски
 * по currentColor, что и .gtyres-icon (interface-details.css). Все шесть исходников
 * одноцветные (fill="currentColor"), поэтому маска сохраняет их геометрию точно и ничего
 * не «заливает одним цветом»: плоский флаг таким способом рисовать нельзя, брендовый
 * монохромный знак — можно.
 *
 * MAX. Знака MAX в наборе темы не было; временный нейтральный chat-circle-text заменён
 * официальным знаком из брендбука go.max.ru — root скачал архивы, проверил SVG и передал
 * файлы, они перенесены в images/icons/max-logo.svg и max-logo-white.svg без правок
 * геометрии. Он единственный ставится картинкой, а не маской: внутри знака белый вырез,
 * маска взяла бы только альфу и залила бы его.
 *
 * Слой отдаётся напрямую с версией по filemtime, идёт после AZ (49), BB (50), BC (52)
 * и BD (53); dist не пересобирается. */

.gt-channel {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	/* Галочка выбранного канала: не брендовый знак, а служебный символ, поэтому рисуется
	   тут же, а не заводится седьмым файлом в наборе. */
	--gt-channel-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5'/%3E%3C/svg%3E");
}

.gt-channel__legend {
	padding: 0;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
}

/* Сетка выбранной композиции: 3×2 на широком экране, 2×3 ниже. Число колонок задано
   явно — auto-fit на 390 разворачивал шесть каналов в шесть строк.
   Подписи помещаются целиком не за счёт колонок, а за счёт двух других правок: диалог
   «Задать вопрос» расширен до 720 px (lead-forms.css), и служебная часть карточки
   похудела на 28 px — индикатор ушёл из отдельной колонки в угол. Замер: самая длинная
   подпись «ВКонтакте» — 78 px при 14 px Montserrat; служебная часть теперь 58 px на
   десктопе (padding 24 + знак 24 + зазор 10) и 48 px на телефоне. */
.gt-channel__grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
	.gt-channel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Карточка: знак | подпись. Индикатор выбора стоит в углу поверх, своей колонки у него
   нет. 56 px на широком экране. */
.gt-channel__card {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	min-height: 56px;
	margin: 0;
	padding: 10px 12px;
	cursor: pointer;
	border: 1px solid var(--line, #e2e2e2);
	border-radius: var(--radius-sm, 8px);
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--gt-black, #111);
	transition: border-color 160ms ease, background-color 160ms ease;
}

/* Модальное окно заявки одевает подписи полей правилом с id
   (#main-form .form-fields-input label — display:block, 11–12 px), поэтому карточке
   нужен селектор не ниже по весу: иначе знак, название и индикатор встают в столбик. */
#main-form .gt-channel .gt-channel__grid label.gt-channel__card {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	margin: 0;
	min-height: 56px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.3;
}

/* Нативная радиокнопка остаётся в разметке ради клавиатуры и чтения с экрана, но
   рисуем мы. Правило формы задаёт input высоту поля через селектор с id, поэтому
   здесь тот же вес: иначе невидимая кнопка вылезала бы за карточку и перехватывала
   нажатия по соседней.
   21.09 (окно 1): `min-width: 0` обязателен. Старое правило форм
   `.form input, .form select { min-width: 190px }` держит невидимую кнопку шире карточки,
   и в узком контейнере (диалог «Задать вопрос», 456 px на 1280) карточка, сетка и сам
   диалог получают горизонтальную прокрутку. Ширина остаётся 100 % карточки. */
.gt-channel__card input[type='radio'],
#main-form .gt-channel .gt-channel__grid input[type='radio'] {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* ---------- знак канала ---------- */
.gt-channel__mark {
	position: relative;
	grid-column: 1;
	flex: none;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
}

.gt-channel__card input[value='phone'] + .gt-channel__mark,
.gt-channel__card input[value='telegram'] + .gt-channel__mark,
.gt-channel__card input[value='whatsapp'] + .gt-channel__mark,
.gt-channel__card input[value='email'] + .gt-channel__mark,
.gt-channel__card input[value='vk'] + .gt-channel__mark {
	background: currentColor;
	-webkit-mask: var(--gt-channel-glyph) center / contain no-repeat;
	mask: var(--gt-channel-glyph) center / contain no-repeat;
}

.gt-channel__card input[value='phone'] + .gt-channel__mark { --gt-channel-glyph: url('../../images/icons/phone.svg'); }
.gt-channel__card input[value='telegram'] + .gt-channel__mark { --gt-channel-glyph: url('../../images/icons/telegram-logo.svg'); }
.gt-channel__card input[value='whatsapp'] + .gt-channel__mark { --gt-channel-glyph: url('../../images/icons/whatsapp-logo.svg'); }
.gt-channel__card input[value='email'] + .gt-channel__mark { --gt-channel-glyph: url('../../images/icons/envelope-simple.svg'); }
.gt-channel__card input[value='vk'] + .gt-channel__mark { --gt-channel-glyph: url('../../images/icons/vk-logo.svg'); }

/* MAX: официальный знак из брендбука go.max.ru (выбор root, исходные байты архива
   перенесены без правок). В отличие от пяти остальных он ставится картинкой со своими
   цветами, а не маской по currentColor: внутри знака белый вырез, а маска берёт только
   альфу и залила бы его сплошным пятном. Тёмная поверхность получает белый вариант ниже. */
.gt-channel__card input[value='max'] + .gt-channel__mark {
	background: url('../../images/icons/max-logo.svg') center / contain no-repeat;
	-webkit-mask: none;
	mask: none;
}

/* ---------- подпись ---------- */
.gt-channel__name {
	position: relative;
	grid-column: 2;
	min-width: 0;
	overflow-wrap: break-word;
}

/* ---------- индикатор выбора в углу ---------- */
/* Пустой кружок у невыбранных вариантов не рисуется вовсе: он занимал отдельную колонку
   в 18 px плюс зазор, а невыбранное состояние и так читается по рамке и подложке. */
.gt-channel__card::after { content: none; }

.gt-channel__card:hover { border-color: #b4b4b4; }

.gt-channel__card:has(input:checked),
.gt-channel__card.is-selected {
	border-color: var(--gt-red);
	/* второй признак выбора, кроме цвета: рамка читается вдвое толще, но ничего не смещает */
	box-shadow: inset 0 0 0 1px var(--gt-red);
	background: #fff6f5;
}

/* Галочка выбранного варианта — третий признак, уже не цветовой и не толщиной рамки.
   Стоит в верхнем правом углу поверх карточки: ширину подписи она не отнимает, а с
   текстом не пересекается, потому что подпись выровнена по центру карточки. */
.gt-channel__card:has(input:checked)::after,
.gt-channel__card.is-selected::after {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: var(--gt-red) var(--gt-channel-check) center / 9px 7px no-repeat;
}

/* Обводка фокуса отличается от выбранного состояния: она снаружи карточки и есть даже
   у невыбранной. */
.gt-channel__card:has(input:focus-visible) {
	outline: 2px solid var(--gt-red);
	outline-offset: 2px;
}

.gt-channel .form-error { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
	.gt-channel__card,
	.gt-channel__card::after { transition: none; }
}

/* Телефон и планшет: две колонки, карточка ниже и с меньшими боковыми полями. Замер на
   390: диалог 366 px, под сетку 326 px, колонка 159 px, под подпись 111 px при нужных 78.
   На 320: диалог 304 px, сетка 272 px, колонка 132 px, под подпись 84 px — тоже целиком,
   поэтому запасная раскладка «знак сверху, подпись под ним» не понадобилась. */
@media (max-width: 767px) {
	.gt-channel__grid { gap: 8px; }
	.gt-channel__card,
	#main-form .gt-channel .gt-channel__grid label.gt-channel__card {
		min-height: 52px;
		padding: 9px 8px;
		gap: 8px;
		grid-template-columns: 24px minmax(0, 1fr);
	}
	.gt-channel__card:has(input:checked)::after,
	.gt-channel__card.is-selected::after { top: 5px; right: 5px; width: 14px; height: 14px; background-size: 8px 6px; }
}

/* 320: знак сверху, подпись под ним — запасная раскладка по решению root, ровно на самых
   узких экранах и только для этого случая. Замер: при классической полосе прокрутки
   (эмуляция окна 320) диалог 289 px, карточка 117 px и под подпись остаётся 67 px, а
   «WhatsApp» (76) и «ВКонтакте» (78) переносятся посреди слова. В два ряда подписи
   получают всю ширину карточки — 101 px — и встают в одну строку. Две колонки и высота
   68 px сохраняются; это лучше, чем шесть длинных строк или уменьшенный кегль. */
@media (max-width: 359px) {
	.gt-channel__card,
	#main-form .gt-channel .gt-channel__grid label.gt-channel__card {
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		justify-items: start;
		gap: 4px;
		min-height: 68px;
		padding: 10px 8px;
	}
	.gt-channel__name { grid-column: 1; }
}

/* Тёмная поверхность модального окна заявки. */
.gtyres-lead-modal .gt-channel__card,
.lead-form .gt-channel__card {
	background: #232629;
	border-color: #3a3d40;
	color: #fff;
}

.gtyres-lead-modal .gt-channel__card:has(input:checked),
.gtyres-lead-modal .gt-channel__card.is-selected,
.lead-form .gt-channel__card:has(input:checked),
.lead-form .gt-channel__card.is-selected { background: #2b1e1f; }

/* Только цвет: сокращённая запись background сбросила бы и картинку галочки, и её размер. */
.gtyres-lead-modal .gt-channel__card:has(input:checked)::after,
.gtyres-lead-modal .gt-channel__card.is-selected::after,
.lead-form .gt-channel__card:has(input:checked)::after,
.lead-form .gt-channel__card.is-selected::after { background-color: var(--gt-red); }

/* Тёмная поверхность: у MAX своя картинка, а не маска, поэтому здесь белый вариант знака. */
.gtyres-lead-modal .gt-channel__card input[value='max'] + .gt-channel__mark,
.lead-form .gt-channel__card input[value='max'] + .gt-channel__mark {
	background-image: url('../../images/icons/max-logo-white.svg');
}