/* ═══════════════════════════════════════════════════════════════════
   peeryx-v133-blog-premium.css
   Knowledge Center blog — refonte premium totale
   Complète et remplace les règles v132 pour la page blog listing
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tokens (reprise + extensions) ─────────────────────────────── */
:root {
  --b33-bg0:      #020911;
  --b33-bg1:      #040d1c;
  --b33-bg2:      #071322;
  --b33-card:     rgba(8,18,42,0.80);
  --b33-border:   rgba(255,255,255,0.06);
  --b33-border-h: rgba(255,255,255,0.12);
  --b33-blue:     #1848C4;
  --b33-blue-lt:  #2D64E0;
  --b33-teal:     #00C892;
  --b33-teal-d:   #00A876;
  --b33-text:     #C0D4EE;
  --b33-muted:    #6280A0;
  --b33-white:    #EEF4FF;
  --b33-radius:   12px;
  --b33-font-h:   'Sora', system-ui, -apple-system, sans-serif;
  --b33-font-b:   'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --b33-font-c:   'JetBrains Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   §1 — PAGE WRAPPER
   ═══════════════════════════════════════════════════════════════════ */

html body .px83-blog-index {
  background: var(--b33-bg0) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §2 — HERO : KNOWLEDGE CENTER
   ═══════════════════════════════════════════════════════════════════ */

html body .blog-index-hero-v9 .hero-backdrop,
html body .blog-index-hero-v9 .glow,
html body .blog-index-hero-v9 .grid-lines {
  display: none !important;
}

html body .hero-blog,
html body .blog-index-hero-v9 {
  background: var(--b33-bg0) !important;
  padding: 72px 0 64px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle hero background */
html body .hero-blog::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 72% 80% at 70% 40%, rgba(24,72,196,0.13), transparent 65%),
    radial-gradient(ellipse 45% 55% at 5% 60%, rgba(0,200,146,0.06), transparent 55%) !important;
  pointer-events: none !important;
}

/* Fine grid overlay */
html body .hero-blog::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  mask-image: radial-gradient(ellipse 90% 70% at 65% 35%, black 5%, transparent 75%) !important;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 65% 35%, black 5%, transparent 75%) !important;
  pointer-events: none !important;
}

/* Hero 2-col shell */
html body .blog-index-shell {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 48px 56px !important;
  align-items: start !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ── Knowledge Center badge ── */
html body .blog-kc-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 22px !important;
  font-family: var(--b33-font-c) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  border: 1px solid rgba(0,200,146,0.22) !important;
  background: rgba(0,200,146,0.06) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
html body .blog-kc-label {
  color: #FFFFFF !important;
  background: rgba(0,200,146,0.14) !important;
  padding: 5px 12px !important;
  border-right: 1px solid rgba(0,200,146,0.18) !important;
}
html body .blog-kc-topics {
  color: var(--b33-teal) !important;
  padding: 5px 12px !important;
}

/* ── Hero H1 ── */
html body .blog-index-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html body .blog-index-copy h1 {
  font-family: var(--b33-font-h) !important;
  font-size: clamp(28px, 3.4vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.026em !important;
  color: #FFFFFF !important;
  margin: 0 0 18px !important;
}
html body .blog-index-copy .hero-text {
  font-family: var(--b33-font-b) !important;
  font-size: 15px !important;
  color: var(--b33-muted) !important;
  line-height: 1.72 !important;
  margin: 0 0 24px !important;
  max-width: 510px !important;
}

/* ── Hero meta badges row (AS + count + topics) ── */
html body .blog-hero-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
}
html body .blog-meta-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--b33-font-c) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 100px !important;
  white-space: nowrap !important;
}
html body .blog-meta-badge-as {
  color: #8AAFD8 !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
}
html body .blog-meta-badge-count {
  color: var(--b33-teal) !important;
  background: rgba(0,200,146,0.06) !important;
  border: 1px solid rgba(0,200,146,0.16) !important;
}
html body .blog-meta-badge-topics {
  color: #7090B8 !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── Hero CTAs ── */
html body .blog-index-copy .hero-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
html body .blog-index-copy .hero-actions .button-primary {
  font-family: var(--b33-font-b) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  background: var(--b33-blue) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(24,72,196,0.32) !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}
html body .blog-index-copy .hero-actions .button-primary:hover {
  background: var(--b33-blue-lt) !important;
  box-shadow: 0 6px 24px rgba(24,72,196,0.44) !important;
}
html body .blog-index-copy .hero-actions .button-ghost {
  font-family: var(--b33-font-b) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--b33-text) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  padding: 12px 22px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s !important;
}
html body .blog-index-copy .hero-actions .button-ghost:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: #FFFFFF !important;
}

