/* =========================================================
   LOUNATA - внутренние страницы: Каталог (разделы 1-10), Лицензии (11-17), Трек (18-21)
   Подключается после style.css: шапка, подвал, кнопки и цвета
   берутся оттуда и из tokens.css / components.css.
   Точки перестройки: 768px (планшет) и 1100px (ПК).
   ========================================================= */

/* ========== 1. Общее ========== */
/* Текст только для экранных дикторов (подписи полей, которые не видны глазу) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Заметная рамка фокуса при работе с клавиатуры */
.catalog :focus-visible,
.page-cta :focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

/* Маленькая кнопка (в строках треков) */
.btn--sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 10px;
  letter-spacing: 0.14em;
}


/* ========== 2. Заголовок страницы ========== */
/* Невысокий блок с фото: не на весь экран, чтобы каталог был виден сразу */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  padding: 120px var(--gap) 40px;
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; }
/* То же фото, что на главной (assets/img/hero.webp). Лицо - справа и в верхней части кадра:
   по горизонтали держим его в кадре на узких экранах, по вертикали почти не обрезаем верх */
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 10%;
}
/* Затемнение: сверху под шапку, слева под текст, снизу переход в фон каталога */
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 13, 23, 0.6) 0%, rgba(5, 13, 23, 0) 30%),
    var(--overlay-left),
    linear-gradient(0deg, var(--color-bg) 0%, rgba(5, 13, 23, 0) 45%);
}
@media (max-width: 767px) {
  /* На телефоне текст стоит поверх фото - затемняем низ сильнее */
  .page-hero__bg::after {
    background:
      linear-gradient(180deg, rgba(5, 13, 23, 0.6) 0%, rgba(5, 13, 23, 0) 30%),
      linear-gradient(0deg, var(--color-bg) 0%, rgba(5, 13, 23, 0.75) 55%, rgba(5, 13, 23, 0.2) 100%);
  }
}
.page-hero__content {
  position: relative;
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}
.page-hero__title { color: var(--color-text); }
.page-hero__text {
  max-width: 460px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-text);
  opacity: 0.85;
}


/* ========== 3. Каталог: фон и контейнер ========== */
.catalog {
  padding: 24px var(--gap) var(--section-pad);
  /* Сверху и снизу - плавные переходы к соседним блокам, без резкой границы */
  background:
    linear-gradient(180deg, var(--color-bg) 0, rgba(5, 13, 23, 0) 320px),
    linear-gradient(0deg, var(--color-bg-2) 0, rgba(7, 17, 28, 0) 140px),
    var(--color-bg) url("../assets/img/catalog-bg.webp") center bottom / cover no-repeat;
}
.catalog__inner { max-width: var(--container); margin: 0 auto; }


/* ========== 3.1 Картинки направлений над поиском ========== */
/* Телефон и планшет: лента с прокруткой вбок; ПК: все карточки в один ряд */
.catalog-cats { margin: 0 calc(var(--gap) * -1) 24px; }
.catalog-cats__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 10px;
  margin: 0;
  padding: 4px var(--gap) 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.catalog-cats__list::-webkit-scrollbar { display: none; }
.catalog-cats__list > li { scroll-snap-align: start; }

.cat-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.cat-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter var(--duration) var(--ease);
}
/* Затемнение снизу под подписью */
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-bottom);
  pointer-events: none;
}
.cat-card__title {
  position: absolute;
  inset: auto 6px 10px;
  z-index: 1;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}
.cat-card:hover { border-color: rgba(210, 168, 102, 0.6); }
.cat-card:hover .cat-card__image { transform: scale(1.05); }
/* Выбранное направление: золотая рамка, остальные чуть приглушены */
.catalog-cats__list:has([aria-pressed="true"]) .cat-card[aria-pressed="false"] .cat-card__image { filter: brightness(0.6) saturate(0.7); }
.cat-card[aria-pressed="true"] {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 1px var(--color-gold), 0 10px 26px rgba(0, 0, 0, 0.35);
}
.cat-card[aria-pressed="true"] .cat-card__title { color: var(--color-gold-light); }

