/**
 * Brand Bridge B2 — Learn pages (how-to + easy cluster)
 */

body.kp-bb-learn {
  --bb-bg: #f8fcff;
  --bb-bg-glow: rgba(227, 6, 19, 0.04);
  --bb-surface: #ffffff;
  --bb-surface-2: #eef6ff;
  --bb-text: #0f172a;
  --bb-muted: #64748b;
  --bb-border: #d4e5f7;
  --bb-accent: #e30613;
  --bb-accent-hover: #b8050f;
  --bb-link: #0059a8;
  --bb-radius: 0.75rem;
  --bb-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 420px at 12% -8%, var(--bb-bg-glow), transparent 55%),
    linear-gradient(180deg, #f8fcff 0%, #f3f7fb 100%) !important;
  color: var(--bb-text);
  font-family: var(--bb-font);
}

html[data-theme="dark"] body.kp-bb-learn {
  --bb-bg: #0b1220;
  --bb-bg-glow: rgba(227, 6, 19, 0.12);
  --bb-surface: #151d2e;
  --bb-surface-2: #1e293b;
  --bb-text: #f8fafc;
  --bb-muted: #94a3b8;
  --bb-border: #2a364a;
  --bb-accent: #ff4d4d;
  --bb-accent-hover: #e30613;
  --bb-link: #93c5fd;
  background:
    radial-gradient(900px 380px at 10% -10%, var(--bb-bg-glow), transparent 50%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%) !important;
}

body.kp-bb-learn,
body.kp-bb-learn #page,
body.kp-bb-learn .site,
body.kp-bb-learn .site-content,
body.kp-bb-learn #content,
body.kp-bb-learn .content-area,
body.kp-bb-learn .inside-article,
body.kp-bb-learn .one-container .site-content {
  background: transparent !important;
  color: var(--bb-text);
}

body.kp-bb-learn #page,
body.kp-bb-learn .site {
  background: inherit !important;
}

body.kp-bb-learn .page-header,
body.kp-bb-learn #right-sidebar,
body.kp-bb-learn .generate-columns-container > .sidebar,
body.kp-bb-learn .entry-meta,
body.kp-bb-learn .entry-header:not(.kp-learn__header) {
  display: none !important;
}

body.kp-bb-learn .kp-movie.kp-category-layout {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  transform: none !important;
}

body.kp-bb-learn .kp-learn__hero {
  margin-bottom: 0.85rem;
}

body.kp-bb-learn .kp-learn__title,
body.kp-bb-learn h1.kp-movie__title {
  margin: 0 !important;
  font-family: var(--bb-font) !important;
  font-weight: 800 !important;
  font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--bb-text) !important;
  background: transparent !important;
  text-align: left !important;
}

html[data-theme="dark"] body.kp-bb-learn .kp-learn__title,
html[data-theme="dark"] body.kp-bb-learn h1.kp-movie__title {
  color: #f8fafc !important;
}

.kp-learn__lede {
  margin: 0.65rem 0 0 !important;
  max-width: 40rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--bb-muted) !important;
  background: transparent !important;
}

/* Guide prose */
body.kp-bb-learn .kp-learn__prose,
body.kp-bb-learn .kp-learn-intro-wrap {
  margin: 0 0 1.35rem;
  font-family: var(--bb-font);
  color: var(--bb-text);
  background: transparent !important;
}

body.kp-bb-learn .kp-learn__prose h2,
body.kp-bb-learn .kp-learn-intro-wrap h2 {
  margin: 1.5rem 0 0.65rem !important;
  font-family: var(--bb-font) !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.02em;
  color: var(--bb-text) !important;
  background: transparent !important;
}

body.kp-bb-learn .kp-learn__prose h2:first-child,
body.kp-bb-learn .kp-learn-intro-wrap h2:first-child {
  margin-top: 0 !important;
}

body.kp-bb-learn .kp-learn__prose p,
body.kp-bb-learn .kp-learn-intro-wrap p,
body.kp-bb-learn .kp-learn__prose li,
body.kp-bb-learn .kp-learn-intro-wrap li {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--bb-text) !important;
  background: transparent !important;
}

body.kp-bb-learn .kp-learn__prose a,
body.kp-bb-learn .kp-learn-intro-wrap a {
  color: var(--bb-accent) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.kp-bb-learn .kp-learn__prose a:hover,
body.kp-bb-learn .kp-learn-intro-wrap a:hover {
  color: var(--bb-accent-hover) !important;
}

body.kp-bb-learn .kp-learn__prose ul,
body.kp-bb-learn .kp-learn__prose ol,
body.kp-bb-learn .kp-learn-intro-wrap ul {
  margin: 0.75rem 0 1rem;
  padding-left: 1.25rem;
}

.kp-learn__example {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--bb-radius);
  border: 1px solid var(--bb-border);
  background: var(--bb-surface);
}

.kp-learn__example-label {
  margin: 0 0 0.45rem !important;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bb-muted) !important;
}

.kp-learn__example-code {
  margin: 0 0 0.45rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bb-border);
  background: var(--bb-surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--bb-text);
  overflow-x: auto;
}

.kp-learn__example-note {
  margin: 0 !important;
  font-size: 0.82rem;
  color: var(--bb-muted) !important;
  font-style: italic;
}

body.kp-bb-learn .kp-bb-row__title,
body.kp-bb-learn .kp-bb-row__meta,
body.kp-bb-learn .kp-movie__related-title {
  background: transparent !important;
}

@media (max-width: 768px) {
  body.kp-bb-learn #content,
  body.kp-bb-learn .site-content,
  body.kp-bb-learn .content-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}