/* ── Featured article panel (right col) ── */
html body .blog-featured-panel-v80 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  background: var(--b33-card) !important;
  border: 1px solid var(--b33-border) !important;
  border-radius: var(--b33-radius) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  position: relative !important;
}
html body .blog-featured-panel-v80:hover {
  border-color: rgba(24,72,196,0.30) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.24) !important;
}
html body .blog-featured-panel-v80 > .eyebrow {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 2 !important;
  font-family: var(--b33-font-c) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  background: rgba(24,72,196,0.85) !important;
  border: 1px solid rgba(45,100,224,0.50) !important;
  padding: 4px 10px !important;
  border-radius: 100px !important;
  backdrop-filter: blur(4px) !important;
}
html body .blog-featured-panel-v80 img {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  background: rgba(6,14,34,0.95) !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  box-sizing: border-box !important;
}
html body .blog-featured-copy-v80 {
  padding: 20px 22px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}
html body .blog-featured-copy-v80 .blog-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body .blog-featured-copy-v80 .pill {
  font-family: var(--b33-font-c) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--b33-teal) !important;
  background: rgba(0,200,146,0.08) !important;
  border: 1px solid rgba(0,200,146,0.18) !important;
  padding: 3px 9px !important;
  border-radius: 100px !important;
}
html body .blog-featured-copy-v80 .blog-date {
  font-family: var(--b33-font-b) !important;
  font-size: 11px !important;
  color: var(--b33-muted) !important;
}
html body .blog-featured-copy-v80 h2 {
  font-family: var(--b33-font-h) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: var(--b33-white) !important;
  line-height: 1.32 !important;
  margin: 0 !important;
  letter-spacing: -0.015em !important;
}
html body .blog-featured-copy-v80 p {
  font-family: var(--b33-font-b) !important;
  font-size: 13px !important;
  color: var(--b33-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
html body .blog-featured-copy-v80 .text-link {
  font-family: var(--b33-font-b) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--b33-blue-lt) !important;
  text-decoration: none !important;
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color 0.14s !important;
}
html body .blog-featured-panel-v80:hover .text-link { color: var(--b33-teal) !important; }

/* ── Insight cards (full-width below 2-col) ── */
html body .blog-insights-grid {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
html body .blog-insight-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--b33-border) !important;
  border-radius: var(--b33-radius) !important;
  padding: 20px 22px !important;
  transition: border-color 0.15s !important;
}
html body .blog-insight-card:hover {
  border-color: rgba(255,255,255,0.10) !important;
}
html body .blog-insight-card h2 {
  font-family: var(--b33-font-h) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--b33-white) !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em !important;
}
html body .blog-insight-card p {
  font-family: var(--b33-font-b) !important;
  font-size: 12.5px !important;
  color: var(--b33-muted) !important;
  line-height: 1.62 !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §3 — PARCOURS DE LECTURE
   ═══════════════════════════════════════════════════════════════════ */

html body .blog-paths-section {
  background: var(--b33-bg1) !important;
  padding: 60px 0 64px !important;
  position: relative !important;
  border-top: 1px solid var(--b33-border) !important;
  border-bottom: 1px solid var(--b33-border) !important;
}

html body .blog-paths-header {
  margin-bottom: 40px !important;
  max-width: 600px !important;
}
html body .blog-paths-header h2 {
  font-family: var(--b33-font-h) !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.022em !important;
  margin: 0 0 10px !important;
}
html body .blog-paths-header p {
  font-family: var(--b33-font-b) !important;
  font-size: 14px !important;
  color: var(--b33-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

html body .blog-paths-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

html body .blog-path-card {
  background: rgba(8,18,42,0.65) !important;
  border: 1px solid var(--b33-border) !important;
  border-radius: var(--b33-radius) !important;
  padding: 22px 20px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
html body .blog-path-card:hover {
  border-color: rgba(24,72,196,0.24) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18) !important;
}

html body .blog-path-head {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--b33-border) !important;
}
html body .blog-path-num {
  font-family: var(--b33-font-c) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--b33-teal) !important;
  min-width: 24px !important;
}
html body .blog-path-head h3 {
  font-family: var(--b33-font-h) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--b33-white) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

html body .blog-path-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body .blog-path-links li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  font-family: var(--b33-font-b) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--b33-muted) !important;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s !important;
  -webkit-text-fill-color: var(--b33-muted) !important;
}
html body .blog-path-links li a:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--b33-white) !important;
  -webkit-text-fill-color: var(--b33-white) !important;
}
html body .blog-path-links li a .path-arrow {
  font-size: 11px !important;
  opacity: 0.4 !important;
  transition: opacity 0.12s, transform 0.12s !important;
  flex-shrink: 0 !important;
}
html body .blog-path-links li a:hover .path-arrow {
  opacity: 0.9 !important;
  transform: translateX(2px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §4 — ALL ARTICLES SECTION
   ═══════════════════════════════════════════════════════════════════ */

html body .blog-all-section {
  background: var(--b33-bg0) !important;
  padding: 72px 0 96px !important;
  position: relative !important;
}
html body .blog-all-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50% !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent) !important;
}