@media (min-width: 1100px) {
  .catalog-cats { margin: 0 0 28px; }
  .catalog-cats__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-auto-columns: auto;
    gap: 14px;
    padding: 4px 0 8px;
    overflow: visible;
  }
  .cat-card__title { font-size: 11px; }
}


/* ========== 4. Верхняя панель: поиск, кнопка фильтров, сортировка ========== */
/* Телефон: поиск на всю ширину, ниже кнопка "Фильтры" и сортировка */
.catalog-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "search search"
    "toggle sort";
  gap: 12px;
}
.catalog-search { grid-area: search; position: relative; }
.filters-toggle { grid-area: toggle; }
.catalog-sort { grid-area: sort; }

/* Общий вид полей: тёмная "капсула" с тонкой рамкой */
.catalog-search__input,
.field-select,
.filters-toggle {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(236, 227, 211, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(12, 23, 36, 0.72);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 13px;
  transition: border-color var(--duration) var(--ease);
}
.catalog-search__input:hover, .field-select:hover, .filters-toggle:hover { border-color: rgba(210, 168, 102, 0.5); }
.catalog-search__input:focus, .field-select:focus { border-color: var(--color-gold); outline: none; }

.catalog-search__input { padding: 0 20px 0 48px; }
.catalog-search__input::placeholder { color: var(--color-text-muted); }
.catalog-search .icon {
  position: absolute;
  top: 15px;
  left: 18px;
  color: var(--color-gold);
  pointer-events: none;
}

/* Кнопка "Фильтры (N)": открывает и закрывает панель фильтров */
.filters-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.filters-toggle .icon { color: var(--color-gold); }
.filters-toggle[aria-expanded="true"] { border-color: var(--color-gold); }
.filters-toggle__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: #1a130a;
  font-size: 11px;
  letter-spacing: 0;
}

/* Сортировка: свой вид вместо стандартного списка браузера, стрелка - через ::after */
.catalog-sort { position: relative; }
.catalog-sort__label {
  position: absolute;   /* на телефоне подпись скрыта, но читается диктором */
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.field-select {
  padding: 0 40px 0 18px;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}
.field-select option { background: var(--color-surface); color: var(--color-text); }
.catalog-sort::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 16px;
  height: 16px;
  background: var(--color-gold);
  -webkit-mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
  pointer-events: none;
}


/* ========== 5. Фильтры ========== */
/* Сброс стандартного вида группы полей */
.filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-group__title {
  margin-bottom: 12px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.filter-group__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Чип: кнопка-переключатель. Включённый - с золотой рамкой (aria-pressed="true") */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(236, 227, 211, 0.2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease),
              background-color var(--duration) var(--ease);
}
.chip:hover { border-color: rgba(210, 168, 102, 0.6); color: var(--color-text); }
.chip[aria-pressed="true"],
.chip--removable {
  border-color: var(--color-gold);
  background: rgba(210, 168, 102, 0.14);
  color: var(--color-gold-light);
}
.chip__x { font-size: 17px; line-height: 1; }

/* Шапка и низ панели нужны только на телефоне */
.filters__head, .filters__foot { display: none; }
.filters-backdrop { display: none; }

/* ----- Телефон: панель выезжает снизу ----- */
@media (max-width: 767px) {
  .filters {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;                 /* выше шапки (у неё 100) */
    display: flex;
    flex-direction: column;
    max-height: 86svh;
    border-top: 1px solid var(--color-line);
    border-radius: 16px 16px 0 0;
    background: var(--color-bg);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0.35s;
  }
  /* При открытии панель видна сразу (иначе в неё нельзя поставить фокус),
     при закрытии прячется после окончания анимации */
  .filters.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.35s var(--ease), visibility 0s;
  }
  /* Внутри: шапка, группы (прокручиваются) и кнопки внизу */
  .filters__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }

  .filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--gap);
    border-bottom: 1px solid var(--color-line-soft);
  }
  .filters__title {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .filters__close {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-line-soft);
    border-radius: 50%;
    background: none;
    color: var(--color-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .filters__groups {
    display: grid;
    gap: 24px;
    padding: 20px var(--gap);
    overflow-y: auto;             /* прокручиваются только группы, кнопки внизу на месте */
    overscroll-behavior: contain;
  }

  .filters__foot {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 10px;
    padding: 12px var(--gap) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-line-soft);
  }
  .filters__foot .btn { padding: 0 12px; }

  .filters-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    background: rgba(2, 9, 17, 0.7);
  }
  .filters-backdrop[hidden] { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .filters { transition: none; }
  }
}

