/* ============================================================
   Оформление поверх темы wiro. Тему не трогаем.

   Мир Horizon, извлечён из theme.css:
     #172e49  навигационный синий — заголовки, акцент бренда
     #277e9c  фирменный бирюзовый — ссылки, маркеры, состояния
     4px      радиус
     0 18px 41px rgb(0 0 0 / .1)  — единственная тень мира

   Планка: impeccable/reference/craft-floor.md
   Сознательно НЕ используются: цветная полоса слева у врезок,
   надзаголовки-кикеры, нумерация секций, эмодзи вместо иконок,
   градиентный текст, тени без смещения.
   ============================================================ */

:root {
  --vyc-ink:      #172e49;
  --vyc-body:     #33465a;   /* тонирован синим, не серый */
  --vyc-muted:    #5d7084;
  --vyc-accent:   #277e9c;
  --vyc-accent-d: #1d6279;
  --vyc-rule:     #dde4ea;
  --vyc-rule-2:   #eef2f5;
  --vyc-tint:     #f4f8fa;
  --vyc-radius:   4px;
  --vyc-go:       #1f7a4d;
  --vyc-warn:     #9a6a10;
  --vyc-no:       #b03a30;
}

/* ---------- Поверхности браузера ----------
   Выделение, каретка, скроллбар, фокус, подчёркивание.
   Их почти всегда оставляют браузеру — и страница выглядит
   собранной, а не сделанной. */

::selection { background: #277e9c26; color: var(--vyc-ink); }
.about-info__text { caret-color: var(--vyc-accent); }

.hz-table-wrap { scrollbar-width: thin; scrollbar-color: #c3d0da transparent; }
.hz-table-wrap::-webkit-scrollbar { height: 8px; }
.hz-table-wrap::-webkit-scrollbar-track { background: transparent; }
.hz-table-wrap::-webkit-scrollbar-thumb { background: #c3d0da; border-radius: 4px; }
.hz-table-wrap::-webkit-scrollbar-thumb:hover { background: #a8b9c6; }

.about-info__text a:focus-visible,
.hz-end a:focus-visible {
  outline: 2px solid var(--vyc-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Типографика статьи ----------
   Тема оставляет .about-info__text неоформленным. На Пхукете
   лечение есть, но привязано к .page-template-template-about и
   работает на 1 странице из 121. Здесь — везде.
   Значения по impeccable/typeset, режим Read: мера 65–75 симв. */

.about-info__text {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.62;
  color: var(--vyc-body);
}

.about-info__text h2 {
  font-size: 1.62rem;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--vyc-ink);
  margin: 2em 0 0.5em;       /* воздуха сверху больше, чем снизу */
  text-wrap: balance;
}
.about-info__text h3 {
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--vyc-ink);
  margin: 1.6em 0 0.4em;
  text-wrap: balance;
}
.hz-sec:first-child > h2:first-child,
.about-info__text > h2:first-child { margin-top: 0.2em; }

.about-info__text p  { margin: 0 0 1.05em; }
.about-info__text strong { color: var(--vyc-ink); font-weight: 600; }

.about-info__text ul,
.about-info__text ol { margin: 0.6em 0 1.3em; padding-left: 1.35em; }
.about-info__text li { margin: 0.5em 0; padding-left: 0.15em; }
.about-info__text li::marker { color: var(--vyc-accent); }

/* Ссылки в тексте: контраст 4,6:1, подчёркивание с отбивкой */
.about-info__text a {
  color: var(--vyc-accent-d);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: #277e9c66;
  transition: text-decoration-color .18s cubic-bezier(.16,1,.3,1),
              color .18s cubic-bezier(.16,1,.3,1);
}
.about-info__text a:hover {
  color: var(--vyc-ink);
  text-decoration-color: currentColor;
}

.hz-sec + .hz-sec { margin-top: 2.2em; }

/* ---------- Лид ----------
   Первый абзац статьи крупнее и темнее: вход в текст. */

.hz-lead p {
  font-size: 19.5px;
  line-height: 1.5;
  color: var(--vyc-ink);
  margin-bottom: 0.85em;
}
.hz-lead p:last-child { margin-bottom: 0; }

/* ---------- Ключевое утверждение ----------
   Не врезка с цветной полосой (запрещена планкой), а
   типографическое высказывание между горизонтальными линиями. */

.hz-claim {
  max-width: 68ch;
  margin: 2.4em 0;
  padding: 1.5em 0;
  border-top: 1px solid var(--vyc-rule);
  border-bottom: 1px solid var(--vyc-rule);
}
.hz-claim p {
  font-size: 21px;
  line-height: 1.4;
  color: var(--vyc-ink);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.hz-claim .hz-claim-src {
  display: block;
  margin-top: 0.9em;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vyc-muted);
  letter-spacing: 0;
}

/* ---------- Подпись автора ---------- */

.hz-byline {
  font-size: 15px;
  line-height: 1.5;
  color: var(--vyc-muted);
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--vyc-rule-2);
  max-width: 68ch;
}
.hz-byline strong { color: var(--vyc-ink); font-weight: 600; }

/* ---------- Таблицы ----------
   Данные шире прозы — выходят за меру. */

.hz-table-wrap {
  max-width: none;
  width: 100%;
  overflow-x: auto;
  margin: 1.8em 0;
  border: 1px solid var(--vyc-rule);
  border-radius: var(--vyc-radius);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.hz-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.hz-table th,
.hz-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--vyc-rule-2);
  white-space: nowrap;
}
.hz-table thead th {
  background: var(--vyc-tint);
  color: var(--vyc-ink);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--vyc-rule);
  white-space: normal;
}
.hz-table tbody tr:last-child td { border-bottom: none; }
.hz-table tbody tr { transition: background .15s cubic-bezier(.16,1,.3,1); }
.hz-table tbody tr:hover { background: #f8fafb; }
.hz-table td:first-child { color: var(--vyc-ink); font-weight: 500; }

/* Состояния в таблицах: текстом, не плашками */
.hz-ok, .hz-mid, .hz-no { font-weight: 600; font-size: 13.5px; }
.hz-ok  { color: var(--vyc-go); }
.hz-mid { color: var(--vyc-warn); }
.hz-no  { color: var(--vyc-no); }

/* ---------- Источники ---------- */

.hz-src {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vyc-muted);
  margin: 1em 0 0;
  max-width: 68ch;
}
.hz-src a { color: var(--vyc-muted); text-decoration-color: #5d708466; }
.hz-src a:hover { color: var(--vyc-ink); }

.hz-updated {
  font-size: 13.5px;
  color: var(--vyc-muted);
  margin: 2.4em 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--vyc-rule-2);
  max-width: 68ch;
}

/* ---------- Место под фотографию ----------
   Пропорция задана заранее, чтобы вёрстка не прыгала,
   когда снимки появятся. */

.hz-fig { margin: 2em 0; max-width: none; }
.hz-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--vyc-radius);
  background: var(--vyc-tint);
}
.hz-fig figcaption {
  margin-top: 0.7em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vyc-muted);
  max-width: 68ch;
}
.hz-fig-empty {
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--vyc-rule);
  border-radius: var(--vyc-radius);
  background: var(--vyc-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vyc-muted);
  font-size: 14px;
  text-align: center;
  padding: 1em;
}

