/* ============================================================
   Nordic Club UA — pages/projects.css
   Блоки, що існують лише на projects.html. Підключається ОСТАННІМ,
   після animations.css. Тільки токени та --c-*; жодних !important;
   інлайн-стилі лише для SVG-індексів --i. Початкові «сховані»
   стани анімацій привʼязані до html.js, тому без JS графіка
   показується у фінальному стані. Скрим шапки — --scrim-header.
   СПІЛЬНІ УТИЛІТИ (.section__foot, .btn-row--center, .horizon-muted,
   .final-cta, .empty-note, .logo-slot, .logo-note, .photo-band,
   .tier-group) продубльовані з pages/index.css один в один: на
   сторінку підключається лише один pages/*.css, тому спільного
   місця для них немає. Правите там — правте і тут.
   ============================================================ */

/* ============================================================
   Спільні дрібниці сторінки (ті самі, що на головній —
   pages/index.css їх не експортує, бо не підключається тут)
   ============================================================ */

/* Підвал секції: ряд посилань/кнопок після сітки */
.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;
}


/* Маленький підпис-мітка над списком у картці або в блоці проєкту */
.mini-label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-muted);
}

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

/* Рядок «для кого» під міткою — у блоці проєкту і в напрямі */
.for-whom {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Уточнення під підписом на фотографії (усередині .media__body).
   .media__body сам перевизначає --c-muted на --paper-200, бо на
   скримі сірий --ink-400 давав лише 1.22–3.5:1. */
.media-note {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Підвал картки на цій сторінці містить мітку + текст «для кого» */
.card .card__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Списки ---- */

/* Пункти користі: золотий ромб (мотив вишиванки) замість маркера */
.tick-list {
  display: grid;
  gap: 12px;
}

.tick-list li {
  position: relative;
  padding-inline-start: 22px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.tick-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--c-accent-text);
  transform: rotate(45deg);
}

/* Кроки «як це працює»: нумерація 01, 02, 03 у стилі eyebrow */
.step-list {
  counter-reset: step;
  display: grid;
  gap: 18px;
}

.step-list li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 46px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 30px;
  padding-block-start: 0.15em;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-text);
}

/* ============================================================
   1 · Шапка сторінки (замість hero: хедер тут суцільний)
   ============================================================ */

.page-header {
  position: relative;
  overflow: hidden;
  /* Свідомо перекриває .u-header-offset: під фіксованим хедером
     потрібно більше повітря, ніж дає базові 24px. */
  padding-block-start: calc(var(--header-h) + clamp(48px, 8vh, 104px));
}

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

.page-header__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}

/* Навій скрим бренд-бука поверх фото — один спільний токен */
.page-header__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-header);
}

.page-header__inner {
  position: relative;
  z-index: 1;
}

.page-header .eyebrow {
  margin-block-end: 28px;
}

.page-header h1 {
  max-width: 24ch;
}

.page-header__lead {
  margin-block-start: 28px;
  max-width: 62ch;
}

.page-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 4vw, 48px);
  margin-block-start: clamp(40px, 6vh, 72px);
  padding-block-start: 22px;
  border-block-start: 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 · Пріоритети 2026–2027 — стратегічна смуга
   ============================================================ */

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

.priority__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.125rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-text);
}

.priority h3 {
  font-size: var(--fs-h4);
}

