/* ============================================================
   Блок «Контакты (панель)» — contacts
   Контракт: site/docs/tz/tz-contacts.md

   Панель вкладки на главной, роль и мера — как у about-company. Раскладку
   держат Bootstrap-утилиты (d-flex / flex-wrap / list-unstyled); в файле —
   мера, вертикальный ритм и типографика.

   Цвет — ТОЛЬКО из контекстной палитры --ctx-* (style.css) и общих --macro-*.
   Обе темы уже внутри токенов: ноль hex, ни одной ветки «если тёмная».
   Ссылки-акцент = --ctx-accent (в тёмной теме светлеет сам).

   Все селекторы минимум из двух классов не для красоты: страница кейса задаёт
   типографику через `.case-body p` (специфичность 0,1,1), одноклассовое
   правило ей проигрывает — блок обязан пережить установку на кейс.

   Сайт говорит линейками, воздухом и типографикой, а не коробками: здесь ноль
   заливок-коробок и теней. Единственная «рамка» — светлая плашка под лого хаба
   слева от текста офиса (семантический токен --contacts-hub-bg), чтобы цветные/
   тёмные лого партнёров читались в ОБЕИХ темах; на тёмном фоне без неё чёрные
   глифы тонут.

   T39: отдельный ряд аккредитаций (.contacts-accred / .contacts-hubs) убран —
   лого хаба переехало к каждому офису (.contacts-office__logo).

   T53: раскладку офиса переставили. Было (T39) — лого НАД заголовком (столбик).
   Стало — .contacts-office = горизонтальный flex-ряд: слева плашка
   .contacts-office__logo, справа .contacts-office__body (заголовок + адрес),
   лого↔текст центрированы по вертикали (align-items:center). На узком экране
   ряд сворачивается в столбик (лого над текстом), лого чуть уменьшается.

   T58: у flex-ряда плашка лого держала СВОЮ ширину по контенту (flex:none +
   width:auto), поэтому у DIFC/Astana/IT Park текст стартовал с разного x —
   левая линия текста «плавала». Переделано на GRID с ФИКСИРОВАННОЙ левой
   колонкой --contacts-logo-col (по самому широкому лого + запас) и 1fr справа.
   Все плашки лого выстраиваются в ровную левую колонку (justify-self:start,
   выравнены по левому краю), тексты всех офисов начинаются с ОДНОЙ левой линии.

   T65: панель — ДВЕ КОЛОНКИ (.contacts-grid grid). Слева .contacts-main
   (офисы, вся логика T58 внутри неё без изменений), справа .contacts-aside —
   ПЛАШКА-подложка (--ctx-surface + --contacts-radius + паддинги), внутри
   которой сайты и почта идут ВЕРТИКАЛЬНЫМ столбиком (.contacts-links сменил
   d-flex/flex-wrap на flex-direction:column). Плашка «прилипает» к верху своей
   колонки (align-self:start) и не растягивается на всю высоту офисов. На <992px
   grid схлопывается в один столбец: плашка уходит ПОД офисы во всю ширину.
   ============================================================ */

