/* Страница ДТП: раскладка и стиль эталона — старый dtp-stat.ru
   (templates/dtp/dtp.html + style-dtp-card.css) и макет «1 detail card». */
:root { --navy:#18334a; --navy-soft:#4e6e87; --muted:#5f7482; --pale:#f4f8fa; --line:#d6e0e6; --yellow:#ffb81f; --red:#ff001a; }
* { box-sizing:border-box; } body { margin:0; color:var(--navy); background:#fff; font:16px/24px Roboto,Arial,sans-serif; } a { color:inherit; text-decoration:none; } button { cursor:pointer; font:inherit; }
.loading, .error { display:grid; min-height:60vh; place-items:center; padding:24px; color:var(--muted); }

/* Карта и плавающие кнопки: ряд кнопок перекрывает нижний край карты (как на
   старом сайте: .map-buttons { margin-top:-74px }), схема — верхний край.
   z-index:0 делает map-stage стековым контекстом: тайловые панели Яндекса/Leaflet
   со своими z-index не вылезают наружу, и карточка схемы (z-index:1 ниже) ложится
   поверх карты, а не под неё */
.map-stage { position:relative; z-index:0; }
.detail-map { height:280px; background:var(--pale); }
.detail-map [class*="ground-pane"] ymaps:first-child { filter:grayscale(.8); }
.detail-map [class*="route-panel"], .detail-map [class*="route-button"], .detail-map [class*="taxi"], .detail-map [class*="gotoymaps"] { display:none !important; }
.leaflet-tile-pane { filter:grayscale(.8); }
.map-tools { position:absolute; left:0; right:0; bottom:40px; z-index:1001; display:flex; justify-content:space-between; gap:10px; padding:0 24px; pointer-events:none; }
.map-tools .pill { pointer-events:auto; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:20px; color:var(--navy); background:#fff; box-shadow:0 3px 10px #18334a30; font-size:18px; font-weight:500; line-height:24px; border:0; }
.map-tools .pill-group { pointer-events:auto; display:flex; padding:3px; border-radius:20px; background:#fff; box-shadow:0 3px 10px #18334a30; }
.map-tools .pill-group button { padding:7px 14px; border:0; border-radius:16px; color:var(--navy); background:#fff; font-size:18px; font-weight:500; line-height:24px; }
.map-tools .pill-group button.active { color:#fff; background:var(--navy); }
.map-tools .pill-group button:disabled { color:#9cabb5; }

.content { width:min(1120px, calc(100% - 40px)); margin:0 auto; padding:0 0 58px; }
.head-grid { display:grid; grid-template-columns:264px minmax(0, 1fr); gap:34px; align-items:start; }
.head-grid.no-scheme { grid-template-columns:minmax(0, 1fr); }
/* Схема ДТП — квадратная карточка 240×240 внахлёст над картой (старый сайт:
   .scheme-wrap { width:240px; height:240px; margin:-80px auto 0; border-radius:8px }) */
.scheme { position:relative; z-index:1; margin:-80px auto 0; padding:5px; width:240px; height:240px; border-radius:8px; background:#fff; box-shadow:0 0 2.4px rgba(9,42,70,.04), 0 0 6.8px rgba(9,42,70,.06), 0 0 16.3px rgba(9,42,70,.07), 0 0 54px rgba(9,42,70,.11); }
.scheme img { display:block; width:100%; height:100%; object-fit:contain; border-radius:6px; }
.scheme figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.meta { margin:0; padding-top:16px; color:var(--navy); font-size:16px; }
.meta i { margin:0 10px; color:var(--line); font-style:normal; }
/* h1 30px bold с line-height 45px — ровно как .dtp h1 старого сайта (style.css + style-dtp-card.css) */
.content h1 { margin:10px 0 17px; font-size:30px; line-height:45px; }
/* Индикаторы-плитки: иконка + подпись (полупрозрачный navy) + жирное значение;
   «Пострадали» #FFB81F, «Погибли» #FF001A — как на старом сайте */
.counters { display:flex; flex-wrap:wrap; gap:18px 44px; }
.counters > div { display:flex; align-items:center; gap:10px; }
.counters img { width:26px; height:26px; object-fit:contain; }
.counters span { color:rgba(24,51,74,.5); font-size:16px; line-height:1.3; }
/* значение не крупнее подписи — на старом сайте .indicator p.value = 16px bold */
.counters strong { display:block; font-size:16px; line-height:1.3; }
.counters .injured strong { color:var(--yellow); }
.counters .dead strong { color:var(--red); }
/* Теги — секция на всю ширину ПОД шапкой со схемой (на старом сайте section.tags
   идёт после .container с шапкой), три группы-параграфа (.tags p + .tag-btn):
   условия (дорога/погода/свет), окрестность, категория. Свобода раскладки — как
   у .tag-btn: каждый чип несёт вертикальные поля 4px, между строками и группами
   получается ровно 8px */
.tags { padding:6px 0 12px; margin-top:20px; }
.tags p { display:flex; flex-wrap:wrap; margin:0; }
.tags span { margin:4px 8px 4px 0; padding:5px 8px; border-radius:4px; color:var(--navy); background:var(--pale); font-size:14px; font-weight:500; line-height:20px; letter-spacing:.15px; }

/* Новости по теме — три карточки блога внизу (старый .news-section/.news-card) */
.news { margin-top:50px; }
.news h2 { margin:0 0 21px; font-size:26px; line-height:32px; }
.news-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
.news-card { display:block; color:inherit; }
.news-card:hover { color:#0088cc; }
.news-card-image { display:block; position:relative; padding-top:66.6667%; border-radius:12px; overflow:hidden; background:rgba(24,51,74,.5); }
.news-card-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.news-card h3 { margin:12px 0; font-size:20px; line-height:28px; }

/* Участники: карточки переносятся на новые строки; погибшие/пострадавшие подсвечены */
.participants { margin-top:14px; }
.participants h2 { margin:0 0 16px; font-size:26px; line-height:32px; }
.person-group h3 { margin:10px 0; font-size:20px; line-height:28px; }
.person-cards { display:flex; flex-wrap:wrap; gap:12px; }
.person { flex:none; width:300px; padding:12px 16px; border:1px solid #ebedf0; border-radius:20px; background:#fff; }
.person-head { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.person-icon { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:44%; background:rgba(24,51,74,.5); }
.person-icon img { width:20px; height:20px; object-fit:contain; }
.person-head h4 { margin:0; font-size:18px; line-height:24px; letter-spacing:.15px; }
.person-head p { margin:0; font-size:14px; line-height:20px; }
.person-state { margin:0; padding:5px 8px; border-radius:4px; background:var(--pale); font-size:14px; font-weight:500; line-height:20px; letter-spacing:.15px; }
.violations { margin:8px 0 0; padding:5px 8px; border-radius:4px; background:var(--pale); font-size:14px; font-weight:500; line-height:20px; letter-spacing:.15px; }
.violations li { display:flex; align-items:flex-start; gap:8px; padding-left:34px; background:url("../assets/icons/attention.svg") no-repeat left 2px center / 22px auto; list-style:none; }
.violations li + li { margin-top:6px; }
.person.dead .person-icon { background:var(--red); }
.person.dead .person-state { color:var(--red); background:rgba(227,26,28,.1); }
.person.injured .person-icon { background:var(--yellow); }
.person.injured .person-state { color:var(--yellow); background:rgba(255,184,31,.1); }

/* Бейдж «Официальные данные ГИБДД»: лого из медиатеки WP, лого и бейдж — ссылки
   на gibdd.ru (DTP-33) */
.official { display:flex; justify-content:center; margin:34px 0 0; }
.official a { display:inline-flex; align-items:center; gap:12px; padding:12px 22px 12px 16px; border:1px solid #ebeef0; border-radius:8px; font-size:16px; font-weight:500; line-height:24px; letter-spacing:.15px; }
.official a:hover { opacity:.75; }
.official img { width:36px; height:32px; object-fit:contain; }

/* ---------- Подвал (статичная копия футера WP-темы dtpstat-child) ---------- */
.site-footer { margin-top:60px; background:var(--pale); padding:40px 0 32px; font-size:16px; line-height:24px; }
.footer-container { max-width:1140px; margin:0 auto; padding:0 20px; }
.fund-strip { display:flex; align-items:center; gap:30px; }
.fund-main { flex:1 1 auto; }
/* прогресс-бар сбора: трек #d1dee4, заливка радужным градиентом;
   ширина = 15546/50000, градиент растянут в 1/долю ширины (как dtp_fund_css) */
.fund-bar { height:20px; border-radius:10px; background:#d1dee4; overflow:hidden; }
.fund-bar i { display:block; height:100%; width:31.09%; border-radius:10px; background:linear-gradient(90deg, #ff001a 0%, #ff7f24 26%, #ffb81f 53%, #17aa14 100%); background-size:321.54% 100%; }
.fund-row { display:flex; align-items:baseline; justify-content:space-between; margin-top:4px; font-size:14px; }
.fund-raised { font-weight:500; }
.fund-days { color:var(--navy-soft); }
.fund-btn { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:40px; padding:8px 20px; border-radius:10px; color:#fff; background:var(--navy); font-weight:500; }
.fund-btn:hover { background:var(--navy-soft); }
.site-footer hr { border:0; border-top:1px solid var(--line); margin:40px 0; }
.footer-cols { display:grid; grid-template-columns:380px 1fr 1fr; gap:48px; }
.footer-col h4 { margin:0 0 12px; font-size:16px; line-height:24px; font-weight:700; }
.footer-col p { margin:0; }
.footer-col--about p { line-height:22px; }
.footer-logo img { display:block; width:170px; height:24px; margin-bottom:20px; }
.footer-contact { display:flex; align-items:center; gap:5px; margin-bottom:12px !important; }
.footer-contact img { width:12px; height:auto; }
.footer-menu { list-style:none; margin:0; padding:0; }
.footer-menu li + li { margin-top:12px; }
.footer-menu a:hover { text-decoration:underline; }
.footer-bottom { display:flex; align-items:center; gap:15px; }
.footer-cc { display:flex; gap:8px; }
.footer-cc img { width:32px; height:32px; }
.footer-copy { max-width:260px; font-size:14px; line-height:20px; }
.footer-socials { display:flex; gap:15px; margin-left:auto; }
.footer-socials a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(24,51,74,.1); }
.footer-socials a:hover { background:rgba(24,51,74,.18); }
.footer-socials img { width:20px; height:20px; }
.footer-socials .social-black img { filter:brightness(0); }

@media (max-width:1024px) {
  .map-tools { flex-wrap:wrap; padding:0 12px; }
  .news-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:767px) {
  .news-grid { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .footer-cols { grid-template-columns:1fr; gap:32px; }
  .fund-strip { flex-direction:column; align-items:stretch; }
  .footer-bottom { flex-wrap:wrap; }
  .footer-socials { margin-left:0; width:100%; justify-content:flex-start; }
  /* на узких экранах схема встаёт в поток (старый сайт: margin:10px auto 0) */
  .scheme { margin:10px auto 0; }
  .head-grid, .head-grid.no-scheme { grid-template-columns:1fr; gap:20px; }
}
@media (max-width:800px) {
  .counters { gap:14px 26px; }
}
@media (max-width:768px) {
  .person { width:100%; }
  .map-tools { left:12px; right:12px; padding:0; }
}
/* «Показать ДТП рядом» — в колонке текста, правее свисающей карточки схемы
   (как на старом сайте: кнопки в col-md рядом с col-auto схемы); иначе карточка,
   теперь лежащая поверх карты, перекрывает кнопку. 298px = 264px колонки схемы + 34px gap */
@media (min-width:861px) {
  .map-tools { padding-left: calc(max((100% - 1120px) / 2, 20px) + 298px); }
}