/* ==========================================================================
   Gilroy. Файлы лежат в теме, стороннего CDN нет: Google Fonts этот шрифт
   не раздаёт. Начертаний три — Regular, Medium, Bold; Light в наборе нет.
   display=swap: текст виден запасным шрифтом, пока грузится фирменный.
   ========================================================================== */

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy-600.woff') format('woff');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   База: сброс, типографика, контейнер, сетка, отступы секций
   Мобильный первым, медиазапросы min-width: 480 / 768 / 1024 / 1280.
   ========================================================================== */

/* --- Сброс ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
}

hr {
  height: 0;
  border: 0;
  border-top: var(--border);
}

/* --- Типографика ---------------------------------------------------------- */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Все заголовки одного начертания — --fw-heading. Отдельного правила для
   h4–h6 больше нет: в наборе Gilroy 500 и 600 берут один файл, и «полужирные»
   мелкие подзаголовки ничем не отличались от крупных заголовков. */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5,
h6 {
  font-size: var(--fs-base);
}

p,
ul,
ol,
blockquote,
figure,
table {
  margin-block: 0 var(--space-4);
}

:where(h1, h2, h3, h4, h5, h6) + :where(p, ul, ol) {
  margin-top: var(--space-4);
}

/* Последний элемент внутри блока не должен давать лишний отступ снизу. */
:where(p, ul, ol, blockquote, figure, table):last-child {
  margin-bottom: 0;
}

/* Ссылки — navy: светлый синий на белом не проходит по контрасту. */
a {
  color: var(--color-navy);
  text-decoration-color: var(--color-primary);
  text-underline-offset: 0.2em;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary-dark);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

/* Внутри заголовка выделение не должно менять начертание. В перенесённых
   статьях заголовки набраны как <h2><strong>…</strong></h2>, и strong со
   своим --fw-semibold делал их тоньше самого заголовка: у Gilroy 600 — это
   Medium, а заголовки идут на 700. */
:where(h1, h2, h3, h4, h5, h6) strong,
:where(h1, h2, h3, h4, h5, h6) b {
  font-weight: inherit;
}

small {
  font-size: var(--fs-small);
}

/* Маркированные списки в контенте (wysiwyg-полях ACF). */
.entry-content ul,
.entry-content ol {
  padding-left: var(--space-5);
}

/* Списки блоков — это сетки, а не текст: ни поля под маркеры, ни отступа
   между пунктами им не нужно. Правило выше их задевало, потому что вес у
   него выше, чем у сброса ul[class] в начале файла: лента кейсов, шаги и
   цифры уезжали на 24px вправо от общего левого края страницы, а у сеток
   вторая колонка сползала вниз относительно первой.
   Отличаем по классу: у сетки блока он есть, у списка из редактора нет. */
.entry-content ul[class],
.entry-content ol[class] {
  padding-left: 0;
}

/* Исключение — списки из редактора: Гутенберг вешает на них класс
   wp-block-list, и правило выше сняло бы им и поля, и маркеры. Отличить от
   сетки блока можно только по этому классу. */
.entry-content ul.wp-block-list,
.entry-content ol.wp-block-list {
  padding-left: var(--space-5);
  list-style: revert;
}

.entry-content ul.wp-block-list li + li,
.entry-content ol.wp-block-list li + li {
  margin-top: var(--space-2);
}

/* Маркер фирменного цвета — в длинной статье список так виден лучше. */
.entry-content ul li::marker,
.entry-content ul.wp-block-list li::marker {
  color: var(--color-accent);
}

.entry-content ol li::marker,
.entry-content ol.wp-block-list li::marker {
  color: var(--color-accent);
  font-weight: var(--fw-heading);
}

.entry-content li + li {
  margin-top: var(--space-2);
}

.entry-content ul[class] li + li,
.entry-content ol[class] li + li {
  margin-top: 0;
}



/* --- Вспомогательные классы текста ---------------------------------------- */

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-base);
}

.muted {
  color: var(--color-text-muted);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* Крупный декоративный номер. В макете он нарисован контуром без заливки и
   к низу растворяется. Сплошная заливка бледно-голубым — запасной вариант для
   браузеров без -webkit-text-stroke: номер останется виден, просто плоским. */
.display-number {
  color: var(--color-accent-light);
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  /* Высота строки не меньше единицы и небольшое поле сверху: маска
     --number-fade режется по коробке элемента, и при line-height меньше 1
     она срезала цифрам макушки. */
  line-height: 1;
  padding-top: 0.12em;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .display-number {
    color: transparent;
    -webkit-text-stroke: var(--number-stroke-width) var(--number-stroke-color);
    -webkit-mask-image: var(--number-fade);
    mask-image: var(--number-fade);
  }
}

/* --- Фокус ---------------------------------------------------------------- */

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-navy);
  color: var(--color-on-dark);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus {
  color: var(--color-on-dark);
  transform: translateY(0);
}

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

/* --- Контейнер ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

/* Узкий контейнер: юрстраницы, длинный текст, text-block вариант «узкий». */
.container--narrow {
  max-width: 760px;
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--gutter);
  }
}

