/* =====================================================================
   БЛОК СТРАНОВОГО ХАБА - копия src/components/program/country-hub-strip.css.
   Нужна страницам расчета: они статические и стилей Next не видят.
   По мастер-тексту 28.08.2026 §18 блок стоит ПОСЛЕ FAQ, перед финальной формой.

   Ниже - обвязка, которая на сайте приходит из program.css (.pg__sec / .pg__wrap
   и токены --pg-*). Без нее блок разъезжается: см. ловушку .pg в памяти проекта.

   Обновлять так: cp src/components/program/country-hub-strip.css
   public/_vendor/country-hub-strip.css и вернуть эту шапку.
   ===================================================================== */
:root{
  --pg-ink: var(--text-primary, #14161a);
  --pg-muted: var(--text-muted, #5b6472);
  --pg-line: var(--line, #e2e6ec);
  --pg-accent: var(--action, #0057ff);
  --pg-bg-alt: var(--bg-alt, #f5f7fa);
  --pg-wrap: 1320px;
  --pg-pad: 20px;
  --pg-section-y: 84px;
  --metal1: 'Metal-Reg-1', 'Montserrat', sans-serif;
}
.pg__wrap{width:100%;max-width:var(--pg-wrap);margin:0 auto;padding-inline:var(--pg-pad)}
.pg__sec{padding-block:var(--pg-section-y);border-top:1px solid var(--pg-line)}
.pg__sec--tint{background:var(--pg-bg-alt)}

/* Блок странового хаба (§18 мастер-текста 28.08.2026).
   Язык - «Продолжить изучение» из гайдов: волосяные линии, карточки одной
   геометрии, стрелка едет через карточку. Коробки и заливки запрещены. */

/* ── Шапка секции: заголовок слева, лид справа ── */
.chHub__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: 60px;
  align-items: end;
}
.chHub__eye {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font: 600 12px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-accent);
}
.chHub__eye::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--pg-accent);
}
.chHub__h {
  margin: 0;
  font: 400 clamp(26px, 2.5vw, 36px)/1.18 var(--metal1), var(--font);
  color: var(--pg-ink);
  max-width: 24ch;
}
.chHub__lead {
  margin: 0;
  font: 400 16.5px/1.65 var(--font);
  color: var(--pg-muted);
  max-width: 56ch;
}

/* ── Карточки: номер, заголовок, пояснение, действие ── */
.chHub__grid {
  list-style: none;
  margin: clamp(30px, 3.4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--pg-line);
}
.chHub__grid > li {
  border-bottom: 1px solid var(--pg-line);
  border-right: 1px solid var(--pg-line);
}
.chHub__grid > li:nth-child(3n) { border-right: 0; }
.chHub__grid a {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100%;
  text-decoration: none;
  padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2.2vw, 34px) clamp(26px, 2.6vw, 36px);
}
.chHub__grid > li:nth-child(3n) a { padding-right: 0; }
.chHub__grid > li:nth-child(3n + 1) a { padding-left: 0; }
.chHub__n {
  font: 400 15px/1 var(--font);
  color: var(--pg-accent);
  margin-bottom: 16px;
}
.chHub__grid b {
  font: 600 17px/1.4 var(--font);
  color: var(--pg-ink);
  margin-bottom: 10px;
}
.chHub__d {
  font: 400 16px/1.6 var(--font);
  color: var(--pg-muted);
  margin-bottom: 22px;
}
.chHub__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: end;
  font: 500 15px/1 var(--font);
  color: var(--pg-accent);
}
.chHub__go i {
  display: block;
  width: 18px;
  height: 18px;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.chHub__go i svg { display: block; width: 100%; height: 100%; }
.chHub__grid a:hover .chHub__go i { transform: translateX(10px); }

@media (max-width: 1080px) {
  .chHub__head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; align-items: start; }
  .chHub__grid { grid-template-columns: minmax(0, 1fr); }
  .chHub__grid > li, .chHub__grid > li:nth-child(3n) { border-right: 0; }
  .chHub__grid a,
  .chHub__grid > li:nth-child(3n) a,
  .chHub__grid > li:nth-child(3n + 1) a { padding-left: 0; padding-right: 0; }
}

/* Пометка текущей страницы в сетке услуг: спокойная подпись без стрелки */
.chHub__here {
  align-self: end;
  font: 500 15px/1 var(--font);
  color: var(--pg-muted);
}

/* Вариант сетки 4 в ряд - 8 услуг двумя компактными рядами */
.chHub__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chHub__grid--4 > li:nth-child(3n) { border-right: 1px solid var(--pg-line); }
.chHub__grid--4 > li:nth-child(4n) { border-right: 0; }
.chHub__grid--4 > li:nth-child(3n) a { padding-right: clamp(20px, 2.2vw, 34px); }
.chHub__grid--4 > li:nth-child(3n + 1) a { padding-left: clamp(20px, 2.2vw, 34px); }
.chHub__grid--4 > li:nth-child(4n) a { padding-right: 0; }
.chHub__grid--4 > li:nth-child(4n + 1) a { padding-left: 0; }
@media (max-width: 1080px) {
  .chHub__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chHub__grid--4 > li:nth-child(odd) a { padding-left: 0; }
  .chHub__grid--4 > li:nth-child(even) a { padding-right: 0; }
  .chHub__grid--4 > li:nth-child(odd) { border-right: 1px solid var(--pg-line); }
  .chHub__grid--4 > li:nth-child(even) { border-right: 0; }
}
@media (max-width: 640px) {
  .chHub__grid--4 { grid-template-columns: minmax(0, 1fr); }
  .chHub__grid--4 > li { border-right: 0 !important; }
  .chHub__grid--4 a { padding-left: 0 !important; padding-right: 0 !important; }
}