/* Что такое GEO — стили страницы (скоуп what-is-geo.html).
   Главная и общие файлы заморожены: components.css/tokens.css не трогаем,
   всё, что отличается от эталона, — классы страницы здесь.
   Значения — замер по SVG/JSON Figma
   «What is GEO - Desktop 1440 / Tablet 768 / Mobile 390»
   (координаты ink пересчитаны в координаты боксов). */

/* ——— Шапка: активный раздел «О GEO» ——————————————————————— */
.wg-nav-current{font-weight:700}

/* ——— 01 · Что такое GEO ———————————————————————————————————— */
.wg-hero__grid{display:grid;grid-template-columns:minmax(0,740fr) minmax(0,440fr);
  gap:20px;align-items:center}
.wg-hero__text .eyebrow{margin-bottom:15.4px}
.wg-hero__lead{margin-top:29.2px;max-width:600px}
.wg-chips{margin-top:32.2px;gap:8px}
.wg-chip{height:32px;padding:0 14.2px;font-size:14px;line-height:18px}
.wg-chip--dark{background:var(--ink);color:var(--bg)}
.wg-hero__note{margin-top:11.8px;font-size:14px;line-height:20px;color:var(--gray)}

/* виджет GEO-метрики */
.wg-widget{display:flex;flex-direction:column;gap:12px;padding:24px;
  background:var(--bg-soft);border-radius:var(--r-xl)}      /* 36 / 28 / 28 */
.wg-metric,.wg-nets{background:var(--bg);border-radius:24px} /* в макете r24 на всех ширинах */
.wg-metric{padding:24.3px 24px 23.4px}
.wg-metric__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wg-metric__head .label,.wg-nets__cap{line-height:normal}    /* в Figma межстрочный AUTO */
.wg-metric__value{display:flex;align-items:flex-end;margin-top:12.2px;
  font-size:44px;line-height:52px;font-weight:700;color:var(--ink)}
.wg-metric__delta{margin:0 0 6.7px 16.2px;font-size:13px;line-height:normal;
  font-weight:700;color:var(--blue)}
.wg-metric__sub{margin-top:2.6px;font-size:13px;line-height:16px;color:var(--gray)}
.wg-chart{display:block;width:100%;height:66.2px;margin-top:26.3px;overflow:visible}
.wg-chart stop{stop-color:var(--blue)}
.wg-chart__line{fill:none;stroke:var(--blue)}

.wg-nets{padding:22px 24px 24px}
.wg-nets__list{display:flex;flex-direction:column;gap:12px;margin-top:16.4px}
.wg-net{display:grid;grid-template-columns:90px minmax(0,1fr) 40px;align-items:center;
  font-size:13px;line-height:16px}
.wg-net__name{color:var(--ink)}
.wg-net__pct{color:var(--gray);text-align:right}
.wg-net__track{height:6px;border-radius:3px;background:var(--line)}
.wg-net__fill{display:block;height:6px;border-radius:3px;background:var(--blue)}
.wg-net__fill--64{width:64%}
.wg-net__fill--48{width:48%}
.wg-net__fill--31{width:31%}
.wg-net__fill--22{width:22%}

/* ——— 02 · GEO и SEO ———————————————————————————————————————— */
.wg-vs__head{margin-bottom:43px}
.wg-vs__head .eyebrow{margin-bottom:14.9px}
.wg-vs__h2{max-width:600px}
.wg-vs__card{padding:40px;border-radius:var(--r-xl)}        /* 36 / 28 / 28 */
.wg-vs__label{text-transform:none;font-size:14px;line-height:18px}
p.wg-vs__big{margin-top:5.2px;font-size:56px;line-height:62px;font-weight:700;color:var(--gray-2)}
.wg-vs__card--geo p.wg-vs__big{color:var(--blue)}
.wg-vs__rows{margin:18.9px 0 0}
.wg-vs__row{padding:22.2px 0 22.1px;border-top:1px solid var(--line)}
.wg-vs__row:last-child{padding-bottom:0}
.wg-vs__key{font-size:13px;line-height:16px;color:var(--gray)}
.wg-vs__val{margin:3.7px 0 0;font-size:19px;line-height:28px;color:var(--gray)}
.wg-vs__card--geo .wg-vs__val{font-weight:700;color:var(--ink)}
.wg-vs__note{margin-top:31.4px;font-size:19px;line-height:28px;color:var(--gray)}
.wg-vs__note b{color:var(--ink)}

/* ——— 03 · Где это влияет на продажи ———————————————————————— */
.wg-cases__head{margin-bottom:42.3px}
.wg-cases__head .eyebrow{margin-bottom:15.4px}
.wg-case{padding:28px;border-radius:var(--r-md)}            /* 28 / 24 / 24 */
.wg-case__title{line-height:normal}                          /* в Figma AUTO: 20 / 19 / 18 */
/* Д-119, правки 90 (образец — image13): плашки запросов по левому краю и
   на всю ширину карточки (были align-self:flex-end + своя ширина 250/300/240),
   высота — ровно две строки на всех ширинах (12+12 поля + 2×20 строка = 64),
   чтобы плашки трёх карточек были одной высоты и лежали на одной линии,
   а выводы .wg-case__note — на одной линии внизу карточек.
   Значок лупы у средней карточки убран — все три плашки одинаковые
   (вместе с ним сняты .wg-case--search и .wg-i-search). */
