/* === Регалии (доверие): интерактив — клик по достижению меняет фото слева === */

/* подзаголовок ближе к заголовку */
#regalia .section__desc { margin-top: var(--space-2); }

.regalia__grid {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-4);
  align-items: stretch; margin-top: var(--space-5);
}

/* стейдж — фото меняется по клику (плейсхолдер, пока файла нет) */
.regalia__stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); min-height: 320px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(127,127,127,0.10), transparent 60%), var(--bg);
}
.regalia__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #1b1e24; }
.regalia__soon {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim);
}
.regalia__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 16px 14px;
  font-family: var(--mono); font-size: var(--caption); color: #fff;
  background: linear-gradient(to top, rgba(8,9,12,0.9), transparent);
}

/* достижения — кликабельные карточки, распределены по высоте фото */
.regalia__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.regalia__list li { display: flex; flex: 1; }
.regalia__item {
  width: 100%; display: flex; align-items: center; gap: var(--space-3); text-align: left;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-secondary); cursor: pointer; appearance: none; -webkit-appearance: none;
  color: inherit; font-family: inherit;
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.regalia__item:hover { border-color: var(--ink-dim); }
.regalia__item.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.regalia__ico {
  flex: none; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center;
  color: var(--accent); background: rgba(210, 122, 47, 0.12);
}
.regalia__ico svg { width: 26px; height: 26px; }
.regalia__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.regalia__txt b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1.2; }
.regalia__txt span { font-family: var(--mono); font-size: var(--caption); color: var(--ink-muted); }

@media (max-width: 760px) {
  .regalia__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .regalia__stage { aspect-ratio: 16 / 9; min-height: 0; }
  .regalia__list li { flex: none; }
}