html body .blog-all-heading {
  margin-bottom: 40px !important;
}
html body .blog-all-heading .eyebrow {
  font-family: var(--b33-font-c) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--b33-teal) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
html body .blog-all-heading .eyebrow::before,
html body .blog-all-heading .eyebrow::after {
  content: '' !important;
  display: inline-block !important;
  width: 32px !important;
  height: 1px !important;
  background: rgba(0,200,146,0.30) !important;
}
html body .blog-all-heading h2 {
  font-family: var(--b33-font-h) !important;
  font-size: clamp(20px, 2.6vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.022em !important;
  color: #FFFFFF !important;
  margin: 0 0 10px !important;
}
html body .blog-all-heading p {
  font-family: var(--b33-font-b) !important;
  font-size: 14px !important;
  color: var(--b33-muted) !important;
  line-height: 1.65 !important;
  margin: 0 0 14px !important;
  max-width: 680px !important;
}
html body .blog-count-pill {
  display: inline-flex !important;
  font-family: var(--b33-font-c) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  color: var(--b33-teal) !important;
  background: rgba(0,200,146,0.06) !important;
  border: 1px solid rgba(0,200,146,0.16) !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
}

/* ── Filter bar ── */
html body .blog-filter-bar-v80 {
  background: rgba(5,12,28,0.85) !important;
  border: 1px solid var(--b33-border) !important;
  border-radius: var(--b33-radius) !important;
  padding: 0 !important;
  margin-bottom: 40px !important;
  overflow: visible !important;
}

html body .blog-filter-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 18px 9px !important;
  border-bottom: 1px solid var(--b33-border) !important;
  gap: 12px !important;
}
html body .blog-filter-microcopy {
  font-family: var(--b33-font-c) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--b33-muted) !important;
  margin: 0 !important;
}
html body .blog-filter-count-live {
  font-family: var(--b33-font-c) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--b33-muted) !important;
  letter-spacing: 0.05em !important;
}

html body .blog-filter-body {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 14px 18px !important;
}

