/* Common Ground Palo Alto — стили страницы поверх broadsheet.css (дизайн-система канваса).
   Десктоп держат инлайн-стили из канваса; всё, что ниже в медиазапросах, их переопределяет,
   поэтому там !important. */

body { margin: 0; }
a:hover { color: var(--color-accent-700); }

/* в канвасе это был style-hover */
.glance-link:hover { color: var(--color-accent) !important; }
/* глобальный a:hover перекрашивал текст основной кнопки в тёмно-синий на синем */
a.btn-primary:hover, a.btn-primary:active { color: var(--color-bg); }

/* на десктопе ссылки меню — прямые flex-элементы шапки, как в канвасе */
.nav-links { display: contents; }

/* ---------- планшет ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px !important; padding-top: 0 !important; }
  .split { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
}

@media (max-width: 920px) {
  /* таблица «At a glance» сжимается вместо горизонтальной прокрутки; сайт компании
     есть в её карточке ниже, здесь колонку убираем, чтобы название шло в одну строку */
  .glance { min-width: 0 !important; }
  .glance th { width: auto !important; }
  .glance td { white-space: nowrap; }
  .glance td:nth-child(2) { white-space: normal; }
  .glance th:nth-child(7), .glance td:nth-child(7) { display: none; }
}

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  .page { padding: 0 20px 72px !important; }
  .sec { padding-top: 56px !important; }

  .site-nav { flex-wrap: wrap; row-gap: 8px; padding-top: 16px !important; }
  .site-nav .nav-brand { flex-basis: 100%; }
  /* все пять пунктов в одну строку от 360px, на 320px переносятся */
  .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; flex-basis: 100%; }
  .nav .nav-links a { font-size: 13px; padding: 8px 0; }

  .meta-strip { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px !important; }
  .hero { padding: 36px 0 36px !important; }
  .lede { font-size: 17px !important; }
  .draft-note { margin-bottom: 40px !important; }

  /* «At a glance»: строки таблицы превращаются в карточки */
  .glance thead { display: none; }
  .glance, .glance tbody { display: block; }
  .glance tr {
    display: grid;
    grid-template-columns: 22px auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rank name name score"
      ".    google fee fee"
      ".    phone phone phone";
    column-gap: 10px; row-gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  }
  .glance tbody tr:hover { background: none; }
  .glance td { padding: 0; border: 0; }
  .glance td:nth-child(1) { grid-area: rank; font-size: 14px; line-height: 1.5; }
  .glance td:nth-child(2) { grid-area: name; font-size: 16px; line-height: 1.35; }
  .glance td:nth-child(3) { grid-area: score; font-size: 16px; line-height: 1.35; }
  .glance td:nth-child(4) { grid-area: google; font-size: 13px; color: var(--color-neutral-800); }
  .glance td:nth-child(5) { grid-area: fee; font-size: 13px; color: var(--color-neutral-800); }
  .glance td:nth-child(5)::before { content: "· Call fee: "; }
  .glance td:nth-child(5) { white-space: normal !important; }
  .glance td:nth-child(6) { grid-area: phone; font-size: 14px; }
  .glance td:nth-child(6) a { display: inline-block; padding: 2px 0; }

  /* карточки компаний: номер и балл строкой над текстом */
  .co { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; padding: 34px 0 !important; }
  .co > div:first-child {
    display: grid; grid-template-columns: auto auto; justify-content: start;
    column-gap: 22px; align-items: end;
  }
  .co-rank { grid-row: 1 / span 2; }
  .co-score-label { margin-top: 0 !important; }
  .co-name { font-size: 25px !important; }
  .co-meta { gap: 6px 18px !important; }
  .co-cta .btn { flex: 1 1 auto; min-height: 44px; }

  .lead-h { font-size: 27px !important; }
  .price-table { font-size: 13px; }
  .price-table th, .price-table td { padding: 8px 6px; }
  .price-table th { width: auto !important; }
}

@media (max-width: 600px) {
  .page { padding: 0 16px 64px !important; }
  .meta-strip { grid-template-columns: minmax(0, 1fr); gap: 2px !important; }
  .hero-title { font-size: 36px !important; max-width: none !important; }
  .hero-stats { grid-template-columns: minmax(0, 1fr); gap: 18px !important; }
  .stat-num { font-size: 38px !important; }
}

@media (max-width: 400px) {
  /* таблица цен: четыре колонки и «RepairPointPro» одним словом не помещаются в 288px */
  .price-table { font-size: 12px; }
  .price-table th, .price-table td { padding: 8px 4px; }
  .price-table th { letter-spacing: 0.04em; }
}