/* Страница «Контакты»: связь, склад, карта, обратный звонок, реквизиты. Цвета, радиусы и движение - из токенов сайта; текст на оранжевом белый. */
.ct { display: flex; flex-direction: column; gap: var(--space-32); }
.ct-head { max-width: 720px; }
.ct-title { margin: 0 0 var(--space-12); font-size: 30px; font-weight: 500; line-height: 1.2; }
.ct-lead { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 1.55; }
.ct-h2 { margin: 0 0 var(--space-16); font-size: 18px; font-weight: 700; line-height: 1.3; }

.ct-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-24); align-items: stretch; }
.ct-grid--second { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.ct-stack { display: flex; flex-direction: column; gap: var(--space-16); }
.ct-panel { padding: var(--space-24); border-radius: var(--radius-card); }
.ct-panel--call { background: var(--surface-1); }
.ct-panel--store { border: 1px solid var(--hairline); background: var(--canvas); }

/* Телефоны и почта: крупные плитки-ссылки */
.ct-status { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--space-16); font-size: 14px; line-height: 1.4; }
.ct-status .status-dot { margin-top: 5px; flex: none; }
.ct-status strong { display: block; font-weight: 700; }
.ct-status__hint { display: block; color: var(--ink-muted); }
.ct-phones { display: flex; flex-direction: column; gap: var(--space-8); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.ct-phone { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-tile); background: var(--canvas); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.ct-phone:hover { box-shadow: inset 0 0 0 1px var(--primary); }
.ct-phone:active { transform: translateY(1px); }
.ct-phone:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ct-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-tint); color: var(--primary-pressed); }
.ct-ico .icon { width: 20px; height: 20px; }
.ct-phone__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-phone__num { font-size: 22px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ct-phone__num--mail { font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
.ct-phone__kind { color: var(--ink-muted); font-size: 13px; line-height: 1.3; }
.ct-link { display: inline-block; margin-top: var(--space-8); color: var(--primary-pressed); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ct-hours { display: flex; align-items: center; gap: 8px; margin: var(--space-16) 0; color: var(--ink-muted); font-size: 14px; line-height: 1.4; }
.ct-hours .icon { flex: none; width: 18px; height: 18px; }
.ct-cta { display: flex; width: 100%; min-height: 52px; font-size: 16px; }

/* Склад */
.ct-address { display: flex; align-items: flex-start; gap: var(--space-12); margin: 0 0 var(--space-12); font-size: 16px; line-height: 1.45; }
.ct-address .ct-ico { width: 36px; height: 36px; }
.ct-address a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); }
.ct-address a:hover { color: var(--primary-pressed); }
.ct-note { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.ct-note--muted { color: var(--ink-subtle); font-size: 13px; }
.ct-note a { color: var(--primary-pressed); text-decoration: underline; text-underline-offset: 2px; }

/* Карта Яндекса: рамка в стиле сайта (скругление, тонкая линия); пока грузится - «скелет», если не ответила - адрес со ссылкой на маршрут */
.ct-map { position: relative; min-height: 460px; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface-1); }
.ct-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; filter: saturate(0.9); transition: opacity var(--dur-slow) var(--ease); }
.ct-map.is-ready .ct-map__frame { opacity: 1; }
.ct-map__skeleton { position: absolute; inset: 0; display: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%) 0 0 / 200% 100% no-repeat var(--surface-1); }
.ct-map.is-loading .ct-map__skeleton { display: block; animation: ct-shimmer 1.4s linear infinite; }
@keyframes ct-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ct-map__fallback { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: var(--space-24); text-align: center; }
.ct-map.is-failed .ct-map__fallback { display: flex; }
.ct-map.is-failed .ct-map__frame { display: none; }
.ct-map__pin { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.ct-map__pin .icon { width: 28px; height: 28px; }
.ct-map__address { max-width: 360px; margin: var(--space-8) 0 var(--space-4); font-size: 18px; font-weight: 600; line-height: 1.4; }
.ct-map__btn { min-height: 48px; padding: 0 var(--space-24); }
.ct-map__note { margin: 0; color: var(--ink-subtle); font-size: 13px; line-height: 1.4; }

/* Форма обратного звонка */
.ct-form { padding: var(--space-24); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--canvas); scroll-margin-top: 96px; }
.ct-form__lead { margin: calc(var(--space-8) * -1) 0 var(--space-16); color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.ct-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.ct-form__wide { grid-column: 1 / -1; }
.ct-form__email { grid-column: 1 / -1; }
/* Email в форме звонка (02.10.2026): от 1200 px три поля в одной строке, форма не растёт; ниже Email отдельной строкой во всю ширину, лишнюю высоту забирает «Комментарий». */
@media (min-width: 1200px) {
  .ct-form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-form__email { grid-column: auto; }
}
.ct-form__consent { margin-top: var(--space-16); }
/* «Обратный звонок» и «Реквизиты» стоят в одну полосу (решение заказчика 02.10.2026): карточка формы тянется до высоты реквизитов,
   а лишнюю высоту забирает поле «Комментарий», чтобы под кнопкой не оставалось пустоты. Только когда блоки стоят рядом (от 1024 px). */
@media (min-width: 1024px) {
  .ct-form { display: flex; flex-direction: column; }
  .ct-form > form { display: flex; flex: 1 1 auto; flex-direction: column; }
  .ct-form__grid { flex: 1 1 auto; grid-template-rows: auto auto minmax(0, 1fr); }
  .ct-form__wide { display: flex; flex-direction: column; }
  .ct-form__wide textarea.co-input { flex: 1 1 auto; }
  .ct-form__btn { align-self: flex-start; }
}
.ct-form__btn { min-height: 52px; margin-top: var(--space-16); padding: 0 var(--space-32); font-size: 16px; }
.ct-sent { padding: var(--space-16) var(--space-24); border-radius: var(--radius-tile); background: var(--surface-1); font-size: 15px; line-height: 1.5; }
.ct-sent p { margin: 0; }
.ct-sent__title { margin-bottom: var(--space-4) !important; font-size: 18px; font-weight: 700; }
.ct-sent a { color: var(--primary-pressed); text-decoration: underline; text-underline-offset: 2px; }

/* Реквизиты */
.ct-req { padding: var(--space-24); border-radius: var(--radius-card); background: var(--surface-1); }
.ct-req__list { margin: 0; }
.ct-req__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-12); padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 14px; line-height: 1.45; }
.ct-req__row:first-child { border-top: 0; padding-top: 0; }
.ct-req__row dt { color: var(--ink-muted); }
.ct-req__row dd { margin: 0; overflow-wrap: anywhere; }