/* ---------- Блок в конце статьи ---------- */

.hz-end {
  max-width: 68ch;
  margin: 2.6em 0 0;
  padding: 24px 26px;
  background: var(--vyc-tint);
  border: 1px solid var(--vyc-rule);
  border-radius: var(--vyc-radius);
}
.hz-end h2 {
  font-size: 1.16rem !important;
  margin: 0 0 0.6em !important;
  color: var(--vyc-ink);
}
.hz-end ul { margin: 0; padding-left: 1.2em; }
.hz-end li { margin: 0.4em 0; }
.hz-end li::marker { color: var(--vyc-accent); }
.hz-end a {
  color: var(--vyc-accent-d);
  text-decoration: underline;
  text-decoration-color: #277e9c66;
  text-underline-offset: 0.18em;
  transition: text-decoration-color .18s cubic-bezier(.16,1,.3,1),
              color .18s cubic-bezier(.16,1,.3,1);
}
.hz-end a:hover { color: var(--vyc-ink); text-decoration-color: currentColor; }

/* ---------- Футер прижат к низу ----------
   На коротких страницах он прилипал к концу текста. */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.site > .site-main,
.site > main { flex: 1 0 auto; }
.site > .footer { flex-shrink: 0; margin-top: auto; }

/* ---------- Мобильный ---------- */

