/* ============================================================
   Nordic Club UA — components.css
   Buttons, cards, chips, stats, accordion, tabs, filters,
   tables, forms, quotes, media, reveal. Load after layout.css.
   All colours come from the --c-* surface context (base.css /
   layout.css), so components flip automatically on dark.
   ============================================================ */

/* ---- Icon sizing ---- */

.icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.icon--sm {
  width: 20px;
  height: 20px;
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease-ui),
    border-color var(--t-fast) var(--ease-ui),
    color var(--t-fast) var(--ease-ui),
    transform var(--t-fast) var(--ease-ui);
}

.btn:active {
  transform: translateY(0);
}

/* Primary — gold on navy text */
.btn--primary {
  background: var(--gold-500);
  color: var(--ink-900);
}

.btn--primary:hover {
  background: var(--gold-400);
  transform: translateY(-1px);
}

/* Ghost — hairline, fills on hover */
.btn--ghost {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-text);
}

.btn--ghost:hover {
  border-color: var(--c-text);
  background: var(--c-hover-fill);
}

/* Quiet — text + arrow */
.btn--quiet {
  min-height: 0;
  padding: 4px 0;
  border: 0;
  gap: 8px;
  color: var(--c-text);
  font-weight: 500;
}

.btn--quiet .icon,
.btn--quiet svg {
  width: 20px;
  height: 20px;
  color: var(--c-accent-text);
  transition: transform var(--t-fast) var(--ease-ui);
}

.btn--quiet:hover .icon,
.btn--quiet:hover svg {
  transform: translateX(4px);
}

.btn--sm {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 0.875rem;
}

/* «Додати в календар». Живе ТУТ, а не в pages/events.css: events.js
   рендерить цю кнопку й на головній, де того файлу немає. */
.btn-ics svg {
  color: var(--c-accent-text);
}

.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Row of CTAs (hero, section foot, final CTA). Use this instead of
   inline styles whenever two or more buttons sit side by side. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.btn-row--tight {
  gap: 12px;
}

/* ---- Cards ---- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--c-card-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition:
    border-color var(--t) var(--ease-ui),
    transform var(--t) var(--ease-ui),
    box-shadow var(--t) var(--ease-ui);
}

/* Tension-fan reveal on hover — currentColor through an SVG mask */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  -webkit-mask: url("../brand/tension-fan.svg") no-repeat right bottom / 72% auto;
  mask: url("../brand/tension-fan.svg") no-repeat right bottom / 72% auto;
  transition: opacity var(--t) var(--ease-ui);
}

.card:hover {
  border-color: var(--gold-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.card:hover::after,
.card:focus-within::after {
  opacity: 0.10;
}

.card--dark {
  background: var(--ink-700);
  border-color: var(--ink-600);
  color: var(--paper);
  --c-text: var(--paper);
  --c-muted: var(--ink-400);
  --c-line: var(--ink-500);
  --c-accent-text: var(--gold-500);
  --c-focus: var(--gold-500);
}

.card--dark:hover {
  border-color: var(--gold-500);
  box-shadow: none;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-muted);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-sub);
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.card__title a {
  text-decoration: none;
}

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

.card__icon {
  color: var(--c-accent-text);
}

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

/* Event card — date block */
.card--event .card__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card__date-day {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.card__date-month {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-accent-text);
}

/* Tier card — pricing */
.card--tier .card__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.card--tier .card__per {
  font-size: 0.875rem;
  color: var(--c-muted);
}

.card--tier .card__benefits {
  display: grid;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Project card — status chip sits in .card__meta */
.card--project .card__status {
  align-self: flex-start;
}

/* ---- Chips ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  white-space: nowrap;
}

.chip--gold {
  color: var(--c-accent-text);
  border-color: var(--c-accent-text);
  background: var(--gold-glow);
}

/* ---- Badge — small marker label with a rhombus tick ---- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-accent-text);
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}

/* ---- Stats & KPI band ---- */

.stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.stat__num sup {
  font-size: 0.45em;
  vertical-align: super;
  color: var(--c-accent-text);
}

.stat__label {
  margin-block-start: 10px;
  font-size: 0.875rem;
  color: var(--c-muted);
  max-width: 22ch;
}

/* 4-up desktop / 2-up tablet / 2-up mobile, hairline dividers */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat-band .stat {
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px);
  border-inline-start: 1px solid var(--c-line);
}

.stat-band .stat:first-child {
  border-inline-start: 0;
}

@media (max-width: 900px) {
  .stat-band {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 12px;
  }

  .stat-band .stat {
    border-inline-start: 0;
  }

  .stat-band .stat:nth-child(even) {
    border-inline-start: 1px solid var(--c-line);
  }
}

/* ---- Accordion ---- */

.accordion {
  border-top: 1px solid var(--c-line);
}

.accordion__item {
  border-bottom: 1px solid var(--c-line);
}

.accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--c-text);
  transition: color var(--t-fast) var(--ease-ui);
}

