/* Главная: слайдер «Статьи для студентов» — последние статьи блога (HOME-BLOG-SLIDER, 2026-10-14).
   Разметка — engine/modules/studentix/home_blog.php, поведение — js/home-blog.js. Цвета и тени — tokens.css.
   Прокрутка ленты нативная (scroll-snap): свайп на телефоне работает без JS, JS добавляет стрелки, точки и клавиатуру. */

.stx-hb { --stx-hb-per: 3; --stx-hb-gap: 20px; position: relative; margin-bottom: 88px; }
.stx-hb .section-subtitle { /* как .stx-hx .section-subtitle (home.css) */
  font: 600 18px / 120% "Inter", sans-serif;
  letter-spacing: -0.02em;
  text-align: center;
  background: linear-gradient(90deg, #1650eb 0%, #4d84ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 25px 0 15px;
}
.stx-hb__lead {
  max-width: 720px;
  margin: -8px auto 32px;
  text-align: center;
  text-wrap: balance;
  font: 400 17px/1.5 "Inter", sans-serif;
  color: var(--stx-text-2, #566274);
}

.stx-hb__slider { position: relative; }
.stx-hb__viewport { position: relative; }
.stx-hb__track {
  list-style: none;
  margin: 0;
  padding: 4px 2px 12px; /* место под тень и кольцо фокуса */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--stx-hb-per) - 1) * var(--stx-hb-gap)) / var(--stx-hb-per));
  gap: var(--stx-hb-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stx-hb__track::-webkit-scrollbar { display: none; }
.stx-hb__slide { margin: 0; padding: 0; min-width: 0; display: flex; scroll-snap-align: start; }
/* на десктопе лента «щёлкает» группами по 3 */
@media (min-width: 901px) {
  .stx-hb__slide { scroll-snap-align: none; }
  .stx-hb__slide:nth-child(3n+1) { scroll-snap-align: start; }
  .stx-hb__slide:last-child:not(:nth-child(3n+1)) { scroll-snap-align: end; }
}

.stx-hb__card {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background: var(--stx-surface, #fff);
  border: 1px solid #dde2e6;
  border-radius: 20px;
  overflow: hidden;
  color: var(--stx-text, #1B2430) !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stx-hb__card:hover { transform: translateY(-2px); border-color: var(--stx-accent-line, rgba(47, 107, 255, .28)); box-shadow: 0 12px 32px rgba(22, 80, 235, .10); }
.stx-hb__card:focus-visible { outline: 2px solid var(--stx-accent, #2F6BFF); outline-offset: 2px; }
.stx-hb__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--stx-surface-2, #F8FAFF);
  border-bottom: 1px solid rgba(27, 36, 48, .08);
  overflow: hidden;
}
.stx-hb__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stx-hb__ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--stx-accent, #2F6BFF); background: linear-gradient(135deg, #E3EEFF, var(--stx-surface-2, #F8FAFF)); }
.stx-hb__ph .stx-i { width: 40px; height: 40px; opacity: .75; }
.stx-hb__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.stx-hb__date { font: 400 13px/1.3 "Inter", sans-serif; color: var(--stx-text-2, #566274); }
.stx-hb__title {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 19px/1.3 "Inter", sans-serif;
  letter-spacing: -0.01em;
  color: var(--stx-text, #1B2430);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.stx-hb__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 400 15px/1.5 "Inter", sans-serif;
  color: var(--stx-text-2, #566274);
}
.stx-hb__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font: 600 15px/1.2 "Inter", sans-serif;
  color: var(--stx-accent-text, #1F52D9);
}
.stx-hb__more .stx-i { width: 16px; height: 16px; transition: transform .2s ease; }
.stx-hb__card:hover .stx-hb__more .stx-i { transform: translateX(2px); }

/* стрелки и точки */
.stx-hb__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.stx-hb__nav[hidden] { display: none; }
.stx-hb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--stx-surface, #fff);
  border: 1px solid var(--stx-accent-line, rgba(47, 107, 255, .28));
  color: var(--stx-accent-text, #1F52D9);
  box-shadow: var(--stx-shadow-sm, 0 1px 2px rgba(20, 40, 80, .04), 0 4px 12px rgba(20, 40, 80, .06));
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.stx-hb__btn .stx-i { width: 20px; height: 20px; }
.stx-hb__btn--prev .stx-i { transform: scaleX(-1); }
.stx-hb__btn:hover:not(:disabled) { background: var(--stx-accent-soft, rgba(47, 107, 255, .10)); }
.stx-hb__btn:focus-visible { outline: 2px solid var(--stx-accent, #2F6BFF); outline-offset: 2px; }
.stx-hb__btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.stx-hb__dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; }
.stx-hb__dot {
  position: relative;
  width: 28px; /* зона нажатия 28×44, видимая точка 8 px */
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.stx-hb__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 999px;
  background: rgba(27, 36, 48, .22);
  transition: width .2s ease, margin .2s ease, background .2s ease;
}
.stx-hb__dot[aria-current="true"]::before { width: 22px; margin-left: -11px; background: var(--stx-accent, #2F6BFF); }
.stx-hb__dot:hover::before { background: rgba(47, 107, 255, .55); }
.stx-hb__dot[aria-current="true"]:hover::before { background: var(--stx-accent, #2F6BFF); }
.stx-hb__dot:focus-visible { outline: 2px solid var(--stx-accent, #2F6BFF); outline-offset: -2px; border-radius: 999px; }
.stx-hb__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.stx-hb__all { display: flex; justify-content: center; margin-top: 24px; }
.stx-hb__allbtn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--stx-surface, #fff);
  border: 1px solid var(--stx-accent-line, rgba(47, 107, 255, .28));
  color: var(--stx-accent-text, #1F52D9) !important;
  font: 600 16px/1 "Inter", sans-serif;
  text-decoration: none !important;
  transition: background .2s ease;
}
.stx-hb__allbtn .stx-i { width: 16px; height: 16px; }
.stx-hb__allbtn:hover { background: var(--stx-accent-soft, rgba(47, 107, 255, .10)); }
.stx-hb__allbtn:focus-visible { outline: 2px solid var(--stx-accent, #2F6BFF); outline-offset: 2px; }

@media (max-width: 900px) {
  .stx-hb { --stx-hb-per: 2; --stx-hb-gap: 16px; }
}
@media (max-width: 600px) {
  /* телефон: одна карточка на ширину и край следующей (≈1,15), лента от края до края экрана */
  .stx-hb { --stx-hb-gap: 12px; margin-bottom: 64px; }
  .stx-hb__lead { font-size: 15px; margin-bottom: 20px; }
  .stx-hb__viewport { margin: 0 -15px; }
  .stx-hb__track { grid-auto-columns: 86%; padding: 4px 15px 12px; scroll-padding-inline: 15px; }
  .stx-hb__body { padding: 16px 16px 18px; }
  .stx-hb__title { font-size: 18px; }
  .stx-hb__nav { gap: 12px; margin-top: 12px; }
  .stx-hb__allbtn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .stx-hb__card, .stx-hb__btn, .stx-hb__allbtn, .stx-hb__dot::before, .stx-hb__more .stx-i { transition: none; }
  .stx-hb__card:hover { transform: none; }
}