/* ==========================================================================
   ГК Аванпорт — страница «Контакты» (kontakty.html, D-026).
   Как на konsole.ru/kontakty/: вкладки городов, широкая карта, поверх неё слева — карточка офиса.
   На узких экранах карточка — под картой. Цвета и шрифты — токены из main.css.
   ========================================================================== */
.ct-hero{background:var(--grad-hero);padding:40px var(--gutter) clamp(56px,7vw,100px)}
.ct-hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,4.4vw,64px);line-height:1.06;letter-spacing:.04em;text-transform:uppercase}
.ct-hero h1 .ghost{display:block}
.ct-sub{margin-top:18px;max-width:52ch;font-size:17px;line-height:1.6;color:var(--text-2)}

.ct-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 24px}
.ct-tabs .chip{min-height:46px;padding:0 24px;font-size:15px}

.ct-office{position:relative;border-radius:28px;overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow);min-height:560px;display:flex;align-items:flex-start}
.ct-map{position:absolute;inset:0;display:block;background:var(--grad-soft)}
.ct-map iframe{display:block;width:100%;height:100%;border:0}

/* карточка — в потоке: блок карты растёт по её высоте, без внутренней прокрутки;
   слева отступ 76px — не закрывать кнопки масштаба виджета 2ГИС */
.ct-card{position:relative;margin:28px 28px 28px 76px;width:340px;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:20px;background:#fff;box-shadow:0 18px 44px rgba(11,49,74,.16)}
.ct-photo{border-radius:12px;overflow:hidden;aspect-ratio:3/2;flex:none;background:var(--bg-soft)}
.ct-photo img{width:100%;height:100%;object-fit:cover}
.ct-title{margin-top:6px;font-family:var(--f-display);font-weight:400;font-size:20px;line-height:1.2;letter-spacing:.03em;text-transform:uppercase}
.ct-addr{font-size:15px;line-height:1.45}
.ct-hours{font-size:14px;line-height:1.55;color:var(--text-2)}
.ct-phone{font-family:var(--f-num);font-style:italic;font-weight:600;font-size:24px;color:var(--dark)}
.ct-phone:hover{color:var(--accent-deep)}
.ct-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}

@media (max-width:720px){
  .ct-hero{padding-top:24px}
  .ct-office{min-height:0;flex-direction:column;align-items:stretch;border-radius:20px}
  .ct-map{position:relative;inset:auto;height:300px}
  .ct-card{margin:0;width:auto;border-radius:0;box-shadow:none}
  .ct-btns .btn{flex:1}
}