/* Компоненты: всё, что повторилось дважды. Класс с модификаторами (`.btn`, `.btn--accent`), описание – docs/design-system.md → Компоненты.
   Появляются по ходу сборки; ничего не заводится «на будущее». */

/* Ссылка с линией: underline-draw */
.u {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size var(--dur-600) var(--ease-out);
}
.u:hover, .u:focus-visible { background-size: 100% 1px; }

/* Стрелка: arrow-nudge */
.arrow { display: inline-block; transition: transform var(--dur-600) var(--ease-out); }
a:hover .arrow, button:hover .arrow { transform: translateX(var(--space-8)); }
/* Стрелка вверх: arrow-lift */
a:hover .arrow--up, button:hover .arrow--up { transform: translateY(calc(var(--space-8) * -1)); }
a:hover .arrow--back, button:hover .arrow--back { transform: translateX(calc(var(--space-8) * -1)); }

/* Кнопка: чернила на светлом, светлая на тёмном */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  padding: var(--space-16) var(--space-24);
  background: var(--color-fg); color: var(--color-fg-inverse);
  border-radius: var(--radius-none);
}
.btn--light { background: var(--color-fg-on-dark); color: var(--color-bg-dark); }
.btn--sm { gap: var(--space-12); padding: var(--space-8) var(--space-16); transition: background-color var(--dur-600) var(--ease-out), color var(--dur-600) var(--ease-out); }

/* Рамка фото: обрезает; фото внутри может масштабироваться, плыть и сменяться */
.frame { position: relative; overflow: hidden; background: var(--color-bg-sheet); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: var(--aspect-tall); }
.frame--portrait { aspect-ratio: var(--aspect-portrait); }
.frame--wide { aspect-ratio: var(--aspect-wide); }
.frame--pano { aspect-ratio: var(--aspect-pano); }
.frame[data-fx~="drift"] img { inset: -8% 0; height: 116%; }

/* Подпись под фото: края разведены */
.cap { display: flex; justify-content: space-between; gap: var(--space-16); padding-top: var(--space-12); }

/* Переключатель */
.pair {
  padding: var(--space-8) var(--space-16); border: 1px solid var(--color-line);
  transition: background-color var(--dur-300) var(--ease-out), color var(--dur-300) var(--ease-out), border-color var(--dur-300) var(--ease-out);
}
.pair:hover { border-color: var(--color-fg); }
.pair[aria-pressed="true"] { background: var(--color-fg); color: var(--color-fg-inverse); border-color: var(--color-fg); }

/* Таблица фактов: подпись слева, значение справа, линии между строками */
.facts { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-24); border-top: 1px solid var(--color-line); }
.facts dt, .facts dd { padding-block: var(--space-12); border-bottom: 1px solid var(--color-line); }
.facts dd { text-align: right; font-variant-numeric: tabular-nums; }
.facts--on-dark, .facts--on-dark dt, .facts--on-dark dd { border-color: var(--color-line-on-dark); }
.facts--on-dark dt { color: var(--color-fg-muted-on-dark); }

/* Строка с подписью слева: линия сверху, подпись в колонках 1–3 */
.row { row-gap: var(--space-32); padding-top: var(--space-16); border-top: 1px solid var(--color-line); }
.row__label { grid-column: 1 / span 3; }

@media (max-width: 768px) {
  .row__label { grid-column: 1 / -1; }
}