/* ==========================================================================
   The Problem + Problem Card — Webflow code component styles
   (each renders inside its own Shadow DOM; both load this file)

   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.

   Heading and Resolution are slots (light DOM). Their type is set here as
   --slot-* variables on the slot containers, which inherit into the slotted
   text and are applied by shared/slot-text.ts.
   ========================================================================== */

:host {
  display: block;

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

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

  --pb-navy:        var(--colors--equity-blue, #132c3a);   /* Figma Brand-Navy / Text-Primary */
  --pb-slate:       var(--colors--market-slate, #3c6e82);  /* Figma Brand-Teal / Text-Secondary */
  --pb-light-blue:  var(--colors--trust-blue, #7fcada);    /* Figma Brand-Light-Blue  */
  --pb-orange:      var(--colors--dividend-gold, #ff971e); /* Figma Brand-Orange      */
  --pb-orange-tint: var(--colors--light-dividend, #ffe8c7);/* Figma Brand-Orange-Tint */
  --pb-off-white:   var(--colors--clear-ledger, #f5f7fb);  /* Figma Neutral-Off-white / Text-Inverse */
  --pb-white:       var(--colors--white, #ffffff);

  --pb-pad-x:     var(--spacing--horizontal-padding, 5rem); /* 80px */
  --pb-pad-y:     var(--spacing--vertical-padding, 5rem);   /* 80px */
  --pb-max-width: var(--spacing--max-width, 1440px);
  --pb-card-radius: var(--spacing--card-roundness, 2.5rem); /* 40px */

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

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

  --pb-pad-x-tablet: 2rem;        /* 32px sides at 991px and below (as the other modules) */
  --pb-section-gap:  3.5rem;      /* 56px header → columns → resolution */
  --pb-header-gap:   1rem;        /* 16px eyebrow → heading */
  --pb-heading-w:    57.5rem;     /* 920px */
  --pb-h-size:       2.8125rem;   /* 45px / 400 / 122% (H2 is 44.8px) */
  --pb-h-lh:         122%;

  /* Cards */
  --pb-card-pad:     2.5rem;      /* 40px */
  --pb-card-gap:     1.25rem;     /* 20px icon → content */
  --pb-content-gap:  1rem;        /* 16px title → body */
  --pb-icon-tile:    3.5rem;      /* 56px */
  --pb-icon:         1.5rem;      /* 24px */
  --pb-title-size:   1.5rem;      /* 24px / 700 / 121% */
  --pb-title-lh:     121%;
  --pb-body-size:    1rem;        /* 16px / 300 / 150% */

  /* The gap between the cards */
  --pb-gap-w:        11rem;       /* 176px */
  --pb-gap-pad:      1.5rem;      /* 24px above / below the dashed lines */
  --pb-gap-inner:    1rem;        /* 16px line ↔ badge */
  --pb-badge:        4.5rem;      /* 72px */

  /* Resolution pill */
  --pb-res-pad:      1.75rem 3rem 1.75rem 2.5rem; /* 28 48 28 40 */
  --pb-res-gap:      1.25rem;     /* 20px */
  --pb-res-tile:     3rem;        /* 48px */
  --pb-res-size:     1.625rem;    /* 26px / 400 / 150% */
  --pb-res-lh:       150%;

  /* Scroll-in animation (not in Figma) */
  --pb-reveal-shift: 1.5rem;
  --pb-reveal-time:  0.7s;
  --pb-reveal-ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --pb-pop-ease:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Derived */
  --pb-border: color-mix(in srgb, var(--pb-slate) 10%, transparent); /* = rgba(60,110,130,.10) */
}

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

/* ==========================================================================
   The Problem (section)
   ========================================================================== */

/* Container query anchored inside the Shadow DOM (see faq.css for why) */
.pb-section {
  container: pb / inline-size;
  padding-inline: var(--pb-pad-x);
}

.pb-bg--off-white   { background: var(--pb-off-white); }
.pb-bg--white       { background: var(--pb-white); }
.pb-bg--transparent { background: transparent; }

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

.pb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pb-section-gap);
  width: 100%;
  max-width: var(--pb-max-width);
  margin-inline: auto;
  padding-block: var(--pb-pad-y);
}

.pb-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pb-header-gap);
  max-width: var(--pb-heading-w);
  text-align: center;
}

.pb-eyebrow {
  margin: 0;
  color: var(--pb-slate);
  font-family: var(--pb-font-secondary), system-ui, sans-serif;
  font-size: 0.875rem;            /* 14px / 700 / 164%, uppercase */
  font-weight: 700;
  line-height: 164%;
  text-transform: uppercase;
}

/* Heading slot: type for whatever Heading is dropped in */
.pb-heading {
  --slot-family: var(--pb-h-family), Georgia, serif;
  --slot-size:   var(--pb-h-size);
  --slot-weight: var(--pb-h-weight);
  --slot-lh:     var(--pb-h-lh);
  --slot-color:  var(--pb-navy);
  width: 100%;
}

/* Two cards with "the gap" between them */
.pb-columns {
  display: flex;
  align-items: stretch;
  align-self: stretch;
}

/* Each card slot holds one Problem Card. Webflow wraps slot content in its
   own element; display: contents lets the card fill the column. */
.pb-card-slot {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

.pb-card-slot ::slotted(*) {
  display: contents;
}

/* Which side a card comes in from (inherited by the Problem Card) */
.pb-card-slot--left  { --pb-card-x: calc(var(--pb-reveal-shift) * -1); --pb-card-delay: 150ms; }
.pb-card-slot--right { --pb-card-x: var(--pb-reveal-shift);            --pb-card-delay: 450ms; }

.pb-gap {
  display: flex;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: var(--pb-gap-inner);
  width: var(--pb-gap-w);
  padding-block: var(--pb-gap-pad);
}

.pb-gap-line {
  flex: 1 1 0;
  width: 0;
  border-left: 2px dashed var(--pb-slate);
}

.pb-badge {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: var(--pb-badge);
  height: var(--pb-badge);
  border: 2px solid var(--pb-orange);
  border-radius: 999px;
  background: var(--pb-orange-tint);
  color: var(--pb-orange);
}

.pb-badge svg,
.pb-badge img,
.pb-resolution-icon svg {
  width: var(--pb-icon);
  height: var(--pb-icon);
}

/* Built-in card icons keep their natural Figma size (set on the svg) */
.pb-card-icon svg {
  display: block;
  flex: none;
}

/* Resolution pill */
.pb-resolution {
  display: flex;
  align-items: center;
  gap: var(--pb-res-gap);
  padding: var(--pb-res-pad);
  border-radius: 999px;
  background: var(--pb-navy);
}

.pb-resolution-icon {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: var(--pb-res-tile);
  height: var(--pb-res-tile);
  border-radius: 999px;
  background: var(--pb-orange);
  color: var(--pb-navy);
}

/* Resolution slot: type for whatever text is dropped in */
.pb-resolution-text {
  --slot-family: var(--pb-font-primary), Georgia, serif;
  --slot-size:   var(--pb-res-size);
  --slot-weight: 400;
  --slot-lh:     var(--pb-res-lh);
  --slot-color:  var(--pb-off-white);
  min-width: 0;
}

/* ==========================================================================
   Problem Card
   ========================================================================== */

/* The card is its own container: it sizes its padding and type from its own
   width (the section's tokens don't reach into this separate component) */
.pb-card-wrap {
  container: pbcard / inline-size;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.pb-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pb-card-gap);
  flex: 1 1 auto;
  padding: var(--pb-card-pad);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-card-radius);
  background: var(--pb-white);
}

.pb-card-icon {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: var(--pb-icon-tile);
  height: var(--pb-icon-tile);
  border-radius: 999px;
  background: var(--pb-navy);
  color: var(--pb-light-blue);
}

/* Uploaded custom icon, fitted into the same 24px box as the built-ins */
.pb-custom-icon {
  display: block;
  width: var(--pb-icon);
  height: var(--pb-icon);
  object-fit: contain;
}

/* "Light blue": the icon's shape filled with the icon colour (image used as
   a mask; Webflow's asset CDN sends the CORS header this needs) */
.pb-custom-icon--tint {
  background: currentColor;
  -webkit-mask: var(--pb-icon-url) center / contain no-repeat;
  mask: var(--pb-icon-url) center / contain no-repeat;
}

.pb-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--pb-content-gap);
  align-self: stretch;
}