.priority__text {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.priority__link {
  margin-block-start: auto;
  padding-block-start: 10px;
}

.priority__note {
  margin-block-start: auto;
  padding-block-start: 10px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ============================================================
   3 · Великий блок проєкту (Random Roulette, менторська програма)
   ============================================================ */

.project-lead {
  padding-block-start: clamp(32px, 4vw, 48px);
  border-block-start: 1px solid var(--c-line);
}

.project-lead + .project-lead {
  margin-block-start: clamp(56px, 8vw, 104px);
}

.project-lead__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-end: clamp(32px, 5vw, 56px);
}

/* Між h3 і h2: блок проєкту — це майже окрема сторінка, але він
   мусить лишатися нижчим за заголовок секції */
.project-lead__title,
.direction__title {
  font-size: clamp(1.6rem, 2.6vw, 2.375rem);
  font-weight: 300;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.project-lead__head .lead {
  max-width: 72ch;
}

.project-lead__body {
  row-gap: clamp(32px, 5vw, 56px);
}

.project-lead__body > div,
.project-lead__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.project-lead__photo {
  aspect-ratio: 4 / 3;
}

/* Підблок «Далі 2026» всередині секції */
.subsection {
  margin-block-start: clamp(64px, 9vw, 120px);
}

.subsection__head {
  margin-block-end: clamp(28px, 4vw, 40px);
  padding-block-start: 24px;
  border-block-start: 1px solid var(--c-line);
}

.subsection__head p {
  margin-block-start: 10px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  max-width: 62ch;
}

/* ============================================================
   4 · Діаграма Random Roulette — «дві лінії, один горизонт»
   Дві точки сходяться на спільному горизонті. Анімація йде один
   раз, коли фігура потрапляє у вʼюпорт (reveal.js додає .is-in).
   Початкові стани прив'язані до html.js → без JS та за
   prefers-reduced-motion видно фінальний, зібраний стан.
   ============================================================ */

.rr-figure {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-card-bg);
}

.rr-diagram svg {
  width: 100%;
  height: auto;
}

.rr-caption {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* Кольори: коріння і точка зустрічі — акцент; дім — приглушений */
.rr-base,
.rr-path {
  stroke: var(--c-line);
  fill: none;
}

.rr-motif {
  fill: none;
}

.rr-motif--roots path,
.rr-meet path {
  stroke: var(--c-accent-text);
  stroke-width: 1.25;
  fill: none;
}

.rr-motif--home path {
  stroke: var(--c-muted);
  stroke-width: 1.25;
  fill: none;
}

.rr-motif--roots {
  opacity: 0.85;
}

.rr-motif--home {
  opacity: 0.7;
}

.rr-dot {
  stroke: none;
}

.rr-dot--a {
  fill: var(--c-accent-text);
}

.rr-dot--b {
  fill: var(--c-muted);
}

/* Початковий стан — лише коли є JS */
.js .rr-figure .rr-path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}

.js .rr-figure .rr-meet path {
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
}

.js .rr-figure .rr-dot--a {
  transform: translateX(-142px);
}

.js .rr-figure .rr-dot--b {
  transform: translateX(142px);
}

/* Хореографія: траєкторії малюються → точки сходяться →
   ромб зустрічі проявляється. Один прогін, без циклів. */
.rr-figure.is-in .rr-path {
  animation: rr-draw 900ms var(--ease-enter) both;
}

/* Права траєкторія входить із невеликим запізненням, щоб лінії не
   малювалися синхронно (симетрія читається як механічність) */
.rr-figure.is-in .rr-path--a {
  animation-delay: 0ms;
}

.rr-figure.is-in .rr-path--b {
  animation-delay: 120ms;
}

.rr-figure.is-in .rr-dot--a,
.rr-figure.is-in .rr-dot--b {
  animation: rr-approach 1200ms var(--ease-enter) 520ms both;
}

.rr-figure.is-in .rr-meet path {
  animation: rr-meet 520ms var(--ease-enter) 1620ms both;
}

@keyframes rr-draw {
  from {
    stroke-dashoffset: 260;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rr-approach {
  to {
    transform: none;
  }
}

@keyframes rr-meet {
  from {
    stroke-dashoffset: 72;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   5 · Напрям (Ukraine–Nordics)
   ============================================================ */

.direction {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--c-line);
}

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

/* ============================================================
   6 · Як долучитися до програми
   ============================================================ */

.access-card {
  height: 100%;
}

.access-card .card__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding-block-start: 18px;
}

/* ============================================================
   7 · Проєкти, які шукають партнерів
   ============================================================ */

.partner-need {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--c-line);
}

.partner-need h3 {
  font-size: var(--fs-h4);
}

.partner-need p {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.partner-need__link {
  margin-block-start: auto;
  padding-block-start: 8px;
}

/* ============================================================
   Зменшені екрани
   ============================================================ */

@media (max-width: 700px) {
  .project-lead__photo {
    aspect-ratio: 3 / 2;
  }

  .direction__photo {
    min-height: 240px;
  }
}

/* ============================================================
   Reduced motion — показуємо фінальний стан діаграми одразу.
   Мусить лишатися ОСТАННІМ у файлі.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .js .rr-figure .rr-path,
  .js .rr-figure .rr-meet path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .js .rr-figure .rr-dot--a,
  .js .rr-figure .rr-dot--b {
    transform: none;
  }

  .rr-figure.is-in .rr-path,
  .rr-figure.is-in .rr-dot--a,
  .rr-figure.is-in .rr-dot--b,
  .rr-figure.is-in .rr-meet path {
    animation: none;
  }
}