/* ИПКСЗ — публичный сайт: БАЗОВЫЙ СЛОЙ (токены :root, reset, типографика, .container/.section, .ic, .ph/.media--*, семейство .btn, .back-link, .page-head, .pager, карточки).
   Порядок подключения см. layouts/public.php. Правки вёрстки — в профильных модулях, не здесь. */

/* =========================================================
   ИПКСЗ Хабаровск — макет нового сайта
   Главная / Новости / Детальная новости
   ========================================================= */

:root {
  --c-blue: #0d4573;
  --c-blue-600: #15598f;
  --c-blue-100: #e8f1f9;
  --c-blue-50: #f3f8fc;
  --c-aqua: #1e7f8c;
  --c-green: #4a9a8f;
  --c-violet: #6d5ca0;
  --c-rose: #b26a8e;
  --c-sand: #b98a5a;
  --c-red: #c0392b;

  --c-dark: #15293d;
  --c-text: #2c3e50;
  /* Вторичный текст: #5b6d80 даёт контраст ≥4.5:1 и на белом, и на светлом фоне
     (--c-blue-50/#f3f8fc) — требование ГОСТ Р 52872 / WCAG AA для мелкого текста. */
  --c-muted: #5b6d80;

  --c-border: #e3ebf2;
  --c-white: #fff;

  --font-main: "Roboto", "Segoe UI", Arial, sans-serif;
  --font-head: "Roboto", "Segoe UI", Arial, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(13, 69, 115, .10);
  --shadow-lg: 0 16px 40px rgba(13, 69, 115, .14);

  --container: 1600px;

  /* Семантические токены — основа честных тем «Версия для слабовидящих».
     По умолчанию совпадают с обычной темой, поэтому вёрстка не меняется. */
  --c-surface: var(--c-white);
  --c-surface-alt: #f2f6fa;
  --c-soft: #f2f6fa;
  --c-link: var(--c-blue);
  --c-link-hover: var(--c-blue-600);
  --c-focus: var(--c-blue-600);

  /* Главное меню: тёмная полоса (акцент) + мягкое свечение от курсора.
     Токены лежат здесь, чтобы темы «Версия для слабовидящих» переопределяли меню
     честно (своими значениями), а не боролись с ними специфичностью. */
  --c-nav-bg: linear-gradient(180deg, #104f83 0%, #0b3f6a 55%, #08334f 100%);
  --c-nav-fg: rgba(255, 255, 255, .93);
  --c-nav-fg-hover: #fff;
  --c-nav-accent: #8ed3d8;
  --c-nav-line: rgba(255, 255, 255, .14);
  --c-nav-glow: rgba(45, 160, 170, .58);
  --c-nav-glow-2: rgba(122, 104, 178, .36);
  --c-nav-glow-3: rgba(21, 89, 143, .22);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Место под полосу прокрутки зарезервировано всегда: при её появлении/исчезновении
   клиентская ширина не меняется и вёрстка не «прыгает» (Windows/классические скроллбары).
   Заодно это убирает сдвиг при открытии модального окна (оно скрывает прокрутку). */
html { scroll-behavior: smooth; scrollbar-gutter: stable; font-size: 100%; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-text-size-adjust: 100%;
}

/* Элементы форм НЕ наследуют шрифт по умолчанию и рисуются браузерным Arial
   (заметно на кнопках-крестиках «×»). Наследование от body даёт Roboto.
   Правило односклассовое по специфичности — конкретные стили полей его перебивают. */
button, input, optgroup, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--c-dark);
  line-height: 1.22;
  margin: 0 0 .55em;
}

p { margin: 0 0 1em; }

a {
  color: var(--c-link);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--c-link-hover); text-decoration: underline; }

/* Видимый фокус с клавиатуры (ГОСТ Р 52872 / WCAG 2.4.7).
   Мышиный клик фокус-кольцом не сопровождается (:focus-visible). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* «Перейти к содержимому» — первая ссылка в документе для клавиатуры/скринридеров */
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 100000;
  background: var(--c-blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: top .15s ease;
}
.skip-link:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

ul, ol { padding-left: 1.3em; margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

.section { padding: 56px 0; }
.section--compact { padding: 40px 0; }
.section--anns { padding-top: 15px; padding-bottom: 10px; }
.section--soft { background: var(--c-blue-50); }

.ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Плейсхолдеры изображений */
.ph {
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,0)), var(--c-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.75);
  font-family: var(--font-head);
  font-weight: 600;
}
.ph::after { content: "изображение"; }
/* Заглушка с датой (новости без картинки): фон-картинка + дата по центру */
.ph[data-ph]::after { content: attr(data-ph); }
.ph[data-ph] {
  background-image: url('../img/news-placeholder.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--c-blue-600, #15598f);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255,255,255,.95);
}
.media--blue   { background-color: var(--c-blue-600); }
.media--aqua   { background-color: var(--c-aqua); }
.media--green  { background-color: var(--c-green); }
.media--violet { background-color: var(--c-violet); }
.media--rose   { background-color: var(--c-rose); }
.media--sand   { background-color: var(--c-sand); }