.pb-card-title {
  margin: 0;
  color: var(--pb-navy);
  font-family: var(--pb-font-secondary), system-ui, sans-serif;
  font-size: var(--pb-title-size);
  font-weight: 700;
  line-height: var(--pb-title-lh);
}

.pb-card-body {
  margin: 0;
  color: var(--pb-navy);
  font-family: var(--pb-font-secondary), system-ui, sans-serif;
  font-size: var(--pb-body-size);
  font-weight: 300;
  line-height: 150%;
  white-space: pre-line;          /* keeps line breaks typed in the field */
}

/* ==========================================================================
   Scroll-in animation (classes from shared/reveal.ts; none set when
   "Animate on scroll" is off or the visitor prefers reduced motion)
   ========================================================================== */

/* Header rises in */
.pb-section.is-hidden .pb-anim {
  opacity: 0;
  transform: translateY(var(--pb-reveal-shift));
}

.pb-section.is-shown .pb-anim {
  --_d: calc(var(--i, 0) * 100ms);
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pb-reveal-time) ease var(--_d),
    transform var(--pb-reveal-time) var(--pb-reveal-ease) var(--_d);
}

/* Cards come in from their side: left first, then right */
.pb-card.is-hidden {
  opacity: 0;
  transform: translate(var(--pb-card-x, 0), var(--pb-card-y, 0));
}