@media (max-width: 767px) {
  .about-info__text { font-size: 16px; line-height: 1.6; }
  .about-info__text h2 { font-size: 1.34rem; margin-top: 1.7em; }
  .about-info__text h3 { font-size: 1.08rem; }
  .hz-lead p { font-size: 17.5px; }
  .hz-claim { margin: 2em 0; padding: 1.2em 0; }
  .hz-claim p { font-size: 18.5px; }
  .hz-sec + .hz-sec { margin-top: 1.8em; }
  .hz-table { font-size: 14px; }
  .hz-table th, .hz-table td { padding: 9px 11px; }
  .hz-end { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-info__text a,
  .hz-end a,
  .hz-table tbody tr { transition: none; }
}

/* ---------- Меню ----------
   В теме пункты прижаты вплотную к нижней линии. */

.header-list .menu-item,
.menu-list .menu-item { padding-block: 4px; }
.header-list .menu-item > a,
.menu-list .menu-item > a { line-height: 1.4; display: inline-block; padding-block: 2px; }

/* Мобильное меню: цели нажатия не мельче 44px */
@media (max-width: 767px) {
  .menu-list .menu-item > a { min-height: 44px; display: flex; align-items: center; }
}

/* ============================================================
   Главная
   ============================================================ */

/* ---------- Герой ----------
   Тема даёт .wrapper фон и высоту 768px. Для справочного сайта
   это много: экран должен показывать, что внутри, а не только
   заголовок. */

.main .wrapper {
  height: auto;
  min-height: 440px;
  background-position: center;
  padding: 0;
}
.main .wrapper_body_main { position: static; padding: 64px 0 56px; }
.hz-hero-col { max-width: 42rem; }

.wrapper__title-sup {
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  color: #cfe6ef;
  margin: 0 0 14px;
}
.wrapper__title {
  font-size: clamp(34px, 5.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}
.hero__title {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.4;
  color: #fff;
  font-weight: 600;
  margin: 0 0 14px;
  max-width: 34ch;
}
.hero__bottom { margin: 0 0 22px; }
.hero__sub {
  font-size: 16px;
  line-height: 1.55;
  color: #dde9ef;
  margin: 0;
  max-width: 60ch;
}
.hz-hero-plink { margin: 0; }
.hz-hero-plink a {
  display: inline-block;
  padding: 12px 22px;
  min-height: 44px;
  background: #fff;
  color: var(--vyc-ink);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--vyc-radius);
  text-decoration: none;
  box-shadow: 0 18px 41px 0 rgb(0 0 0 / .1);
  transition: transform .22s cubic-bezier(.16,1,.3,1),
              box-shadow .22s cubic-bezier(.16,1,.3,1);
}
.hz-hero-plink a:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px 0 rgb(0 0 0 / .16);
}
.hz-hero-plink a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- Сезонная сетка ---------- */

.hz-seasons { padding: 56px 0 48px; }
.hz-seasons__h {
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--vyc-ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.hz-seasons__lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--vyc-body);
  max-width: 62ch;
  margin: 0 0 26px;
}

.hz-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--vyc-rule);
  border-radius: var(--vyc-radius);
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #c3d0da transparent;
}
.hz-grid { border-collapse: collapse; width: 100%; min-width: 660px; }
.hz-grid th {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--vyc-muted);
  text-transform: uppercase;
  padding: 12px 0 10px;
  text-align: center;
  border-bottom: 1px solid var(--vyc-rule);
  background: var(--vyc-tint);
}
.hz-grid th.hz-grid__rh,
.hz-grid td.hz-grid__rh {
  text-align: left;
  padding-left: 16px;
  padding-right: 14px;
  min-width: 190px;
}
.hz-grid td.hz-grid__rh {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--vyc-rule-2);
  line-height: 1.25;
}
.hz-grid td.hz-grid__rh a {
  color: var(--vyc-ink);
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  border-bottom: 1px solid #277e9c66;
  transition: border-color .18s cubic-bezier(.16,1,.3,1);
}
.hz-grid td.hz-grid__rh a:hover { border-color: var(--vyc-accent); }
.hz-grid td.hz-grid__rh a:focus-visible { outline: 2px solid var(--vyc-accent); outline-offset: 3px; }
.hz-grid td.hz-grid__rh > span:first-child { font-weight: 600; font-size: 15.5px; color: var(--vyc-ink); }
.hz-grid__season {
  display: block;
  font-size: 12.5px;
  color: var(--vyc-muted);
  margin-top: 3px;
  font-weight: 400;
}
.hz-soon {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vyc-muted);
  border: 1px solid var(--vyc-rule);
  border-radius: 9px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: 2px;
}

