/* =========================================================
   Страница "Новости — детальная" (Figma node 15:17844 / 15:19255 "1442"→390)
   ========================================================= */

.detail-layout{ align-items:flex-start; gap:40px; }
.detail-content{ flex:1; min-width:0; }

/* Заголовок — во всю ширину над обеими колонками (Figma: Inter Bold 42px, line-height 1.4, #333) */
.detail-content h1{
  font-family:'Inter',Arial,sans-serif;
  font-weight:700; font-size:42px; line-height:1.4; color:#333;
  margin-bottom:40px;
}

/* Колонки статьи и «похожих новостей» начинаются на одном уровне — с фотографии */
.detail-columns{ display:flex; align-items:flex-start; gap:40px; }

/* Единый вертикальный ритм статьи — 30px между всеми блоками (Figma node 15:18225) */
.detail-article{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:30px;
}

/* ---------- Главное изображение (Figma node 15:18226) ---------- */
.detail-hero{ display:flex; flex-direction:column; gap:8px; margin:0; }
.detail-hero__open{ display:block; width:100%; padding:0; border:none; background:none; cursor:zoom-in; }
.detail-hero img{
  display:block; width:100%; aspect-ratio:1020/672; object-fit:cover;
  border-radius:20px;
}
.detail-hero figcaption{
  font-size:12px; font-weight:300; font-style:italic; line-height:20px;
  color:rgba(51,51,51,.6);
}

