/* Блог: карточки статей (главная, /blog, «читайте также») и страница статьи. Только свои классы bl-*, без Tailwind-сборки. */

/* ---------- карточки ---------- */
.bl-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:768px){ .bl-grid{ grid-template-columns:repeat(2,1fr); gap:28px; } }
@media (min-width:1024px){ .bl-grid{ grid-template-columns:repeat(3,1fr); gap:32px; } }

.bl-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid rgba(18,21,31,.08); border-radius:18px; overflow:hidden;
  box-shadow:0 1px 2px rgba(18,21,31,.04);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.bl-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -20px rgba(11,15,25,.28); border-color:rgba(197,168,128,.55); }
.bl-card-img{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--void-2); }
.bl-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.16,1,.3,1); }
.bl-card:hover .bl-card-img img{ transform:scale(1.045); }
.bl-card-tag{
  position:absolute; left:16px; top:16px; padding:6px 12px; border-radius:999px;
  background:rgba(11,15,25,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--gold-bright); font:500 12px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase;
}
.bl-card-body{ display:flex; flex-direction:column; flex:1; padding:22px 22px 24px; }
@media (min-width:768px){ .bl-card-body{ padding:26px 28px 28px; } }
.bl-card-title{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:23px; line-height:1.22; color:var(--ink); margin:0 0 12px; }
@media (min-width:768px){ .bl-card-title{ font-size:25px; } }
.bl-card-title a{ color:inherit; text-decoration:none; }
.bl-card-title a::after{ content:""; position:absolute; inset:0; z-index:1; } /* вся карточка кликабельна */
.bl-card-title a:focus-visible{ outline:none; }
.bl-card:focus-within{ outline:2px solid var(--gold-bright); outline-offset:3px; }
.bl-card-text{ font-size:16.5px; line-height:1.6; color:var(--slate); margin:0 0 20px; }
.bl-card-meta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:16px; border-top:1px solid rgba(18,21,31,.08);
  font:400 13px/1.2 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.06em; color:#8b8f99; }
.bl-card-more{ color:var(--gold-dim); white-space:nowrap; transition:color .3s; }
.bl-card:hover .bl-card-more{ color:var(--ink); }

@media (min-width:1024px){ .bl-grid.is-index{ grid-template-columns:repeat(2,1fr); } }

/* крупная первая карточка на /blog */
@media (min-width:1024px){
  .bl-card.is-featured{ grid-column:1 / -1; flex-direction:row; }
  .bl-card.is-featured .bl-card-img{ flex:0 0 58%; aspect-ratio:auto; min-height:400px; }
  .bl-card.is-featured .bl-card-body{ padding:44px 48px; justify-content:center; }
  .bl-card.is-featured .bl-card-title{ font-size:36px; }
  .bl-card.is-featured .bl-card-text{ font-size:18px; }
}

.bl-all-link{
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px; border-radius:999px;
  border:1px solid rgba(18,21,31,.18); color:var(--ink); font-weight:500; letter-spacing:.02em; text-decoration:none;
  transition:border-color .3s, background .3s, color .3s;
}
.bl-all-link:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.bl-all-link svg{ width:18px; height:18px; transition:transform .3s; }
.bl-all-link:hover svg{ transform:translateX(3px); }

/* ---------- шапка страницы блога / статьи ---------- */
.bl-hero{ position:relative; background:var(--void); color:var(--paper); padding:132px 0 56px; overflow:hidden; overflow:clip; }
@media (min-width:768px){ .bl-hero{ padding:156px 0 72px; } }
.bl-hero.has-cover{ padding-bottom:150px; }
@media (min-width:768px){ .bl-hero.has-cover{ padding-bottom:210px; } }
.bl-container{ position:relative; max-width:1400px; margin:0 auto; padding:0 20px; }
@media (min-width:768px){ .bl-container{ padding:0 40px; } }
.bl-narrow{ max-width:980px; }

.bl-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 28px; padding:0; list-style:none;
  font:400 13px/1.4 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.08em; color:rgba(249,250,251,.5); }
.bl-crumbs a{ color:rgba(249,250,251,.7); text-decoration:none; transition:color .3s; }
.bl-crumbs a:hover{ color:var(--gold-bright); }
.bl-crumbs li+li::before{ content:"/"; margin-right:10px; color:rgba(197,168,128,.5); }

