/* ============================================================ */
/* === v1.8: FONT-FACE С FONT-DISPLAY: SWAP =================== */
/* ============================================================ */
/* Tilda по умолчанию НЕ ставит font-display, из-за чего текст
   невидим до 3 секунд пока шрифт грузится (FOIT - Flash of
   Invisible Text). Это плохо влияет на LCP.

   Дублируем @font-face с тем же именем и URL, но с font-display:
   swap — текст показывается сразу в системном шрифте, потом
   плавно подменяется на PT Serif/PT Sans когда тот загрузится.

   Браузер сначала видит наши правила (выше в DOM), они побеждают
   tilda-blocks-page.css правила по каскаду. */
@font-face {
  font-family: 'PTSerif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://static.tildacdn.com/tild6566-3162-4264-a439-303036653330/pt-serif-v19-cyrilli.woff2') format('woff2');
}
@font-face {
  font-family: 'PTSans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://static.tildacdn.com/tild3834-3461-4863-a164-373963653039/pt-sans-v18-cyrillic.woff2') format('woff2');
}
@font-face {
  font-family: 'PTSans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://static.tildacdn.com/tild3039-6465-4065-a630-316131303837/pt-sans-v18-cyrillic.woff2') format('woff2');
}

/* ============================================================ */
/* === ДИЗАЙН-СИСТЕМА: ПЕРЕМЕННЫЕ В :ROOT ==================== */
/* ============================================================ */
:root {
  /* --- ШРИФТЫ --- */
  /* Имена 'PTSerif' и 'PTSans' БЕЗ ПРОБЕЛА — именно так Tilda
     прописывает шрифты в @font-face при загрузке через настройки. */
  --y-font-serif: 'PTSerif', Georgia, 'Times New Roman', serif;
  --y-font-sans: 'PTSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- ЦВЕТА: основные --- */
  --y-color-primary: #0039A6;          /* акцент: хедер, кнопки, CTA, ссылки */
  --y-color-primary-hover: #002F87;    /* акцент при наведении */
  --y-color-primary-dark: #1A2A5C;     /* тёмный для больших площадей (если нужно) */

  /* --- ЦВЕТА: текст --- */
  --y-color-text: #3A4555;             /* основной текст — контраст 9.4:1 */
  --y-color-text-strong: #1A2A50;      /* заголовки — контраст 13.2:1 */
  --y-color-text-muted: #5A6677;       /* вторичный текст — контраст 5.5:1 */
  --y-color-text-subtle: #7A8699;      /* служебные элементы — контраст 3.8:1 */
  --y-color-text-inverse: #FFFFFF;     /* текст на тёмном фоне */

  /* --- ЦВЕТА: фоны --- */
  --y-color-bg: #F0F3F7;               /* фон секций */
  --y-color-bg-alt: #E8ECF2;           /* фон бейджей */
  --y-color-card: #FFFFFF;             /* фон карточек */
  --y-color-border: #D4DAE3;           /* границы карточек */
  --y-color-border-soft: #E8ECF2;      /* мягкие разделители */

  /* --- ТИПОГРАФИЧЕСКАЯ ШКАЛА (clamp для адаптивности) --- */
  --y-size-h1: clamp(30px, 4.5vw, 46px);
  --y-size-h2: clamp(28px, 3.8vw, 42px);
  --y-size-h3: clamp(18px, 1.8vw, 21px);
  --y-size-lead: clamp(15px, 1.5vw, 17px);
  --y-size-body: clamp(14px, 1.3vw, 16px);
  --y-size-caption: clamp(13px, 1.1vw, 14px);
  --y-size-micro: clamp(10px, 0.95vw, 12px);

  /* --- ВЫСОТА СТРОКИ --- */
  --y-lh-tight: 1.15;
  --y-lh-snug: 1.3;
  --y-lh-normal: 1.6;
  --y-lh-relaxed: 1.75;

  /* --- РАДИУСЫ --- */
  --y-radius-sm: 4px;
  --y-radius-md: 6px;
  --y-radius-lg: 8px;

  /* --- ОТСТУПЫ В СЕКЦИЯХ --- */
  --y-section-pad-y: clamp(48px, 7vw, 80px);
  --y-container-pad-x: clamp(16px, 3vw, 20px);
  --y-container-max: 1200px;

  /* --- ТЕНИ --- */
  --y-shadow-sm: 0 1px 3px rgba(26, 42, 80, 0.06);
  --y-shadow-md: 0 4px 12px rgba(26, 42, 80, 0.08);
  --y-shadow-lg: 0 8px 24px rgba(26, 42, 80, 0.10);
  --y-shadow-xl: 0 12px 28px rgba(0, 57, 166, 0.18);

  /* --- ПЕРЕХОДЫ --- */
  --y-transition: 0.2s ease;
  --y-transition-fast: 0.15s ease;

  /* --- Z-INDEX --- */
  --y-z-header: 100;
  --y-z-modal: 9999;
}

/* ============================================================ */
/* === ДОСТУПНОСТЬ: УВАЖАЕМ НАСТРОЙКИ ПОЛЬЗОВАТЕЛЯ ============ */
/* ============================================================ */

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Видимый фокус для клавиатуры (важно для доступности) */
*:focus-visible {
  outline: 2px solid var(--y-color-primary);
  outline-offset: 2px;
  border-radius: var(--y-radius-sm);
}

