/* =====================================================================
   Детальная новость — новый дизайн.
   Переменные --red, --black, --border, --bg, --muted — из css/style.css шаблона.
   ВАЖНО: style.min.css — копия этого файла (Bitrix берёт .min, если включена
   минификация). Правите style.css — копируйте и в style.min.css.
   ===================================================================== */
.nd {
    max-width: 880px;
    margin: 32px auto 0;
}

/* Название новости уже стоит в <h1> статьи — чёрную плашку-заголовок из шапки на этой странице прячем */
body:has(.nd) .title { display: none; }

.nd-back {
    display: inline-block;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted, #888);
    text-decoration: none;
    margin-bottom: 28px;
    transition: color .15s;
}
.nd-back:hover { color: var(--red, #F93F33); }

.nd-head { margin-bottom: 28px; }
.nd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 16px;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.nd-tag { background: var(--black, #000); color: var(--white, #fff); padding: 5px 12px; }
.nd-date { color: var(--red, #F93F33); }
.nd-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: var(--black, #000);
    margin: 0;
    padding-left: 18px;
    border-left: 4px solid var(--red, #F93F33);
}

/* ── Медиа ── */
.nd-media { margin: 0 0 32px; }
/* Главное фото: не во всю высоту экрана — максимум 440px (на телефоне 260px), целиком, без обрезки.
   Если фото уже/ниже рамки — по бокам серые поля. */
.nd-img { background: var(--bg, #F2F2F2); text-align: center; }
.nd-img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 440px; object-fit: contain; margin: 0 auto; }

/* ── Текст ── */
.nd-body { font-size: 17px; line-height: 1.75; color: var(--text, #111); overflow-wrap: anywhere; }
.nd-body p, .nd-body li { font-size: 17px; line-height: 1.75; }
.nd-body p { margin: 0 0 1.1em; }
.nd-body h2, .nd-body h3, .nd-body h4 { font-family: 'Jost', sans-serif; font-weight: 700; line-height: 1.25; margin: 1.6em 0 .6em; }
.nd-body h2 { font-size: 26px; } .nd-body h3 { font-size: 22px; } .nd-body h4 { font-size: 19px; }
.nd-body a { color: var(--red, #F93F33); text-decoration: underline; text-underline-offset: 3px; }
.nd-body a:hover { color: var(--black, #000); }
.nd-body img { max-width: 100%; height: auto !important; }
.nd-body iframe { max-width: 100%; }
.nd-body table { width: 100%; max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; }
.nd-body td, .nd-body th { border: 1px solid var(--border, #DFDFDF); padding: 8px 12px; }
.nd-body blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--red, #F93F33); font-style: italic; color: #444; }
.nd-body ul, .nd-body ol { padding-left: 1.3em; margin-bottom: 1.1em; }

.nd-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border, #DFDFDF); }
.nd-back--bottom { margin-bottom: 0; }

/* ── Слайдер картинок (JCNewsSlider из script.js — классы не менять) ── */
.news-detail-slider { position: relative; overflow: hidden; padding-bottom: 56.25%; width: 100%; height: 0; background: var(--black, #000); }
.news-detail-slider-container { position: absolute; top: 0; bottom: 0; left: 0; }
.news-detail-slider-slide { z-index: 100; float: left; height: 100%; display: flex; align-items: center; justify-content: center; }
.news-detail-slider-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.news-detail-slider-arrow-container-left,
.news-detail-slider-arrow-container-right { position: absolute; top: 0; bottom: 0; width: 15%; cursor: pointer; z-index: 110; }
.news-detail-slider-arrow-container-left { left: 0; }
.news-detail-slider-arrow-container-right { right: 0; }
.news-detail-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); color: #fff; font-size: 26px; opacity: .8; transition: background .15s, opacity .15s;
}
.news-detail-slider-arrow-container-left .news-detail-slider-arrow { left: 16px; }
.news-detail-slider-arrow-container-right .news-detail-slider-arrow { right: 16px; }
.news-detail-slider-arrow-container-left:hover .news-detail-slider-arrow,
.news-detail-slider-arrow-container-right:hover .news-detail-slider-arrow { background: var(--red, #F93F33); opacity: 1; }
.news-detail-slider-control { position: absolute; bottom: 14px; z-index: 110; margin: 0; padding: 0; width: 100%; text-align: center; list-style: none; }
.news-detail-slider-control li { display: inline-block; margin: 0 3px; width: 28px; height: 3px; background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s; }
.news-detail-slider-control li:hover,
.news-detail-slider-control li.current { background: var(--red, #F93F33); }

/* ── «Другие новости» (выводится из components/bitrix/news/news/detail.php) ── */
.nd-related { max-width: 1100px; margin: 64px auto 0; }
.nd-related-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.nd-related-title { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--black, #000); }
.nd-related-more { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red, #F93F33); text-decoration: none; }
.nd-related-more:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .nd { margin-top: 20px; }
    .nd-title { padding-left: 12px; border-left-width: 3px; }
    .nd-body, .nd-body p, .nd-body li { font-size: 16px; }
    .nd-img img { max-height: 260px; }
    .nd-media { margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5); margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5); }
}