/* ==========================================================================
   ATOMS — минимальные неделимые элементы. Цвета — только семантика --c-*,
   поэтому любой атом сам подстраивается под светлую/тёмную секцию.
   ========================================================================== */

/* --- Кнопка --- */
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.a-btn:active {
  transform: scale(var(--press));
}

.a-btn--primary {
  background: var(--c-btn-bg);
  color: var(--c-btn-fg);
}

.a-btn--ghost {
  border: 1px solid var(--c-line-strong);
  color: var(--c-fg);
}

.a-btn--block {
  width: 100%;
}

.a-btn--sm {
  min-height: var(--tap-min);
  padding-inline: var(--space-4);
}

@media (hover: hover) {
  .a-btn--primary:hover {
    filter: brightness(1.08);
  }

  .a-btn--ghost:hover {
    border-color: var(--c-fg);
  }
}

/* --- Текстовая ссылка со стрелкой --- */
.a-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--c-fg);
}

.a-link .a-icon {
  transition: transform var(--dur) var(--ease);
}

/* --- Иконка (inline SVG, цвет через currentColor) --- */
.a-icon {
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Метка: капс с разрядкой. С номером — «01 — Обо мне» --- */
.a-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.a-label__num {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--c-accent);
}

.a-label__num::after {
  content: "";
  width: var(--rule-w);
  height: 1px;
  background: currentColor;
}

/* --- Заголовки --- */
.a-h1 {
  font-size: var(--fs-h1);
}

.a-h2 {
  font-size: var(--fs-h2);
}

.a-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

/* --- Текст --- */
.a-lead {
  font-size: var(--fs-md);
  color: var(--c-muted);
}

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

/* --- Цена --- */
.a-price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--c-heading);
  white-space: nowrap;
}

/* --- Аватар --- */
.a-avatar {
  flex-shrink: 0;
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border-radius: var(--radius-round);
  object-fit: cover;
}

.a-avatar--md {
  width: var(--avatar-md);
  height: var(--avatar-md);
}

/* --- Фото в арке с латунным контуром --- */
.a-arch {
  position: relative;
  width: 100%;
  max-width: var(--arch-max);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
}

.a-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-arch);
}

.a-arch::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-3) * -1);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-arch);
  opacity: 0.6;
  pointer-events: none;
}

/* --- Точка карусели --- */
.a-dot {
  position: relative;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-pill);
  background: var(--c-line);
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* увеличенная зона нажатия */
.a-dot::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-4) * -1) calc(var(--space-1) * -1);
}

.a-dot[aria-current="true"] {
  width: var(--dot-size-active);
  background: var(--c-accent);
}

.a-avatar--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
}

/* заглушка аватара: инициал курсивом на подложке, с тонким кольцом акцента. TODO: заменить фото */
.a-avatar--placeholder {
  display: grid;
  place-items: center;
  background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-line), 0 0 0 var(--space-2) var(--c-bg), 0 0 0 calc(var(--space-2) + 1px) var(--c-accent);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--fs-avatar);
  line-height: 1;
  color: var(--c-accent);
}