/* start.iec.exchange — стили лендинга.
 *
 * Выжимка, а не копия. Источники (см. assets/SOURCES.md):
 *   1. iec-frontend/dist/css/main.css — палитра, @font-face, типографика,
 *      .btn, .program*, .program-card*, .bg-* (398 КБ, взято ~10 КБ);
 *   2. uk.workandtravel.com/.../override.css — .bg-moss (в main.css его нет,
 *      без него бейдж Education остался бы без фона);
 *   3. iec.exchange/assets/root-*.css — токены блока IEC+, переписанные
 *      с Tailwind-утилит на обычный CSS (Tailwind в рантайме не тянем, О-6).
 *
 * Правила скопированы значение-в-значение. Отступления помечены словом
 * «отличие от прода» и объяснены на месте.
 */

/* ------------------------------------------------------------------ */
/* 1. Переменные                                                       */
/* ------------------------------------------------------------------ */

:root {
  /* палитра workandtravel.com */
  --color-blck: #212121;
  --color-blck--rgb: 33, 33, 33;
  --color-whte: #fff;
  --color-border: #E8E8ED;
  --color-primary: #F1AD6E;
  --color-primary-500: #EE9B4E;
  --color-secondary: #64A864;
  --color-secondary-500: #559655;
  --color-gray: #F7F7F7;
  --color-blue-accent: #287DEC;
  --color-orange-accent: #F46F43;
  --color-yellow-accent: #F8B24A;
  --color-olive-accent: #ABB98B;
  --color-red-accent: #F06161;

  /* палитра iec.exchange, блок IEC+ */
  --surface-card: #fff;
  --surface-chip: #f1f2f4;
  /* на проде это `color-mix(in srgb, #000 4%, var(--surface-chip))`. Считаем
     заранее: color-mix не работает в Safari 15, который есть в списке Т-8 */
  --surface-hover: #e7e8ea;

  --font-primary: "jost", -apple-system, blinkmacsystemfont, roboto, ubuntu,
    "Helvetica Neue", arial, sans-serif;
}

/* ------------------------------------------------------------------ */
/* 2. Шрифт                                                            */
/* ------------------------------------------------------------------ */

/* Только woff2 (Т-7): woff нужен браузерам, которых нет в списке поддержки. */
@font-face {
  font-family: jost;
  font-weight: 400;
  font-style: normal;
  src: url(../fonts/jost-400.woff2) format("woff2");
  font-display: swap;
}

@font-face {
  font-family: jost;
  font-weight: 500;
  font-style: normal;
  src: url(../fonts/jost-500.woff2) format("woff2");
  font-display: swap;
}

@font-face {
  font-family: jost;
  font-weight: 600;
  font-style: normal;
  src: url(../fonts/jost-600.woff2) format("woff2");
  font-display: swap;
}

@font-face {
  font-family: jost;
  font-weight: 700;
  font-style: normal;
  src: url(../fonts/jost-700.woff2) format("woff2");
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* 3. База                                                             */
/* ------------------------------------------------------------------ */

* {
  margin: 0;
  padding: 0;
  border: 0;
}

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

html,
body {
  /* отличие от прода: там 360px. Т-5 требует корректный вид от 320px,
     с прод-значением на 320px появился бы горизонтальный скролл */
  min-width: 320px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Запасной путь: если JS не отработал, переход по якорю делает браузер, и
   правило даёт ему плавность. Свойство читается с корневого элемента, у `body`
   браузер его не смотрит — на проде оно стоит на обоих, нам хватает одного. */
html {
  scroll-behavior: smooth;
}

/* Основной путь — библиотека в `assets/js/vendor/`: у встроенной прокрутки нет
   настроек, она укладывается примерно в 300 мс на любое расстояние, и переход
   через всю страницу выходит слишком резким. Пока работает библиотека,
   встроенную плавность надо снять: она анимировала бы каждый её кадровый
   `window.scrollTo`, и две анимации потянули бы страницу наперегонки.
   Класс ставит `assets/js/anchors.js`, когда библиотека загрузилась. */
html.has-smooth-scroll {
  scroll-behavior: auto;
}

/* отличие от прода: там плавная прокрутка включена безусловно. Тем, кто
   попросил в системе меньше движения, она может быть неприятна — выключаем.
   Скрипт проверяет ту же настройку и тоже не вмешивается. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  color: var(--color-blck);
  /* отличие от прода: там `font-size: var(--font-size-default)`, а переменная
     содержит нераскрытый SCSS `rem(14)` — невалидное значение, браузер его
     отбрасывает. Ставим то, что получается по факту. */
  font-size: 1rem;
  font-family: var(--font-primary);
  line-height: 1.2;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-whte);
}