html body .blog-search-v80 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid var(--b33-border) !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  flex: 1 1 220px !important;
  min-width: 180px !important;
  color: var(--b33-muted) !important;
  font-size: 13px !important;
  transition: border-color 0.14s, background 0.14s !important;
}
html body .blog-search-v80:focus-within {
  border-color: rgba(24,72,196,0.40) !important;
  background: rgba(255,255,255,0.055) !important;
  outline: 2px solid rgba(24,72,196,0.35) !important;
  outline-offset: 2px !important;
}
html body .blog-search-v80 span {
  color: var(--b33-muted) !important;
  font-size: 15px !important;
  user-select: none !important;
}
html body .blog-search-v80 input {
  background: none !important;
  border: none !important;
  outline: none !important;
  font-family: var(--b33-font-b) !important;
  font-size: 13px !important;
  color: var(--b33-text) !important;
  flex: 1 !important;
  min-width: 0 !important;
}
html body .blog-search-v80 input::placeholder {
  color: var(--b33-muted) !important;
  opacity: 0.7 !important;
}

html body .blog-topic-chips-v80 {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
html body .blog-topic-chip-v80 {
  font-family: var(--b33-font-b) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--b33-muted) !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--b33-border) !important;
  border-radius: 100px !important;
  padding: 7px 16px !important;
  cursor: pointer !important;
  transition: color 0.12s, border-color 0.12s, background 0.12s !important;
  white-space: nowrap !important;
}
html body .blog-topic-chip-v80:hover {
  color: #D0E2FF !important;
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.06) !important;
}
html body .blog-topic-chip-v80:focus-visible {
  outline: 2px solid var(--b33-blue-lt) !important;
  outline-offset: 2px !important;
}
html body .blog-topic-chip-v80.active,
html body .blog-topic-chip-v80[aria-pressed="true"] {
  color: #FFFFFF !important;
  background: var(--b33-blue) !important;
  border-color: var(--b33-blue) !important;
  box-shadow: 0 2px 12px rgba(24,72,196,0.36) !important;
}

html body .blog-reset-btn-v80 {
  font-family: var(--b33-font-b) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #D09090 !important;
  background: rgba(200,60,60,0.06) !important;
  border: 1px solid rgba(200,60,60,0.16) !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: background 0.12s, color 0.12s !important;
  white-space: nowrap !important;
}
html body .blog-reset-btn-v80:hover {
  background: rgba(200,60,60,0.12) !important;
  color: #F0B0B0 !important;
}
html body .blog-reset-btn-v80:focus-visible {
  outline: 2px solid rgba(200,60,60,0.50) !important;
  outline-offset: 2px !important;
}

/* ── Empty state ── */
html body .blog-empty-state-v80 {
  font-family: var(--b33-font-b) !important;
  font-size: 14px !important;
  color: var(--b33-muted) !important;
  text-align: center !important;
  padding: 48px 24px !important;
  border: 1px dashed var(--b33-border) !important;
  border-radius: var(--b33-radius) !important;
  margin-bottom: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §5 — ARTICLE CARDS GRID
   ═══════════════════════════════════════════════════════════════════ */

html body .blog-cards-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}

/* Load-more progressive reveal — hide cards after position 18 until button clicked */
html body .blog-cards-wrap:not(.blog-all-loaded):not(.blog-filter-active)
  [data-article-card]:nth-child(n+19) {
  display: none !important;
}

/* Individual card */
html body .blog-cards-wrap [data-article-card] {
  background: var(--b33-card) !important;
  border: 1px solid var(--b33-border) !important;
  border-radius: var(--b33-radius) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.14s !important;
  box-shadow: none !important;
  position: relative !important;
}
html body .blog-cards-wrap [data-article-card]:hover {
  border-color: rgba(24,72,196,0.28) !important;
  box-shadow: 0 6px 26px rgba(0,0,0,0.22) !important;
  transform: translateY(-2px) !important;
}
html body .blog-cards-wrap [data-article-card]:focus-visible {
  outline: 2px solid var(--b33-blue-lt) !important;
  outline-offset: 3px !important;
}

/* Topic accent line at top of card */
html body .blog-cards-wrap [data-article-card]::before {
  content: '' !important;
  display: block !important;
  height: 2px !important;
  background: rgba(0,200,146,0.20) !important;
  transition: background 0.16s !important;
}
html body .blog-cards-wrap [data-article-card][data-topic="ddos"]::before {
  background: rgba(220,80,80,0.30) !important;
}
html body .blog-cards-wrap [data-article-card][data-topic="bgp"]::before {
  background: rgba(24,72,196,0.40) !important;
}
html body .blog-cards-wrap [data-article-card][data-topic="network"]::before {
  background: rgba(0,200,146,0.30) !important;
}
html body .blog-cards-wrap [data-article-card][data-topic="gaming"]::before {
  background: rgba(200,140,0,0.35) !important;
}
html body .blog-cards-wrap [data-article-card]:hover::before {
  background: rgba(24,72,196,0.55) !important;
}

