/* ============================================================
   Страница «Контакты» — компоновка контактных блоков.
   Изолированный стиль (scoped под .olio-contact), грузится только
   на page-contact ПОСЛЕ content-pages.css (зависимость olio-content-pages),
   поэтому переопределяет остаточные правила .contact-* без конфликтов.
   Разметка — page-contact.php (классы .cx__*). Токены — style.css.
   ============================================================ */

/* Мостик-связка от карты-игры к контактам.
   Основной шрифт (не каллиграфия) — целое предложение должно читаться. */
.olio-contact .cx__bridge{
  max-width:680px; margin:var(--space-sm) auto var(--space-lg); text-align:center;
  font-family:var(--font-base); font-weight:300; font-size:var(--fs-md);
  line-height:1.5; color:var(--c-muted); letter-spacing:.01em;
}
.olio-contact .cx__bridge b{ color:var(--c-text); font-weight:500; }
.olio-contact .cx__bridge b.accent{ color:var(--c-accent); }

/* Единый каркас карточки + верхняя линейка-акцент (отсылка к гравюре) */
.olio-contact .cx__card{
  background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--radius);
  padding:var(--space-lg); position:relative; text-align:left;
}
.olio-contact .cx__card::before{
  content:""; position:absolute; left:var(--space-lg); right:var(--space-lg); top:0; height:3px;
  background:var(--c-text); opacity:.9; border-radius:0 0 2px 2px;
}
.olio-contact .cx__card h2{
  margin:0 0 var(--space-md); font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-xl); line-height:1.15;
}

/* Featured-сплит: адрес ↔ живая карта */
.olio-contact .cx__split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--space-md);
  align-items:stretch; margin-bottom:var(--space-md);
}
.olio-contact .cx__map{
  border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden;
  min-height:440px; background:var(--c-bg-alt); position:relative;
}
.olio-contact .cx__map iframe{
  display:block; width:100%; height:100%; min-height:440px; border:0;
}

.olio-contact .cx__addr{ font-weight:600; margin:0 0 var(--space-sm); font-size:var(--fs-md); }
.olio-contact .cx__meta{
  display:flex; flex-direction:column; gap:var(--space-xs);
  margin:0 0 var(--space-md); color:var(--c-muted);
}
.olio-contact .cx__meta > div{ display:flex; align-items:flex-start; gap:var(--space-xs); }
.olio-contact .cx__meta svg{ width:16px; height:16px; flex:none; color:var(--c-text); margin-top:4px; }
.olio-contact .cx__meta .mono{ font-family:monospace; font-weight:600; color:var(--c-text); letter-spacing:0; }

/* Нижний ряд: online + B2B */
.olio-contact .cx__row2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.olio-contact .cx__lead{ margin:0 0 var(--space-md); color:var(--c-muted); }
.olio-contact .cx__phone{ margin:0 0 var(--space-md); font-size:var(--fs-lg); font-weight:600; }
.olio-contact .cx__phone a{ color:var(--c-text); text-decoration:none; }

/* ЕДИНЫЙ язык кнопок: outline-пилюля; бренд-цвет только на hover */
.olio-contact .cx__btns{ display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-sm); }
.olio-contact .cx__btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
  font-family:var(--font-base); font-size:var(--fs-base); font-weight:500;
  color:var(--c-text); background:var(--c-bg); border:1px solid var(--c-text);
  border-radius:100px; text-decoration:none; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.olio-contact .cx__btn svg{ width:16px; height:16px; flex:none; }
.olio-contact .cx__btn:hover{ background:var(--c-text); color:#fff; }
.olio-contact .cx__btn--primary{ background:var(--c-text); color:#fff; }
.olio-contact .cx__btn--primary:hover{ background:#000; transform:translateY(-1px); }
.olio-contact .cx__btn--tg:hover{ background:#24a1de; border-color:#24a1de; color:#fff; }
.olio-contact .cx__btn--ghost{ border-color:var(--c-border); color:var(--c-muted); }
.olio-contact .cx__btn--ghost:hover{ background:var(--c-bg-alt); color:var(--c-text); border-color:var(--c-text); }

/* Соц-иконки — тот же каркас (круглый outline, бренд-цвет на hover) */
.olio-contact .cx__socials{ display:flex; gap:var(--space-xs); margin-top:var(--space-md); }
.olio-contact .cx__soc{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--c-text);
  display:inline-flex; align-items:center; justify-content:center; color:var(--c-text);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.olio-contact .cx__soc svg{ width:20px; height:20px; }
.olio-contact .cx__soc.tg:hover{ background:#24a1de; border-color:#24a1de; color:#fff; }
.olio-contact .cx__soc.vk:hover{ background:#0077ff; border-color:#0077ff; color:#fff; }
.olio-contact .cx__soc.rt:hover{ background:#000; border-color:#000; color:#fff; }
.olio-contact .cx__soc.max:hover{ background:#000; border-color:#000; color:#fff; }
.olio-contact .cx__soc.pin:hover{ background:#e60023; border-color:#e60023; color:#fff; }

@media(max-width:860px){
  .olio-contact .cx__split{ grid-template-columns:1fr; }
  .olio-contact .cx__row2{ grid-template-columns:1fr; }
  .olio-contact .cx__map{ min-height:300px; }
  .olio-contact .cx__map iframe{ min-height:300px; }
}