a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

/* Без max-width картинка рендерится в своём натуральном размере и вылезает
   за карточку: на мобильном изображение 201 px лежит в блоке шириной 145 px.
   На проде это правило глобальное, у .program-card__img своего нет. */
img {
  display: block;
  max-width: 100%;
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit;
}

/* ------------------------------------------------------------------ */
/* 4. Сетка и типографика                                              */
/* ------------------------------------------------------------------ */

[class*="__container"] {
  --pad: 20px;
  max-width: 87.5rem;
  margin: 0 auto;
  padding: 0 var(--pad);
}

@media (max-width: 991.98px) {
  [class*="__container"] { --pad: 16px; }
}

.section {
  padding: 5rem 0;
}

.section + .section {
  padding-top: 0;
}

/* отличие от прода: там шапка сайта высокая, с меню и верхней панелью, и под
   ней уместны 80/128 px. У нас шапка в одну строку, столько пустоты съедало бы
   первый экран — на странице под QR это дорого */
.section:first-child {
  padding-top: 2.5rem;
}

/* переход по якорю из шапки не должен упирать заголовок в край экрана */
.section {
  scroll-margin-top: 1.5rem;
}

/* последняя секция не добавляет отступ перед футером — у него свой.
   отличие от прода: там у правила стоит !important. Селектор и так специфичнее
   `.section`, флаг ничего не решает, поэтому не переносим */
.section:last-of-type {
  padding-bottom: 0;
}

@media only screen and (min-width: 1119.98px) {
  .section { padding: 8rem 0; }
  .section:first-child { padding-top: 4rem; }
}

.h2 {
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.28px;
  line-height: 1;
  text-transform: uppercase;
}

@media only screen and (min-width: 767.98px) {
  .h2 { font-size: 2rem; }
}

@media only screen and (min-width: 1119.98px) {
  .h2 {
    font-size: 2.875rem;
    line-height: 1.1;
    letter-spacing: -0.46px;
  }
}

.h3 {
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.24;
  text-transform: uppercase;
}

@media only screen and (min-width: 767.98px) {
  .h3 { font-size: 1.75rem; }
}

@media only screen and (min-width: 1119.98px) {
  .h3 {
    font-size: 2.25rem;
    line-height: 1.11;
    letter-spacing: -0.36px;
  }
}

/* ------------------------------------------------------------------ */
/* 5. Кнопка                                                           */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.9375rem 1.25rem;
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-whte);
  font-size: 0.875rem;
  font-weight: 400;
  border-radius: 100px;
  transition: 0.25s ease-in-out;
  cursor: pointer;
}

@media only screen and (min-width: 1119.98px) {
  .btn {
    padding: 1.0625rem 1.4375rem 1.0625rem 1.5rem;
    font-size: 1rem;
    letter-spacing: -0.1px;
    gap: 2px;
  }
}

@media (any-hover: hover) {
  .btn:hover {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-500);
  }
}

.btn--secondary {
  border-color: var(--color-secondary);
  background-color: var(--color-secondary);
}

@media (any-hover: hover) {
  .btn--secondary:hover {
    border-color: var(--color-secondary-500);
    background-color: var(--color-secondary-500);
  }
}

/* отличие от прода: там иконка рисуется CSS-маской и перекрашивается в
   currentColor — прод переиспользует один файл на разных фонах. Нам это не
   нужно: все пять иконок страницы белые уже в исходниках. А маска на странице,
   открытой с диска, не работает вовсе: браузер считает соседний файл чужим
   источником и молча её не грузит — иконки пропадают, что и требует Т-4
   исключить. Обычный фон таких ограничений не имеет. */
.btn--icon::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/icons/arrow-btn.svg) center / 16px no-repeat;
}

/* ------------------------------------------------------------------ */
/* 6. Шапка                                                            */
/* ------------------------------------------------------------------ */

/* Своей вёрстки не изобретаем: значения взяты с шапки uk.workandtravel.com
   (.header-main, .header-main__logo, .menu__link). Меню, поиск, телефон,
   переключатель языка и верхнюю панель не переносим — на лендинге из двух
   блоков нужны только логотип и две ссылки. */
.header {
  padding: 0.75rem 0;
}

@media only screen and (min-width: 1119.98px) {
  .header { padding: 1.5rem 0; }
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* если ссылки всё же не поместятся рядом с логотипом, меню уходит на
     вторую строку целиком — это лучше, чем горизонтальная прокрутка */
  flex-wrap: wrap;
}