.accordion__btn:hover {
  color: var(--c-accent-text);
}

.accordion__btn .icon,
.accordion__btn svg {
  color: var(--c-muted);
  transition: transform var(--t) var(--ease-ui);
}

.accordion__btn[aria-expanded="true"] .icon,
.accordion__btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--ease-ui);
}

.accordion__panel > * {
  overflow: hidden;
  min-height: 0;
}

.accordion__btn[aria-expanded="true"] + .accordion__panel,
.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__body {
  padding: 0 4px 24px;
  color: var(--c-muted);
  max-width: var(--measure);
}

/* ---- Tabs ---- */

.tabs__list {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
}

.tab {
  padding: 12px 6px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color var(--t-fast) var(--ease-ui),
    border-color var(--t-fast) var(--ease-ui);
}

.tab:hover {
  color: var(--c-text);
}

/* .tabs__list — scroll-контейнер, а overflow обрізає обидві осі,
   тому рамка малюється ВСЕРЕДИНІ бокса (offset -2px). */
.tab:focus-visible {
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* Підкреслення активної вкладки — індикатор стану, тому колір із
   контексту поверхні, а не невидимий на білому gold-500. */
.tab[aria-selected="true"],
.tab.is-active {
  color: var(--c-text);
  border-bottom-color: var(--c-accent-text);
}

.tabs__panel[hidden] {
  display: none;
}

/* ---- Filter bar (events) — buttons with aria-pressed ---- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.filter {
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-muted);
  background: transparent;
  transition:
    color var(--t-fast) var(--ease-ui),
    background-color var(--t-fast) var(--ease-ui),
    border-color var(--t-fast) var(--ease-ui);
}

.filter:hover {
  color: var(--c-text);
  border-color: var(--c-muted);
}

.filter[aria-pressed="true"] {
  background: var(--c-solid);
  color: var(--c-solid-text);
  border-color: var(--c-solid);
}

/* ---- Comparison table ---- */

/* Усередині лише текст, тому в розмітці контейнер має tabindex="0"
   + role="region" + aria-labelledby (WCAG 2.1.1). Рамка — всередині,
   бо зовнішню обрізав би власний overflow. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
}

.table-scroll:focus-visible {
  outline-offset: -2px;
}

.table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}

.table th,
.table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}

.table tbody th {
  font-weight: 500;
  color: var(--c-text);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

.table .is-highlight {
  background: var(--gold-glow);
}

/* ---- Forms ---- */

.form-field {
  display: grid;
  gap: 8px;
}

.form-field + .form-field {
  margin-block-start: 18px;
}

.form-field > label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--c-field-bg);
  color: var(--c-text);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease-ui);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--c-muted);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--c-muted);
  opacity: 0.7;
}

.textarea {
  min-height: 140px;
  resize: vertical;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.checkbox input {
  width: 18px;
  height: 18px;
  margin-block-start: 3px;
  flex: none;
  /* Індикатор стану: --gold-600 давав 2.2:1 до білого поля. */
  accent-color: var(--c-accent-text);
}

.form-note {
  font-size: 0.875rem;
  color: var(--c-muted);
}

/* Палітра закрита (червоного токена немає): помилка = акцентна
   лінійка + насиченість + ЗАВЖДИ текст. Колір із контексту. */
.form-error {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text);
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--c-accent-text);
}

