/* ==========================================
   MOD HEADER — шапка страницы мода (single.php, post_type = post)
   Три уровня: крошки над шапкой (header.php) → карточка с размытым
   фоном, обложкой 16:9 и текстом → «паспорт» под тонкой линией.
   Цвета — из токенов темы и карточки мода (--mod-card-gold).
   ========================================== */
.mod-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--ds-radius-md);
  margin-bottom: var(--ds-space-8);
  padding: 24px;
  color: #ddd;
  /* Фолбэк без картинки: тёмный градиент вместо серой заглушки. */
  background: linear-gradient(135deg, #3a4148, #22262a);
}
/* Отступ до контента записи — как между блоками сайта (нет двойного зазора
   от padding самого .ds-post-content). */
.mod-head + .ds-post-content { padding-top: 0; }

/* ---------- Фон ---------- */
.mod-head__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.mod-head__bg-img {
  position: absolute;
  /* Запас по краям, чтобы размытие не давало светлую кайму. */
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(9px);
  transform: scale(1.15);
}
.mod-head__shade {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .6);
}

/* ---------- Раскладка ---------- */
.mod-head__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas:
    "cover text"
    "report text";
  /* row2 = 1fr: свободное место уходит вниз, поэтому ссылка «Сообщить
     о проблеме» встаёт сразу под обложкой, а не по центру колонки. */
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  row-gap: 10px;
  align-items: start;
}
.mod-head__cover { grid-area: cover; }
.mod-head__text {
  grid-area: text;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mod-head__report { grid-area: report; justify-self: start; display: none; }

/* Без картинки: обложки нет, текст на всю ширину, ссылка в конце блока. */
.mod-head--no-image .mod-head__inner {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "text"
    "report";
  grid-template-rows: auto auto;
}
.mod-head--no-image .mod-head__cover { display: none; }

/* ---------- Обложка ---------- */
.mod-head__cover { width: 280px; }
.mod-head__cover-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgb(255 255 255 / .15);
}

