/* =========================================================================
   Продвижение на Яндекс Картах и в Яндекс Бизнесе (/uslugi/seo/prodvizhenie-na-yandeks-kartah/)
   Первый экран — схема «карточка организации»: заполненность профиля, поля карточки
   (было → стало), знак «Информация подтверждена владельцем» и маршруты со звонками по неделям.
   Правила отзывов — две колонки «можно / не делаю».
   Карточки «Что влияет на место», пример разбора карточки (.diag) и сравнение (.vs-table)
   берут правила страницы восстановления трафика: на странице подключены оба файла
   (pages/vosstanovlenie-trafika.css и этот), как у страницы переезда.
   Всё видно без JS и при «уменьшить движение»: поведение схемы — assets/js/scenes/geocard.js.
   ========================================================================= */

/* ---------- схема «карточка организации» ---------- */
.geo { margin: 0 0 0 auto; width: 100%; max-width: 520px; display: grid; gap: 14px; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(24, 38, 74, 0.72), rgba(17, 28, 51, 0.92)); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.geo-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; color: var(--fog); font-size: 0.85rem; }
.geo-top > span:first-child { color: #eef2fb; font-weight: 600; }
.geo-meter { display: inline-flex; align-items: center; gap: 8px; }
.geo-meter i { position: relative; width: 92px; height: 6px; border-radius: 999px; background: var(--night-3); overflow: hidden; }
.geo-meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 100%); border-radius: inherit; background: var(--ok); transition: width 0.5s var(--ease-out); }
.geo-meter b { color: var(--ok); font-weight: 700; font-variant-numeric: tabular-nums; }

.geo-card { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; color: var(--ink); }
.geo-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.geo-pin { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #ffe9e6; }
.geo-pin svg { width: 22px; height: 22px; }
.geo-head b { display: block; font-weight: 650; line-height: 1.3; font-size: 0.98rem; }
.geo-head small { display: block; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.35; }
.geo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(47, 191, 138, 0.14); color: #137a55; font-size: 0.75rem; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: opacity 0.35s, transform 0.35s var(--ease-out); }
.geo-badge::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #2fbf8a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.geo.is-live .geo-badge.is-wait { opacity: 0; transform: scale(0.8); }
.geo-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 10px; border-top: 1px solid #e7ebf3; font-size: 0.84rem; }
.geo-rate b { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.geo-rate .stars { color: #f5a623; letter-spacing: 1px; }
.geo-rate small { color: var(--ink-soft); font-size: 0.8rem; }

.geo-fields { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.geo-fields li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--night-2); border: 1px solid var(--night-line); font-size: 0.8rem; line-height: 1.3; color: var(--fog); transition: border-color 0.35s, background-color 0.35s; }
.geo-fields li::before { content: ""; grid-row: span 2; width: 16px; height: 16px; border-radius: 50%; background: var(--night-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%232fbf8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.geo-fields b { color: #eef2fb; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-fields .is-gap { border-color: rgba(255, 107, 91, 0.55); background: rgba(255, 107, 91, 0.1); }
.geo-fields .is-gap::before { background: var(--leak); box-shadow: 0 0 0 3px rgba(255, 107, 91, 0.2); }
.geo-fields .is-gap b { color: #ffb4ab; }

.geo-chart { width: 100%; height: auto; overflow: visible; }
.geo-chart .g { stroke: var(--night-line); stroke-width: 1; }
.geo-chart .bar { fill: var(--ok); transform-box: fill-box; transform-origin: 50% 100%; }
.geo-chart .bar--old { fill: var(--fog-dim); }
.geo-chart text { font-family: var(--font-text); font-size: 12.5px; font-weight: 600; }
.geo-chart .t-l { fill: #eef2fb; }
.geo-chart .t-s { fill: var(--fog); font-weight: 500; }
.geo-chart .mark { stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 4 5; }
.geo-chart .t-mark { fill: var(--signal); }
.geo-note { margin: 0; color: var(--fog-dim); font-size: 0.82rem; }

/* ---------- отзывы: можно по правилам / не делаю ---------- */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rules > div { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius-md); background: var(--night-2); border: 1px solid var(--night-line); }
.rules h3 { display: flex; align-items: center; gap: 10px; font-size: var(--step-1); font-weight: 650; line-height: 1.3; color: #eef2fb; }
.rules h3::before { content: ""; width: 28px; height: 28px; flex: none; border-radius: 9px; }
.rules .rules-yes h3::before { background: rgba(47, 191, 138, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%232fbf8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.rules .rules-no { border-color: rgba(255, 107, 91, 0.4); }
.rules .rules-no h3::before { background: rgba(255, 107, 91, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23ff6b5b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.rules ul { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.rules li { color: var(--fog); line-height: 1.5; }
.rules li b { color: #eef2fb; font-weight: 600; }
.rules-src { margin: 18px 0 0; color: var(--fog-dim); font-size: 0.85rem; }

/* ---------- адаптив ---------- */
@media (max-width: 1080px) {
  .geo { margin: 0 auto; }
}
@media (max-width: 860px) {
  .rules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .geo-fields { grid-template-columns: minmax(0, 1fr); }
  .geo-head { grid-template-columns: 36px minmax(0, 1fr); }
  .geo-head .geo-badge { grid-column: 1 / -1; justify-self: start; }
}