.pb-card.is-shown {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pb-reveal-time) ease var(--pb-card-delay, 0ms),
    transform 0.9s var(--pb-reveal-ease) var(--pb-card-delay, 0ms);
}

/* The gap: dashed lines draw out from the badge, then the badge pops in with
   a small shake (the link breaking) */
.pb-section.is-hidden .pb-gap-line {
  transform: scaleY(0);
}

.pb-gap-line--start { transform-origin: bottom center; }
.pb-gap-line--end   { transform-origin: top center; }

.pb-section.is-shown .pb-gap-line {
  transform: none;
  transition: transform 0.6s var(--pb-reveal-ease) 0.75s;
}

.pb-section.is-hidden .pb-badge {
  opacity: 0;
  transform: scale(0.4);
}

.pb-section.is-shown .pb-badge {
  animation: pb-badge-in 0.9s var(--pb-reveal-ease) 0.55s both;
}

@keyframes pb-badge-in {
  0%   { opacity: 0; transform: scale(0.4) rotate(0); }
  45%  { opacity: 1; transform: scale(1.1) rotate(0); }
  60%  { transform: scale(1) rotate(-10deg); }
  75%  { transform: rotate(8deg); }
  90%  { transform: rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}

/* Resolution rises in last, then its check pops */
.pb-section.is-hidden .pb-resolution {
  opacity: 0;
  transform: translateY(var(--pb-reveal-shift));
}

.pb-section.is-shown .pb-resolution {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pb-reveal-time) ease 1s,
    transform var(--pb-reveal-time) var(--pb-reveal-ease) 1s;
}

.pb-section.is-hidden .pb-resolution-icon {
  transform: scale(0);
}

.pb-section.is-shown .pb-resolution-icon {
  transform: none;
  transition: transform 0.5s var(--pb-pop-ease) 1.35s;
}

@media (prefers-reduced-motion: reduce) {
  .pb-anim,
  .pb-card,
  .pb-gap-line,
  .pb-badge,
  .pb-resolution,
  .pb-resolution-icon {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Responsive (container widths exclude the section's side padding)
   ========================================================================== */

/* Small laptops: narrower gap column so the cards keep their room */
@container pb (max-width: 1100px) {
  .pb-inner {
    --pb-gap-w: 7.5rem;           /* 120px */
  }
}

/* Tablet: cards stack, the gap turns sideways between them */
@container pb (max-width: 900px) {
  .pb-columns {
    flex-direction: column;
  }

  .pb-card-slot--left,
  .pb-card-slot--right {
    --pb-card-x: 0;
    --pb-card-y: var(--pb-reveal-shift);
    --pb-card-delay: 0ms;
  }

  /* Stacked: the connector runs top to bottom, from the card above, through
     the badge, into the card below (the lines touch the cards) */
  .pb-gap {
    width: auto;
    padding-block: 0;
  }

  .pb-gap-line {
    flex: none;
    height: var(--pb-gap-line-h, 2rem);   /* 32px each side of the badge */
  }
}

@container pb (max-width: 767px) {
  .pb-inner {
    --pb-section-gap: 2.5rem;
    --pb-h-size:      var(--pb-h-size-m);
    --pb-h-lh:        var(--pb-h-lh-m);
    --pb-badge:       3.5rem;     /* 56px */
    --pb-res-pad:     1.5rem;
    --pb-res-size:    1.25rem;    /* 20px */
    padding-block: 4rem;
  }

  .pb-gap {
    --pb-gap-line-h: 1.5rem;      /* 24px */
  }

  /* Pill becomes a rounded card once the text wraps to several lines */
  .pb-resolution {
    align-items: flex-start;
    border-radius: 1.75rem;
  }
}

@container pb (max-width: 479px) {
  .pb-inner {
    --pb-h-size:   2rem;          /* 32px */
    --pb-h-lh:     125%;
    --pb-res-tile: 2.5rem;        /* 40px */
  }
}

/* Problem Card, by its own width */
@container pbcard (max-width: 460px) {
  .pb-card {
    --pb-card-pad:    2rem;
  }
}

@container pbcard (max-width: 360px) {
  .pb-card {
    --pb-card-pad:    1.5rem;
    --pb-card-radius: 1.75rem;
    --pb-title-size:  1.25rem;    /* 20px */
    --pb-icon-tile:   3rem;       /* 48px */
  }
}