/* ---------- Метаданные: категория / дата / просмотры ---------- */
.detail-meta{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.detail-meta time{ font-size:13px; line-height:20px; color:#333; }
.detail-meta__views{ display:flex; align-items:center; gap:5px; font-size:13px; line-height:20px; color:#333; }
.detail-meta__views svg{ width:11px; height:8px; color:#333; flex-shrink:0; }

/* ---------- Вводный абзац и основной текст статьи ---------- */
.detail-lead{ font-family:'Inter',Arial,sans-serif; font-size:16px; line-height:1.5; color:#333; margin:0; }
.detail-body{ font-family:'Inter',Arial,sans-serif; font-size:16px; line-height:1.5; color:#333; }
.detail-body p{ margin:0 0 14px; }
.detail-body p:last-child{ margin-bottom:0; }

/* ---------- Цитата (Figma node 15:18260) ---------- */
.detail-quote{
  display:flex; align-items:flex-start; gap:40px;
  background:#fff;
  border-left:5px solid #1666B0;
  border-radius:20px;
  padding:30px 40px; margin:0;
}
.detail-quote p{
  flex:1; min-width:0;
  font-size:22px; font-weight:400; line-height:1.5; color:#333; margin:0;
  white-space:pre-wrap;
}
.detail-quote__mark{ flex-shrink:0; width:40px; height:31px; }
.detail-quote__mark svg{ width:100%; height:100%; display:block; }

/* ---------- Блок «Справка» (Figma node 15:18264) ---------- */
.detail-infobox{
  background:#E7F1FA; border-radius:20px; padding:40px;
  display:flex; flex-direction:column; gap:24px; margin:0;
}
.detail-infobox h2{
  font-family:'Inter',Arial,sans-serif; font-weight:700; font-size:32px; line-height:1.4; color:#0057A8;
  margin:0;
}
.detail-infobox p{ font-size:22px; line-height:1.5; color:#333; margin:0; white-space:pre-wrap; }

/* ---------- Галерея (Figma node 15:18268) ---------- */
.detail-gallery{
  position:relative;
}
.detail-gallery__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid rgba(51,51,51,.1);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
.detail-gallery__nav.prev{ left:20px; }
.detail-gallery__nav.next{ right:20px; }
.detail-gallery__nav:hover{ background:#fafafa; border-color:#1666b0; }
.detail-gallery__nav svg{ width:7px; height:12px; }
.detail-gallery__track{ display:flex; gap:24px; width:100%; }
.detail-gallery__item{
  position:relative; flex:1; min-width:0; aspect-ratio:314.67/220.47;
  border-radius:20px; overflow:hidden; border:none; padding:0; background:none;
}
.detail-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.detail-gallery__item:hover img{ transform:scale(1.05); }
.detail-gallery__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.detail-gallery__play svg{ width:42px; height:42px; }

/* ---------- Скачивание PDF (Figma node 15:18287) ---------- */
.detail-pdf{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:#fff; border:1px solid #e5e5e5; border-radius:20px;
  padding:25px;
  transition:border-color .2s, box-shadow .2s;
}
.detail-pdf:hover{ border-color:#1666b0; box-shadow:0 8px 20px rgba(0,0,0,.06); }
.detail-pdf__main{ display:flex; align-items:flex-start; gap:18px; flex:1; min-width:0; }
.detail-pdf__icon{ flex-shrink:0; width:39px; height:40px; }
.detail-pdf__icon img{ display:block; width:100%; height:100%; }
.detail-pdf__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.detail-pdf__title{ display:block; font-size:16px; line-height:1.5; color:#333; }
.detail-pdf__size{ display:block; font-size:12px; line-height:20px; color:#999; }
.detail-pdf__download{ flex-shrink:0; width:11px; height:16px; display:flex; align-items:center; justify-content:center; }
.detail-pdf__download img{ width:100%; height:100%; }

.detail-source{ font-size:12px; font-weight:300; line-height:20px; color:rgba(51,51,51,.6); margin:0; }

/* ---------- Назад / Поделиться (Figma node 15:18449) ---------- */
.detail-footer-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.detail-back{
  display:flex; align-items:center; gap:10px;
  font-size:13px; line-height:21px; color:#333; transition:color .2s;
}
.detail-back svg{ width:16px; height:12px; }
.detail-back:hover{ color:#1666b0; }
.detail-share{ display:flex; align-items:center; gap:14px; font-size:15px; font-weight:500; color:#555; }
.share-btn{ width:28px; height:28px; flex-shrink:0; display:flex; transition:opacity .2s; }
.share-btn img{ width:100%; height:100%; display:block; }
.share-btn:hover{ opacity:.8; }

/* ---------- Похожие новости ---------- */
.detail-related{
  width:350px; flex-shrink:0;
  display:flex; flex-direction:column; gap:20px;
}
.detail-related__card{
  display:flex; flex-direction:column; gap:10px;
  padding-bottom:20px; border-bottom:1px solid #e5e5e5;
}
.detail-related__card:last-child{ border-bottom:none; padding-bottom:0; }
.detail-related__media{ display:block; border-radius:10px; overflow:hidden; aspect-ratio:290/180; }
.detail-related__media img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.detail-related__card:hover .detail-related__media img{ transform:scale(1.05); }
.detail-related .news-card__tag{ align-self:flex-start; }
.detail-related__title{ font-size:14px; line-height:1.5; color:#333; transition:color .2s; }
.detail-related__card:hover .detail-related__title{ color:#cd1f26; }
.detail-related__card time{ font-size:12px; color:rgba(51,51,51,.5); }

/* ---------- Брейкпоинты ---------- */
/* Колонка «Читайте также» есть только в макете 1920 (≥1444).
   В макетах «1440» (node 15:23859) и «1441» (node 15:18883) она скрыта. */
@media (max-width: 1443px){
  .detail-related{ display:none; }
}
@media (max-width: 1024px){
  .detail-content h1{ font-size:28px; }
}
@media (max-width: 700px){
  .detail-content h1{ font-size:24px; }

  /* Цитата на мобильном: иконка над текстом (Figma node 15:19422) */
  .detail-quote{ flex-direction:column; padding:20px; gap:20px; }
  .detail-quote__mark{ order:-1; }
  .detail-quote p{ font-size:18px; }

  .detail-infobox{ padding:20px; gap:24px; }
  .detail-infobox h2{ font-weight:600; font-size:20px; }
  .detail-infobox p{ font-size:18px; }

  /* Галерея на мобильном — сетка 2×2, радиус 10px (Figma node 15:19430) */
  .detail-gallery{ gap:14px; }
  .detail-gallery__nav{ display:none; }
  .detail-gallery__track{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .detail-gallery__item{ aspect-ratio:324/227; border-radius:10px; }
  .detail-gallery__play svg{ width:25px; height:25px; }

  /* Назад / Поделиться — в столбик, gap 35px (Figma node 15:19614) */
  .detail-footer-row{ flex-direction:column; align-items:flex-start; gap:35px; }
}

/* =========================================================
   Просмотр фото на весь экран (Figma node 15:22509 «Просмотр фото»)
   ========================================================= */
.detail-viewer{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6.5px); -webkit-backdrop-filter:blur(6.5px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.detail-viewer.open{ opacity:1; visibility:visible; }
.detail-viewer__img{
  max-width:min(1200px, 90vw); max-height:85vh; width:auto; height:auto;
  object-fit:cover; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.4);
  transition:max-width .25s, max-height .25s;
}
.detail-viewer__img.is-zoomed{ max-width:96vw; max-height:96vh; }
.detail-viewer__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(30,30,30,.6); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.detail-viewer__nav:hover{ background:rgba(30,30,30,.85); }
.detail-viewer__nav.prev{ left:24px; }
.detail-viewer__nav.next{ right:24px; }
.detail-viewer__nav.prev svg{ transform:scaleX(-1); }
.detail-viewer__nav svg{ width:24px; height:24px; }
.detail-viewer__toolbar{
  position:absolute; top:0; right:0; display:flex;
}
.detail-viewer__tool{
  width:44px; height:44px; background:rgba(30,30,30,.6); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.detail-viewer__tool:hover{ background:rgba(30,30,30,.85); }
.detail-viewer__tool svg{ width:24px; height:24px; }