/* Блог (30.10.2026): список статей, статья, «Читайте также», видео по ссылке. Подключается только на /blog/, статьях и страницах с видео. */

/* Первый экран статьи */
.page-hero--article .byline { margin: .9rem 0 0; font-size: .9rem; color: var(--muted, #5B6170); }
.page-hero--article .byline span { font-weight: 700; color: var(--ink); }

/* Карточки статей (30.10.2026): картинка статьи во весь фон, снизу затемнение, текст белым */
.art-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.art-card { position: relative; border-radius: 22px; overflow: hidden; background: #15171C; box-shadow: 0 10px 28px rgba(21, 23, 28, .14); transition: transform .25s, box-shadow .25s; }
.art-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(21, 23, 28, .22); }
.art-card:focus-within { outline: 3px solid var(--cyan, #00A0E3); outline-offset: 3px; }
.art-link { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; height: 100%; color: #fff; text-decoration: none; outline: 0; }
.art-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s ease; }
.art-card:hover .art-bg { transform: scale(1.05); }
.art-bg { z-index: 0; }
.art-link::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 16, 20, 0) 30%, rgba(15, 16, 20, .72) 52%, rgba(15, 16, 20, .94) 70%, rgba(15, 16, 20, .97) 100%); }
.art-link::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--c1, #E5007E), var(--c2, #FF5FB0)); }
.art-t1 { --c1: #1E6BFF; --c2: #00A0E3; } .art-t2 { --c1: #F5A400; --c2: #FF7A00; } .art-t3 { --c1: #8A2BE2; --c2: #E5007E; } .art-t4 { --c1: #00B3A6; --c2: #00A0E3; }
.art-body { position: relative; z-index: 2; padding: 1.4rem 1.4rem 1.3rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.art-card .h3 { font-size: 1.15rem; line-height: 1.28; margin: .25rem 0 .45rem; color: #fff; }
.art-card p { margin: 0; font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.art-date { display: block; font-size: .78rem; color: rgba(255, 255, 255, .75); }
.art-more { display: inline-block; margin-top: .85rem; font-weight: 700; font-size: .9rem; color: #fff; padding: .45rem .9rem; border-radius: 999px; background: var(--c1, #E5007E); text-shadow: none; transition: transform .25s; }
.art-card:hover .art-more { transform: translateX(4px); }
.art-card--logo .art-bg { object-fit: contain; padding: 2rem 2rem 9rem; background: radial-gradient(circle at 30% 20%, rgba(229, 0, 126, .6), transparent 60%), radial-gradient(circle at 80% 40%, rgba(0, 160, 227, .55), transparent 60%), #15171C; }
.art-all { margin: 1.5rem 0 0; text-align: center; }
@media (max-width: 1000px) { .art-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .art-list { grid-template-columns: minmax(0, 1fr); } .art-link { min-height: 360px; } }
@media (prefers-reduced-motion: reduce) { .art-card, .art-bg, .art-more { transition: none; } .art-card:hover .art-bg { transform: none; } }

.prose h2 + p, .prose h3 + p { margin-top: .4rem; }
.prose ol li, .prose ul li { margin-bottom: .45rem; }
.prose .tip { padding: .9rem 1.1rem; border-radius: 14px; background: #FFF4CC; border-left: 4px solid var(--yellow, #F5C800); }

/* Видео: обложка-кнопка, плеер грузится только по нажатию */
.vid { max-width: 900px; position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #15171C;
  background-image: radial-gradient(circle at 20% 20%, rgba(229, 0, 126, .55), transparent 55%), radial-gradient(circle at 80% 80%, rgba(0, 160, 227, .5), transparent 55%);
  box-shadow: 0 18px 40px rgba(21, 23, 28, .18); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-btn { position: absolute; inset: 0; width: 100%; display: grid; place-content: center; justify-items: center; gap: .7rem; border: 0; background: none; color: #fff; cursor: pointer; font: inherit; }
.vid-play { width: 84px; height: 84px; border-radius: 50%; background: var(--accent, #E5007E); box-shadow: 0 0 0 10px rgba(255, 255, 255, .15); position: relative; transition: transform .25s; }
.vid-play::after { content: ""; position: absolute; left: 34px; top: 26px; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.vid-btn:hover .vid-play, .vid-btn:focus-visible .vid-play { transform: scale(1.08); }
.vid-btn:focus-visible { outline: 3px solid var(--cyan, #00A0E3); outline-offset: -6px; }
.vid-cap { font-family: Unbounded, sans-serif; font-weight: 700; font-size: 1.15rem; }
.vid-src { font-size: .8rem; opacity: .75; }
.vid--empty { display: grid; place-content: center; justify-items: center; gap: .9rem; color: #fff; text-align: center; padding: 1.5rem; }
.vid--empty .vid-play { opacity: .55; }
.vid--empty p { margin: 0; max-width: 34ch; font-weight: 600; }
@media (max-width: 640px) { .vid { border-radius: 16px; } .vid-play { width: 64px; height: 64px; } .vid-play::after { left: 26px; top: 19px; border-left-width: 20px; border-top-width: 13px; border-bottom-width: 13px; } }

/* Шаги инструкции: 4 и 5 шагов — в один ряд на широком экране (только на страницах блога) */
@media (min-width: 1101px) {
  .steps--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.6rem; }
  .steps--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem 1.4rem; }
  .steps--n4 li::after, .steps--n5 li::after { content: none !important; }
  .steps--n4 li:not(:last-child)::after, .steps--n5 li:not(:last-child)::after { content: "→" !important; position: absolute; right: -1.2rem; top: 50%; transform: translateY(-50%); color: #A7AFBA; font: 700 1.1rem var(--f-body); }
}