/* ==========================================================================
   КУЛЬТУРНЫЙ ЦЕНТР — КОМПОНЕНТЫ
   --------------------------------------------------------------------------
   Собрано по компонентам из Figma: Button, Icon button, Tab, Input, Badge,
   Card / News, Card / Event, Card / Space, Card / Project, Section header,
   Breadcrumbs, Document row.
   Ни одного цвета и отступа числом — только переменные из tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------- кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--size-control-lg);
  padding-inline: var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--md { height: var(--size-control-md); padding-inline: var(--space-6); font-size: 14px; line-height: 20px; }
.btn--sm { height: var(--size-control-sm); padding-inline: var(--space-5); font-size: 14px; line-height: 20px; }
.btn--block { display: flex; width: 100%; }

/* Основная — заливка брендом */
.btn--primary { background: var(--bg-brand); color: var(--text-on-brand); }
.btn--primary:hover { background: var(--bg-brand-hover); }
.btn--primary:active { background: var(--bg-brand-pressed); }

/* Второстепенная — контур */
.btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--bg-muted); border-color: var(--border-strong); }

/* Призрачная — без рамки */
.btn--ghost { background: transparent; color: var(--text-primary); }
.btn--ghost:hover { background: var(--bg-muted); }

/* Неактивная — из макета, состояние Disabled */
.btn:disabled,
.btn--disabled {
  background: var(--bg-disabled);
  color: var(--text-disabled);
  border-color: var(--border-disabled);
  pointer-events: none;
}

/* Кнопка-иконка: круг 44×44, наведение — светлый круг (Icon button) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--text-primary);
  transition: background-color .15s ease;
}
.icon-btn:hover { background: var(--bg-muted); }
.icon-btn:active { background: var(--bg-neutral-hover); }
.icon-btn svg { width: var(--size-icon-md); height: var(--size-icon-md); }

/* ---------------------------------------------------------------- табы */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tab {
  display: inline-flex;
  align-items: center;
  height: var(--size-control-sm);
  padding-inline: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-primary);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tab:hover { background: var(--bg-muted); }
.tab--active,
.tab--active:hover {
  background: var(--bg-brand);
  border-color: var(--bg-brand);
  color: var(--text-on-brand);
  font-weight: 600;
}

/* ---------------------------------------------------------------- метки */

.badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--bg-brand-subtle);
  color: var(--text-brand);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}
.badge--neutral { background: var(--bg-muted); color: var(--text-secondary); }
.badge--accent  { background: var(--bg-accent-subtle); color: var(--text-accent); }

/* -------------------------------------------------------------- карточки */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
a.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* Обложка: фиксированная пропорция и обрезка — иначе ряд разъедется */
.card__media {
  position: relative;
  aspect-ratio: 382 / 208;
  background: var(--bg-muted);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.card__title { font-size: 20px; line-height: 28px; font-weight: 600; }
.card__text  { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.card__meta  { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
               font-size: 14px; line-height: 20px; color: var(--text-muted); }

/* Пропорции обложек по типам карточек — из макета */
.card--event   .card__media { aspect-ratio: 382 / 208; }
.card--space   .card__media { aspect-ratio: 382 / 220; }
.card--project .card__media { aspect-ratio: 382 / 200; }

/* Дата в две строки: число и месяц. Заполняется из данных, вид — здесь */
.kc-date { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; }
.kc-date__d { font-size: 1.5em; font-weight: 600; }
.kc-date__m { font-size: .8em; text-transform: lowercase; }

/* Компактная карточка события — строка списка */
.event-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-default);
}
.event-row__title { font-size: 18px; line-height: 26px; font-weight: 600; }
.event-row__meta  { font-size: 14px; line-height: 20px; color: var(--text-muted); }

/* Строка документа */
.doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-default);
}
.doc-row__meta { font-size: 14px; line-height: 20px; color: var(--text-muted); white-space: nowrap; }

/* --------------------------------------------------------- поля формы */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-secondary); }
.field__hint  { font-size: 13px; line-height: 16px; color: var(--text-muted); }

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--size-control-md);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { min-height: 120px; resize: vertical; }

.input::placeholder,
.textarea::placeholder { color: var(--text-muted); }

.input:hover,
.textarea:hover { border-color: var(--border-strong); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

/* Состояния из компонента Input */
.field--error .input,
.field--error .textarea { border-color: var(--state-error); }
.field--error .field__hint { color: var(--state-error); }
.field--success .input,
.field--success .textarea { border-color: var(--state-success); }
.input:disabled,
.textarea:disabled {
  background: var(--bg-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Согласие на обработку ПД */
.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bg-brand); flex: none; }
.checkbox span { font-size: 14px; line-height: 20px; color: var(--text-secondary); }

/* ------------------------------------------------------ заголовок секции */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.section-head__title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; }
.section-head__link  { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-brand); }
.section-head__link:hover { color: var(--text-brand-hover); }

/* --------------------------------------------------------------- крошки */

.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2);
               font-size: 14px; line-height: 20px; color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--text-primary); }
.breadcrumbs__sep { color: var(--text-disabled); }

/* -------------------------------------------------------------- догрузка */
/* Кнопка «Загрузить ещё» — родная для NetCat, стилизуем только вид */
.load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}