/**
 * assets/css/races.css
 *
 * Стилі, специфічні для рас. Повновисотний фото-фон (`.detail-art`) сюди
 * НЕ входить: він єдиний на весь сайт і живе в main.css.
 */

/*
 * .item-photo-wrap / .item-photo — мініатюра раси (featured image).
 * Копія стилів з items.css (той самий патерн показу WP featured image
 * поруч із заголовком, з fallback на d20_gold.webp).
 */
.item-photo-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease;
}

.item-photo-wrap:hover {
  transform: scale(1.1);
}

.item-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/*
 * У рас портрет зазвичай генерований на весь зріст з великим полем зверху —
 * у 140×140 рамці лишається дрібна фігурка. Апскейл ×2 з прив'язкою до
 * верхнього краю (center top) наближає кадр на обличчя/торс; .item-photo-wrap
 * вище вже має overflow:hidden, тож усе, що виїжджає за рамку, ховається.
 */
.item-photo-wrap .item-photo {
  object-fit: cover;
  object-position: center top;
  transform: scale(2);
  transform-origin: center top;
}

/*
 * ~5 карток у рядку (не auto-fill за замовчуванням) — фото-картки читабельні
 * лише на такому масштабі, дрібніше деталей не видно.
 *
 * align-items: start — БЕЗ цього розгортання ОДНІЄЇ картки-сім'ї тягнуло за
 * собою сусідні картки в тому ж рядку: CSS Grid за замовчуванням розтягує
 * (stretch) усі елементи рядка до висоти найвищого, тож короткі картки поруч
 * з розгорнутою просто роздувались порожнім місцем знизу, а виглядало це як
 * «розгорнувся весь ряд».
 */
.races-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-items: start;
}

/*
 * Картка раси з фото-фоном — за зразком референсу (ttg.club): повнокадрове
 * фото, ґрадієнт для читабельності, назва укр/en і теги-пігулки внизу.
 * Без фото (ще не проставлене в адмінці — featured image) картка лишається
 * звичайною темною, без ґрадієнта: чесно, поки арту немає не для всіх рас.
 */
.race-card {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 160px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--bd-border);
  background-color: var(--bg-sidebar);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.race-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-soft);
}

/* Фото-картки на ховері рухають лише фото (нижче) — без тіні/рамки. */
.race-card.has-photo:hover {
  box-shadow: none;
}

/*
 * has-photo: border ПРИБРАНИЙ, не просто прозорий. Навіть прозорий
 * border:1px все одно займає 1px простору (border-box) — вміст усередині
 * сідав на 1px менше за саму картку, лишаючи щілину, крізь яку просвічував
 * фон сторінки. Border:none нічого не займає, тож фото/градієнт тепер
 * сідають рівно на весь бокс картки.
 * На ховері рамки/кільця немає взагалі — замість цього рухається сам шар
 * фото (.race-card__photo), див. нижче.
 */
.race-card.has-photo {
  border: none;
}

/*
 * Фото — ОКРЕМИЙ шар (не background-image на .race-card): на ховері
 * рухається (zoom) лише він, текст і теги над ним лишаються нерухомі.
 * Абсолютне позиціювання inset:0 всередині .race-card означає, що шар
 * завжди займає ПОТОЧНУ висоту картки — коли картка-сім'я росте при
 * розгортанні (додається список видань знизу), фото росте разом з нею,
 * а не лишається прив'язаним до висоти самого «обличчя».
 */
.race-card__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: top;
  transform-origin: top right;
  transition: transform 0.6s ease-in-out;
}

.race-card.has-photo:hover .race-card__photo {
  transform: scale(1.05);
}

.race-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 160px;
  padding: 14px 16px;
  gap: 0;
}

.race-card__name-uk {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.25;
}

.race-card.has-photo .race-card__name-uk {
  color: #fff;
  /* Один розмитий тінь на 4px губився на світлих/шумних ділянках фото
     (без .race-card__gradient-шару, прибраного раніше, тінь — єдиний
     захист контрасту). Шар із трьох тіней: різкий контур упритул для
     країв літер + вузький і широкий ambient-блюр — темнить площу під
     текстом незалежно від того, що саме під нею на фото. */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.9),
    0 2px 10px rgba(0,0,0,0.65),
    0 0 22px rgba(0,0,0,0.45);
}

.race-card__name-en {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 1px;
}

.race-card.has-photo .race-card__name-en {
  color: rgba(255,255,255,0.7);
}

.race-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.race-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--bg-sunken);
  color: var(--text-muted);
}

.race-pill--accent {
  background: var(--accent-bg);
  color: var(--accent);
}

.race-card.has-photo .race-pill--source {
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-mono);
  backdrop-filter: blur(2px);
}

.race-card-toggle {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.race-card.has-photo .race-card-toggle {
  background: var(--accent);
  color: #fff;
  backdrop-filter: blur(2px);
}

.race-card.is-expanded .race-card-toggle svg {
  transform: rotate(45deg);
}

.race-card-toggle svg {
  transition: transform 0.2s ease;
}

/* Розгорнутий список видань — окремий блок під фото-карткою, звичайний
   потік документа (картка перестає бути absolute-контейнером по висоті). */
.race-family-card {
  min-height: 0;
  cursor: default;
}

.race-family-card .race-family-face {
  position: relative;
  min-height: 160px;
  cursor: pointer;
}

.race-family-body {
  /* position:relative — БЕЗ цього список видань малювався ПІД шаром фото
     (.race-card__photo): позиційовані елементи без
     явного z-index стекуються ПІСЛЯ непозиційованих у потоці, тож фото
     (position:absolute) перекривало список, хоч той і лишався в DOM.
     Список без position взагалі не візуально «зникав».
     Початкова висота 0 — інлайном у JS (buildFamilyCard), не тут. Якщо
     задати height:0 класом, після setTimeout-очищення інлайн-стилю
     (JS-тумблер) блок миттю провалюється назад до 0 — саме той трюк,
     що вже працює для .block-body в entity.css, повторено тут. */
  position: relative;
  overflow: hidden;
  transition: height 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
}

.race-family-card.is-expanded .race-family-body {
  padding: 10px 12px;
}

.race-family-variant {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--text-main);
  font-size: 12px;
  transition: border-color var(--transition-fast);
}

.race-family-variant:hover,
.race-family-variant.active {
  border-color: var(--accent-soft);
}

.race-family-variant-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.race-family-variant-edition {
  font-family: var(--font-mono);
  font-size: 10px;
  flex-shrink: 0;
}

.race-family-variant-source {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}