/* ============================================================
   Nordic Club UA — pages/index.css
   Блоки, що існують лише на головній сторінці. Підключається
   ОСТАННІМ, після animations.css. Використовує тільки токени та
   поверхневі змінні --c-*; жодних !important.

   Скрим поверх фотографій береться з токенів --scrim-* у
   tokens.css. Літеральних rgba() тут немає.
   ============================================================ */

/* ---- 1 · Hero ---- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 88vh;
  min-height: 88svh;
  overflow: hidden;
  padding-block-start: calc(var(--header-h) + clamp(36px, 6vh, 72px));
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

/* Навій скрим бренд-бука поверх фото — текст завжди тримає AA.
   Один спільний токен на hero головної та шапки решти сторінок. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-header);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(40px, 7vh, 88px) clamp(32px, 5vh, 64px);
}

.hero__eyebrow {
  margin-block-end: 28px;
}

.hero__title {
  max-width: 21ch;
}

.hero__lead {
  margin-block-start: 28px;
}

.hero__actions {
  margin-block-start: 44px;
}

.hero__horizon {
  position: relative;
  z-index: 1;
  margin-block-start: auto;
}

.hero__horizon svg {
  width: 100%;
  height: auto;
}

.hero__trust {
  position: relative;
  z-index: 1;
  padding-block: 22px 30px;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ---- 2 · KPI band ---- */

.kpi-band {
  border-block: 1px solid var(--c-line);
}

/* Перша колонка кожного ряду 4×2 не має лівого гейрлайна */
.kpi-band .stat:nth-child(4n + 1) {
  border-inline-start: 0;
}

/* Нечислове значення («січня 2025») — менший кегль у тому ж рядку */
.stat__num--text {
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
  line-height: 1.25;
  padding-block-start: 0.35em;
}

/* Без opacity: приглушення прозорістю опускало --ink-400 на
   --ink-900 до 4.26:1. Менший кегль + --c-muted (6.04:1) дають
   ту саму ієрархію, але з контрастом AA. */
.stat__note {
  margin-block-start: 6px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  max-width: 24ch;
}

/* ---- 3 · Impact (три напрями впливу) ---- */

.impact-area {
  padding-block-start: 26px;
  border-block-start: 1px solid var(--c-line);
}

.impact-area__icon {
  width: 44px;
  height: 44px;
  color: var(--c-accent-text);
  margin-block-end: 20px;
}

.impact-area__icon svg {
  width: 100%;
  height: 100%;
}

.impact-area p {
  margin-block-start: 12px;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  max-width: 44ch;
}

/* Широка фотосмуга під колонками */
.photo-band {
  margin-block-start: clamp(48px, 7vw, 84px);
  aspect-ratio: 2.5 / 1;
}

@media (max-width: 700px) {
  .photo-band {
    aspect-ratio: 4 / 3;
  }
}

/* Лежить у .media__body, тому --c-muted там уже перевизначений на
   --paper-200 (світлий поверх скриму), а не на сірий --ink-400. */
.photo-band__note {
  margin-block-start: 6px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ---- 5 · Events: чесний порожній стан без JS ---- */

.empty-note {
  grid-column: 1 / -1;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  text-align: center;
}

.empty-note p {
  margin-inline: auto;
  max-width: 52ch;
  color: var(--c-muted);
}

.empty-note .btn-row {
  margin-block-start: 24px;
  justify-content: center;
}

/* ---- 7 · Membership preview ---- */

.tier-group + .tier-group {
  margin-block-start: clamp(48px, 7vw, 84px);
}

.tier-group__head {
  margin-block-end: 28px;
}

.tier-group__head p {
  margin-block-start: 8px;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  max-width: 56ch;
}

.card--tier .card__price {
  margin-block-start: 6px;
}

.card--tier.is-featured {
  border-color: var(--c-accent-text);
}

/* ---- 8 · Аудиторії: бізнес / державний сектор ---- */

.audience {
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100%;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--c-line);
}

.audience > p {
  color: var(--c-muted);
  max-width: 58ch;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audience__cta {
  margin-block-start: auto;
  padding-block-start: 6px;
}

/* ---- 9 · Testimonials ---- */

.t-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.t-quote .quote__author {
  margin-block-start: 0;
}

.t-list {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}

.photo-portrait {
  height: 100%;
  min-height: 320px;
}

/* ---- 10 · Partners: типографічні слоти замість логотипів ---- */

/* Без opacity (0.75 давало 3.80:1) і без nowrap: «Ukraine–Nordics
   Bridge Partner» у 15px з трекінгом 0.14em ширший за контент-бокс
   на 360px, а один nowrap-елемент переповнює навіть flex-wrap
   контейнер — звідси горизонтальний скрол на всій сторінці. */
.logo-slot {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-muted);
}

.logo-note {
  margin-block-start: 32px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* ---- 11 · Final CTA + спільні дрібниці сторінки ---- */

/* Підвал секції: ряд посилань/кнопок після сітки */
.section__foot {
  margin-block-start: clamp(36px, 5vw, 64px);
}

.btn-row--center {
  justify-content: center;
}

/* Тихіший колір мотиву горизонту (наприклад, у фінальному CTA) */
.horizon-muted {
  color: var(--c-line);
}

.final-cta .divider-horizon {
  margin-block-end: clamp(40px, 6vw, 72px);
}

.final-cta .lead {
  margin-inline: auto;
}

.final-cta .btn-row {
  margin-block-start: 40px;
}