/* ============================================================
   Стили страниц блога dropcrop (/blog/…). Копию в /var/www/dropcrop/blog/
   кладёт admin/blog.mjs при каждой пересборке — править ЗДЕСЬ, на сервере
   файл перезаписывается. Шапка и подвал — /site/chrome.css, шрифты —
   /fonts/fonts.css (Golos Text для текста, Unbounded для заголовков).
   Цвета те же, что у сайта: чернила #111318, электрик #2b3bff, линия #e4e6ea.
   Читаемая колонка ~68 знаков, 17 px — статью читают, а не сканируют.
   ============================================================ */
/* 🔴 Единая модель размеров — как в app.css. Её тут не было, и пока ширины
   задавались через `min(760px, 100% - 32px)` без полей, это не мешало. Как
   только 04.09 поля страницы стали `--pad`, `width: 100%` начал означать
   «100 % плюс два поля»: оглавление вылезло за правый край экрана на 112 px.
   Заодно чинится `.bl-card-t` — подпись плитки шириной 100 % с полями 22 px
   выходила за карточку и обрезалась её `overflow: hidden`. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #111318; font: 17px/1.65 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
/* 🔴 Поля страницы — те же `--pad`, что у шапки и подвала (04.09). Раньше
   колонка стояла в 760 px и упиралась в края экрана своими 16 px, а шапка
   над ней отступала на 20–56: на широком мониторе меню и текст начинались в
   разных местах, и владелец читал это как «ширин на сайте много». `--pad`
   приезжает из /site/chrome.css (там сохранён `:root` из app.css), он
   подключён строкой выше — одно число на весь сайт.
   Читаемая колонка при этом ОСТАЁТСЯ 760 px: статью читают, и строка в
   полтора экрана — не «шире», а нечитаемо. Растягивается оглавление. */
main.bl-page {
  flex: 1; width: 100%; max-width: calc(760px + var(--pad, 24px) * 2);
  margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--pad, 16px) 64px;
}
h1 { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 600; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; letter-spacing: -.035em; margin: 0 0 14px; }

.bl-prevbar { background: #b45309; color: #fff; font-size: 13.5px; text-align: center; padding: 8px 12px; }
.bl-crumbs { font-size: 14px; color: #5f666f; margin: 0 0 18px; }
.bl-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid #c4c9d0; }
.bl-crumbs a:hover { color: #2b3bff; border-color: #2b3bff; }
.bl-meta { color: #5f666f; font-size: 14px; margin: 0 0 26px; }
.bl-cover { margin: 0 0 30px; border-radius: 16px; overflow: hidden; background: #f2f3f5; }
.bl-cover img { display: block; width: 100%; height: auto; }

.bl-body h2 { font-size: clamp(21px, 2.6vw, 26px); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; margin: 40px 0 12px; }
.bl-body h3 { font-size: 19px; line-height: 1.3; font-weight: 700; margin: 28px 0 8px; }
.bl-body h4 { font-size: 17px; font-weight: 700; margin: 22px 0 6px; }
.bl-body p { margin: 0 0 14px; }
.bl-body ul, .bl-body ol { padding-left: 24px; margin: 0 0 16px; }
.bl-body li { margin: 0 0 6px; }
.bl-body li ul, .bl-body li ol { margin: 6px 0 0; }
.bl-body a { color: #2b3bff; text-decoration: none; border-bottom: 1.5px solid #c9cdff; transition: .15s; }
.bl-body a:hover { border-color: #2b3bff; }
.bl-body img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.bl-body figure { margin: 22px 0; }
.bl-body figcaption { font-size: 14px; color: #5f666f; margin-top: 8px; }
.bl-body blockquote { margin: 22px 0; padding: 2px 0 2px 18px; border-left: 3px solid #2b3bff; color: #4b5059; }
.bl-body blockquote p:last-child { margin-bottom: 0; }
.bl-tbl { overflow-x: auto; margin: 18px 0; }
.bl-body table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.bl-body th, .bl-body td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #e4e6ea; vertical-align: top; }
.bl-body th { font-weight: 600; background: #fafbfc; }
.bl-body code { font-family: 'PT Mono', ui-monospace, 'Courier New', monospace; font-size: .92em; background: #f2f3f5; padding: 2px 6px; border-radius: 6px; }
.bl-body pre { background: #f2f3f5; padding: 14px 16px; border-radius: 12px; overflow: auto; font-size: 14px; line-height: 1.5; }
.bl-body pre code { background: none; padding: 0; }
.bl-body hr { border: 0; border-top: 1px solid #e4e6ea; margin: 32px 0; }
.bl-body strong { font-weight: 600; }

/* Призыв в конце — тёмная плашка, как ночные секции витрины. */
.bl-cta { margin: 48px 0 0; padding: 26px 28px; border-radius: 18px; background: #111318; color: #fff; }
.bl-cta h2 { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.02em; margin: 0 0 8px; }
.bl-cta p { margin: 0 0 16px; color: #a4a6c2; font-size: 15.5px; }
.bl-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #111318; text-decoration: none; font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 999px; transition: .15s; }
.bl-btn:hover { background: #2b3bff; color: #fff; }

/* Ссылка на посадочную по теме — одной строкой перед концовкой (03.10). */
.bl-land { margin: 36px 0 0; padding: 14px 18px; border: 1px solid #e4e6ea; border-radius: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 16px; }
.bl-land span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5f666f; }
.bl-land a { color: #2b3bff; text-decoration: none; font-weight: 600; border-bottom: 1.5px solid #c9cdff; }
.bl-land a:hover { border-color: #2b3bff; }
.bl-land a::after { content: ' →'; }

/* «Читайте также» — три соседа с обложками (03.10): у статей были ссылки
   только назад по дате, и свежие оставались без входящих. */
.bl-more { margin: 40px 0 0; }
.bl-more h2 { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.02em; margin: 0 0 14px; }
.bl-more ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bl-more a { display: block; color: inherit; text-decoration: none; font-size: 15px; line-height: 1.35; font-weight: 600; }
.bl-more img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #f2f3f5; margin: 0 0 8px; transition: transform .3s; }
.bl-more a:hover span { color: #2b3bff; }
@media (max-width: 600px) {
  .bl-more ul { grid-template-columns: 1fr; }
  .bl-more a { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
  .bl-more img { margin: 0; }
}

/* ---------- Оглавление: бенто ----------
   Статью читают в колонке 760 px, а выбирают — глазами по всей ширине:
   оглавление живёт в своей полосе (.bl-wide) и раскладывает плитки по весу.
   Первая — большая, следующие две столбиком рядом, дальше ровный ряд.
   Разметку и цикл «по шесть» строит admin/blog.mjs (renderIndex). */
/* Оглавление — во всю ширину экрана, как главная и «Мои недавние»: плитки
   выбирают глазами, и в полосе 1280 px они выходили втрое мельче, чем на
   тех же экранах продукта (владелец 04.09: «блог надо сделать по ширине
   экрана»). Поля те же `--pad` — левый край первой плитки встаёт ровно под
   знаком в шапке. */
main.bl-page.bl-wide { max-width: none; }
.bl-intro { color: #5f666f; font-size: 18px; margin: 0 0 32px; max-width: 60ch; }
.bl-intro a { color: #2b3bff; }
.bl-empty { color: #5f666f; }

/* 🔴 Ряды `minmax(210px, auto)`, а не ровно 210: длинный заголовок в узкой
   плитке иначе вылезает за край и обрезается вместе с датой (поймано снимком
   на 390 px). Ровная высота остаётся, пока текст в неё влезает. */
.bl-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(210px, auto); gap: 16px; grid-auto-flow: dense; }
.bl-card {
  position: relative; overflow: hidden; border-radius: 20px; background: #111318;
  text-decoration: none; color: #fff; display: flex; align-items: flex-end;
  grid-column: span 2; isolation: isolate;
}
.bl-card.big { grid-column: span 4; grid-row: span 2; }
.bl-shot { position: absolute; inset: 0; z-index: 0; }
.bl-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.01); transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.bl-card:hover .bl-shot img { transform: scale(1.045); }
.bl-mark { width: 100%; height: 100%; display: block; }
/* Штора: без неё белый заголовок садится на светлую обложку и пропадает.
   Снизу плотнее, кверху сходит на нет — верх кадра остаётся виден. */
.bl-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 11, 15, .88) 0%, rgba(10, 11, 15, .62) 34%, rgba(10, 11, 15, .12) 68%, rgba(10, 11, 15, 0) 100%);
  transition: opacity .3s;
}
/* У маленькой плитки текста столько же, а места вчетверо меньше: заголовок
   поднимается выше по кадру, где штора уже почти прозрачна. Обложки у нас
   светлые (серебро студии), и белое по светлому там начинало пропадать —
   поэтому маленьким штора плотнее и выше. */
.bl-card.sm::after {
  background: linear-gradient(to top, rgba(10, 11, 15, .92) 0%, rgba(10, 11, 15, .78) 40%, rgba(10, 11, 15, .42) 72%, rgba(10, 11, 15, .1) 100%);
}
.bl-card.dark::after { background: linear-gradient(to top, rgba(10, 11, 15, .8), rgba(10, 11, 15, .3)); }
.bl-card-t { position: relative; z-index: 2; padding: 20px 22px; width: 100%; }
.bl-tag {
  display: inline-block; margin-bottom: 9px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.bl-card h2 {
  font-family: 'Unbounded', system-ui, sans-serif; font-weight: 500;
  font-size: 19px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 8px;
  text-wrap: balance;
}
.bl-card.big h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 10px; }
.bl-card p { margin: 0 0 10px; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.45; max-width: 52ch; }
.bl-card time { font-size: 13px; color: rgba(255, 255, 255, .62); }
.bl-card:hover .bl-tag { background: #2b3bff; }

@media (max-width: 900px) {
  .bl-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, auto); }
  .bl-card, .bl-card.big { grid-column: span 2; grid-row: span 1; }
  .bl-card.big { grid-row: span 2; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  /* На телефоне плитки идут столбиком и растут по тексту: держать их ровными
     нечем — рядом нет соседа, с которым надо равняться. */
  .bl-bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .bl-card, .bl-card.big { grid-column: span 1; grid-row: span 1; min-height: 200px; }
  .bl-card.big { min-height: 260px; }
  .bl-card.big h2 { font-size: 22px; }
  .bl-card.big p { display: none; }
  .bl-cta { padding: 20px 20px; }
}
@media print { .sc-hdr, .sc-ftr, .sc-ck, .bl-cta, .bl-prevbar { display: none; } }

/* ============================================================
   Тёмная тема блога (/blog/)
   ============================================================ */
[data-theme='dark'] body {
  background: #101216;
  color: #f1f3f7;
}

[data-theme='dark'] .bl-crumbs {
  color: #8e97a6;
}
[data-theme='dark'] .bl-crumbs a {
  border-bottom-color: rgba(255, 255, 255, .2);
}
[data-theme='dark'] .bl-crumbs a:hover {
  color: #4254ff;
  border-color: #4254ff;
}

[data-theme='dark'] .bl-meta {
  color: #8e97a6;
}

[data-theme='dark'] .bl-cover {
  background: #16181e;
}

[data-theme='dark'] .bl-body a {
  color: #6879ff;
  border-bottom-color: rgba(104, 121, 255, .4);
}
[data-theme='dark'] .bl-body a:hover {
  border-color: #6879ff;
}

[data-theme='dark'] .bl-body figcaption {
  color: #8e97a6;
}

[data-theme='dark'] .bl-body blockquote {
  border-left-color: #4254ff;
  color: #a4aab5;
}

[data-theme='dark'] .bl-body table th,
[data-theme='dark'] .bl-body table td {
  border-bottom-color: rgba(255, 255, 255, .08);
}
[data-theme='dark'] .bl-body th {
  background: #16181e;
}

[data-theme='dark'] .bl-body code {
  background: #1e2129;
  color: #f1f3f7;
}
[data-theme='dark'] .bl-body pre {
  background: #16181e;
  border: 1px solid rgba(255, 255, 255, .06);
}
[data-theme='dark'] .bl-body hr {
  border-top-color: rgba(255, 255, 255, .08);
}

[data-theme='dark'] .bl-cta {
  background: #16181e;
  border: 1px solid rgba(255, 255, 255, .08);
}
[data-theme='dark'] .bl-cta p {
  color: #8e97a6;
}
[data-theme='dark'] .bl-btn {
  background: #f1f3f7;
  color: #111318;
}
[data-theme='dark'] .bl-btn:hover {
  background: #4254ff;
  color: #fff;
}

[data-theme='dark'] .bl-land {
  border-color: rgba(255, 255, 255, .1);
}
[data-theme='dark'] .bl-land span {
  color: #8e97a6;
}
[data-theme='dark'] .bl-land a {
  color: #6879ff;
  border-bottom-color: rgba(104, 121, 255, .4);
}
[data-theme='dark'] .bl-more img {
  background: #16181e;
}
[data-theme='dark'] .bl-more a:hover span {
  color: #6879ff;
}

[data-theme='dark'] .bl-intro {
  color: #8e97a6;
}
[data-theme='dark'] .bl-intro a {
  color: #6879ff;
}
[data-theme='dark'] .bl-empty {
  color: #8e97a6;
}

[data-theme='dark'] .bl-card {
  border: 1px solid rgba(255, 255, 255, .08);
}
[data-theme='dark'] .bl-card:hover .bl-tag {
  background: #4254ff;
}