p.wg-case__bubble{min-height:64px;margin-top:24.3px;
  padding:12px 15px;background:var(--bg);border-radius:var(--r-sm);
  font-size:14px;line-height:20px;color:var(--ink)}
p.wg-case__note{margin-top:auto;padding-top:23.5px;font-size:15px;line-height:20px;color:var(--gray)}
p.wg-case__note b{color:var(--ink)}
/* Д-119: на ПК три карточки стоят в ряд — раскладываем их содержимое
   (заголовок / плашка / вывод) по строкам общей сетки (subgrid, row-gap 0,
   чтобы собственные отступы карточки не менялись). Тогда плашки запросов
   одной высоты и на одной линии, а выводы — на одной линии внизу карточек,
   даже на 1024, где длинный запрос «Что скажешь про эту компанию?…»
   не помещается в две строки. На 1280 и 1440 геометрия та же, что была. */
@media (min-width:1024px){
  .wg-case{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
}

/* ——— Планшет: 768–1023 (макет 768) ————————————————————————— */
@media (max-width:1023px){
  .wg-hero__grid{grid-template-columns:minmax(0,1fr);gap:40.2px;align-items:stretch}
  .wg-hero__text .eyebrow{font-size:17px;line-height:21px;margin-bottom:10.85px}
  .wg-hero__h1{max-width:590px}
  .wg-hero__lead{margin-top:28.5px;max-width:none}
  .wg-chips{margin-top:27.4px}
  .wg-hero__note{margin-top:12.8px}

  .wg-metric__value{margin-top:11.1px}
  .wg-metric__sub{margin-top:2.5px}
  .wg-chart{margin-top:26.4px}
  .wg-nets__list{margin-top:16.5px}

  .wg-vs__head{margin-bottom:29px}
  .wg-vs__head .eyebrow{font-size:17px;line-height:21px;margin-bottom:11.8px}
  .wg-vs__h2{max-width:450px}
  .wg-vs__card{padding:28px}
  .wg-vs__label{font-size:var(--fs-label);line-height:18px}
  p.wg-vs__big{margin-top:7.4px;font-size:40px;line-height:44px}
  .wg-vs__rows{margin-top:18px}
  .wg-vs__row{padding:17.7px 0 18.3px}
  .wg-vs__key{font-size:12px;line-height:16px}
  .wg-vs__val{margin-top:4px;font-size:17px;line-height:24px}
  .wg-vs__note{margin-top:24.2px;font-size:17px;line-height:24px}

  .wg-cases__head{margin-bottom:29.6px}
  .wg-cases__head .eyebrow{font-size:17px;line-height:21px;margin-bottom:12.1px}
  .wg-cases__h2{max-width:500px}
  p.wg-case__bubble{margin-top:22px}       /* Д-119: ширина — по карточке */
  p.wg-case__note{padding-top:26px}
}

/* ——— Телефон: до 767 (макет 390) ——————————————————————————— */
@media (max-width:767px){
  .wg-hero__grid{gap:32.1px}
  .wg-hero__text .eyebrow{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);margin-bottom:12.25px}
  .wg-hero__lead{margin-top:25.2px}
  .wg-chips{margin-top:24.25px}
  .wg-hero__note{margin-top:11.9px}

  .wg-metric__sub{margin-top:1.6px}
  .wg-chart{height:55.2px;margin-top:26.3px}
  .wg-net{grid-template-columns:68px minmax(0,1fr) 40px}

  .wg-vs__head{margin-bottom:28.2px}
  .wg-vs__head .eyebrow{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);margin-bottom:12.45px}
  .wg-vs__h2{max-width:300px}      /* перенос «Рядом с ним.» как в макете 390 */
  .wg-vs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wg-vs__card{padding:15.7px 16px 16px}
  p.wg-vs__big{margin-top:5.6px;font-size:30px;line-height:33px}
  .wg-vs__rows{margin-top:12.7px}
  .wg-vs__row{padding:13.7px 0 14.65px}
  .wg-vs__val{margin-top:3.7px;font-size:15px;line-height:20px}
  .wg-vs__note{margin-top:23.2px}

  .wg-cases__head{margin-bottom:28px}
  .wg-cases__head .eyebrow{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);margin-bottom:12.55px}
  .wg-cases__grid{gap:var(--gap)}          /* в макете 390 шаг карточек 12 */
  .wg-case{padding:22px}
  p.wg-case__bubble{margin-top:24.2px}     /* Д-119: ширина — по карточке */
  p.wg-case__note{padding-top:25.1px}
}