/* Card image zone */
html body .blog-cards-wrap .blog-home-visual {
  width: 100% !important;
  height: 140px !important;
  overflow: hidden !important;
  background: rgba(5,12,30,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}
html body .blog-cards-wrap .blog-home-visual-image,
html body .blog-cards-wrap .blog-home-visual img {
  width: 100% !important;
  height: 100% !important;
  max-height: 116px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  display: block !important;
}
html body .blog-cards-wrap svg { max-height: 100px !important; }

/* Card body */
html body .blog-cards-wrap .blog-home-card-copy {
  padding: 16px 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  flex: 1 !important;
}

/* Meta row (pill + time) */
html body .blog-cards-wrap .blog-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}
html body .blog-cards-wrap .pill {
  font-family: var(--b33-font-c) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--b33-teal) !important;
  background: rgba(0,200,146,0.07) !important;
  border: 1px solid rgba(0,200,146,0.16) !important;
  padding: 3px 8px !important;
  border-radius: 100px !important;
  white-space: nowrap !important;
}
html body .blog-cards-wrap [data-topic="ddos"] .pill {
  color: #E08080 !important;
  background: rgba(220,80,80,0.07) !important;
  border-color: rgba(220,80,80,0.15) !important;
}
html body .blog-cards-wrap [data-topic="bgp"] .pill {
  color: #7AACF0 !important;
  background: rgba(24,72,196,0.10) !important;
  border-color: rgba(24,72,196,0.20) !important;
}
html body .blog-cards-wrap [data-topic="gaming"] .pill {
  color: #D4A840 !important;
  background: rgba(200,140,0,0.08) !important;
  border-color: rgba(200,140,0,0.18) !important;
}
html body .blog-cards-wrap .blog-date {
  font-family: var(--b33-font-b) !important;
  font-size: 11px !important;
  color: var(--b33-muted) !important;
}

/* Card title */
html body .blog-cards-wrap h3 {
  font-family: var(--b33-font-h) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--b33-white) !important;
  line-height: 1.32 !important;
  margin: 2px 0 0 !important;
  letter-spacing: -0.012em !important;
  -webkit-text-fill-color: var(--b33-white) !important;
}

/* Card excerpt */
html body .blog-cards-wrap p {
  font-family: var(--b33-font-b) !important;
  font-size: 12.5px !important;
  color: var(--b33-muted) !important;
  line-height: 1.62 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-text-fill-color: var(--b33-muted) !important;
}

/* Read link */
html body .blog-cards-wrap .text-link {
  font-family: var(--b33-font-b) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--b33-blue-lt) !important;
  text-decoration: none !important;
  margin-top: auto !important;
  padding-top: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  -webkit-text-fill-color: var(--b33-blue-lt) !important;
  transition: color 0.12s !important;
}
html body .blog-cards-wrap [data-article-card]:hover .text-link {
  color: var(--b33-teal) !important;
  -webkit-text-fill-color: var(--b33-teal) !important;
}

/* Compact grid (no visual/image) */
html body .resource-card-grid-compact [data-article-card] {
  padding: 16px 18px !important;
}