/* ---------- Текст ---------- */
.mod-head__title {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--ds-font-body);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.mod-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #ddd;
}
.mod-head__author { min-width: 0; }
.mod-head__author-link,
.mod-head__author-name,
.mod-head__category { color: #ddd; }
.mod-head__author-link:hover,
.mod-head__category:hover { color: var(--mod-card-gold, #f5c76a); text-decoration: none; }
.mod-head__author-link:focus-visible,
.mod-head__category:focus-visible { outline: 2px solid var(--mod-card-gold, #f5c76a); outline-offset: 2px; }
.mod-head__dot { color: #777; }

.mod-head__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #ddd;
}
.mod-head__stat { display: inline-flex; align-items: center; gap: 6px; }
.mod-head__stat i { color: var(--ds-text-muted); font-size: 13px; }
.mod-head__rating { display: inline-flex; align-items: center; gap: 6px; color: #ddd; }
.mod-head__rating .fa-star { color: var(--mod-card-gold, #f5c76a); font-size: 13px; }
.mod-head__rating-value { font-weight: 700; color: #fff; }
.mod-head__rating--empty { color: #999; }
/* Пустое состояние показывает только текст: звезда, значение и счётчик скрыты.
   mod-header.js снимает класс, и те же узлы становятся рейтингом без перестройки. */
.mod-head__rating--empty .fa-star,
.mod-head__rating--empty .mod-head__rating-value,
.mod-head__rating--empty .mod-head__rating-votes,
.mod-head__rating--empty .mod-head__dot { display: none; }
.mod-head__rating-empty-text { display: none; }
.mod-head__rating--empty .mod-head__rating-empty-text { display: inline; }

/* ---------- «Ваша оценка» ---------- */
.mod-head__vote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #999;
}
.mod-head__vote-label { font-size: 13px; color: #999; }
.mod-head__vote-note { color: #999; }
.mod-head__vote-note a { color: #ddd; }
.mod-head__vote-status { font-size: 13px; color: #8fce8f; }
.mod-head__vote.is-error .mod-head__vote-status { color: #e07a7a; }
.mod-head__stars { display: inline-flex; align-items: center; gap: 0; }
.mod-head__star {
  appearance: none;
  margin: 0;
  border: 0;
  background: none;
  padding: 9px 5px;
  min-width: 32px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #777;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.mod-head__star i { font-size: 18px; }
.mod-head__star.is-active { color: var(--mod-card-gold, #f5c76a); }
.mod-head__star:focus-visible { outline: 2px solid var(--mod-card-gold, #f5c76a); outline-offset: 1px; }
.mod-head__star:disabled { cursor: default; }
.mod-head__stars--static .mod-head__star { cursor: default; }
/* Голос уже отдан: звёзды заблокированы, повторно голосовать нельзя. */
.mod-head__vote.is-voted .mod-head__star { cursor: default; }
.mod-head__vote.is-sending { cursor: progress; }
.mod-head__vote.is-sending .mod-head__star { pointer-events: none; opacity: .7; }

/* ---------- Линия и паспорт ---------- */
.mod-head__divider {
  height: 1px;
  margin: 12px 0;
  background: rgb(255 255 255 / .15);
}
.mod-head__passport {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  margin: 0;
}
.mod-head__passport-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.mod-head__passport-row--wide { grid-column: 1 / -1; }
.mod-head__passport-term {
  flex: 0 0 90px;
  width: 90px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: #999;
}
.mod-head__passport-value {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  color: #ddd;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.mod-head__passport-value a { color: #ddd; text-decoration: none; }
.mod-head__passport-value a:hover { color: #f5c76a; text-decoration: underline; }
.mod-head__passport-value a:focus-visible { outline: 2px solid #f5c76a; outline-offset: 2px; }

/* ---------- Действия ---------- */
.mod-head__report {
  font-size: 12px;
  color: #999;
  text-decoration: none;
}
.mod-head__report:hover { color: #ddd; text-decoration: none; }
.mod-head__report:focus-visible { outline: 2px solid #f5c76a; outline-offset: 2px; }

.mod-head__edit {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-sm);
  background: rgb(0 0 0 / .45);
  color: #ddd;
  text-decoration: none;
}
.mod-head__edit:hover { color: #fff; background: rgb(0 0 0 / .7); text-decoration: none; }
.mod-head__edit:focus-visible { outline: 2px solid #f5c76a; outline-offset: 2px; }

/* ==========================================
   Крошки над шапкой: одна строка, обрезка, сворачивание
   ========================================== */
.ds-breadcrumbs__inner {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.ds-breadcrumbs .kama_breadcrumbs > span[itemprop="itemListElement"] {
  display: inline-block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.ds-breadcrumbs__inner a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.ds-breadcrumbs__sep { margin: 0 4px; color: var(--ds-text-muted); }
.ds-breadcrumbs__ellipsis { margin: 0 4px; color: var(--ds-text-muted); }
.ds-breadcrumbs__item--hidden,
.ds-breadcrumbs__sep--hidden { display: none !important; }
/* Название мода: скрыто визуально, но остаётся в BreadcrumbList. */
.ds-breadcrumbs__last {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Планшет/мобильный ---------- */
@media (max-width: 768px) {
  .mod-head { padding: 16px; }
  .mod-head__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cover"
      "report"
      "text";
    grid-template-rows: auto;
    gap: 16px;
  }
  .mod-head--no-image .mod-head__inner { grid-template-areas: "text" "report"; }
  .mod-head__cover { width: 100%; }
  .mod-head__title { font-size: 20px; }
  .mod-head__passport { grid-template-columns: minmax(0, 1fr); }
  .mod-head__passport-row--wide { grid-column: auto; }
  .ds-breadcrumbs .kama_breadcrumbs > span[itemprop="itemListElement"] { max-width: 45vw; }
}

@media (max-width: 400px) {
  .mod-head__title { font-size: 18px; }
  .mod-head__passport-term,
  .mod-head__passport-value { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mod-head__star,
  .mod-head__passport-value a,
  .mod-head__author-link,
  .mod-head__category { transition: none; }
}