/* Страница статьи */
.article { max-width: 820px; margin: 0 auto; }
.article-title { margin-bottom: 14px; text-wrap: balance; }
.article-meta { color: var(--light, #6b6b6b); font-size: 14px; margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.article-cover { margin: 0 0 32px; }
.article-cover img { display: block; width: 100%; height: auto; border-radius: var(--border-radius, 12px); }

.article-body { font-size: 18px; line-height: 1.7; color: var(--dark, #1d1d1d); max-width: 72ch; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { font-size: 28px; line-height: 1.25; margin-top: 1.8em; text-wrap: balance; }
.article-body h3 { font-size: 22px; line-height: 1.3; margin-top: 1.5em; text-wrap: balance; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li + li { margin-top: .4em; }
.article-body blockquote { margin-left: 0; padding: 4px 0 4px 22px; border-left: 1px solid var(--dark, #1d1d1d); font-size: 1.08em; color: var(--dark-lighter, #3d3d3d); }
.article-body a { color: var(--link, #0072ee); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { text-decoration-thickness: 2px; }

.article-video, .article-audio { max-width: 72ch; margin-top: 40px; }
.article-video { position: relative; aspect-ratio: 16 / 9; background: #14171c; border-radius: var(--border-radius, 12px); overflow: hidden; }
.article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.article-video-play span { width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .92); position: relative; transition: transform .2s ease; }
.article-video-play span::after { content: ''; position: absolute; left: 31px; top: 24px; border-left: 22px solid #1d1d1d; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.article-video-play:hover span { transform: scale(1.06); }
.article-video-play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.article-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 16px; font-size: 13px; line-height: 1.4; color: #dfe4ea; background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent); pointer-events: none; }
.article-note a { color: #fff; pointer-events: auto; }
.article-audio-title { font-weight: 600; margin-bottom: 10px; }
.article-audio audio { width: 100%; }

@media (max-width: 640px) {
    .article-body { font-size: 17px; }
    .article-body h2 { font-size: 24px; }
    .article-note { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .article-video-play span { transition: none; } }
.article-lead { font-size: 21px; line-height: 1.55; color: var(--dark-lighter, #3d3d3d); max-width: 62ch; margin: 0 0 28px; }

/* ---- вставки в тексте: фото с подписью, галерея, видео ---- */
.article-body hr { border: 0; height: 1px; background: var(--dark, #1d1d1d); opacity: .15; margin: 2.2em 0; }
.article-body figure { margin: 2em 0; }
.article-body figure.a-img img { display: block; width: 100%; height: auto; border-radius: var(--border-radius, 12px); background: #eceff3; }
.article-body figure.a-img[data-wide="1"] { width: min(1100px, 100vw - 32px); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.article-body figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--light, #6b6b6b); max-width: 72ch; }
.article-body figure.a-img[data-wide="1"] figcaption { padding: 0 4px; }

.a-gallery { position: relative; margin: 2em 0; max-width: 100%; }
.a-gallery .g-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--border-radius, 12px); }
.a-gallery .g-track::-webkit-scrollbar { display: none; }
.a-gallery figure { flex: 0 0 100%; margin: 0 !important; scroll-snap-align: start; min-width: 0; }
.a-gallery:not([data-ready]) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; }
.a-gallery:not([data-ready]) figure { flex-basis: 85%; }
.a-gallery figcaption { padding: 10px 2px 0; }
/* единая рамка для всех кадров: фото разных пропорций (в том числе высокие) не растягивают галерею */
.article-body .a-gallery figure.a-img img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #eceff3; }
@media (max-width: 640px) { .article-body .a-gallery figure.a-img img { aspect-ratio: 4 / 3; } }

/* панель под лентой: полоса прокрутки и тонкие стрелки (только телефон) */
.g-ctrl { display: none; }
@media (max-width: 640px) {
    .a-gallery .g-track { gap: 12px; border-radius: 0; scroll-padding-left: 0; margin-right: calc(-1 * var(--pad, 16px)); padding-right: 16px; }
    .a-gallery figure { flex: 0 0 84%; }
    .article-body .a-gallery figure.a-img img { border-radius: var(--border-radius, 12px); }
    .a-gallery .g-nav, .a-gallery .g-counter { display: none; }
    .g-ctrl { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-right: 2px; }
    .g-bar { position: relative; flex: 1; height: 2px; background: rgba(29, 29, 29, .16); border-radius: 2px; cursor: pointer; }
    .g-bar::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
    .g-bar i { position: absolute; left: 0; top: -0.5px; bottom: -0.5px; width: 20%; background: var(--dark, #1d1d1d); border-radius: 2px; transition: width .18s ease; }
    .g-arr { flex: none; width: 36px; height: 32px; padding: 0; border: 0; background: none; color: var(--dark, #1d1d1d); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .2s; }
    .g-arr svg { width: 26px; height: 15px; }
    .g-arr-prev svg { transform: scaleX(-1); }
    .g-arr:disabled { opacity: .25; cursor: default; }
    .g-arr:focus-visible { outline: 2px solid var(--dark, #1d1d1d); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .g-bar i, .g-arr { transition: none; } }
.g-counter { position: absolute; top: 12px; right: 12px; padding: 3px 11px; border-radius: 14px; background: rgba(29, 29, 29, .72); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; pointer-events: none; }
.g-nav { position: absolute; top: calc(50% - 40px); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1d1d1d; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s, transform .2s; }
.g-nav svg { width: 22px; height: 22px; }
.g-prev { left: 12px; transform: scaleX(-1); }
.g-next { right: 12px; }
.g-nav:hover:not(:disabled) { transform: scale(1.06); }
.g-prev:hover:not(:disabled) { transform: scaleX(-1.06) scaleY(1.06); }
.g-nav:disabled { opacity: 0; pointer-events: none; }
.a-gallery:focus-visible { outline: 2px solid var(--link, #0072ee); outline-offset: 4px; border-radius: 12px; }

figure.a-video { margin: 2em 0; max-width: 72ch; }
.a-video-box { position: relative; aspect-ratio: 16 / 9; background: #14171c; border-radius: var(--border-radius, 12px); overflow: hidden; }
.a-video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.a-video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; }
.a-video-play span { width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .92); position: relative; transition: transform .2s ease; }
.a-video-play span::after { content: ''; position: absolute; left: 31px; top: 24px; border-left: 22px solid #1d1d1d; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.a-video-play em { font-style: normal; font-size: 13px; opacity: .8; }
.a-video-play:hover span { transform: scale(1.06); }
.a-video-play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.a-video-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 16px; font-size: 12.5px; line-height: 1.4; color: #dfe4ea; background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent); pointer-events: none; }
.a-video-note a { color: #fff; pointer-events: auto; }
figure.article-video-end { margin-top: 40px; }

.a-lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; color: #fff; }
.a-lb::backdrop { background: rgba(10, 12, 16, .88); }
.a-lb img { display: block; max-width: 96vw; max-height: 86vh; width: auto; height: auto; margin: 0 auto; border-radius: 8px; }
.a-lb p { margin: 10px 0 0; text-align: center; font-size: 14px; color: #dfe4ea; }
.a-lb-x { position: absolute; top: -44px; right: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .g-nav, .a-video-play span { transition: none; } }

/* ---- прямая речь ---- */
.article-body figure.a-quote { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; margin: 2.2em 0; padding: 28px 32px; background: var(--grey, #f3f3f3); border-radius: var(--border-radius, 12px); max-width: 72ch; }
.article-body figure.a-quote img { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; align-self: start; }
.article-body figure.a-quote blockquote { grid-column: 2; margin: 0; padding: 0; border: 0; font-size: 1.28em; line-height: 1.5; font-weight: 500; color: var(--dark, #1d1d1d); }
.article-body figure.a-quote blockquote::before { content: '«'; }
.article-body figure.a-quote blockquote::after { content: '»'; }
.article-body figure.a-quote figcaption { grid-column: 2; margin: 4px 0 0; font-size: 14px; color: var(--light, #6b6b6b); max-width: none; }
.article-body figure.a-quote > blockquote:only-child, .article-body figure.a-quote:not(:has(img)) { grid-template-columns: 1fr; }
.article-body figure.a-quote:not(:has(img)) blockquote, .article-body figure.a-quote:not(:has(img)) figcaption { grid-column: 1; }
@media (max-width: 640px) { .article-body figure.a-quote { padding: 20px; grid-template-columns: 1fr; } .article-body figure.a-quote img, .article-body figure.a-quote blockquote, .article-body figure.a-quote figcaption { grid-column: 1; grid-row: auto; } }

.article-video-file { max-width: 72ch; margin: 40px 0 0; }
.article-video-file video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #14171c; border-radius: var(--border-radius, 12px); }