/* ============================================================ */
/* === ТИПОГРАФИКА: КРАСИВЫЕ ПЕРЕНОСЫ СТРОК =================== */
/* ============================================================ */
/*
  text-wrap: balance — балансирует длину строк, чтобы они выглядели
  визуально равными. Применяется к заголовкам и подзаголовкам:
  не будет одинокого слова на последней строке.
  
  Поддержка: Chrome 114+ (июнь 2023), Safari 17.5+ (май 2024),
  Firefox 121+ (декабрь 2023). В старых браузерах свойство
  игнорируется — текст будет переноситься как обычно.
  
  Селекторы охватывают и нативные h1-h6, и любой класс с
  суффиксами __title / __subtitle / __heading — это паттерн,
  который мы используем во всех блоках сайта.
*/
h1, h2, h3, h4, h5, h6,
[class$="__title"],
[class$="__subtitle"],
[class$="__heading"],
[class$="__lead"] {
  text-wrap: balance;
}

/*
  text-wrap: pretty — для длинных абзацев. Не балансирует строки,
  но не оставляет одинокое слово в конце фразы (защита от орфанов).
  Применяем к параграфам и описаниям внутри карточек.
  
  Поддержка: Chrome 117+, Safari 17.5+, Firefox 121+.
*/
p,
[class$="__desc"],
[class$="__text"],
[class$="__content"] {
  text-wrap: pretty;
}

/* ============================================================ */
/* === УНИВЕРСАЛЬНЫЕ ПАТТЕРНЫ ДЛЯ ВСЕХ БЛОКОВ ================= */
/* ============================================================ */

/*
  .y-list — маркированный список в фирменной стилистике.
  Маркер — длинное тире «—» (em-dash) из шрифта PT Sans в акцентном
  цвете, на уровне первой строки текста. Тире наследует размер
  и начертание шрифта — масштабируется автоматически.
  
  Использовать везде, где нужен список с фирменным стилем:
  · в карточках практики (.y-practice-card__list)
  · в ответах FAQ
  · в описаниях кейсов попапа
  · в /about (достижения, опыт)
  · в /areasofpractice (подпункты направлений)
*/
.y-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.y-list li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: var(--y-size-body);
  color: var(--y-color-text);
  line-height: var(--y-lh-normal);
}
.y-list li::before {
  /* Длинное тире — типографский em-dash из шрифта.
     Растёт вместе с font-size, наследует начертание PT Sans.
     Позиционирование top: 0.95em держит тире на уровне
     первой строки даже при переносе на 2+ строки. */
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 7px;
  color: var(--y-color-primary);
  font-weight: 400;
  /* Делаем тире чуть «тоньше» через scale по вертикали и
     слегка увеличиваем по горизонтали для визуального баланса */
  line-height: var(--y-lh-normal);
}

/*
  .y-icon-heading — паттерн «иконка + заголовок» в одну строку.
  Используется в карточках-категориях: практика, контакты,
  возможные блоки «Преимущества» и «Этапы работы».
  
  Содержит:
  · элемент с классом .y-icon-heading__icon (svg внутри)
  · заголовок (любой h2–h4, или span с подходящим классом)
*/
.y-icon-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px 0;
}
.y-icon-heading__icon {
  color: var(--y-color-primary);
  flex-shrink: 0;
  display: inline-flex;
}
.y-icon-heading__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

@media (max-width: 640px) {
  .y-icon-heading {
    gap: 12px;
    margin-bottom: 18px;
  }
  .y-icon-heading__icon svg {
    width: 28px;
    height: 28px;
  }
}

/*
  .y-cta-banner — универсальная CTA-плашка со звонком.
  Используется в FAQ ("Не нашли ответ?"), контактах,
  возможно в /about. Состоит из:
  · левая часть .y-cta-banner__text (заголовок + подзаголовок)
  · правая часть .y-cta-banner__btn (белая кнопка-CTA)
  
  Сам элемент  делает всю плашку кликабельной.
  Все цвета с !important — защита от тильдовских стилей,
  которые перекрашивают .
*/
.y-cta-banner {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  background: var(--y-color-primary) !important;
  color: var(--y-color-text-inverse) !important;
  border-radius: var(--y-radius-lg) !important;
  padding: 28px 32px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  border: none !important;
  transition:
    background var(--y-transition),
    transform var(--y-transition),
    box-shadow var(--y-transition) !important;
}
.y-cta-banner:hover,
.y-cta-banner:active,
.y-cta-banner:focus,
.y-cta-banner:visited {
  color: var(--y-color-text-inverse) !important;
  text-decoration: none !important;
}
.y-cta-banner:hover {
  background: var(--y-color-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 57, 166, 0.25);
}

.y-cta-banner__text {
  flex: 1;
  min-width: 0;
  color: var(--y-color-text-inverse) !important;
}
.y-cta-banner__title {
  font-family: var(--y-font-serif) !important;
  font-size: clamp(17px, 1.8vw, 20px) !important;
  font-weight: 400 !important;
  color: var(--y-color-text-inverse) !important;
  line-height: var(--y-lh-snug) !important;
  margin: 0 0 6px 0 !important;
}
.y-cta-banner__sub {
  font-size: var(--y-size-caption) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: var(--y-lh-normal) !important;
}

.y-cta-banner__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--y-color-text-inverse) !important;
  color: var(--y-color-primary) !important;
  font-size: var(--y-size-caption) !important;
  font-weight: 700 !important;
  padding: 14px 26px !important;
  border-radius: var(--y-radius-sm) !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  flex-shrink: 0;
}
.y-cta-banner__btn svg {
  width: 16px;
  height: 16px;
  color: var(--y-color-primary) !important;
  stroke: var(--y-color-primary) !important;
}

@media (max-width: 640px) {
  .y-cta-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px !important;
  }
  .y-cta-banner__btn {
    width: 100% !important;
    justify-content: center !important;
  }
}
</style>