/* ----- Планшет и ПК: панель раскрывается на странице под поиском ----- */
@media (min-width: 768px) {
  .catalog-tools {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "search toggle sort";
    gap: 16px;
  }
  .filters-toggle { width: auto; padding: 0 24px; }

  /* Подпись "Сортировка" видна слева от списка */
  .catalog-sort { display: flex; align-items: center; gap: 14px; }
  .catalog-sort__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-family: var(--font-ui);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .field-select { width: 220px; }

  /* Раскрытие по высоте тем же приёмом, что у подпространств на главной:
     строка сетки растёт от 0fr до 1fr */
  .filters {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--ease);
  }
  .filters.is-open { grid-template-rows: 1fr; }
  .filters__inner { min-height: 0; overflow: hidden; }
  .filters__groups {
    margin-top: 16px;
    padding: 24px 28px;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-card);
    background: rgba(12, 23, 36, 0.6);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
  }
}

@media (min-width: 1100px) {
  .filters__groups { grid-template-columns: repeat(3, 1fr); gap: 24px 40px; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .filters { transition: none; }
}


/* ========== 6. Итог поиска: "Найдено: N", выбранные фильтры ========== */
.catalog-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 24px 0 16px;
}
.catalog-status__count {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
}
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.active-filters:empty { display: none; }
/* "Сбросить всё" выглядит как ссылка со стрелкой, но это кнопка */
button.link-arrow {
  padding: 0 0 4px;
  border-width: 0 0 1px;
  background: none;
  cursor: pointer;
}

.catalog-message {
  padding: 48px 0;
  color: var(--color-text-muted);
  text-align: center;
}


/* ========== 7. Строка трека ========== */
.track-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* Телефон: карточка - обложка и название сверху, версии и волна на всю ширину, кнопки рядом */
.track {
  display: grid;
  grid-template-columns: 112px 1fr;
  grid-template-areas:
    "cover    info"
    "versions versions"
    "player   player"
    "actions  actions";
  gap: 14px 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-card);
  background: rgba(12, 23, 36, 0.78);
  transition: border-color var(--duration) var(--ease);
}
.track.is-playing { border-color: rgba(210, 168, 102, 0.55); }