.hz-grid__c {
  border-bottom: 1px solid var(--vyc-rule-2);
  border-left: 1px solid var(--vyc-rule-2);
  height: 46px;
  padding: 0;
}
.hz-grid tbody tr:last-child td { border-bottom: none; }
.hz-m2 { background: #277e9c; }
.hz-m1 { background: #9dc9d8; }
.hz-m0 { background: #f2f5f7; }

.hz-grid__legend {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--vyc-muted);
  margin: 14px 0 0;
}
.hz-key {
  display: inline-block;
  width: 22px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid var(--vyc-rule-2);
}
.hz-key + .hz-key, .hz-grid__legend .hz-key:not(:first-child) { margin-left: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Блоки главной ---------- */

.hz-home-sec { padding: 44px 0; }
.hz-home-sec--tint { background: var(--vyc-tint); }
.hz-home-sec .about-info__text h2 { margin-top: 0; }

@media (max-width: 767px) {
  .main .wrapper { min-height: 380px; }
  .main .wrapper_body_main { padding: 44px 0 40px; }
  .hz-seasons { padding: 40px 0 36px; }
  .hz-home-sec { padding: 34px 0; }
  .hz-grid__c { height: 40px; }
}

/* Мобильное меню темы: .menu-list li имеет border-bottom, а текст
   прижат к нему вплотную. Даём просвет и заодно доводим цель
   нажатия до 44px. */
.menu-list li {
  margin-bottom: 16px;
  padding-bottom: 10px;
}
.menu-list li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.4;
}

/* ---------- Подпись и атрибуция фотографии ---------- */

.hz-fig figcaption { display: block; }
.hz-fig-cap { display: block; }
.hz-fig-credit {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #7d8f9c;
}
.hz-fig-credit a {
  color: #7d8f9c;
  text-decoration: underline;
  text-decoration-color: #7d8f9c55;
  text-underline-offset: 0.16em;
}
.hz-fig-credit a:hover { color: var(--vyc-ink); text-decoration-color: currentColor; }

/* ---------- Блок автора ----------
   Полномочия компании подаются фактами, а не абзацем текста.
   Монограмма вместо портрета — честнее пустого кружка;
   заменится фотографией, когда она появится.
   Фишки — проверяемые факты, не обещания. */

.hz-author {
  max-width: 100%;
  margin: 0;
  padding: 1.75rem;
  background: var(--vyc-tint);
  border: 1px solid var(--vyc-rule);
  border-radius: var(--vyc-radius);
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.25rem;
}

.hz-author-mark {
  width: 4rem;
  height: 4rem;
  border-radius: var(--vyc-radius);
  background: var(--vyc-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  user-select: none;
}

.hz-author-body > :first-child { margin-top: 0; }
.hz-author-body > :last-child  { margin-bottom: 0; }

.hz-author-name {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--vyc-ink);
}

.hz-author-role {
  margin: 0.2rem 0 0;
  font-size: 0.9375rem;
  color: var(--vyc-accent-d);
}

.hz-author p.hz-author-bio {
  margin: 0.85rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--vyc-body);
}

.hz-author-facts {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hz-author-facts li {
  margin: 0;
  padding: 0.3rem 0.65rem;
  background: #fff;
  border: 1px solid var(--vyc-rule);
  border-radius: var(--vyc-radius);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--vyc-body);
  white-space: nowrap;
}

.hz-author-facts li b {
  font-weight: 600;
  color: var(--vyc-ink);
}

.hz-author-more {
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
}

@media (max-width: 600px) {
  .hz-author { grid-template-columns: 1fr; gap: 1rem; padding: 1.35rem; }
  .hz-author-mark { width: 3.25rem; height: 3.25rem; font-size: 1.05rem; }
  .hz-author-facts li { white-space: normal; }
}

/* Абзац сразу после карточки автора — отбивка от неё, а не от заголовка. */
.about-info__text p.hz-author-after { margin-top: 1.25rem; }

/* Ссылка внутри карточки — на тинте базовый бирюзовый даёт 4,32:1.
   Тёмный оттенок даёт 6,39:1 и проходит AA. */
.hz-author-more a { color: var(--vyc-accent-d); }
.hz-author-more a:hover { color: var(--vyc-ink); }