/* ───────────────────────────────────────────────────────────────────
 * Blog hotfix v56.467 (2026-05-15)
 *
 * Fixes 4 P0 contrast + structural bugs on /blog/:
 *   1. .er-related-tool injected inside the dark Bible hero card
 *      (light-bg styling on dark gradient = invisible text)
 *   2. .cnv-callout injected before the European MICE hero title
 *      (light glassmorphism on dark gradient = unreadable + hides title)
 *   3. "FEATURED SERIES" eyebrow contrast on top of purple/blue gradient
 *   4. Body text + "Start the series" white-on-dark needs explicit override
 *      since browsers handle nested-<a> rendering inconsistently
 *
 * Strategy: scope every fix to the two known hero anchors via their
 * `style="...linear-gradient(135deg,#1e1b4b..." / "...#0c4a6e..."`
 * inline backgrounds. The fix is non-destructive — if the injection
 * script changes structure later, only these scoped rules need updating.
 *
 * Load order: AFTER /blog/_cta-bundle.css so this wins specificity.
 * ─────────────────────────────────────────────────────────────────── */

/* ── 1. Rescue the misplaced .er-related-tool inside dark Bible card ─ */
a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool,
a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool {
  /* Glass card over dark gradient — fits the context */
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 14px 0 16px !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  color: #fff !important;
  text-decoration: none !important;
}
a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool .er-related-tool-icon,
a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool .er-related-tool-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  flex-shrink: 0 !important;
}
a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool .er-related-tool-icon::before,
a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool .er-related-tool-icon::before {
  content: "🛠";
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool .er-related-tool-body,
a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool .er-related-tool-body {
  flex: 1 !important;
  min-width: 0 !important;
}
a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool .er-related-tool-label,
a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool .er-related-tool-label {
  display: block !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 2px !important;
}
a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool .er-related-tool-title,
a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool .er-related-tool-title {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}
a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool .er-related-tool-desc,
a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool .er-related-tool-desc {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}
a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool .er-related-tool-cta,
a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool .er-related-tool-cta {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ── 2. Rescue the misplaced .cnv-callout inside dark MICE card ────── */
a[style*="linear-gradient(135deg,#0c4a6e"] .cnv-callout,
a[style*="linear-gradient(135deg,#1e1b4b"] .cnv-callout {
  display: block !important;
  margin: 14px 0 16px !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
a[style*="linear-gradient(135deg,#0c4a6e"] .cnv-callout-eyebrow,
a[style*="linear-gradient(135deg,#1e1b4b"] .cnv-callout-eyebrow {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 4px !important;
}
a[style*="linear-gradient(135deg,#0c4a6e"] .cnv-callout-title,
a[style*="linear-gradient(135deg,#1e1b4b"] .cnv-callout-title {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}
a[style*="linear-gradient(135deg,#0c4a6e"] .cnv-callout-body,
a[style*="linear-gradient(135deg,#1e1b4b"] .cnv-callout-body {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
}
a[style*="linear-gradient(135deg,#0c4a6e"] .cnv-callout-cta,
a[style*="linear-gradient(135deg,#1e1b4b"] .cnv-callout-cta {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e1b4b !important;
  background: #fff !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: transform 0.15s ease !important;
}
a[style*="linear-gradient(135deg,#0c4a6e"] .cnv-callout-cta:hover,
a[style*="linear-gradient(135deg,#1e1b4b"] .cnv-callout-cta:hover {
  transform: translateY(-1px) !important;
}

/* ── 3. Eyebrow contrast bump on dark hero cards ───────────────────── */
a[style*="linear-gradient(135deg,#1e1b4b"] > div[style*="color:#a78bfa"] {
  color: #c4b5fd !important; /* purple-300 over deep-purple gradient */
}
a[style*="linear-gradient(135deg,#0c4a6e"] > div[style*="color:#93c5fd"] {
  color: #bfdbfe !important; /* blue-200 over deep-blue gradient */
}

/* ── 4. Ensure hero body + "Start the series" CTA stay white ────────
 *      (defensive — defends against any future injection that might
 *      add a `color: muted` rule downstream) */
a[style*="linear-gradient(135deg,#1e1b4b"] > p,
a[style*="linear-gradient(135deg,#0c4a6e"] > p {
  color: rgba(255, 255, 255, 0.85) !important;
}
a[style*="linear-gradient(135deg,#1e1b4b"] > div[style*="color:#fff"],
a[style*="linear-gradient(135deg,#0c4a6e"] > div[style*="color:#fff"] {
  color: #fff !important;
  font-weight: 600 !important;
}

/* ── 5. Tighten spacing between hero series cards (was ~32px+ gap) ── */
section[style*="grid-template-columns:1fr"][style*="gap:18px"] {
  gap: 14px !important;
  margin-bottom: 32px !important;
}

/* ── 6. Card hover feedback (was too subtle) ───────────────────────── */
a[style*="linear-gradient(135deg,#1e1b4b"]:hover,
a[style*="linear-gradient(135deg,#0c4a6e"]:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 24px 56px rgba(30, 27, 75, 0.28) !important;
}

/* ── 7. Mobile guardrail: callouts can shrink padding on narrow screens */
@media (max-width: 600px) {
  a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool,
  a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool,
  a[style*="linear-gradient(135deg,#0c4a6e"] .cnv-callout,
  a[style*="linear-gradient(135deg,#1e1b4b"] .cnv-callout {
    padding: 12px 14px !important;
    margin: 12px 0 !important;
  }
  a[style*="linear-gradient(135deg,#1e1b4b"] .er-related-tool .er-related-tool-icon,
  a[style*="linear-gradient(135deg,#0c4a6e"] .er-related-tool .er-related-tool-icon {
    width: 32px !important;
    height: 32px !important;
  }
}