.contacts-section {
	/* Мера — ТА ЖЕ, что у about-company и ленты табов: --case-max. Панель
	   обязана совпасть с cases-head/cases-grid/about-section край в край,
	   иначе при переключении вкладки страница «прыгает» по ширине. */
	--contacts-measure: var(--case-max, 2000px);

	/* T58: ФИКСИРОВАННАЯ ширина левой колонки лого. Единая для всех офисов —
	   от неё «левая линия» текста общая. Подобрана по самому широкому лого
	   (IT Park) + запас: высота глифов ~2.75rem, широкие лого до ~4.5:1 →
	   плашка с паддингами добирает до ~12–14rem. clamp даёт сжатие на планшете
	   и потолок на десктопе; на мобиле колонка схлопывается (см. медиазапрос). */
	--contacts-logo-col: clamp(9rem, 16vw, 13.5rem);

	/* Крупные вертикальные интервалы между группами: офисы ↔ ссылки.
	   Тот же клэмп, что у --about-rhythm. */
	--contacts-rhythm: clamp(2.5rem, 5vw, 4rem);

	/* Радиус подложки под лого — системный токен страницы, своего не заводим. */
	--contacts-radius: var(--case-radius, 1.25rem);

	/* T65: ширина правой колонки-плашки (сайты + почта). Достаточно под самую
	   длинную подпись (to@macroglobaltech.com) + внутренние паддинги; на десктопе
	   плашка не должна отъедать больше трети панели. Фиксированная колонка держит
	   ровный правый край независимо от длины адресов офисов слева. */
	--contacts-aside-col: clamp(18rem, 26vw, 24rem);

	/* Зазор между колонками панели (офисы ↔ плашка). T77: чуть увеличен —
	   раскладка стала просторнее, колонки не липнут друг к другу. */
	--contacts-grid-gap: clamp(2rem, 4.5vw, 5rem);

	/* Фон плашки под лого хаба (над заголовком офиса). Семантический токен —
	   единственный источник правды и единственный белый в файле. НЕ --ctx-surface:
	   в тёмной теме он уходит в navy (#1b2c4b), и тёмные лого партнёров (DIFC,
	   astana hub, IT Park) на нём тонут. Плашка обязана быть светлой в ОБЕИХ
	   темах, чтобы цветные/тёмные глифы читались одинаково. */
	--contacts-hub-bg: #ffffff;

	/* Свой горизонтальный отступ: блок стоит на главной, где .entry-content
	   печатается без бутстраповского .container. Внутри контейнера гасится
	   ниже, иначе паддинги сложатся. */
	padding-inline: var(--case-pad, clamp(1rem, 4.5vw, 6rem));

	/* T77: воздух вокруг панели увеличен по просьбе владельца — контент не должен
	   начинаться впритык под лентой вкладок. Верхний отступ (от кнопок до первого
	   офиса) заметно больше нижнего; оба через clamp, чтобы на мобиле не раздувать. */
	padding-top: clamp(2.75rem, 6vw, 5rem);
	padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.container .contacts-section,
.container-fluid .contacts-section {
	padding-inline: 0;
}

/* Мера — на прямых детях секции: контент центрируется, а секция тянется во всю
   колонку. Внутри .container центрировать второй раз нельзя — прижимаем к тому
   же краю (как about-company/team-members). */
.contacts-section > * {
	max-width: var(--contacts-measure);
	margin-inline: auto;
}

.container .contacts-section > *,
.container-fluid .contacts-section > * {
	margin-inline: 0;
}

/* Подсказка редактору в пустом блоке (на фронт не попадает). */
.contacts-section__hint {
	margin: 0;
	padding: 1rem;
	border: 1px dashed var(--ctx-border);
	border-radius: 0.5rem;
	color: var(--ctx-muted);
}


/* ============================================================
   Шапка eyebrow «Контакты» убрана в T30 — дублировала подпись вкладки в ленте.
   Первым узлом панели теперь идёт блок офисов; верхний отступ секции держит
   padding-block .contacts-section (визуально скрытый h2#contacts-title потока
   не занимает). Отдельного правила шапки не осталось.
   ============================================================ */


/* ============================================================
   T65: панель — две колонки. Слева офисы (.contacts-main, 1fr), справа плашка
   (.contacts-aside, фикс-ширина). Зазор — --contacts-grid-gap. align-items:start,
   чтобы плашка прилипала к верху и не тянулась на высоту офисов. На <992px
   схлопывается в один столбец (см. медиазапрос внизу).
   ============================================================ */
.contacts-section .contacts-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--contacts-aside-col);
	align-items: start;
	gap: var(--contacts-grid-gap);
}

.contacts-section .contacts-main {
	min-width: 0;
}


/* ============================================================
   Офисы: вертикальный список во всех брейкпоинтах — заголовок капсом + адрес.
   Один столбец даже на широком (по эталону): длинные адреса читаются лучше
   в столбик, чем растянутые в grid.
   ============================================================ */

.contacts-section .contacts-offices {
	margin-bottom: 0;
}

/* T77: вертикальный зазор между офисами (Дубай / Астана / Ташкент) увеличен —
   адреса стояли тесно, владелец попросил больше воздуха между ними. */
.contacts-section .contacts-office + .contacts-office {
	margin-top: clamp(2.75rem, 5vw, 4rem);
}

/* T58: офис — GRID, а не flex. Левая колонка ФИКСИРОВАННОЙ ширины
   (--contacts-logo-col) под плашку лого, правая (1fr) под текст. Фикс-ширина
   одинакова у всех офисов → плашки лого выстраиваются в ровную левую колонку,
   а левая линия текста единая для DIFC/Astana/IT Park. align-items:center
   центрирует лого↔текст по вертикали в каждом ряду. На мобиле grid схлопывается
   в один столбец (см. медиазапрос ниже). */