.bl-kicker{ font:500 14px/1.3 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; margin:0 0 18px; }
.bl-h1{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:36px; line-height:1.08; margin:0 0 22px; color:var(--paper); max-width:1120px; }
@media (min-width:640px){ .bl-h1{ font-size:46px; } }
@media (min-width:1024px){ .bl-h1{ font-size:58px; } }
@media (min-width:1280px){ .bl-h1{ font-size:64px; } }
.bl-h1 em{ color:var(--gold-bright); font-style:italic; }
.bl-lead{ font-size:18px; line-height:1.65; color:rgba(249,250,251,.72); max-width:none; margin:0; } /* на всю ширину сетки сайта */
@media (min-width:768px){ .bl-lead{ font-size:20px; } }
.bl-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.bl-meta span{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); font:400 13px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.06em; color:rgba(249,250,251,.7); }
.bl-meta svg{ width:15px; height:15px; color:var(--gold); }

.bl-cover{ position:relative; margin-top:-110px; z-index:2; }
@media (min-width:768px){ .bl-cover{ margin-top:-160px; } }
.bl-cover figure{ margin:0; border-radius:20px; overflow:hidden; box-shadow:0 30px 70px -25px rgba(11,15,25,.45); background:var(--void-2); }
.bl-cover img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
@media (min-width:1024px){ .bl-cover img{ aspect-ratio:2/1; } }
.bl-cover figcaption{ padding:12px 4px 0; font-size:14px; color:var(--slate); background:var(--paper); }

/* ---------- раскладка статьи ---------- */
.bl-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:48px; padding:48px 0 72px; }
@media (min-width:1024px){ .bl-layout{ grid-template-columns:minmax(0,1fr) 280px; gap:56px; padding:64px 0 96px; } }
@media (min-width:1280px){ .bl-layout{ grid-template-columns:minmax(0,1fr) 320px; gap:88px; } }

.bl-aside{ display:none; }
@media (min-width:1024px){ .bl-aside{ display:block; } .bl-aside-in{ position:sticky; top:104px; } }
.bl-toc-title{ font:500 13px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.24em; color:var(--gold-dim); margin:0 0 16px; }
.bl-toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid rgba(18,21,31,.1); }
.bl-toc a{ display:block; padding:7px 0 7px 18px; margin-left:-1px; border-left:2px solid transparent; font-size:15px; line-height:1.4; color:var(--slate); text-decoration:none; transition:color .25s, border-color .25s; }
.bl-toc a:hover{ color:var(--ink); }
.bl-toc a.is-active{ color:var(--ink); border-left-color:var(--gold-bright); }
.bl-aside-cta{ margin-top:32px; padding:24px; border-radius:16px; background:var(--void); color:var(--paper); }
.bl-aside-cta p{ margin:0 0 6px; font-size:15px; line-height:1.5; color:rgba(249,250,251,.7); }
.bl-aside-cta strong{ display:block; font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:22px; line-height:1.25; color:var(--paper); margin-bottom:10px; }

/* мобильное оглавление */
.bl-toc-mobile{ margin:0 0 36px; border:1px solid rgba(18,21,31,.1); border-radius:14px; background:#fff; }
@media (min-width:1024px){ .bl-toc-mobile{ display:none; } }
.bl-toc-mobile summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
  font:500 13px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.2em; color:var(--gold-dim); }
.bl-toc-mobile summary::-webkit-details-marker{ display:none; }
.bl-toc-mobile summary::after{ content:"+"; font-size:20px; color:var(--ink); }
.bl-toc-mobile[open] summary::after{ content:"−"; }
.bl-toc-mobile .bl-toc{ padding:0 18px 16px; }

