/* ==========================================================================
   Overview — Webflow code component styles (rendered inside its Shadow DOM)

   Same conventions as faq.css: the Figma frame is the source of truth, a
   Webflow variable is used only where its value matches Figma, every
   variable has the Figma value as fallback, ALL values live in the token
   block below.

   The heading and body are Webflow slots (light DOM), styled by
   slot-styles.ts. The --ov-h-* / --ov-p-* tokens below inherit into them, so
   the container queries here still resize the slotted text.
   ========================================================================== */

:host {
  display: block;

  /* ===== Webflow variables (value matches Figma) ===== */

  --ov-font-primary:   var(--fonts--primary, "Bitter");
  --ov-font-secondary: var(--fonts--secondary, "Inter");

  --ov-bg:   var(--colors--equity-blue, #132c3a);   /* Figma Brand-Navy   */
  --ov-text: var(--colors--clear-ledger, #f5f7fb);  /* Figma Text-Inverse */

  --ov-pad-x:     var(--spacing--horizontal-padding, 5rem); /* 80px */
  --ov-pad-y:     var(--spacing--vertical-padding, 5rem);   /* 80px (Side by side) */
  --ov-max-width: var(--spacing--max-width, 1440px);

  /* Heading: family + weight match H2; mobile uses H2 "M -" (no mobile Figma) */
  --ov-h-family: var(--h2--font-family, var(--ov-font-primary));
  --ov-h-weight: var(--h2--font-weight, 400);
  --ov-h-size-m: var(--h2--m-font-size, 2.4rem);
  --ov-h-lh-m:   var(--h2--m-line-height, 3rem);

  /* ===== Fixed Figma values (no matching variable) ===== */

  --ov-pad-x-tablet:  2rem;       /* 32px sides at 991px and below (as the other modules) */
  --ov-pad-y-stacked: 7.5rem;     /* 120px (Stacked) */

  --ov-split-gap: 7.5rem;         /* 120px heading ↔ paragraph (Side by side) */
  --ov-stack-gap: 1.5rem;         /* 24px heading → paragraph (Stacked) */
  --ov-stack-w:   52.3125rem;     /* 837px text column (Stacked) */

  --ov-h-size: 2.8125rem;         /* 45px / 400 / 122% (H2 is 44.8px) */
  --ov-h-lh:   122%;
  --ov-p-size: 1.125rem;          /* 18px / 300 / 150% */
  --ov-p-lh:   150%;

  /* Background image, "Bottom-right shape": the Figma "Vector" (1098 × 743,
     rotated -60°, mirrored) exported with its rotation is 1192 × 1322px,
     placed 654px past the right edge and 770px below the bottom */
  --ov-bg-w:      32.5rem;
  --ov-bg-right: 0px;
  --ov-bg-bottom: 0px;
  --ov-bg-scale:  1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Container query anchored inside the Shadow DOM (see faq.css for why) */
.ov {
  container: ov / inline-size;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-inline: var(--ov-pad-x);
  background: var(--ov-bg);
  color: var(--ov-text);
}

/* Webflow's tablet breakpoint (viewport, so it lines up with the rest of the site) */
@media (max-width: 991px) {
  .ov {
    padding-inline: var(--ov-pad-x-tablet);
  }
}

.ov-bg {
  position: absolute;
  z-index: -1;
  right: calc(var(--ov-bg-right) * var(--ov-bg-scale));
  bottom: calc(var(--ov-bg-bottom) * var(--ov-bg-scale));
  width: calc(var(--ov-bg-w) * var(--ov-bg-scale));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.ov-bg--cover {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ov-inner {
  width: 100%;
  max-width: var(--ov-max-width);
  margin-inline: auto;
  padding-block: var(--ov-pad-y);
}

.ov-content {
  display: flex;
}

/* Typography tokens for the slotted heading / body (read by slot-styles.ts) */
.ov-heading {
  --ov-slot-family: var(--ov-h-family), Georgia, serif;
  --ov-slot-size:   var(--ov-h-size);
  --ov-slot-weight: var(--ov-h-weight);
  --ov-slot-lh:     var(--ov-h-lh);
  min-width: 0;
}

.ov-body {
  --ov-slot-family: var(--ov-font-secondary), system-ui, sans-serif;
  --ov-slot-size:   var(--ov-p-size);
  --ov-slot-weight: 300;
  --ov-slot-lh:     var(--ov-p-lh);
  min-width: 0;
}

/* ----- Side by side: heading left, paragraph right, equal columns ----- */

.ov--split .ov-content {
  align-items: flex-start;
  gap: var(--ov-split-gap);
}

.ov--split .ov-heading,
.ov--split .ov-body {
  flex: 1 1 0;
}

/* ----- Stacked: heading over paragraph, 837px column ----- */

.ov--stacked .ov-inner {
  padding-block: var(--ov-pad-y-stacked);
}

.ov--stacked .ov-content {
  flex-direction: column;
  gap: var(--ov-stack-gap);
  max-width: var(--ov-stack-w);
}

/* ----- Responsive ----- */

@container ov (max-width: 1000px) {
  .ov--split .ov-content {
    gap: 3rem;
  }

  .ov-bg {
    --ov-bg-scale: 0.75;
  }
}

@container ov (max-width: 767px) {
  .ov-inner,
  .ov--stacked .ov-inner {
    padding-block: 4rem;
  }

  .ov--split .ov-content {
    flex-direction: column;
    gap: var(--ov-stack-gap);
  }

  .ov-heading {
    --ov-slot-size: var(--ov-h-size-m);
    --ov-slot-lh:   var(--ov-h-lh-m);
  }

  .ov-body {
    --ov-slot-size: 1rem;
  }

  .ov-bg {
    --ov-bg-scale: 0.5;
  }
}