/* ==========================================================================
   Полезные ресурсы – страница

   Источник: Figma нода 32504:4636 (1920×5886), выгрузка 2026-08-04.
   Значения сняты через get_design_context, не подобраны на глаз.

   ЗАМЕРЫ ХИРО (нода 32504:4640):
     фон #2597FF, padding 128 сверху / 64 снизу / 96 по бокам, gap 48
     заголовок  Inter Medium 48 / 1.1 / −3.84px (−8 %), ширина 743, по центру
     лид        Inter Regular 24 / 1.4 / −1.2px (−5 %), ширина 797, по центру
     кнопка     белая, 485×57, радиус 999, текст 20 Semi Bold / −1px
     кольца     три справа снизу (781/729/675, поворот 1.46°) и три слева
                сверху (те же размеры, поворот −178.54°)

   ЗАМЕРЫ ОСНОВНОГО БЛОКА (нода 32519:4966):
     надзаголовок  точка 16px #2597FF + текст 20 / 1.2 / −1px
     заголовок     36 / 0.9 / −2.16px (−6 %), второе слово синим
     фильтр        6 плиток в ряд, gap 20, padding 24, радиус 24
                   активная – заливка #2597FF, текст белый 28 / −1.4px
                   покой – #F2F2F8, заголовок #3A3A3A; hover – градиент
                   + обводка #4BA9FF + заголовок #2597FF
     сетка карточек 4 колонки, gap 20, ширина 1840
     карточка      #F2F2F8, padding 24, радиус 24, gap 32
                   логотип в белом боксе 168px высотой, радиус 24
                   название 24 / 1.0 / −1.92px (−8 %)
                   категория 18 / 1.2 / −0.54px, синяя
                   описание 20 / 1.3 / −1px, прозрачность 60 %
                   стрелка – круг 40px #2597FF, иконка 24px
   ========================================================================== */

/*
 * Шапка в макете стоит НА синем хиро. В теме фон только у серой плашки –
 * красим полосу вокруг неё в brand, когда следом идёт .res-hero
 * (тот же приём, что у tour-hero / club-hero / adm-hero).
 */
.site-header:has(+ .site-main .res-hero) {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-brand);
}

/* --- Хиро ----------------------------------------------------------------- */

.res-hero {
  position: relative;
  overflow: hidden;              /* кольца выходят за секцию и дали бы прокрутку */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;

  padding: 128px 96px 64px;
  background: var(--color-brand);
}

.res-hero__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  max-width: 100%;
}

.res-hero__title {
  max-width: 743px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text-invert);
  text-align: center;
}

.res-hero__lead {
  max-width: 797px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-lead);
  letter-spacing: var(--ls-lead);
  color: var(--color-text-invert);
  text-align: center;
}

.res-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--btn-w-hero);
  max-width: 100%;
  min-height: var(--btn-height);
  padding: var(--btn-padding);

  background: var(--color-bg);
  border-radius: var(--radius-pill);

  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  color: var(--color-text);
}

/* Кольца. Позиции и повороты – из макета. */
.res-hero__rings {
  position: absolute;
  pointer-events: none;
}

.res-hero__rings--br { right: -280px; bottom: -270px; }
.res-hero__rings--tl { left: -252px;  top: -274px; }

.res-hero__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

.res-hero__rings--br .res-hero__ring { rotate: 1.46deg; }
.res-hero__rings--tl .res-hero__ring { rotate: -178.54deg; }

.res-hero__ring--1 { width: 781px; height: 781px; }
.res-hero__ring--2 { width: 729px; height: 729px; }
.res-hero__ring--3 { width: 675px; height: 675px; }

/* --- Основной блок -------------------------------------------------------- */

.res-main {
  padding-block: var(--section-gap);
}

.res-main__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: 64px;
}

.res-main__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);

  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.res-main__dot {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

.res-main__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
  text-align: center;
}

.res-main__title span { color: var(--color-link); }

/* --- Фильтр категорий ----------------------------------------------------- */
/*
   Состояния из макета 32504:9131:
   • покой     – #F2F2F8, без обводки, заголовок #3A3A3A
   • hover     – градиент lin_gradient_4 (#F2F2F8→#B5DCFF), обводка #4BA9FF,
                 заголовок #2597FF (как AP/SAT/IELTS на скрине)
   • active    – заливка #2597FF, текст белый
   Обводка в покое прозрачная, чтобы при hover не прыгала ширина.
*/

.res-filter {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.res-filter__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);

  padding: var(--space-24);
  background: var(--color-bg-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  text-align: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.res-filter__item--active {
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.res-filter__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.res-filter__item--active .res-filter__title { color: var(--color-text-invert); }

.res-filter__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: -0.03em; /* text_18_reg −3 % */
  color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
  .res-filter__item:not(.res-filter__item--active):hover {
    background: var(--gradient-info);
    border-color: var(--color-blue-light);
  }

  .res-filter__item:not(.res-filter__item--active):hover .res-filter__title {
    color: var(--color-link);
  }
}

.res-filter__item:not(.res-filter__item--active):focus-visible {
  background: var(--gradient-info);
  border-color: var(--color-blue-light);
  outline: none;
}

.res-filter__item:not(.res-filter__item--active):focus-visible .res-filter__title {
  color: var(--color-link);
}

/* --- Разделитель ---------------------------------------------------------- */

.res-divider {
  margin-block: 64px;
  border: 0;
  border-top: 1px solid var(--color-divider);
}

/* --- Карточки ------------------------------------------------------------- */

.res-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.res-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);

  padding: var(--space-24);
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl);
  color: inherit;
}

.res-card__logo {
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);

  background: var(--color-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.res-card__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.res-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.res-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.res-card__titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.res-card__title {
  font-size: var(--fs-h3);
  line-height: 1;                /* в макете leading-none */
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.res-card__cat {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 500;
  letter-spacing: var(--ls-small);
  color: var(--color-link);
}

.res-card__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

.res-card__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: .6;
}

/* ==========================================================================
   АДАПТИВ – заглушка, а не решение.
   Мобильного макета этой страницы НЕТ. Правила ниже только не дают сеткам
   разъехаться; как раскладка должна выглядеть на узком экране, дизайнером
   не решено.
   ========================================================================== */

@media (max-width: 1440px) {
  .res-cards  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res-hero   { padding-inline: var(--gutter); }
}

@media (max-width: 1024px) {
  .res-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-hero  { padding-block: 96px 48px; }
  .res-hero__rings { display: none; }   /* кольца рассчитаны на холст 1920 */
}

@media (max-width: 640px) {
  .res-cards  { grid-template-columns: minmax(0, 1fr); }
  .res-filter { grid-template-columns: minmax(0, 1fr); }
  .res-main   { padding-block: var(--space-64); }
  .res-hero__title { font-size: 32px; }
}