/**
 * Стили контента «Об авторе» (Teenology).
 *
 * Используется в двух местах одинаково (источник — about/content.html):
 *   - на отдельной странице /about/ (статический layout, светлая тема);
 *   - в модалке #modal-about внутри Teenology PWA (наследует темы neutral/dark).
 *
 * Все правила scoped под .about-content, чтобы не конфликтовать с глобальными
 * .glass-panel/.pn-modal/utility-классами Tailwind в монолите index.html.
 *
 * В монолите подключается lazy (openAboutModal -> loadAboutCssOnce), чтобы
 * не утяжелять первый paint Teenology PWA.
 */

.about-content {
  display: block;
  font-family: Inter, system-ui, Arial, sans-serif;
  line-height: 1.65;
}

/* Bilingual injection (Phase D5): build inlines both content.html (RU) and
   content.en.html into #modal-about-body. In the PWA modal we hide both
   variants and show only the active language via a class on the container.
   Standalone /about/ stays single-language (RU master), so the modal-scoped
   selectors below do not affect it. */
#modal-about-body .about-lang-block { display: none; }
#modal-about-body.show-en .about-lang-block[lang="en"] { display: block; }
#modal-about-body.show-ru .about-lang-block[lang="ru"] { display: block; }

.about-photo {
  width: 160px;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(15, 118, 110, 0.35);
  margin: 0 0 20px;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-content h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.25;
  color: #0f766e;
}

.about-byline {
  margin: 0 0 24px;
  color: #475569;
  font-size: 1rem;
}

.about-quote {
  margin: 0 0 28px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(15, 118, 110, 0.3);
  background: rgba(15, 118, 110, 0.06);
  font-style: italic;
  color: #1e293b;
  font-size: 0.98rem;
}

.about-content h2 {
  margin: 28px 0 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 1.1rem;
  color: #0f172a;
}

.about-content p {
  margin: 0 0 1rem;
  color: #334155;
}

.about-content ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: #334155;
}
.about-content li { margin-bottom: 0.4rem; }

.about-content a { color: #0f766e; }

/* === Темизация в Teenology PWA (модалка) ==================================
 * Если контент рендерится внутри .pn-modal, перекрываем литералы цветов на
 * токены тем (neutral/dark) — иначе блок будет «выпадать» в тёмной теме.
 * На самой странице /about/ этих override'ов нет (там белая «стеклянная»
 * панель), и литеральные цвета выше остаются в силе.
 * ===========================================================================*/
.pn-modal .about-content,
.pn-modal .about-content p,
.pn-modal .about-content li {
  color: var(--text-main);
}
.pn-modal .about-content .about-byline {
  color: var(--text-muted);
}
.pn-modal .about-content h1 {
  color: var(--accent-color);
}
.pn-modal .about-content h2 {
  color: var(--text-main);
  border-top-color: var(--border-subtle);
}
.pn-modal .about-content .about-quote {
  color: var(--text-main);
  border-color: var(--accent-soft-strong);
  background: var(--accent-soft);
}
.pn-modal .about-content a {
  color: var(--accent-color);
}
.pn-modal .about-content .about-photo {
  border-color: var(--accent-soft-strong);
}