/* ---------- типографика статьи ---------- */
.bl-prose{ font-size:17.5px; line-height:1.75; color:#2a2e39; }
@media (min-width:768px){ .bl-prose{ font-size:18.5px; } }
@media (min-width:1280px){ .bl-prose{ font-size:19px; } }
.bl-prose > *:first-child{ margin-top:0; }
.bl-prose p{ margin:0 0 1.15em; }
.bl-prose h2{ font-family:'Playfair Display',Georgia,serif; font-weight:500; color:var(--ink); font-size:29px; line-height:1.18; margin:2.1em 0 .7em; scroll-margin-top:100px; }
@media (min-width:768px){ .bl-prose h2{ font-size:36px; } }
.bl-prose h3{ font-family:'Playfair Display',Georgia,serif; font-weight:500; color:var(--ink); font-size:23px; line-height:1.25; margin:1.7em 0 .55em; scroll-margin-top:100px; }
@media (min-width:768px){ .bl-prose h3{ font-size:26px; } }
.bl-prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:1px; text-underline-offset:3px; transition:color .25s, text-decoration-color .25s; }
.bl-prose a:hover{ color:var(--gold-dim); text-decoration-color:var(--gold-dim); }
.bl-prose strong{ color:var(--ink); font-weight:600; }
.bl-prose ul, .bl-prose ol{ margin:0 0 1.3em; padding-left:1.3em; }
.bl-prose ul{ list-style:disc; }
.bl-prose ol{ list-style:decimal; }
.bl-prose li{ margin:0 0 .5em; padding-left:.3em; }
.bl-prose ul li::marker{ color:var(--gold-dim); }
.bl-prose ol li::marker{ color:var(--gold-dim); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.85em; }
.bl-prose blockquote{ margin:2em 0; padding:4px 0 4px 26px; border-left:2px solid var(--gold-bright);
  font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:1.25em; line-height:1.5; color:var(--ink); }
.bl-prose blockquote p{ margin:0; }
.bl-prose figure{ margin:2.2em 0; }
.bl-prose figure img{ display:block; width:100%; height:auto; border-radius:14px; background:var(--paper-2); }
.bl-prose figcaption{ margin-top:10px; font-size:14.5px; line-height:1.5; color:var(--slate); }
.bl-prose hr{ border:0; height:1px; background:rgba(18,21,31,.1); margin:2.6em 0; }

/* две картинки рядом */
.bl-prose .bl-duo{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .bl-prose .bl-duo{ grid-template-columns:1fr 1fr; } }
.bl-prose .bl-duo img{ aspect-ratio:3/2; object-fit:cover; }

/* «главное за минуту» и заметки */
.bl-key{ margin:0 0 2.2em; padding:24px 24px 8px; border-radius:16px; background:var(--paper-2); border:1px solid var(--line-light); }
@media (min-width:768px){ .bl-key{ padding:30px 32px 12px; } }
.bl-key-title{ font:500 13px/1 'JetBrains Mono',ui-monospace,monospace !important; letter-spacing:.24em; color:var(--gold-dim) !important; margin:0 0 16px !important; }
.bl-key ul{ padding-left:1.1em; }
.bl-note{ margin:2em 0; padding:20px 22px; border-radius:14px; border:1px solid rgba(197,168,128,.45); background:rgba(197,168,128,.08); font-size:.95em; }
.bl-note p:last-child{ margin-bottom:0; }

