/* Контакты и карта (views/constructor/contacts.php). Виды: split (контакты слева, карта справа),
   overlay (карта во всю ширину, карточка контактов поверх); без карты — контакты карточками на всю ширину (plain).
   Значки — SVG-маски (цвет задают переменные секции), без внешних запросов. */
.cb-contacts {
    --cb-ci-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    --cb-ci-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 6.5 9 6.5 9-6.5'/%3E%3C/svg%3E");
    --cb-ci-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --cb-ci-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5V12l3.5 2'/%3E%3C/svg%3E");
    --cb-ci-telegram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.2 3.6 2.9 10.7c-1.2.5-1.2 1.2-.2 1.5l4.7 1.5 1.8 5.5c.2.6.4.8.9.8.4 0 .6-.2.9-.4l2.3-2.2 4.7 3.5c.9.5 1.5.2 1.7-.8l3.1-14.6c.3-1.3-.5-1.9-1.6-1.4zM9.6 14.3l-.4 3.9-1.3-4.2 9.6-6.1c.4-.3.8-.1.5.2z'/%3E%3C/svg%3E");
    --cb-ci-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.2a9.8 9.8 0 0 0-8.5 14.7L2.2 21.8l5-1.3A9.8 9.8 0 1 0 12 2.2zm0 1.8a8 8 0 1 1-4.1 14.9l-.3-.2-2.9.8.8-2.8-.2-.3A8 8 0 0 1 12 4zM8.9 7.2c-.2 0-.5 0-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.2 5 4.4 2.5 1 3 .8 3.5.7.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4l-.5-.3-1.9-.9c-.3-.1-.5-.2-.7.1l-.9 1.1c-.2.2-.3.2-.6.1a6.6 6.6 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.5l-.9-2.1c-.2-.6-.5-.5-.7-.5z'/%3E%3C/svg%3E");
    --cb-ci-viber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8c-5.3 0-8.6 1.5-8.6 7.9 0 3.5 1 5.6 3.1 6.8v3.8l3-2.8c.8.1 1.6.2 2.5.2 5.3 0 8.6-1.5 8.6-8S17.3 2.8 12 2.8z'/%3E%3Cpath d='M9.2 7.4c-.4-.4-1-.3-1.3.1-.6.8-.6 1.7 0 2.8a10 10 0 0 0 3.8 3.9c1.1.6 2 .6 2.8 0 .4-.3.5-.9.1-1.3l-.9-.9c-.3-.3-.8-.3-1.1 0l-.4.4a5 5 0 0 1-2.2-2.2l.4-.4c.3-.3.3-.8 0-1.1z'/%3E%3Cpath d='M13 6.3a4.4 4.4 0 0 1 4 4.1M13 8.4a2.3 2.3 0 0 1 1.9 2'/%3E%3C/svg%3E");
    --cb-ci-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.8a7.7 7.7 0 0 0-7.7 7.7c0 5.6 7.7 12.7 7.7 12.7s7.7-7.1 7.7-12.7A7.7 7.7 0 0 0 12 1.8zm0 10.6a2.9 2.9 0 1 1 0-5.8 2.9 2.9 0 0 1 0 5.8z'/%3E%3C/svg%3E");
    --cb-contacts-map-h: 460px;
    color: var(--cb-fg);
}
.cb-contacts__head {margin-bottom: clamp(28px, 3vw, 40px)}

/* ---- Список контактов ---- */
.cb-contacts__list {display: grid; gap: 22px; margin: 0; padding: 0}
.cb-contacts__item {display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-content: start; min-width: 0}
.cb-contacts__item::before, .cb-contacts__item::after {content: ""; grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px}
.cb-contacts__item::before {border-radius: 14px; background: var(--cb-accent-soft)}
.cb-contacts__item::after {background: var(--cb-accent); -webkit-mask: var(--cb-contacts-icon) center / 22px 22px no-repeat; mask: var(--cb-contacts-icon) center / 22px 22px no-repeat}
.cb-contacts__item--phone {--cb-contacts-icon: var(--cb-ci-phone)}
.cb-contacts__item--email {--cb-contacts-icon: var(--cb-ci-mail)}
.cb-contacts__item--address {--cb-contacts-icon: var(--cb-ci-pin)}
.cb-contacts__item--time {--cb-contacts-icon: var(--cb-ci-clock)}
.cb-contacts__label {grid-column: 2; margin: 1px 0 4px; color: var(--cb-fg-muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase}
.cb-contacts__value {grid-column: 2; display: grid; gap: 10px; min-width: 0; margin: 0; color: var(--cb-heading); font-size: 16px; line-height: 1.5}
.cb-contacts__text {display: block; color: var(--cb-heading)}

.cb-contacts__phone-row {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px}
.cb .cb-contacts__phone {color: var(--cb-heading); font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-decoration: none; white-space: nowrap}
.cb .cb-contacts__phone:hover, .cb .cb-contacts__email:hover {color: var(--cb-accent)}
.cb-contacts__note {flex-basis: 100%; margin-top: -4px; color: var(--cb-fg-muted); font-size: 14px; line-height: 1.4}
.cb-contacts__messengers {display: inline-flex; gap: 6px}
.cb .cb-contacts__messenger {position: relative; display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--cb-accent-soft); transition: background var(--cb-transition), transform var(--cb-transition)}
.cb-contacts__messenger::before {content: ""; position: absolute; inset: 0; background: var(--cb-accent); -webkit-mask: var(--cb-contacts-icon) center / 18px 18px no-repeat; mask: var(--cb-contacts-icon) center / 18px 18px no-repeat; transition: background var(--cb-transition)}
.cb .cb-contacts__messenger:hover {background: var(--cb-btn-bg); transform: translateY(-2px)}
.cb-contacts__messenger:hover::before {background: var(--cb-btn-fg)}
.cb-contacts__messenger--telegram {--cb-contacts-icon: var(--cb-ci-telegram)}
.cb-contacts__messenger--whatsapp {--cb-contacts-icon: var(--cb-ci-whatsapp)}
.cb-contacts__messenger--viber {--cb-contacts-icon: var(--cb-ci-viber)}