/* Два сигнали, а не лише колір: акцентна рамка ≥3:1 (WCAG 1.4.11)
   плюс подвоєна товщина через inset box-shadow (не зсуває
   розкладку). Третій — текст .form-error через aria-describedby. */
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
  border-color: var(--c-accent-text);
  box-shadow: inset 0 0 0 1px var(--c-accent-text);
}

.form-success {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--c-accent-text);
  border-radius: var(--r);
  background: var(--gold-glow);
  color: var(--c-text);
}

/* ---- Logo strip (partners) ---- */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
}

.logo-strip img,
.logo-strip svg {
  height: 30px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--t-fast) var(--ease-ui), filter var(--t-fast) var(--ease-ui);
}

.logo-strip a:hover img,
.logo-strip a:hover svg {
  opacity: 0.9;
  filter: grayscale(0);
}

/* ---- Quote (testimonial) ---- */

.quote {
  position: relative;
  padding-inline-start: clamp(24px, 4vw, 40px);
  border-inline-start: 2px solid var(--gold-500);
}

.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.quote__author {
  margin-block-start: 20px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
}

.quote__role {
  font-size: 0.875rem;
  color: var(--c-muted);
}

/* ---- Horizon divider — thin motif line in currentColor ---- */

.divider-horizon {
  height: clamp(40px, 6vw, 64px);
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: url("../brand/horizon-simple.svg") no-repeat center / contain;
  mask: url("../brand/horizon-simple.svg") no-repeat center / contain;
}

/* Standalone divider inside a section (not the footer): needs its
   own breathing room above the following content. */
.divider-horizon--spaced {
  margin-block-start: clamp(48px, 7vw, 88px);
}

@supports not (mask: url("")) {
  .divider-horizon {
    height: 0;
    border-top: 1px solid var(--c-line);
    -webkit-mask: none;
    mask: none;
    background: none;
  }
}

/* ---- Media — image with navy scrim (AA text overlay) ---- */

.media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-media);
}

/* --plain — послаблений скрим ЛИШЕ для фото БЕЗ тексту (.55 дає
   білому лише 3.9:1 на світлій ділянці кадру). Зʼявився .media__body
   — повертаємо повний скрим. Страховка: у розмітці такі фігури й так
   позначені класом .media, а не .media--plain. */
.media--plain::after {
  background: var(--scrim-media-soft);
}

.media--plain:has(.media__body)::after {
  background: var(--scrim-media);
}

/* Текст поверх фото — завжди світлий: скрим існує, щоб білий
   проходив AA, а не щоб сірий став читабельним. */
.media__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(20px, 3vw, 32px);
  color: var(--paper);
  --c-text: var(--paper);
  --c-muted: var(--paper-200);
  --c-accent-text: var(--gold-500);
  --c-focus: var(--gold-500);
}

/* ---- Breadcrumb ---- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--c-muted);
}

.breadcrumb li {
  display: flex;
  gap: 6px;
  align-items: center;
}

.breadcrumb li + li::before {
  content: "/";
  opacity: 0.5;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb [aria-current="page"] {
  color: var(--c-text);
}

/* ---- Scroll reveal ----
   Scoped to html.js so content never hides without JavaScript.
   Stagger: set style="--i:0/1/2…" on siblings. reveal.js adds
   .is-in via IntersectionObserver (threshold .15, once). */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-slow) var(--ease-enter),
    transform var(--t-slow) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Reduced motion — kill transforms and animations, keep short
   opacity fades only. Must stay LAST in this file.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .btn--primary:hover,
  .btn--quiet:hover .icon,
  .btn--quiet:hover svg,
  .card,
  .card:hover,
  .card::after,
  .accordion__btn svg,
  .accordion__btn .icon,
  .accordion__panel,
  .nav-overlay,
  .nav-overlay__link,
  .nav-overlay.is-open .nav-overlay__link,
  .site-header,
  .site-header__link::after,
  .logo-strip img,
  .logo-strip svg {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }

  .btn--primary:hover,
  .btn:active,
  .card:hover,
  .btn--quiet:hover .icon,
  .btn--quiet:hover svg {
    transform: none;
  }

  .nav-overlay__link {
    opacity: 1;
    transform: none;
  }
}