/* Обложка с кнопкой play поверх */
.track__cover {
  grid-area: cover;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
/* Картинка не задаёт высоту строки: вертикальное фото иначе вытягивает строку вниз */
.track__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.track__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(5, 13, 23, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
/* Тёмный круг под значком, чтобы он читался на светлой обложке */
.track__play::before {
  content: "";
  grid-area: 1 / 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(10, 13, 18, 0.6);
}
.track__play .icon { grid-area: 1 / 1; position: relative; width: 42px; height: 42px; }
.track__play:hover, .track.is-playing .track__play { color: var(--color-gold-light); background: rgba(5, 13, 23, 0.35); }

/* Название, жанры, настроения, BPM */
.track__info { grid-area: info; min-width: 0; }
.track__title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.track__link { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease); }
.track__link:hover { color: var(--color-gold-light); }
.track__genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.tag {
  padding: 2px 10px;
  border: 1px solid rgba(236, 227, 211, 0.22);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1.6;
  color: var(--color-text);
}
.track__moods { font-size: 16px; line-height: 1.3; color: var(--color-text); }
.track__meta {
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Другие версии трека */
.track__versions { grid-area: versions; min-width: 0; }
.track__versions-label {
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.track__versions-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag--version {
  border-color: rgba(210, 168, 102, 0.35);
  color: var(--color-gold-light);
  font-variant-numeric: tabular-nums;
}

/* Волна и время */
.track__player { grid-area: player; display: grid; gap: 4px; min-width: 0; }
.track__wave {
  position: relative;
  height: 44px;
  cursor: pointer;
}
/* Статичная волна-заглушка, пока настоящая не загрузилась.
   ::after - золотая "пройденная" часть для запасного плеера без библиотеки */
.track__wave::before,
.track__wave::after {
  content: "";
  position: absolute;
  inset: 4px 0;
  -webkit-mask: url("../img/icons/waveform.svg") left center / 100% 100% no-repeat;
          mask: url("../img/icons/waveform.svg") left center / 100% 100% no-repeat;
  pointer-events: none;
}
.track__wave::before { background: rgba(236, 227, 211, 0.22); }
.track__wave::after {
  background: var(--color-gold);
  clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
}
.track__wave.is-ready::before,
.track__wave.is-ready::after { display: none; }

.track__time {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Кнопки: "Лицензировать трек" и "Подробнее" */
.track__actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.track__actions .btn { padding: 0 12px; white-space: nowrap; }

/* Планшет: обложка слева на всю высоту, кнопки справа */
@media (min-width: 768px) {
  .track {
    grid-template-columns: 168px minmax(0, 1fr) 180px;
    grid-template-areas:
      "cover info     actions"
      "cover versions actions"
      "cover player   actions";
    gap: 12px 24px;
    padding: 20px;
  }
  .track__cover { align-self: stretch; aspect-ratio: auto; min-height: 120px; }
  .track__actions { grid-template-columns: 1fr; align-self: center; }
}

/* ПК: всё в одну строку - обложка, описание, версии, волна (уже, чем раньше), кнопки */
@media (min-width: 1100px) {
  .track {
    grid-template-columns: 184px minmax(190px, 1.25fr) minmax(150px, 1fr) minmax(170px, 0.95fr) 168px;
    grid-template-areas: "cover info versions player actions";
    align-items: center;
    gap: 26px;
    min-height: 168px;
    padding: 22px 24px;
  }
  .track__cover { min-height: 124px; }
}


/* ========== 8. "Показать ещё" и пустой результат ========== */
.catalog-more { margin-top: 28px; text-align: center; }

.catalog-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px var(--gap);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-card);
  background: rgba(12, 23, 36, 0.6);
  text-align: center;
}
.catalog-empty__title {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.catalog-empty__text { color: var(--color-text-muted); }
.catalog-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 12px;
}


/* ========== 9. Призыв внизу страницы ========== */
.page-cta {
  padding: var(--section-pad) var(--gap);
  border-top: 1px solid var(--color-line-soft);
  background: var(--color-bg-2);
}
.page-cta__inner {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.page-cta__divider { width: 160px; height: auto; margin-bottom: 8px; }
.page-cta__text { font-size: var(--fs-lead); line-height: 1.35; color: var(--color-text-muted); }
.page-cta__inner .btn { margin-top: 8px; }


/* ========== 10. Планшет и ПК: заголовок страницы ========== */
@media (min-width: 768px) {
  .page-hero { min-height: 380px; padding-bottom: 48px; }
}
@media (min-width: 1100px) {
  /* Высота растёт вместе с шириной экрана: фото широкое, и при постоянной высоте
     на большом мониторе у него обрезалась бы голова */
  .page-hero { min-height: clamp(440px, 34vw, 620px); padding-bottom: 56px; }
}


/* =========================================================
   СТРАНИЦА "ЛИЦЕНЗИИ"
   Тёмные блоки: заставка, варианты лицензий, сотрудничество.
   Светлые (как на макете): форма, "Как это работает", FAQ.
   ========================================================= */

/* ========== 11. Иконки страницы ========== */
/* Линейные иконки шагов из макета, красятся через color (см. .icon в components.css) */
.icon--step-request    { --icon: url("../img/icons/step-request.svg"); }
.icon--step-discussion { --icon: url("../img/icons/step-discussion.svg"); }
.icon--step-contract   { --icon: url("../img/icons/step-contract.svg"); }
.icon--step-payment    { --icon: url("../img/icons/step-payment.svg"); }
.icon--step-files      { --icon: url("../img/icons/step-files.svg"); }


/* ========== 12. Заставка ========== */
/* Основа - .page-hero из раздела 2, здесь только отличия */
.page-hero--licensing { min-height: 640px; padding-bottom: 40px; }
/* Заставка высокая, как на главной - и кадрирование как на главной */
.page-hero--licensing .page-hero__bg img { object-position: 64% 30%; }
/* Телефон: текста на заставке много и он лежит поверх фото - затемняем ровнее */
@media (max-width: 767px) {
  .page-hero--licensing .page-hero__bg::after {
    background: linear-gradient(0deg, var(--color-bg) 0%, rgba(5, 13, 23, 0.72) 45%, rgba(5, 13, 23, 0.5) 100%);
  }
}
.lic-hero__title {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 300;
  letter-spacing: 0.06em;
}
.lic-hero__subtitle {
  max-width: 520px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lic-hero__btn { justify-self: start; margin-top: 8px; }

@media (min-width: 768px) {
  .page-hero--licensing { min-height: 680px; }
}
@media (min-width: 1100px) {
  .page-hero--licensing { min-height: min(100svh, 820px); padding-bottom: 48px; }
}


/* ========== 13. Варианты лицензий ========== */
.licenses {
  padding: var(--section-pad) var(--gap);
  border-top: 1px solid var(--color-line-soft);
  background: var(--color-bg);
}
.licenses__inner { max-width: var(--container); margin: 0 auto; }

/* Заголовок секции с подписью (используется на всей странице) */
.section-head { display: grid; gap: 10px; margin-bottom: 32px; }
.section-head__text { font-size: 18px; color: var(--color-text-muted); }

.license-cards { display: grid; gap: 16px; }
.license-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.license-card__image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.license-card__body {
  display: grid;
  grid-template-rows: auto 1fr auto;   /* кнопка всегда внизу карточки */
  gap: 12px;
  padding: 20px 22px 24px;
}
.license-card__title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.license-card__text { font-size: 16px; line-height: 1.45; color: var(--color-text-muted); }
.license-card__btn { justify-self: start; margin-top: 4px; }
.license-card__btn[aria-expanded="true"] { background: rgba(209, 161, 92, 0.16); }

@media (min-width: 768px) {
  .license-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Подпространство "Подробнее" (сама анимация - в style.css, раздел 11) */
.license-pane { display: grid; gap: 16px; justify-items: start; padding-right: 56px; }
.license-panel__title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.license-panel__cols { display: grid; gap: 24px; width: 100%; }
.license-panel__label {
  margin-bottom: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rights li { position: relative; margin: 8px 0; padding-left: 28px; font-size: 17px; line-height: 1.4; }
.rights li::before {
  position: absolute;
  left: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.7;
}
.rights--yes li::before { content: "✓"; color: var(--color-gold); }
.rights--no li::before { content: "×"; color: var(--color-text-muted); font-size: 18px; line-height: 1.3; }
.license-panel__note { font-size: 15px; font-style: italic; color: var(--color-text-muted); }

@media (min-width: 768px) {
  .license-panel__cols { grid-template-columns: 1fr 1fr; gap: 48px; }
}


/* ========== 14. Форма заявки (светлая секция) ========== */
/* Телефон и планшет: фото с лицом и цветами сверху справа, ниже плавно переходит в фон */
.request {
  padding: var(--section-pad) var(--gap);
  background:
    linear-gradient(180deg, rgba(236, 222, 209, 0) 0, var(--color-cream) 340px),
    url("../assets/img/request-bg.webp") right top / auto 380px no-repeat,
    var(--color-cream);
  color: var(--color-ink);
}
.request__inner { max-width: var(--container); margin: 0 auto; }
.request-form, .request__head, .request-success { max-width: 760px; }

.request__head { display: grid; gap: 10px; margin-bottom: 28px; }
.request__title { font-size: clamp(28px, 3.4vw, 40px); }
.request__text { font-size: 18px; color: var(--color-ink-muted); }

/* Рамка фокуса на светлом фоне - тёмная бронза */
.request :focus-visible, .faq :focus-visible, .steps :focus-visible {
  outline: 2px solid #7a5937;
  outline-offset: 2px;
}

/* Сетка полей: телефон - одна колонка, от планшета - две */
.form-grid { display: grid; gap: 18px; }
/* align-content: start - поле не растягивается, когда у соседа в ряду появилась ошибка */
.form-field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-field__label {
  padding: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.form-field__req { color: #8a5a2b; }

.form-field__control {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(43, 38, 34, 0.2);
  border-radius: var(--radius-card);
  background: var(--color-field);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 14px;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.form-field__control::placeholder { color: rgba(43, 38, 34, 0.45); }
.form-field__control:hover { border-color: rgba(43, 38, 34, 0.4); }
.form-field__control:focus {
  border-color: #7a5937;
  outline: none;
  box-shadow: 0 0 0 3px rgba(122, 89, 55, 0.2);
}
textarea.form-field__control { min-height: 116px; line-height: 1.5; resize: vertical; }

/* Выпадающий список: своя стрелка вместо стандартной */
.form-field__select { position: relative; }
.form-field__select .form-field__control {
  padding-right: 40px;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}
.form-field__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: var(--color-ink);
  -webkit-mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
          mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
  pointer-events: none;
}

/* "Как с вами связаться": слева список способов, справа поле с иконкой */
.contact-field {
  display: grid;
  grid-template-columns: minmax(128px, 30%) 1fr;
  gap: 8px;
}
.contact-field__input { position: relative; }
.contact-field__input .form-field__control { padding-right: 46px; }   /* место под иконку */
.contact-field__icon {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  fill: currentColor;
  color: #7a5937;
  pointer-events: none;     /* клик по иконке попадает в поле */
}

/* Ошибки: красная рамка и текст под полем (ставит licensing.js) */
.form-field__control[aria-invalid="true"] { border-color: var(--color-error); }
.form-field__error {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-error);
}
.form-field__error:empty { display: none; }

/* "Медиа / платформы": галочки в виде кнопок-чипов */
.form-checks__list { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip { position: relative; cursor: pointer; }
/* Сама галочка невидима, но остаётся в форме и доступна с клавиатуры */
.check-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.check-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(43, 38, 34, 0.25);
  border-radius: var(--radius-pill);
  background: var(--color-field);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-ink);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.check-chip:hover span { border-color: rgba(43, 38, 34, 0.5); }
.check-chip input:checked + span { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-cream-2); }
.check-chip input:focus-visible + span { outline: 2px solid #7a5937; outline-offset: 2px; }
.form-checks.has-error .check-chip span { border-color: var(--color-error); }

/* Согласие с политикой */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink);
  cursor: pointer;
}
.form-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #7a5937; }
.form-consent a { color: #7a5937; }

/* Поле-ловушка для ботов: убрано за край экрана */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.request-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 26px;
}
.request-form__hint { font-family: var(--font-ui); font-size: 12px; color: var(--color-ink-muted); }

/* Ошибка отправки над кнопкой */
.request-form__status {
  margin-top: 22px;
  padding: 12px 16px;
  border: 1px solid var(--color-error);
  border-radius: var(--radius-card);
  background: rgba(163, 50, 31, 0.06);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-error);
}

/* Экран "Спасибо" */
.request-success {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 40px 32px;
  border: 1px solid rgba(43, 38, 34, 0.15);
  border-radius: var(--radius-card);
  background: rgba(252, 240, 229, 0.85);
}
.request-success[hidden] { display: none; }
.request-success__title {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.request-success__title:focus { outline: none; }
.request-success__text { font-size: 18px; color: var(--color-ink-muted); }
.request-success .btn { margin-top: 8px; }

@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .form-field--wide { grid-column: 1 / -1; }
  /* "Бюджет" - в первом ряду рядом с "Именем" (в коде и на телефоне он после контакта) */
  .form-field--budget { grid-column: 2; grid-row: 1; }
}

/* Отдельная страница с формой: отступ под шапку, высота не меньше экрана */
.request--page {
  min-height: 100svh;
  padding-top: calc(var(--section-pad) + 64px);
}

/* ПК: фото на всю секцию справа, форма слева на светлой части */
@media (min-width: 1100px) {
  /* Градиенты поверх фото прячут светлые полосы по краям исходника */
  .request {
    background:
      linear-gradient(180deg, var(--color-cream) 0, rgba(236, 222, 209, 0) 40px),
      linear-gradient(0deg, var(--color-cream) 0, rgba(236, 222, 209, 0) 40px),
      url("../assets/img/request-bg.webp") right center / cover no-repeat,
      var(--color-cream);
  }
}


/* ========== 15. Как это работает (светлая секция) ========== */
.steps {
  padding: var(--section-pad) var(--gap);
  border-top: 1px solid rgba(43, 38, 34, 0.08);
  background: var(--color-cream-2);
  color: var(--color-ink);
}
.steps__inner { max-width: var(--container); margin: 0 auto; }
.steps__title { margin-bottom: 40px; font-size: clamp(28px, 3.4vw, 40px); text-align: center; }

/* Телефон: шаги сверху вниз, между ними стрелка вниз */
.steps__list { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.step {
  position: relative;
  display: grid;
  align-content: start;          /* шаги с коротким текстом не "съезжают" вниз */
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.step .icon { width: 44px; height: 44px; color: var(--color-ink); }
.step__title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.step__text { max-width: 220px; font-size: 16px; line-height: 1.4; color: var(--color-ink-muted); }
/* Стрелка к следующему шагу */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: rgba(43, 38, 34, 0.45);
  -webkit-mask: url("../img/icons/arrow-right.svg") center / contain no-repeat;
          mask: url("../img/icons/arrow-right.svg") center / contain no-repeat;
  transform: rotate(90deg);
}

/* Планшет и ПК: шаги в строку, стрелки вправо */
@media (min-width: 768px) {
  .steps__list { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .step:not(:last-child)::after {
    top: 14px;
    right: -20px;
    bottom: auto;
    left: auto;
    margin-left: 0;
    transform: none;
  }
}


/* ========== 16. Сотрудничество (тёмный баннер) ========== */
.collab-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: 64px var(--gap);
  overflow: hidden;
  background: var(--color-bg);
}
.collab-banner__bg { position: absolute; inset: 0; }
/* Фото на 8px выше блока: у исходника внизу светлая полоса, она уходит за край */
.collab-banner__bg img { width: 100%; height: calc(100% + 8px); object-fit: cover; object-position: 78% top; }
/* На телефоне текст лежит поверх фото - затемняем сильнее */
.collab-banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 13, 23, 0.9) 0%, rgba(5, 13, 23, 0.55) 100%);
}
.collab-banner__content {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 16px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}
.collab-banner__text { max-width: 460px; font-size: 18px; line-height: 1.45; color: var(--color-text); opacity: 0.9; }

@media (min-width: 768px) {
  .collab-banner { min-height: 380px; }
  .collab-banner__bg img { object-position: right top; }
  .collab-banner__bg::after { background: var(--overlay-left); }
}


/* ========== 17. Часто задаваемые вопросы (светлая секция) ========== */
.faq {
  padding: var(--section-pad) var(--gap);
  background: var(--color-cream);
  color: var(--color-ink);
}
.faq__inner { max-width: 860px; margin: 0 auto; }
.faq__title { margin-bottom: 32px; font-size: clamp(28px, 3.4vw, 40px); text-align: center; }
.faq__list { display: grid; gap: 10px; }
.faq__item {
  border: 1px solid rgba(43, 38, 34, 0.14);
  border-radius: var(--radius-card);
  background: rgba(252, 240, 229, 0.7);
}
/* <details>/<summary> раскрываются браузером сами, без JS */
.faq__question {
  position: relative;
  padding: 16px 56px 16px 20px;
  font-size: 19px;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1;
  color: #7a5937;
  transform: translateY(-50%);
  transition: transform var(--duration) var(--ease);
}
.faq__item[open] .faq__question::after { transform: translateY(-50%) rotate(45deg); }
.faq__answer { padding: 0 20px 18px; font-size: 17px; line-height: 1.5; color: var(--color-ink-muted); }


/* =========================================================
   СТРАНИЦА ТРЕКА (track.html)
   ========================================================= */

/* ========== 18. Страница и ссылка "Назад" ========== */
.track-page {
  padding: 112px var(--gap) var(--section-pad);
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(210, 168, 102, 0.08), rgba(5, 13, 23, 0) 70%),
    var(--color-bg);
}
.track-page__inner { max-width: 1080px; margin: 0 auto; }
.track-page :focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; }
.track-page__back { margin-bottom: 28px; }
.link-arrow--back .icon--arrow { transform: rotate(180deg); }


