/**
 * Blog index (/blog/) — 2026 magazine design.
 * Loaded only by archive-post.php. Mirrors the operator-approved mockup
 * (wordpress/design/blog-index-v2.html). Most layout lives in inline styles
 * on the markup; this file carries fonts, hover/focus states, the mobile
 * burger, and the container-query breakpoints.
 */

/* ===== Fonts (Manrope, bundled locally — no external CDN, CSP-safe) ===== */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope/manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ===== Base ===== */
.dzb-blog-index * { box-sizing: border-box; }
.dzb-blog-index { margin: 0; background: #0a2540; font-family: 'Manrope', system-ui, -apple-system, sans-serif; }
.dzb-blog-index a { color: #5fa0ff; }
.dzb-blog-index a:hover { color: #8dbcff; }

/* ===== Nav ===== */
.dzb-blog-index .nl { color: #cfe0f5; font-size: 15px; font-weight: 600; text-decoration: none; transition: color .15s; }
.dzb-blog-index .nl:hover { color: #fff; }
.dzb-blog-index .has-dd:hover .dd { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px); }
.dzb-blog-index .ddi:hover { background: #eef4ff; color: #1A6EF5; }
.dzb-blog-index .lnk:hover { color: #fff; }
.dzb-blog-index .btn-o:hover { filter: brightness(1.06); }

/* ===== Cards / interactive ===== */
.dzb-blog-index .feat:hover { border-color: rgba(245,124,26,0.55); }
.dzb-blog-index .feat:hover .feat-title { color: #ffd9b0; }
.dzb-blog-index .acard { transition: transform .18s, border-color .18s, background .18s; }
.dzb-blog-index .acard:hover { transform: translateY(-4px); border-color: rgba(95,160,255,0.4); background: rgba(255,255,255,0.06); }
.dzb-blog-index .acard:hover .go { color: #fff; }
.dzb-blog-index .filt { transition: background .15s, color .15s, border-color .15s; cursor: pointer; text-decoration: none; }
.dzb-blog-index .filt:hover { border-color: rgba(95,160,255,0.5); color: #fff; }
.dzb-blog-index .pop:hover .pop-t { color: #fff; }
.dzb-blog-index .pop:hover .pop-n { background: #1A6EF5; color: #fff; border-color: #1A6EF5; }
.dzb-blog-index .pg:hover { border-color: #5fa0ff; color: #fff; }

/* ===== Responsive (container queries on .app-root) ===== */
.dzb-blog-index .app-root { container-type: inline-size; }
.dzb-blog-index .nav-burger { display: none; }
.dzb-blog-index .nav-burger > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 11px; }
.dzb-blog-index .nav-burger > summary::-webkit-details-marker { display: none; }
.dzb-blog-index .nav-burger .mobile-menu { position: absolute; top: 70px; right: 20px; left: 20px; flex-direction: column; gap: 2px; background: #0c2140; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 10px; box-shadow: 0 24px 50px rgba(0,0,0,0.45); z-index: 60; }
.dzb-blog-index .nav-burger .mobile-menu a { color: #cfe0f5; text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 12px; border-radius: 9px; }
.dzb-blog-index .nav-burger .mobile-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dzb-blog-index .nav-burger[open] .mobile-menu { display: flex; }

@container (max-width: 980px) {
  .dzb-blog-index .main-cols { grid-template-columns: 1fr !important; }
  .dzb-blog-index .sidebar { position: static !important; }
  .dzb-blog-index .feat-grid { grid-template-columns: 1fr !important; }
}
@container (max-width: 760px) {
  .dzb-blog-index .nav-menu { display: none !important; }
  .dzb-blog-index .nav-burger { display: flex !important; }
  .dzb-blog-index .pad { padding-left: 22px !important; padding-right: 22px !important; }
  .dzb-blog-index .art-grid { grid-template-columns: 1fr !important; }
  .dzb-blog-index .hub-grid { grid-template-columns: 1fr 1fr !important; }
  .dzb-blog-index .h1 { font-size: 38px !important; }
  .dzb-blog-index .cta-band { flex-wrap: wrap !important; }
}
@container (max-width: 460px) {
  .dzb-blog-index .hub-grid { grid-template-columns: 1fr !important; }
}