/* отличие от прода: там логотип 7,6875rem и на мобильном, но рядом с ним
   только бургер. У нас две текстовые ссылки, и на 320 px строка не сходится:
   нужно 302 px при доступных 288. Логотип уменьшен до 6,25rem, зазор меню
   до 12 px — тогда остаётся запас. С 768 px возвращаются прод-значения. */
.header__logo {
  width: 6.25rem;
  height: auto;
  flex-shrink: 0;
}

@media only screen and (min-width: 767.98px) {
  .header__logo { width: 7.6875rem; }
}

@media only screen and (min-width: 1023.98px) {
  .header__logo { width: 8.125rem; }
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media only screen and (min-width: 767.98px) {
  .header__nav { gap: 1rem; }
}

@media only screen and (min-width: 1119.98px) {
  .header__nav { gap: 1.5rem; }
}

.header__link {
  font-size: 0.875rem;
  line-height: 1.28;
  letter-spacing: -0.14px;
  /* название блока не должно разрываться посередине */
  white-space: nowrap;
  transition: 0.25s ease-in-out;
}

@media only screen and (min-width: 767.98px) {
  .header__link { font-size: 1rem; }
}

@media (any-hover: hover) {
  .header__link:hover { opacity: 0.6; }
}

/* ------------------------------------------------------------------ */
/* 7. Блок Programs                                                    */
/* ------------------------------------------------------------------ */

.program__head {
  margin-bottom: 2rem;
}

@media only screen and (min-width: 1119.98px) {
  .program__head { margin-bottom: 2.5rem; }
}

.program__list {
  display: grid;
  gap: 16px;
}

@media only screen and (min-width: 767.98px) {
  .program__list { grid-template-columns: repeat(2, 1fr); }
}

.program__bottom {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (min-width: 1119.98px) {
  .program__bottom { margin-top: 2.5rem; }
}

/* отличие от прода: там кнопка All programs продублирована — в шапке блока
   (виден от 1024) и под списком (виден до 1024). Нам хватает одной, и Т-17
   требует её сразу после карточек, поэтому оставлена только нижняя. */

.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 21.75rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background-color: var(--color-gray);
  border-radius: 20px;
}

@media only screen and (min-width: 1119.98px) {
  .program-card {
    height: 29.375rem;
    padding: 2.5rem;
    border-radius: 24px;
  }
}

.program-card--bg {
  background-image: url(../img/programs/program-card-bg-sm.svg);
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 1119.98px) {
  .program-card--bg {
    background-image: url(../img/programs/program-card-bg.svg);
  }
}

.program-card__top {
  margin-bottom: 1.25rem;
}

@media only screen and (min-width: 1119.98px) {
  .program-card__top { margin-bottom: 1rem; }
}

.program-card__category {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-whte);
  text-transform: uppercase;
  background-color: var(--color-primary);
  border-radius: 8px;
  padding: 0.3125rem 0.375rem;
}

@media only screen and (min-width: 1119.98px) {
  .program-card__category {
    font-size: 0.875rem;
    padding: 0.25rem 0.375rem;
  }
}

/* тот же переход с маски на фон, что и у кнопки, — см. .btn--icon::after */
.program-card__category::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin-right: 0.25rem;
  background-position: center;
  background-size: 18px;
  background-repeat: no-repeat;
}

/* отличие от прода: путь записан обычным url() прямо в правиле, а не через
   переменную. WordPress подставляет туда абсолютный адрес, у нас же путь
   относительный, и как разрешается относительный url() внутри кастомного
   свойства — место, где браузеры расходились. Здесь разночтений нет. */
.program-card__category--work::before        { background-image: url(../img/icons/work.svg); }
.program-card__category--internship::before  { background-image: url(../img/icons/internship.svg); }
.program-card__category--summer-camp::before { background-image: url(../img/icons/summer-camp.svg); }
.program-card__category--education::before   { background-image: url(../img/icons/education.svg); }

.program-card__title {
  margin-bottom: 0.625rem;
}

@media only screen and (min-width: 1119.98px) {
  .program-card__title { margin-bottom: 1rem; }
}

/* отличие от прода: `position: relative` у текстовых блоков. Изображение внутри
   карточки позиционировано абсолютно и идёт в разметке последним, поэтому без
   этого оно перекрывает описание и цену. На проде так же, но там это незаметно
   на их наборе картинок — страховка дешёвая, оставляем. */
.program-card__desc {
  position: relative;
  max-width: 15.625rem;
  width: 100%;
  font-size: 0.875rem;
  color: rgba(var(--color-blck--rgb), 0.7);
}