.cb-contacts__email-row {display: flex; flex-direction: column; gap: 2px}
.cb-contacts__email-row .cb-contacts__note {margin-top: 0}
.cb .cb-contacts__email {color: var(--cb-heading); font-size: 17px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere}
.cb .cb-contacts__route, .cb .cb-contacts__open {display: inline-flex; align-items: center; gap: 8px; justify-self: start; color: var(--cb-link); font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: gap var(--cb-transition), color var(--cb-transition)}
.cb-contacts__route::after, .cb-contacts__open::after {content: "\2192"; font-size: 1.15em; line-height: 1}
.cb .cb-contacts__route:hover, .cb .cb-contacts__open:hover {gap: 12px; color: var(--cb-link-hover)}
.cb-contacts__actions {margin-top: 30px}

/* ---- Карта и заглушка до загрузки ---- */
.cb-contacts__map {position: relative; isolation: isolate; overflow: hidden; min-height: var(--cb-contacts-map-h); background: var(--cb-accent-soft)}
.cb-contacts__map--side {border-radius: calc(var(--cb-radius) * 1.6); border: 1px solid var(--cb-card-border); box-shadow: var(--cb-card-shadow)}
.cb-contacts__stub {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 32px 24px; text-align: center;
    background:
        radial-gradient(ellipse 46% 42% at var(--cb-stub-x, 50%) 50%, var(--cb-card-bg) 0%, transparent 100%),
        linear-gradient(118deg, transparent 0 34%, var(--cb-card-bg) 34% calc(34% + 14px), transparent calc(34% + 14px)),
        linear-gradient(26deg, transparent 0 63%, var(--cb-card-bg) 63% calc(63% + 9px), transparent calc(63% + 9px)),
        linear-gradient(162deg, transparent 0 78%, var(--cb-card-bg) 78% calc(78% + 6px), transparent calc(78% + 6px)),
        linear-gradient(var(--cb-contacts-grid, var(--cb-card-border)) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, var(--cb-contacts-grid, var(--cb-card-border)) 1px, transparent 1px) 0 0 / 46px 46px;
}
.cb-tone--dark .cb-contacts__stub {--cb-contacts-grid: rgba(255, 255, 255, .07)}
.cb-contacts__pin {position: relative; display: inline-flex; width: 60px; height: 60px; margin-bottom: 4px; border-radius: 50%; background: var(--cb-btn-bg); box-shadow: 0 12px 28px rgba(10, 18, 26, .22)}
.cb-contacts__pin::after {content: ""; position: absolute; inset: 0; background: var(--cb-btn-fg); -webkit-mask: var(--cb-ci-marker) center / 28px 28px no-repeat; mask: var(--cb-ci-marker) center / 28px 28px no-repeat}
.cb-contacts__pin::before {content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--cb-btn-bg); opacity: 0; animation: cb-contacts-pulse 2.4s ease-out infinite}
@keyframes cb-contacts-pulse {
    0% {transform: scale(.7); opacity: .55}
    100% {transform: scale(1.35); opacity: 0}
}
.cb .cb-contacts__stub-address {max-width: 340px; color: var(--cb-heading); font-size: 17px; font-weight: 700; line-height: 1.4}
.cb-contacts__stub-actions {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 4px}
.cb-contacts__load[hidden] {display: none}
.cb-contacts__load:disabled {opacity: .75; cursor: progress}
.cb-contacts__frame {position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity .4s ease}
.cb-contacts__map.is-loaded .cb-contacts__frame {opacity: 1; pointer-events: auto}
.cb-contacts__map.is-loaded .cb-contacts__stub {visibility: hidden; transition: visibility 0s .4s}