/* таблицы: на телефоне прокручиваются по горизонтали внутри своей рамки */
.bl-table{ margin:2em 0; border:1px solid rgba(18,21,31,.1); border-radius:14px; overflow:hidden; background:#fff; }
.bl-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bl-table table{ width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.5; min-width:560px; }
.bl-table.is-compact table{ min-width:0; }
.bl-table caption{ caption-side:top; text-align:left; padding:16px 18px 12px; font:500 12.5px/1.3 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.18em; color:var(--gold-dim); text-transform:uppercase; border-bottom:1px solid rgba(18,21,31,.08); }
.bl-table th{ text-align:left; font-weight:600; color:var(--ink); background:var(--paper-2); padding:12px 18px; border-bottom:1px solid var(--line-light); white-space:nowrap; }
.bl-table td{ padding:13px 18px; border-bottom:1px solid rgba(18,21,31,.06); vertical-align:top; color:#3a3f4b; }
.bl-table tr:last-child td{ border-bottom:0; }
.bl-table td:first-child{ color:var(--ink); font-weight:500; }
.bl-table .num{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.92em; white-space:nowrap; }
/* на телефоне таблицы с шапкой превращаются в карточки: строка = блок, подпись поля из data-label */
@media (max-width:640px){
  .bl-table:not(.is-compact) table{ min-width:0; }
  .bl-table:not(.is-compact) thead{ display:none; }
  .bl-table:not(.is-compact) tbody, .bl-table:not(.is-compact) tr, .bl-table:not(.is-compact) td{ display:block; }
  .bl-table:not(.is-compact) tr{ padding:14px 18px; border-bottom:1px solid rgba(18,21,31,.08); }
  .bl-table:not(.is-compact) tr:last-child{ border-bottom:0; }
  .bl-table:not(.is-compact) td{ padding:3px 0; border:0; }
  .bl-table:not(.is-compact) td:first-child{ font-size:16.5px; font-weight:600; padding-bottom:6px; }
  .bl-table:not(.is-compact) td + td::before{ content:attr(data-label); display:block; margin-top:4px;
    font:500 11.5px/1.4 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dim); }
}

/* призыв купить билет внутри статьи */
.bl-cta{ position:relative; margin:2.6em 0; padding:30px 26px; border-radius:18px; background:var(--void); color:var(--paper); overflow:hidden; }
@media (min-width:768px){ .bl-cta{ padding:38px 40px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; } }
.bl-cta::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 100% 0%, rgba(212,175,55,.16), transparent 70%); }
.bl-prose .bl-cta p{ position:relative; margin:0; color:rgba(249,250,251,.72); font-size:16.5px; line-height:1.6; }
.bl-prose .bl-cta .bl-cta-title{ font-family:'Playfair Display',Georgia,serif; font-size:25px; line-height:1.25; color:var(--paper); margin:0 0 8px; }
.bl-cta-btns{ position:relative; display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
@media (min-width:768px){ .bl-cta-btns{ margin-top:0; flex-direction:column; align-items:stretch; } }
.bl-prose .bl-cta a{ text-decoration:none; }
.bl-btn{ display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 26px; border-radius:999px; font-weight:500; letter-spacing:.02em; white-space:nowrap; text-decoration:none; }
.bl-btn-ghost{ border:1px solid rgba(255,255,255,.2); color:rgba(249,250,251,.85) !important; transition:border-color .3s, color .3s; }
.bl-btn-ghost:hover{ border-color:var(--gold-bright); color:var(--gold-bright) !important; }

/* FAQ статьи */
.bl-faq{ margin:1.4em 0 0; border-top:1px solid rgba(18,21,31,.1); }
.bl-faq details{ border-bottom:1px solid rgba(18,21,31,.1); }
.bl-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:20px 0;
  font-family:'Playfair Display',Georgia,serif; font-size:21px; line-height:1.35; color:var(--ink); }
.bl-faq summary::-webkit-details-marker{ display:none; }
.bl-faq summary::after{ content:"+"; flex:0 0 auto; font-family:'Inter',sans-serif; font-size:24px; line-height:1.1; color:var(--gold-dim); transition:transform .3s; }
.bl-faq details[open] summary::after{ transform:rotate(45deg); }
.bl-faq details > div{ padding:0 0 18px; }
.bl-faq details > div p:last-child{ margin-bottom:0; }

/* «читайте также» + подпись редакции */
.bl-author{ display:flex; gap:16px; align-items:center; margin-top:3em; padding-top:28px; border-top:1px solid rgba(18,21,31,.1); font-size:15px; line-height:1.5; color:var(--slate); }
.bl-author img{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--void); padding:6px; }
.bl-author b{ display:block; color:var(--ink); font-weight:600; }
.bl-related{ background:var(--paper-2); padding:64px 0 80px; border-top:1px solid var(--line-light); }
@media (min-width:768px){ .bl-related{ padding:88px 0 104px; } }
.bl-sec-kicker{ font:500 15px/1.3 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.35em; color:var(--gold-dim); margin:0 0 14px; }
.bl-sec-title{ font-family:'Playfair Display',Georgia,serif; font-weight:500; font-size:32px; line-height:1.1; color:var(--ink); margin:0; }
@media (min-width:640px){ .bl-sec-title{ font-size:42px; } }
.bl-sec-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 32px; margin-bottom:40px; }
@media (min-width:768px){ .bl-sec-head{ margin-bottom:52px; } }
.bl-sec-sub{ font-size:18px; line-height:1.6; color:var(--slate); margin:14px 0 0; }
/* заголовок секции занимает всю ширину до кнопки «Все статьи» */
.bl-sec-head > div:first-child{ flex:1 1 520px; min-width:0; }

/* полоса прогресса чтения */
.bl-progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:60; transform-origin:0 50%; transform:scaleX(0); background:var(--gold-bright); pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .bl-card, .bl-card-img img, .bl-all-link svg{ transition:none; }
  .bl-card:hover{ transform:none; }
  .bl-card:hover .bl-card-img img{ transform:none; }
}