/* ========== 19. Текущая версия: обложка, название, плеер ========== */
.track-hero { display: grid; gap: 28px; }
.track-hero__cover {
  width: min(100%, 420px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.track-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.track-hero__body { display: grid; gap: 14px; align-content: center; min-width: 0; }
.track-hero__version { color: var(--color-gold); }
.track-hero__title {
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  overflow-wrap: anywhere;
}
.track-hero__tags {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

/* Плеер: круглая кнопка, волна, время под волной справа */
.track-hero__player {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas:
    "play wave"
    ".    time";
  gap: 6px 18px;
  align-items: center;
  margin-top: 10px;
}
.track-hero__player[hidden] { display: none; }
.track-hero__play {
  grid-area: play;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(210, 168, 102, 0.25);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.track-hero__play:hover { transform: scale(1.05); box-shadow: 0 12px 32px rgba(210, 168, 102, 0.4); }
.track-hero__play .icon { width: 30px; height: 30px; }
.track-hero__wave { grid-area: wave; height: 64px; }
.track-hero__time { grid-area: time; justify-self: end; }
.track-hero__request {
  margin-top: 10px;
  padding: 14px 18px;
  border: 1px dashed rgba(210, 168, 102, 0.45);
  border-radius: var(--radius-card);
  font-size: 17px;
  color: var(--color-text);
}
.track-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

@media (min-width: 768px) {
  .track-page { padding-top: 140px; }
  .track-hero { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 48px; align-items: center; }
}


/* ========== 20. Подробности ========== */
.track-details {
  display: grid;
  max-width: 760px;
  margin: 56px 0 0;
  border-top: 1px solid var(--color-line-soft);
}
.track-details__row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line-soft);
}
.track-details dt {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.track-details dd { margin: 0; font-size: 18px; line-height: 1.4; color: var(--color-text); }

@media (min-width: 768px) {
  .track-details__row { grid-template-columns: 220px minmax(0, 1fr); }
}


/* ========== 21. Другие версии ========== */
.track-versions { margin-top: 64px; }
.track-versions__title {
  margin-bottom: 24px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.track-versions__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.version-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.version-card__image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--color-line-soft);
  border-radius: 8px;
  background: var(--color-surface);
  transition: border-color var(--duration) var(--ease);
}
.version-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
/* Значок play по центру; у версий по запросу его нет */
.version-card__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  color: #fff;
  opacity: 0.85;
  transition: opacity var(--duration) var(--ease);
}
.version-card--request .version-card__icon { display: none; }
.version-card__title { margin-top: 6px; font-size: 19px; line-height: 1.2; }
.version-card__meta {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.version-card:hover .version-card__image { border-color: rgba(210, 168, 102, 0.6); }
.version-card:hover .version-card__image img { transform: scale(1.04); }
.version-card:hover .version-card__title { color: var(--color-gold-light); }

@media (min-width: 768px) {
  .track-versions__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
}

/* Перелёт картинок при смене версии (View Transitions) */
::view-transition-group(*) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }