/* =========================================================================
   Блог (/blog/)
   Первый экран со стопкой карточек статей, поиск и фильтр по трём темам,
   карточки готовых статей и тех, что готовятся, блок Telegram-канала.
   Без JS поиск и фильтр скрыты, все статьи видны списком
   (поведение — assets/js/catalog.js).
   ========================================================================= */

/* ---------- первый экран ---------- */
.bl-hero { min-height: min(88svh, 820px); }
.bl-h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 4.2rem); }
.bl-stage { display: grid; place-items: center; min-height: 440px; }
.bl-deck { position: relative; width: min(100%, 420px); height: 400px; }
.bl-card { position: absolute; left: 0; right: 0; display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--radius-lg); background: var(--night-2); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); transform-origin: 50% 100%; }
.bl-card b { font-weight: 650; font-size: 1.05rem; line-height: 1.3; }
.bl-card small { color: var(--fg-dim); font-size: 0.82rem; }
.bl-card--b2 { top: 0; transform: translate(26px, 0) rotate(5deg) scale(0.92); opacity: 0.55; }
.bl-card--b1 { top: 24px; transform: translate(-18px, 0) rotate(-4deg) scale(0.96); opacity: 0.8; }
.bl-card--front { top: 64px; background: #fff; color: var(--ink); border-color: transparent; }
.bl-card--front small { color: var(--ink-soft); }
.bl-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bl-tag { justify-self: start; padding: 4px 11px; border-radius: 999px; background: rgba(76, 125, 255, 0.16); color: var(--flow-light); font-size: 0.78rem; font-weight: 700; }
.bl-card--front .bl-tag { background: #e7edff; color: var(--flow-ink); }
.bl-tag--ppc { background: rgba(255, 176, 32, 0.16); color: var(--signal); }
.bl-tag--dev { background: rgba(47, 191, 138, 0.16); color: #6fe0b4; }
.bl-ready { padding: 4px 11px; border-radius: 999px; background: #e3f7ee; color: #17694b; font-size: 0.78rem; font-weight: 700; }
.bl-mini { list-style: none; display: grid; gap: 8px; margin: 4px 0 2px; }
.bl-mini li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; font-size: 0.92rem; color: var(--ink-soft); }
.bl-mini i { position: relative; width: 20px; height: 20px; border-radius: 6px; background: var(--ok); }
.bl-mini i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); }
.bl-mini-bar { height: 8px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.bl-mini-bar i { display: block; width: 62%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--flow), var(--signal)); transform-origin: left center; }

/* стопка раскрывается, галочки ставятся по очереди */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-off) .bl-card--b2 { animation: bl-fan-b2 1s var(--ease-out) 0.2s both; }
  html.js:not(.motion-off) .bl-card--b1 { animation: bl-fan-b1 1s var(--ease-out) 0.3s both; }
  html.js:not(.motion-off) .bl-card--front { animation: bl-rise 0.9s var(--ease-out) 0.15s both; }
  html.js:not(.motion-off) .bl-mini i { animation: bl-tick 0.45s var(--ease-out) both; }
  html.js:not(.motion-off) .bl-mini li:nth-child(1) i { animation-delay: 1s; }
  html.js:not(.motion-off) .bl-mini li:nth-child(2) i { animation-delay: 1.35s; }
  html.js:not(.motion-off) .bl-mini li:nth-child(3) i { animation-delay: 1.7s; }
  html.js:not(.motion-off) .bl-mini li:nth-child(4) i { animation-delay: 2.05s; }
  html.js:not(.motion-off) .bl-mini-bar i { animation: bl-bar 1.6s var(--ease-out) 1s both; }
  .bl-deck:hover .bl-card--b2 { transform: translate(44px, -10px) rotate(8deg) scale(0.92); transition: transform 0.5s var(--ease-out); }
  .bl-deck:hover .bl-card--b1 { transform: translate(-36px, -6px) rotate(-7deg) scale(0.96); transition: transform 0.5s var(--ease-out); }
}
@keyframes bl-fan-b2 { from { transform: translate(0, 40px) rotate(0) scale(0.92); opacity: 0; } }
@keyframes bl-fan-b1 { from { transform: translate(0, 40px) rotate(0) scale(0.96); opacity: 0; } }
@keyframes bl-rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes bl-tick { from { transform: scale(0); background: var(--paper-3); } }
@keyframes bl-bar { from { transform: scaleX(0); } }

/* ---------- каталог ---------- */
.bl-tools { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); gap: 16px 28px; align-items: end; margin-bottom: 28px; }
.bl-tools[hidden] { display: none; }
.bl-search { display: grid; gap: 8px; }
.bl-search label { font-weight: 600; font-size: 0.95rem; }
.bl-search-box { position: relative; }
.bl-search-box svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--fg-dim); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.bl-search input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--fg); }
.bl-search input:focus { outline: none; border-color: var(--flow); box-shadow: 0 0 0 4px rgba(76, 125, 255, 0.22); }
.bl-filters { margin: 0; }
.bl-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.bl-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--paper-3); color: var(--fg); font-size: 0.75rem; }
.bl-filters button[aria-pressed="true"] .bl-n { background: rgba(255, 255, 255, 0.18); color: #fff; }
.bl-count { grid-column: 1 / -1; margin: 0; min-height: 1.5em; color: var(--fg-dim); font-size: 0.92rem; }
.bl-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 28px; padding: 20px 22px; border-radius: var(--radius-md); border: 1.5px dashed var(--line); }
.bl-empty[hidden] { display: none; }
.bl-empty p { margin: 0; color: var(--fg-soft); }
.bl-empty b { color: var(--fg); }

.bl-groups { display: grid; gap: clamp(40px, 5vw, 64px); }
.bl-group[hidden] { display: none; }
.bl-group-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.bl-group-head p { margin: 4px 0 0; color: var(--fg-soft); }
.bl-group-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--night); }
.bl-group-ico svg { width: 26px; height: 26px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bl-group-ico--seo svg { stroke: var(--flow-light); }
.bl-group-ico--ppc svg { stroke: var(--signal); }
.bl-group-ico--dev svg { stroke: #6fe0b4; }
.bl-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bl-item[hidden] { display: none; }
.bl-link, .bl-soon { position: relative; display: grid; gap: 10px; align-content: start; height: 100%; padding: 24px; border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.bl-link { background: var(--night); color: #eef2fb; box-shadow: 0 24px 50px -30px rgba(11, 19, 36, 0.7); transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.bl-link:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(11, 19, 36, 0.8); text-decoration: none; }
.bl-link p { color: var(--fog); }
.bl-soon { background: var(--surface); border: 1.5px dashed #c4cddf; }
.bl-soon p { color: var(--fg-soft); }
.bl-item h4 { margin: 0; font-size: var(--step-1); font-weight: 650; line-height: 1.3; }
.bl-item p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 0.85rem; color: var(--fg-dim); }
.bl-link .bl-meta { color: var(--fog); }
.bl-badge { padding: 3px 10px; border-radius: 999px; background: var(--signal); color: var(--ink); font-size: 0.75rem; font-weight: 700; }
.bl-badge--soon { background: var(--paper-3); color: var(--fg-soft); }
.bl-go { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--signal); font-weight: 650; }
.bl-go::after { content: ""; width: 18px; height: 2px; background: currentColor; box-shadow: none; transition: width 0.3s var(--ease-out); }
.bl-link:hover .bl-go::after { width: 28px; }
.bl-svc { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); color: var(--fg-dim); font-size: 0.88rem; }

/* ---------- Telegram-канал ---------- */
.bl-tg-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.bl-tg-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color 0.3s, transform 0.3s var(--ease-out); }
.bl-tg-card:hover { border-color: var(--flow-light); transform: translateY(-3px); text-decoration: none; }
.bl-tg-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #2aa3df; }
.bl-tg-ico svg { width: 26px; height: 26px; fill: #fff; }
.bl-tg-txt b { display: block; font-weight: 650; }
.bl-tg-txt small { color: var(--fg-soft); }
.bl-tg-act { color: var(--signal); font-weight: 650; white-space: nowrap; }

/* в группе разработки четыре статьи: на широком экране ставим их в один ряд */
@media (min-width: 1181px) {
  .bl-group[data-cat-group="dev"] .bl-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- адаптив ---------- */
@media (max-width: 1080px) {
  .bl-hero { min-height: auto; }
  .bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-tools { grid-template-columns: minmax(0, 1fr); }
  .bl-tg-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-stage { min-height: 400px; }
}
@media (max-width: 640px) {
  .bl-list { grid-template-columns: minmax(0, 1fr); }
  .bl-deck { height: 360px; }
  .bl-card--front { top: 52px; }
  .bl-stage { min-height: 360px; }
  .bl-group-ico { width: 44px; height: 44px; border-radius: 14px; }
  .bl-tg-card { grid-template-columns: 48px minmax(0, 1fr); }
  .bl-tg-ico { width: 48px; height: 48px; }
  .bl-tg-act { grid-column: 2; }
  .bl-link, .bl-soon { padding: 20px; }
}