.contacts-section .contacts-office {
	display: grid;
	grid-template-columns: var(--contacts-logo-col) 1fr;
	align-items: center;
	gap: clamp(0.875rem, 2.4vw, 1.5rem);
}

/* T58: плашка лого — левая ячейка фикс-ширины --contacts-logo-col.
   T79 (центровка): раньше плашка усаживалась по контенту (justify-self:start +
   inline-flex + justify-content:flex-start), поэтому у трёх лого РАЗНОЙ ширины
   (DIFC/Astana/IT Park) совпадали ЛЕВЫЕ края, а геометрические центры разъезжались
   на ~35px. Теперь плашка РАСТЯНУТА на всю фикс-колонку (justify-self:stretch +
   width:100%), а лого центрируется внутри неё (justify-content:center). Центр
   каждого лого = центр фикс-колонки → все три лого встают на ОДНУ вертикальную
   ось (общий центр по эталону Astana Hub). Устойчиво к размеру лого: центрируем
   по боксу колонки, без сдвигов под конкретный файл (важно — DIFC скоро заменят).
   Левая линия текста НЕ едет: правая колонка 1fr отсчитывается от фикс-ширины
   --contacts-logo-col, а не от ширины плашки. Светлая (--contacts-hub-bg) в
   ОБЕИХ темах, чтобы тёмные глифы партнёров читались. */
.contacts-section .contacts-office__logo {
	justify-self: stretch;
	width: 100%;
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: clamp(0.4rem, 1.2vw, 0.75rem) clamp(0.6rem, 1.6vw, 1rem);
	background-color: var(--contacts-hub-bg);
	border-radius: var(--contacts-radius);
	line-height: 0;
}

/* Единая высота лого через clamp; ширина авто + contain — без искажения.
   T79: margin-inline:auto центрирует лого в плашке даже без flex-контекста —
   страховка к общей вертикальной оси всех трёх лого. */
.contacts-section .contacts-office__logo-img {
	display: block;
	width: auto;
	height: clamp(2rem, 4vw, 2.75rem);
	max-width: 100%;
	margin-inline: auto;
	object-fit: contain;
}

/* T84: лого DIFC (офис Дубай) крупнее остальных двух на 20% по просьбе владельца.
   Первый .contacts-office в DOM = Дубай/DIFC (репитер contacts-offices, строка 0;
   лого = difc-modern-1.svg) — таргет :first-child надёжен, Astana Hub / IT Park
   остаются на базовой высоте. Высота = базовый clamp × 1.2. Центровку T79 это НЕ
   трогает: плашка/колонка фикс-ширины и justify-content:center центрируют лого по
   той же вертикальной оси, а align-items:center ряда — по вертикали внутри плашки;
   лого просто масштабируется вокруг своего центра. */
.contacts-section .contacts-office:first-child .contacts-office__logo-img {
	height: calc(clamp(2rem, 4vw, 2.75rem) * 1.2);
}

/* Блок текста офиса — заголовок + адрес, правая ячейка grid. min-width:0, чтобы
   длинные адреса переносились, а не распирали колонку. text-align:left —
   заголовок и адрес по единой левой линии (общей у всех офисов через фикс-
   ширину левой колонки). */
.contacts-section .contacts-office__body {
	min-width: 0;
	text-align: left;
}

.contacts-section .contacts-office__title {
	margin: 0;
	font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ctx-ink);
}

.contacts-section .contacts-office__addr {
	margin: clamp(0.5rem, 1vw, 0.75rem) 0 0;
	font-size: clamp(1rem, 1.15vw, 1.1875rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--ctx-ink);
}


/* ============================================================
   T65: правая плашка-подложка со ссылками (сайты + почта).
   Поверхность --ctx-surface + скругление --contacts-radius (как у остальных
   плашек проекта), внутренние паддинги. Прилипает к верху своей колонки
   (align-self:start от grid). Читается в ОБЕИХ темах: --ctx-surface светлеет/
   темнеет сам, границу даём --ctx-border для контраста плашки с фоном.
   ============================================================ */
.contacts-section .contacts-aside {
	align-self: start;
	padding: clamp(1.25rem, 2.4vw, 2rem);
	background-color: var(--ctx-surface);
	border: 1px solid var(--ctx-border);
	border-radius: var(--contacts-radius);
}