/* Появление блоков: одно короткое движение, чтобы страница не «выскакивала» разом */
@keyframes ct-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ct-head, .ct-stack > *, .ct-map, .ct-form, .ct-req { animation: ct-rise var(--dur-slow) var(--ease) both; }
  .ct-stack > :nth-child(1) { animation-delay: 60ms; }
  .ct-stack > :nth-child(2) { animation-delay: 120ms; }
  .ct-map { animation-delay: 100ms; }
  .ct-form { animation-delay: 160ms; }
  .ct-req { animation-delay: 210ms; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-phone, .ct-map__frame { transition: none; }
  .ct-map.is-loading .ct-map__skeleton { animation: none; }
}

@media (max-width: 1023px) {
  .ct-grid, .ct-grid--second { grid-template-columns: minmax(0, 1fr); }
  .ct-map { min-height: 340px; }
}
@media (max-width: 719px) {
  .ct-title { font-size: 24px; }
  .ct-panel, .ct-form, .ct-req { padding: var(--space-16); }
  .ct-phone__num { font-size: 20px; }
  .ct-form__grid { grid-template-columns: minmax(0, 1fr); }
  .ct-form__btn { width: 100%; }
  .ct-req__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (min-width: 1200px) { .ct-form__grid { grid-template-rows: auto minmax(0, 1fr); } }