/* ============================================================================
 * nav-tiles.css — canon-shell навігаційних плиток (трек, 2026-07-14).
 *
 * ОДИН глобальний shell для 4 нав-плиток сайту (як buttons.css для кнопок).
 * Unbound BEM — без .mtsp-*-page scope, щоб переюзати будь-де. Токени --mtsp-*.
 *
 *   .nav-tile            — спільне ядро (рамка, hover, focus, назва)
 *   .nav-tile--photo     — горизонтальний: фото 72×72 зліва, стрілка справа
 *   .nav-tile--index     — вертикальний: номер зверху → назва → опис → лічильник
 *   .nav-tile--index-lg  — варіант --index з КРУПНОЮ назвою (розділи «Корисної»)
 *
 * Enqueue: mtsp-nav-tiles (functions.php), глобально, після buttons.css.
 *
 * Мігровано: каталог ct-tile → .nav-tile--photo (крок 1).
 * Наступні: fp-cat / subcat-card / topic-card.
 * ========================================================================== */

/* ---- Спільне ядро ------------------------------------------------------- */
.nav-tile {
  display: flex;
  background: var(--mtsp-white);
  border: 1px solid var(--mtsp-gray-200);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.nav-tile:hover {
  border-color: var(--mtsp-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(15, 36, 64, .18);
}
/* a11y: клавіатурний фокус (нове — раніше focus-ринг був відсутній). Ховаємо
   дефолтний outline ЛИШЕ під focus-visible-заміну, не при звичайному :focus. */
.nav-tile:focus-visible {
  outline: 2px solid var(--mtsp-accent);
  outline-offset: 2px;
}

/* Назва — navy, weight 600, НЕ міняє колір на hover (owner: «тільки рамка»). */
.nav-tile__name {
  margin: 0; /* назва може бути <h3> — гасимо дефолт-маргіни, ритм тримає flex-gap */
  color: var(--mtsp-navy);
  font-weight: 600;
  line-height: 1.3;
}

/* Опис (спільний) — сірий, 2 рядки з обрізанням. */
.nav-tile__desc {
  margin: 0; /* опис може бути <p> — те саме */
  color: var(--mtsp-gray-500);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Лічильник (спільний) — mono, приглушений. */
.nav-tile__count {
  font-family: var(--mtsp-font-mono);
  font-size: 11.5px;
  color: var(--mtsp-gray-400);
}

/* ---- --photo: горизонтальний (фото зліва) ------------------------------ */
.nav-tile--photo {
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}
.nav-tile--photo .nav-tile__media {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  padding: 6px;
  border-radius: 8px;
  background: var(--mtsp-gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nav-tile--photo .nav-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* owner: contain, не cover */
}
/* Плейсхолдер порожнього фото (переніс логіку fp-card__noimg під власний клас). */
.nav-tile__noimg {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--mtsp-gray-100);
  border: 1px dashed var(--mtsp-gray-300);
}
.nav-tile--photo .nav-tile__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-tile--photo .nav-tile__name {
  font-size: 15px;
}
.nav-tile--photo .nav-tile__desc {
  font-size: 12.5px;
}
.nav-tile__arrow {
  flex-shrink: 0;
  align-self: center;
  color: var(--mtsp-gray-300);
  font-size: 18px;
  transition: color .18s;
}
.nav-tile--photo:hover .nav-tile__arrow {
  color: var(--mtsp-accent);
}

/* ---- --index: вертикальний (номер зверху) ------------------------------ */
.nav-tile--index {
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
  min-height: 104px; /* калібр. під subcat-card — перший споживач --index */
}
.nav-tile--index .nav-tile__num {
  font-family: var(--mtsp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--mtsp-accent);
}
.nav-tile--index .nav-tile__name {
  font-size: 15px;
}
.nav-tile--index .nav-tile__desc {
  font-size: 13px;
}
/* foot-рядок (лічильник + стрілка), притиснутий донизу картки. */
.nav-tile--index .nav-tile__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
}
/* footless-варіант (--index-lg / topic): лічильник — прямий нащадок, сам
   притискається донизу. `>` навмисно — щоб НЕ зачепити count усередині foot. */
.nav-tile--index > .nav-tile__count {
  margin-top: auto;
}
.nav-tile--index:hover .nav-tile__arrow {
  color: var(--mtsp-accent);
}

/* --index-lg: розділи з КРУПНОЮ назвою — owner-підтверджена ієрархія (topic-card
   «Корисної»). Просторіший padding + display-заголовок Tinos 19px/600. */
.nav-tile--index-lg {
  padding: 22px 24px;
}
.nav-tile--index-lg .nav-tile__name {
  font-family: var(--mtsp-font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.2px;
}