@media only screen and (min-width: 767.98px) {
  .program-card__desc {
    font-size: 1rem;
    max-width: 20.625rem;
  }
}

.program-card__bottom {
  position: relative;
  margin: auto 0 0;
}

.program-card__price-current {
  color: var(--color-secondary);
  font-size: 1.375rem;
  font-weight: 600;
  text-transform: uppercase;
}

@media only screen and (min-width: 767.98px) {
  .program-card__price-current { font-size: 1.75rem; }
}

@media only screen and (min-width: 1119.98px) {
  .program-card__price-current { font-size: 2.25rem; }
}

.program-card__img {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 9.0625rem;
}

@media only screen and (min-width: 1119.98px) {
  .program-card__img {
    max-width: 30rem;
    right: -40px;
    width: 100%;
  }
}

/* Цвета бейджей категорий. Список программ утверждён, но цвета оставлены все,
   которыми пользуются категории каталога: замена программы тогда правится одной
   строкой разметки. `.bg-moss` живёт только в `override.css` прода, не в `main.css`. */
.bg-blue   { background-color: var(--color-blue-accent) !important; }
.bg-yellow { background-color: var(--color-yellow-accent) !important; }
.bg-olive  { background-color: var(--color-olive-accent) !important; }
.bg-orange { background-color: var(--color-orange-accent) !important; }
.bg-red    { background-color: var(--color-red-accent) !important; }
.bg-green  { background-color: var(--color-secondary) !important; }
.bg-moss   { background-color: #00504F !important; }

/* ------------------------------------------------------------------ */
/* 8. Блок IEC+                                                        */
/* ------------------------------------------------------------------ */

/* Перенос с Tailwind: px-значения — раскрытые утилиты прода (p-20, gap-10,
   size-40, text-15/18), где 1 единица = 1 px. Два отличия от прода, оба по
   разделу 7 ТЗ — «сшиваем блоки минимально»:
   1. шрифт Jost вместо Geist Mono (второе семейство ради шести подписей
      не тянем, а Geist Mono локально и не лежит);
   2. цвет описаний — общий с карточками программ. На проде тут класс
      `text-cTextSecondary`, которого в его же CSS нет: правило мёртвое,
      текст наследует чёрный. */

/* отличие от прода: рамка. На дашборде карточка белая на сером фоне страницы
   (--surface-page: #e0e3e9), у нас фон белый — без рамки карточка не читается. */
.iec-plus__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: 1.2rem;
}

.iec-plus__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.iec-plus__subtitle {
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(var(--color-blck--rgb), 0.7);
}

.iec-plus__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

@media only screen and (min-width: 767.98px) {
  .iec-plus__list { grid-template-columns: repeat(2, 1fr); }
}

.service-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  text-align: left;
  background-color: var(--surface-chip);
  border-radius: 10px;
  transition: background-color 0.15s ease-in-out;
}

@media (any-hover: hover) {
  .service-card:hover { background-color: var(--surface-hover); }
}

.service-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background-color: var(--surface-card);
  border-radius: 8px;
}

.service-card__icon img {
  width: 40px;
  height: 40px;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.service-card__title {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #000;
}

.service-card__desc {
  font-size: 0.875rem;
  line-height: 1.375;
  color: rgba(var(--color-blck--rgb), 0.7);
}

/* ------------------------------------------------------------------ */
/* 9. Футер                                                            */
/* ------------------------------------------------------------------ */

.footer {
  padding: 1rem 0;
  font-size: 0.875rem;
  line-height: 1.3;
}

@media only screen and (min-width: 767.98px) {
  .footer { font-size: 1rem; }
}

@media only screen and (min-width: 1119.98px) {
  .footer { padding: 2.5rem 0; }
}

.footer__inner {
  padding: 1.5rem;
  border-radius: 20px;
  background-color: var(--color-gray);
}

@media only screen and (min-width: 1023.98px) {
  .footer__inner { padding: 2.5rem; }
}

@media only screen and (min-width: 1119.98px) {
  .footer__inner { padding: 3.5rem; }
}

.footer__logo {
  width: 7.75rem;
  height: auto;
  margin-bottom: 1.5rem;
}

@media only screen and (min-width: 767.98px) {
  .footer__logo {
    width: 8.125rem;
    margin-bottom: 1rem;
  }
}

/* отличие от прода: копирайт лежит в `.footer__bottom` с верхней рамкой,
   которая отделяет его от навигации футера. Навигацию мы не переносим,
   отделять не от чего — осталась только приглушённая строка. */
.footer__years {
  color: rgba(var(--color-blck--rgb), 0.5);
}