/* ── Load more ── */
html body .blog-load-more-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-top: 40px !important;
}
html body .blog-load-more-btn {
  font-family: var(--b33-font-b) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--b33-text) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 8px !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  transition: background 0.14s, border-color 0.14s, color 0.14s !important;
}
html body .blog-load-more-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
html body .blog-load-more-btn:focus-visible {
  outline: 2px solid var(--b33-blue-lt) !important;
  outline-offset: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §6 — RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet 1199px */
@media (max-width: 1199px) {
  html body .blog-paths-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  html body .blog-cards-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Tablet 1023px */
@media (max-width: 1023px) {
  html body .blog-index-shell {
    grid-template-columns: 1fr !important;
    gap: 32px 0 !important;
  }
  html body .blog-featured-panel-v80 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: 560px !important;
  }
  html body .blog-insights-grid {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
  html body .hero-blog,
  html body .blog-index-hero-v9 {
    padding: 52px 0 48px !important;
  }
}

/* Mobile 767px */
@media (max-width: 767px) {
  html body .hero-blog,
  html body .blog-index-hero-v9 {
    padding: 40px 0 36px !important;
  }
  html body .blog-index-copy h1 {
    font-size: 28px !important;
  }
  html body .blog-index-copy .hero-text {
    font-size: 14px !important;
  }
  html body .blog-hero-meta {
    gap: 6px !important;
  }
  html body .blog-insights-grid {
    grid-template-columns: 1fr !important;
  }
  html body .blog-paths-section {
    padding: 40px 0 44px !important;
  }
  html body .blog-paths-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body .blog-all-section {
    padding: 48px 0 60px !important;
  }
  html body .blog-filter-body {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body .blog-search-v80 {
    width: 100% !important;
  }
  html body .blog-topic-chips-v80 {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  html body .blog-topic-chips-v80::-webkit-scrollbar {
    display: none !important;
  }
  html body .blog-cards-wrap {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  html body .blog-index-copy .hero-actions {
    flex-direction: column !important;
  }
  html body .blog-index-copy .hero-actions .button-primary,
  html body .blog-index-copy .hero-actions .button-ghost {
    text-align: center !important;
    justify-content: center !important;
  }
  html body .blog-load-more-btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Mobile 479px */
@media (max-width: 479px) {
  html body .blog-index-copy h1 {
    font-size: 24px !important;
  }
  html body .blog-meta-badge {
    font-size: 8.5px !important;
    padding: 3px 8px !important;
  }
  html body .blog-path-card {
    padding: 16px 16px !important;
  }
  html body .blog-kc-badge {
    font-size: 8.5px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   §7 — v95-bundle SPECIFICITY OVERRIDES (blog listing)
   Needed because v95-bundle sets dark navy on .section .glass-card *
   ═══════════════════════════════════════════════════════════════════ */

html body .blog-cards-wrap .glass-card h3,
html body .blog-cards-wrap .blog-home-card h3 {
  color: var(--b33-white) !important;
  -webkit-text-fill-color: var(--b33-white) !important;
}
html body .blog-cards-wrap .glass-card p,
html body .blog-cards-wrap .blog-home-card p {
  color: var(--b33-muted) !important;
  -webkit-text-fill-color: var(--b33-muted) !important;
}
html body .blog-cards-wrap .glass-card strong,
html body .blog-cards-wrap .blog-home-card strong {
  color: var(--b33-text) !important;
  -webkit-text-fill-color: var(--b33-text) !important;
}
html body .blog-path-links li a {
  color: var(--b33-muted) !important;
  -webkit-text-fill-color: var(--b33-muted) !important;
}
html body .blog-path-links li a:hover {
  color: var(--b33-white) !important;
  -webkit-text-fill-color: var(--b33-white) !important;
}
html body .blog-insight-card h2 {
  color: var(--b33-white) !important;
  -webkit-text-fill-color: var(--b33-white) !important;
}
html body .blog-insight-card p {
  color: var(--b33-muted) !important;
  -webkit-text-fill-color: var(--b33-muted) !important;
}
html body .blog-path-head h3 {
  color: var(--b33-white) !important;
  -webkit-text-fill-color: var(--b33-white) !important;
}
html body .blog-featured-copy-v80 h2 {
  color: var(--b33-white) !important;
  -webkit-text-fill-color: var(--b33-white) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
html body .blog-featured-copy-v80 p {
  color: var(--b33-muted) !important;
  -webkit-text-fill-color: var(--b33-muted) !important;
}
html body .blog-paths-header h2 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
html body .blog-paths-header p {
  color: var(--b33-muted) !important;
  -webkit-text-fill-color: var(--b33-muted) !important;
}