/* Главная страница: hero, быстрые ссылки, новости, направления, показатели. */

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate; color: #fff; overflow: hidden;
  /* уходит под полосу меню, как на макете */
  margin-top: calc(-1 * var(--navbar-h));
  min-height: clamp(420px, 30vw, 540px);
  background: var(--c-dark);
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 600ms var(--ease), visibility 600ms;
}
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__bg--fallback { background: var(--g-dark); }
.hero__overlay { position: absolute; inset: 0; background: var(--g-hero); }
.hero__overlay::after {
  /* диагональные световые полосы слева */
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 46px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%); mask-image: linear-gradient(90deg, #000, transparent 55%);
}

.hero__inner {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  min-height: inherit; padding-top: calc(var(--navbar-h) + var(--s-5)); padding-bottom: calc(var(--s-12) + var(--s-12) + var(--s-4));
}
.hero__content { max-width: 640px; }
.hero__eyebrow {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-m); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: rgba(255, 255, 255, 0.78); margin-bottom: var(--s-4);
}
.hero__title { font-size: var(--fs-hero); line-height: 1.04; font-weight: var(--fw-xb); text-wrap: balance; }
.hero__subtitle { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.35; color: rgba(255, 255, 255, 0.92); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }

.hero__arrows { display: inline-flex; gap: var(--s-2); margin-left: var(--s-4); align-items: center; }
.hero__arrow {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); background: rgba(40, 40, 40, 0.55); color: #fff; font-size: 18px;
  backdrop-filter: blur(4px); transition: background-color var(--t-fast);
}
.hero__arrow:hover { background: var(--c-primary); }
.hero__dots { display: flex; align-items: center; gap: 10px; margin-top: var(--s-5); min-height: 8px; }
.hero__dot {
  width: 8px; height: 8px; padding: 0; border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.5); transition: width var(--t-base) var(--ease), background-color var(--t-fast);
}
.hero__dot[aria-current="true"] { width: 44px; border-radius: 3px; height: 4px; background: #fff; }
.hero__pause { display: none; }

/* --- Быстрые ссылки ------------------------------------------------------- */

.quick { position: relative; z-index: 4; margin-top: calc(-1 * var(--s-12)); }
.quick__panel {
  background: #fff; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--s-3);
  box-shadow: var(--sh-strip);
}
.quick__grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; }
.quick-card {
  display: flex; align-items: center; gap: var(--s-2); height: 100%; min-height: 76px;
  padding: var(--s-3) var(--s-2) var(--s-3) var(--s-3); border-radius: var(--r-lg);
  background: var(--c-primary-50); border: 1px solid transparent;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.quick-card:hover { border-color: var(--c-primary-200); box-shadow: var(--sh-card); transform: translateY(-1px); }
.quick-card__icon { font-size: 34px; color: var(--c-primary); stroke-width: 1.5; }
.quick-card__text { min-width: 0; flex: 1; display: grid; gap: 2px; overflow-wrap: break-word; hyphens: manual; }
.quick-card__title { font-size: 0.8125rem; font-weight: var(--fw-b); line-height: 1.2; }
.quick-card__sub { font-size: 0.6875rem; color: var(--c-text-muted); line-height: 1.25; }
.quick-card .round-btn { width: 26px; height: 26px; font-size: 13px; }

/* --- Новости (полоса на главной) ----------------------------------------- */

.news-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none;
  border: 1px solid var(--c-border-soft); border-radius: var(--r-lg); background: #fff; overflow: hidden;
}
.news-item { display: flex; gap: var(--s-4); padding: var(--s-4); position: relative; }
.news-item + .news-item { border-left: 1px solid var(--c-border-soft); }
.news-item__media { flex: none; width: 36%; max-width: 150px; }
.news-item__media img, .news-item__placeholder { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); background: var(--c-surface); }
.news-item__body { display: flex; flex-direction: column; min-width: 0; flex: 1; padding-bottom: 6px; }
.news-item__date { font-size: 0.75rem; color: var(--c-text-muted); }
.news-item__title {
  margin-top: 2px; font-size: 0.9375rem; font-weight: var(--fw-b); line-height: 1.25; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-item__title a::after { content: ""; position: absolute; inset: 0; }
.news-item__excerpt {
  margin-top: var(--s-2); margin-right: 36px; font-size: 0.8125rem; line-height: 1.4; color: var(--c-text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-item .round-btn { position: absolute; right: var(--s-3); bottom: var(--s-3); width: 30px; height: 30px; }
.news-item:hover .round-btn { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* --- Направления ---------------------------------------------------------- */

.dir-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.dir-card {
  position: relative; display: flex; min-height: 132px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--c-border-soft); border-radius: var(--r-lg); background: #fff;
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.dir-card:hover { box-shadow: var(--sh-lift); border-color: var(--c-primary-200); transform: translateY(-2px); }
.dir-card__body {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); width: 55%;
}
.dir-card__icon { font-size: 34px; color: var(--c-primary); stroke-width: 1.5; }
.dir-card__title { font-size: 1rem; font-weight: var(--fw-b); line-height: 1.2; letter-spacing: 0; }
.dir-card__media {
  position: absolute; z-index: 1; inset: 0 0 0 auto; width: 66%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%);
}
.dir-card__media img { width: 100%; height: 100%; object-fit: cover; }
.dir-card .round-btn { position: absolute; z-index: 3; right: var(--s-3); bottom: var(--s-3); }

/* --- STEM в цифрах -------------------------------------------------------- */

.stats-band { display: flex; align-items: stretch; margin-top: var(--s-10); background: var(--c-primary-50); min-height: 96px; overflow: hidden; }
.stats-band__label {
  flex: none; display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-6) 0 max(var(--gutter), calc((100vw - var(--container)) / 2));
  background: linear-gradient(135deg, var(--c-dark-2), #8c0a14); color: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); padding-right: calc(var(--s-6) + 28px);
}
.stats-band__label h2 { font-size: 1.25rem; font-weight: var(--fw-sb); letter-spacing: 0; white-space: nowrap; }
.stats-band__label .round-btn { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.2); border: 0; color: #fff; font-size: 16px; }

.stats-band__list { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-around; gap: var(--s-4); padding: var(--s-3) var(--s-4); list-style: none; }
.stat { display: flex; align-items: center; gap: var(--s-2); padding-inline: var(--s-3); min-width: 0; flex: 1 1 0; }
.stat + .stat { border-left: 1px solid var(--c-primary-100); }
.stat__icon { flex: none; font-size: 40px; color: var(--c-primary); stroke-width: 1.5; }
.stat__value { font-size: 1.625rem; font-weight: var(--fw-xb); line-height: 1; color: var(--c-dark); font-variant-numeric: tabular-nums; }
.stat__label { font-size: 0.78125rem; line-height: 1.25; }
.stat--text .stat__label { font-weight: var(--fw-sb); color: var(--c-dark); }

.stats-band__quote {
  flex: none; display: flex; align-items: center; gap: var(--s-4); color: #fff;
  padding: 0 var(--s-6) 0 calc(var(--s-8) + 28px);
  background: linear-gradient(90deg, rgba(120, 3, 11, 0.85), rgba(176, 58, 66, 0.9));
  clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%);
  flex: 0 1 27%; min-width: 0;
}
.stats-band__quote .icon { font-size: 40px; opacity: 0.55; stroke-width: 1.5; }
.stats-band__quote p { font-size: 0.9375rem; line-height: 1.35; font-weight: var(--fw-m); }

/* --- Адаптив -------------------------------------------------------------- */

@media (max-width: 1279px) {
  .quick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band { flex-wrap: wrap; }
  .stats-band__label, .stats-band__quote { flex: 1 1 100%; clip-path: none; max-width: none; padding: var(--s-5) var(--gutter); }
  .stats-band__list { flex: 1 1 100%; flex-wrap: wrap; padding: var(--s-5) var(--gutter); }
}
@media (max-width: 1023px) {
  .news-strip { grid-template-columns: 1fr; }
  .news-item + .news-item { border-left: 0; border-top: 1px solid var(--c-border-soft); }
  .hero__arrows { display: inline-flex; gap: var(--s-2); margin-left: var(--s-4); align-items: center; }
@media (max-width: 767px) {
  .quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-grid { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; }
}