/* ============================================================
   ULSE B&W SPLIT — Alternating black/white cards per paragraph
   Customize via CSS vars:
     --ulse-bw-primary: black tone
     --ulse-bw-secondary: grey accent
     --ulse-bw-text-light/dark: text colors
============================================================ */

.ulse-bw-split {
  --ulse-bw-primary: #000;
  --ulse-bw-secondary: #444;
  --ulse-bw-text-dark: #111;
  --ulse-bw-text-light: #f7f7f7;
  --ulse-bw-line: rgba(0,0,0,0.92);

  font-family: "Inter", Arial, sans-serif;
  width: 100%;
  margin: 0 auto 32px;
}

.ulse-bw-split article {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.ulse-bw-split .ulse-para {
  width: 100%;
  box-sizing: border-box;
  padding: 28px 26px 28px 60px; /* extra left room for the triple lines */
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.ulse-bw-split .ulse-para::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12), transparent 45%);
  opacity: 0.7;
}

.ulse-bw-split .ulse-para::after {
  /* Taller, thicker triple lines on the left */
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 20px;
  width: 28px;
  background: linear-gradient(
    to right,
    var(--ulse-bw-line) 0px,
    var(--ulse-bw-line) 6px,
    transparent 6px,
    transparent 10px,
    var(--ulse-bw-line) 10px,
    var(--ulse-bw-line) 16px,
    transparent 16px,
    transparent 20px,
    var(--ulse-bw-line) 20px,
    var(--ulse-bw-line) 26px,
    transparent 26px,
    transparent 28px
  );
  opacity: 0.9;
  z-index: 0;
}

/* Odd: white card, dark text */
.ulse-bw-split .ulse-para.para-odd {
  background: #f9f9f9;
  color: var(--ulse-bw-text-dark);
  text-shadow:
    0 1px 1px rgba(255,255,255,0.5),
    0 1px 3px rgba(0,0,0,0.35);
}

/* Even: black card, light text */
.ulse-bw-split .ulse-para.para-even {
  --ulse-bw-line: rgba(255,255,255,0.92);
  background: #0c0c0c;
  color: var(--ulse-bw-text-light);
  border-color: rgba(255,255,255,0.08);
  text-shadow:
    0 1px 1px rgba(0,0,0,0.8),
    0 1px 3px rgba(255,255,255,0.25);
}

.ulse-bw-split .ulse-para > * {
  position: relative;
  z-index: 1;
  line-height: 1.85;
}

.ulse-bw-split h1,
.ulse-bw-split h2,
.ulse-bw-split h3 {
  margin: 0 0 14px 0;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.ulse-bw-split .ulse-para.para-odd h1,
.ulse-bw-split .ulse-para.para-odd h2,
.ulse-bw-split .ulse-para.para-odd h3 {
  color: var(--ulse-bw-primary);
  text-shadow:
    0 2px 6px rgba(0,0,0,0.5),
    0 0 8px rgba(255,255,255,0.25);
}

.ulse-bw-split .ulse-para.para-even h1,
.ulse-bw-split .ulse-para.para-even h2,
.ulse-bw-split .ulse-para.para-even h3 {
  color: var(--ulse-bw-text-light);
  text-shadow:
    0 2px 6px rgba(0,0,0,0.75),
    0 0 10px rgba(255,255,255,0.28);
}

.ulse-bw-split .ulse-para p {
  margin: 0 0 12px 0;
}

.ulse-bw-split .ulse-para strong,
.ulse-bw-split .ulse-para b,
.ulse-bw-split .ulse-para a {
  font-weight: 700;
  color: var(--ulse-bw-secondary);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--ulse-bw-secondary);
  transition: color 0.2s ease, box-shadow 0.2s ease, text-shadow 0.2s ease;
}

.ulse-bw-split .ulse-para.para-even strong,
.ulse-bw-split .ulse-para.para-even b,
.ulse-bw-split .ulse-para.para-even a {
  color: #e6e6e6;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.7);
}

.ulse-bw-split .ulse-para a:hover {
  color: var(--ulse-bw-primary);
  text-shadow:
    0 0 6px rgba(0,0,0,0.4),
    0 0 10px rgba(255,255,255,0.25);
  box-shadow:
    inset 0 -2px 0 var(--ulse-bw-primary),
    0 4px 14px rgba(0,0,0,0.2);
}

.ulse-bw-split .ulse-para.para-even a:hover {
  color: #fff;
  text-shadow:
    0 0 8px rgba(255,255,255,0.5),
    0 0 12px rgba(0,0,0,0.6);
  box-shadow:
    inset 0 -2px 0 rgba(255,255,255,0.9),
    0 4px 16px rgba(0,0,0,0.25);
}