/* ---- Контакты слева, карта справа ---- */
.cb-contacts__grid {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: stretch}
.cb-contacts__info {align-self: center; min-width: 0}
.cb-contacts--map-only .cb-contacts__grid {grid-template-columns: minmax(0, 1fr)}

/* ---- Карта во всю ширину, карточка поверх ---- */
.cb-contacts--overlay {position: relative; display: grid}
.cb-contacts--overlay > * {grid-area: 1 / 1}
.cb-contacts__layer {position: relative; z-index: 2; display: flex; align-items: center; padding-block: clamp(40px, 5vw, 64px); pointer-events: none}
.cb-contacts--overlay {--cb-contacts-card: var(--cb-bg)}
.cb-tone--light .cb-contacts--overlay {--cb-contacts-card: var(--cb-white)}
.cb-contacts__card {width: min(100%, 470px); padding: clamp(28px, 3vw, 40px); border-radius: calc(var(--cb-radius) * 1.6); background: var(--cb-contacts-card); box-shadow: 0 24px 60px rgba(10, 18, 26, .22); pointer-events: auto}
.cb-contacts__card .cb-contacts__head {margin-bottom: 28px}
.cb-contacts__card .cb-title__h {font-size: clamp(28px, 2.6vw, 38px)}
.cb-contacts__card .cb-actions .cb-btn {flex: 1 1 auto}
.cb-contacts__map--wide {--cb-contacts-map-h: 560px}
/* заглушка — справа от карточки, чтобы подпись и кнопка не прятались под ней */
.cb-contacts--overlay .cb-contacts__stub {--cb-stub-x: 68%; padding-left: calc(max(15px, (100% - 1310px) / 2 + 15px) + 510px)}

.cb-contacts--overlay.cb-contacts--map-only .cb-contacts__stub {--cb-stub-x: 50%; padding-left: 24px}

/* ---- Без карты: контакты карточками ---- */
.cb-contacts--plain .cb-contacts__list {grid-template-columns: repeat(var(--cb-contacts-cols, 4), minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px)}
.cb-contacts__list--1 {--cb-contacts-cols: 1}
.cb-contacts__list--2 {--cb-contacts-cols: 2}
.cb-contacts__list--3 {--cb-contacts-cols: 3}
.cb-contacts--plain .cb-contacts__list--1 {max-width: 480px}
.cb-contacts--plain .cb-contacts__list--2 {max-width: 900px}
.cb-contacts--center .cb-contacts__list {margin-inline: auto}
.cb-contacts--plain .cb-contacts__item {padding: 24px; border: 1px solid var(--cb-card-border); border-radius: var(--cb-radius); background: var(--cb-card-bg); box-shadow: var(--cb-card-shadow)}
.cb-space--none .cb-contacts--plain {padding-block: var(--cb-section-py-compact)}

@media (max-width: 1199px) {
    .cb-contacts__list--4 {--cb-contacts-cols: 2}
}
@media (max-width: 991px) {
    .cb-contacts__list--3 {--cb-contacts-cols: 2}
    .cb-contacts__grid {grid-template-columns: minmax(0, 1fr)}
    .cb-contacts__map--side {--cb-contacts-map-h: 380px}
    .cb-contacts--overlay .cb-contacts__stub {--cb-stub-x: 72%; padding-left: calc(15px + 490px)}
}
@media (max-width: 767px) {
    /* карта под карточкой, без наложения */
    .cb-contacts--overlay {display: block}
    .cb-contacts__layer {padding-block: 0 32px; pointer-events: auto}
    .cb-space--none .cb-contacts__layer {padding-block: 44px 32px}
    .cb-contacts__card {width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none}
    .cb-contacts__map--wide {--cb-contacts-map-h: 360px}
    .cb-contacts--overlay .cb-contacts__stub {--cb-stub-x: 50%; padding-left: 24px}
}
@media (max-width: 575px) {
    .cb-contacts__list {gap: 18px}
    .cb-contacts__item {grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px}
    .cb-contacts__item::before, .cb-contacts__item::after {width: 44px; height: 44px}
    .cb-contacts__item::before {border-radius: 12px}
    .cb .cb-contacts__phone {font-size: 18px}
    .cb-contacts__map--side {--cb-contacts-map-h: 320px}
    .cb-contacts__map--wide {--cb-contacts-map-h: 320px}
    .cb-contacts--plain .cb-contacts__list {--cb-contacts-cols: 1}
    .cb-contacts--plain .cb-contacts__item {padding: 18px}
    .cb-contacts__actions .cb-btn {flex: 1 1 100%}
}
@media print {
    .cb-contacts__map {display: none}
}