/* ══════════════════════════════════════════════════════════════════════
   HERO MIRROR + DENSITY PASS
   Loaded after affordability-refinements.css and cluster-explainer.css.
   1. "opposite" stays readable, with a faded reflection beneath it.
   2. Hero columns balanced: larger two-line headline, shorter video column.
   3. KPI strip upgraded to compact tiles with Causes signature dashes.
   4. Tighter vertical rhythm around chapter rules.
   5. Moment 2 comparison flattened into one surface split by a "mirror line".
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Readable word with a reflection ── */
.mirror-word {
  position: relative;
  display: inline-block;
  color: var(--system-accent);
  /* Fixed box height keeps the reflection on the baseline at every breakpoint */
  line-height: 1.04;
}

/* Decorative copy (aria-hidden in markup), flipped top-to-bottom so the
   letters keep their left-to-right order, then faded out like glass. */
.mirror-reflection {
  position: absolute;
  left: 0;
  /* Mirror axis sits just under the baseline (about 0.165em above the box bottom) */
  top: calc(100% - 0.3em);
  width: 100%;
  transform: scaleY(-1);
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* Mask is applied before the flip, so "to top" fades away from the word */
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 24%, transparent 56%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.5) 24%, transparent 56%);
}

/* ── 2. Headline scale (sized to its column, two lines on wider screens) ── */
.hero-content {
  container-type: inline-size;
}

.hero-title {
  font-size: clamp(32px, 4.4vw, 64px) !important;
  font-size: clamp(32px, 8.4cqi, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 20px !important;
}

@media (min-width: 768px) {
  /* Second line drops a little to leave room for the reflection */
  .hero-title-break {
    display: block;
    margin-top: 0.3em;
  }
}

@media (max-width: 767px) {
  /* Narrow screens wrap freely, so open the line spacing instead */
  .hero-title {
    line-height: 1.44 !important;
  }
}

/* Balanced hero columns: the video column no longer outgrows the text */
@media (min-width: 901px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 236px !important;
    gap: 48px !important;
    align-items: center !important;
    padding-top: 8px !important;
  }

  .hero-video-card {
    max-width: 236px !important;
    margin-right: 0 !important;
  }
}

/* ── 3. KPI strip as compact tiles ── */
.hero-kpi-strip {
  gap: 12px !important;
  padding: 0 !important;
  margin-top: 4px !important;
  border-top: none !important;
  border-bottom: none !important;
}

.hero-kpi-strip .kpi-item {
  gap: 4px !important;
  padding: 14px 16px 16px;
  background: var(--system-background);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius-md);
}

.hero-kpi-strip .kpi-item::before {
  content: "";
  display: block;
  width: 20px;
  height: 3.5px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
  background: var(--kpi-dash, var(--causes-indigo));
}

.hero-kpi-strip .kpi-item:nth-child(1) { --kpi-dash: var(--causes-indigo); }
.hero-kpi-strip .kpi-item:nth-child(2) { --kpi-dash: var(--causes-red); }
.hero-kpi-strip .kpi-item:nth-child(3) { --kpi-dash: var(--causes-yellow); }
.hero-kpi-strip .kpi-item:nth-child(4) { --kpi-dash: var(--causes-green); }

.hero-kpi-strip .kpi-value {
  font-size: 19px !important;
  letter-spacing: -0.01em !important;
}

.hero-kpi-strip .kpi-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  line-height: 1.35 !important;
  margin-top: 0 !important;
}

/* ── 4. Vertical rhythm ── */
.chapter-rule {
  margin: 32px auto 24px !important;
}

/* ── 5. Moment 2: one surface, two sides, a mirror line between ── */
@media (min-width: 769px) {
  .bento-contrast-grid {
    position: relative;
    gap: 0 !important;
    border: 1px solid var(--separator);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .bento-contrast-grid::after {
    content: "";
    position: absolute;
    top: var(--space-5);
    bottom: var(--space-5);
    left: 50%;
    width: 2px;
    margin-left: -1px;
    border-radius: var(--radius-full);
    background: var(--causes-signature-band-vertical);
    pointer-events: none;
  }

  .bento-contrast-grid .bento-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: var(--space-5) var(--space-6) !important;
  }

  /* The traditional side reads as a reflection of the Causes Amplify side */
  .bento-card-traditional {
    text-align: right;
  }

  .bento-card-traditional .bento-watermark {
    right: auto;
    left: -32px;
  }

  .bento-card-header {
    margin-bottom: var(--space-4) !important;
  }
}