/* --- Секции --------------------------------------------------------------- */

.section {
  padding-block: var(--section-py-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-py);
  }
}

.section--tight  { padding-block: var(--space-7); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Фоны секций */
.section--light { background-color: var(--color-bg-light); }
.section--grey  { background-color: var(--color-bg-grey); }

.section--dark {
  background-color: var(--color-navy);
  color: var(--color-on-dark);
}

.section--dark :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-on-dark);
}

.section--dark a {
  color: var(--color-on-dark);
  text-decoration-color: var(--color-primary);
}

.section--dark .muted,
.section--dark .caption {
  color: var(--color-accent-light);
}

/* Заголовочная часть секции.
   Заголовки набраны заглавными и стоят по центру — так на текущем сайте. */
.section__head {
  margin-bottom: var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .section__head {
    margin-bottom: var(--space-7);
  }
}

/* Модификатор для секций, где заголовок должен стоять слева. */
.section__head--left {
  text-align: left;
}

/* Заголовок секции: прописными, светлым, двумя цветами. Тёмная часть — не
   navy, а основной цвет текста: пипеткой по макету снято #222222. */
.section__title {
  margin-bottom: 0;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--ls-title);
}

/* Двухцветный заголовок: светлая часть перед тёмной. */
.section__title-accent {
  color: var(--color-heading-accent);
}

.section__intro {
  max-width: 760px;
  margin-top: var(--space-4);
  margin-inline: auto;
  font-size: var(--fs-lead);
}

.section__head--left .section__intro {
  margin-inline: 0;
}

/* --- Сетка ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .grid {
    gap: var(--space-6);
  }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* До 1024px четырёхколоночная сетка идёт в две колонки. */
@media (min-width: 480px) and (max-width: 1023.98px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Две колонки «текст + изображение». */
.grid--split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .grid--split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* --- Изображения ---------------------------------------------------------- */

.media {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.media img {
  width: 100%;
}

.media--cover img {
  height: 100%;
  object-fit: cover;
}

/* --- Служебное ------------------------------------------------------------ */

.wp-block-group.alignwide,
.alignwide {
  max-width: var(--container);
  margin-inline: auto;
}

.alignfull {
  width: 100%;
}

/* --- Хлебные крошки -------------------------------------------------------- */

/* Мелкая строка над заголовком: где посетитель находится. Набрана вторичным
   цветом, чтобы не спорить с заголовком страницы. */
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
}

.breadcrumbs__item {
  min-width: 0;
}

.breadcrumbs__item a {
  color: inherit;
  text-decoration: none;
}

.breadcrumbs__item a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Разделитель был цвета границ — на светлой подложке его не было видно
   вовсе. Берём тот же вторичный цвет, что и у самих крошек, приглушая его
   только размером. */
.breadcrumbs__sep {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  line-height: 1;
  opacity: 0.6;
}

/* Текущая страница — последний пункт: тёмным, чтобы было видно, где стоишь. */
.breadcrumbs__item [aria-current='page'] {
  color: var(--color-navy);
}

/* Полоса с крошками над контентом страницы. */
.breadcrumbs-bar {
  padding-block: var(--space-4);
}

@media (min-width: 1024px) {
  .breadcrumbs-bar {
    padding-block: var(--space-5) var(--space-4);
  }
}

/* В первом экране кейса крошки стоят над заголовком. */
.case-single .breadcrumbs {
  margin-bottom: var(--space-4);
}

/* --- Цитаты в тексте ------------------------------------------------------- */

/* Цитата — не просто абзац: в длинной статье она должна останавливать взгляд.
   Светлая плашка со скруглением, а слева от текста — тонкая вертикальная
   черта во всю высоту цитаты. Рамки по краю плашки нет: черта и так задаёт
   левый край, а две линии подряд выглядели тяжело. */
blockquote {
  position: relative;
  margin-block: var(--space-6);
  padding: var(--space-6) var(--card-px);
  padding-left: calc(var(--card-px) + var(--space-5));
  background-color: var(--color-bg-light);
  border: 0;
  border-radius: var(--radius-logo);
  color: var(--color-navy);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: var(--lh-base);
}

blockquote::before {
  content: '';
  position: absolute;
  top: var(--space-6);
  bottom: var(--space-6);
  left: var(--card-px);
  width: var(--rule-width);
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
}

blockquote > :last-child {
  margin-bottom: 0;
}

/* Подпись под цитатой: кто это сказал. Набирается прямым начертанием и
   мельче самой цитаты, чтобы не спорить с ней. */
blockquote cite,
blockquote .quote-author {
  display: block;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-style: normal;
  line-height: var(--lh-base);
}

blockquote cite strong,
blockquote .quote-author strong {
  display: block;
  color: var(--color-navy);
  font-weight: var(--fw-semibold);
}

@media (max-width: 599.98px) {
  blockquote {
    padding-left: calc(var(--card-px) + var(--space-4));
  }

  blockquote::before {
    left: var(--space-4);
  }
}

/* У блока «Цитата» тёмная подложка и свои цвета — оформление он задаёт сам,
   в blocks/quote/quote.css. Общую светлую плашку ему не навязываем. */