/* ============================================================
   Ссылки-контакты: ВЕРТИКАЛЬНЫЙ столбик внутри плашки (сайт / сайт / почта),
   синие (акцент). Раньше был flex-wrap-ряд под офисами; в T65 — столбик.
   ============================================================ */

.contacts-section .contacts-links {
	display: flex;
	flex-direction: column;
	margin: 0;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.contacts-section .contacts-links__item {
	min-width: 0;
}

.contacts-section .contacts-link {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	font-size: clamp(1rem, 1.2vw, 1.1875rem);
	font-weight: 600;
	color: var(--ctx-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.contacts-section .contacts-link {
	touch-action: manipulation;
}

/* hover только на устройствах с точным указателем — иначе на тач первый тап
   «залипает». Затемнение — правило ссылок из macro-brand.md:83 (shade 20% =
   mix(black, accent, 20%)); black — ключевое слово CSS, не hex-литерал. */
@media (hover: hover) and (pointer: fine) {
	.contacts-section .contacts-link:hover {
		color: color-mix(in srgb, var(--ctx-accent) 80%, black);
	}
}


/* ============================================================
   T65: на <992px панель из двух колонок схлопывается в ОДНУ — плашка со
   ссылками уходит ПОД офисы во всю ширину. Между офисами и плашкой возвращаем
   вертикальный ритм --contacts-rhythm (в две колонки его давал gap). Плашка
   остаётся подложкой, столбик ссылок внутри — как на десктопе.
   ============================================================ */
@media (max-width: 991.98px) {
	.contacts-section .contacts-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--contacts-rhythm);
	}
}


/* ============================================================
   Адаптив: базовые стили выше — grid «лого-колонка слева + текст-колонка справа»
   держится от планшета и шире (тексты всех офисов по единой левой линии).
   На узком экране (до 576px) фикс-колонка лого + длинный адрес тесно — grid
   схлопывается в ОДИН столбец: лого над текстом, всё по левому краю (как весь
   контент). Лого уже уменьшено нижней границей clamp'а высоты; структура блока
   и левое выравнивание текста сохраняются.
   ============================================================ */
@media (max-width: 575.98px) {
	.contacts-section .contacts-office {
		grid-template-columns: 1fr;
		align-items: start;
		gap: clamp(0.625rem, 3vw, 0.875rem);
	}

	/* T94 (мобилка): лого хабов — по ЛЕВОМУ краю, а не по центру. Раньше (T79) в
	   один столбец плашка усаживалась по контенту (width:max-content) и
	   центрировалась (justify-self:center + margin-inline:auto) — три лого стояли
	   по центру экрана. По просьбе владельца на узком экране прижимаем плашку к
	   левому краю ячейки (justify-self:start + margin-inline:0): у всех трёх
	   офисов одинаковый левый старт, лого выровнены влево вслед за текстом.
	   width:max-content сохраняем — плашка держит ширину по лого и не раздувается
	   в белую полосу (важно для тёмной темы). ДЕСКТОП/планшет не тронуты: центровка
	   T79 (justify-self:stretch / justify-content:center) и T84 (DIFC ×1.2) живут
	   в базовых правилах вне этого медиазапроса. */
	.contacts-section .contacts-office__logo {
		justify-self: start;
		width: max-content;
		max-width: 100%;
		margin-inline: 0;
		justify-content: flex-start;
	}

	/* T95 (мобилка): плашка лого уже прижата к левому краю ячейки (T94,
	   justify-self:start), но её ВНУТРЕННИЙ левый padding
	   (clamp(0.6rem,1.6vw,1rem)) отодвигал ВИДИМЫЙ глиф лого вправо от левой
	   линии текста (замер 375px: текст x=16.88, глиф x=26.47 → сдвиг ~9.6px =
	   левый padding). Обнуляем ТОЛЬКО левый padding — видимый левый край лого
	   встаёт ровно на левую линию заголовка/адреса офиса (единая левая линия у
	   всех трёх офисов). Вертикальный и правый padding + светлый фон плашки
	   сохранены, вид не ломается. ДЕСКТОП/планшет не тронуты: базовый симметричный
	   padding с центровкой T79 живёт вне этого медиазапроса. */
	.contacts-section .contacts-office__logo {
		padding-left: 0;
	}

	/* Лого внутри плашки тоже прижимаем влево: базовое margin-inline:auto
	   (страховка центровки для десктопа) на мобилке гасим, чтобы у всех трёх
	   был единый левый старт. */
	.contacts-section .contacts-office__logo-img {
		margin-inline: 0;
	}
}