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

   Same conventions as the other modules: 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.
   ========================================================================== */

:host {
  display: block;

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

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

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

  --gap-pad-x:     var(--spacing--horizontal-padding, 5rem); /* Figma 80px */
  --gap-pad-y:     var(--spacing--vertical-padding, 5rem);   /* Figma 80px */
  --gap-max-width: var(--spacing--max-width, 1440px);

  --gap-h-family: var(--h2--font-family, var(--gap-font-primary));
  --gap-h-weight: var(--h2--font-weight, 400);
  --gap-h-size-m: var(--h2--m-font-size, 2.4rem);
  --gap-h-lh-m:   var(--h2--m-line-height, 3rem);

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

  --gap-pad-x-tablet: 2rem;       /* 32px sides at 991px and below (as other modules) */
  --gap-col-gap:      4rem;       /* 64px text column → diagram */
  --gap-text-w:       38rem;      /* 608px text column (desktop) */
  --gap-text-w-stack: 44rem;      /* 704px text column when stacked (tablet / mobile) */
  --gap-text-gap:     2rem;       /* 32px heading → points */

  --gap-h-size: 2.8125rem;        /* 45px / 122% (H2 is 44.8px) */
  --gap-h-lh:   122%;

  /* Gap Point card */
  --gap-point-min-h:  8.125rem;   /* 130px */
  --gap-point-pad:    1rem 0 1rem 1.5rem;   /* 16 0 16 24 */
  --gap-point-pad-hl: 1rem 1.5rem;          /* 16 24 (Highlight) */
  --gap-point-gap:    0.75rem;    /* 12px title → body */
  --gap-point-border: 4px;
  --gap-point-title:  1.5rem;     /* 24px / 700 / 121% */
  --gap-point-body:   1rem;       /* 16px / 300 / 150% */

  /* Diagram */
  --gap-diagram-gap: 1rem;        /* 16px y-axis → chart, chart → x-axis */
  --gap-axis-line:   2px;
  --gap-y-label:     0.75rem;     /* 12px / 700 / 167%, 1.68px tracking */

  /* Scroll-in animation (not in Figma) */
  --gap-reveal-shift: 1.5rem;     /* points slide in 24px from the left */
  --gap-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gap-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot */

  /* Derived */
  --gap-cell-border:   color-mix(in srgb, var(--gap-teal) 10%, transparent); /* Border-Default */
  --gap-cell-dashed:   color-mix(in srgb, var(--gap-teal) 18%, transparent); /* Border-Strong  */
  --gap-callout-shadow: 0 21.4px 53.5px 0 rgba(15, 46, 92, 0.28), 0 1.8px 0 0 rgba(15, 46, 92, 0.1);
}

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

p {
  margin: 0;
}

/* ==========================================================================
   Section
   ========================================================================== */

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

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

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

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

.gap-layout {
  display: flex;
  align-items: center;
  gap: var(--gap-col-gap);
}

.gap-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-text-gap);
  flex: 0 1 var(--gap-text-w);
  min-width: 0;
}

.gap-heading {
  margin: 0;
  color: var(--gap-text);
  font-family: var(--gap-h-family), Georgia, serif;
  font-size: var(--gap-h-size);
  font-weight: var(--gap-h-weight);
  line-height: var(--gap-h-lh);
}

/* The points stack as normal blocks, so they lay out correctly however
   Webflow wraps the slot content. */
.gap-points {
  display: block;
}

/* ==========================================================================
   Gap Point card
   ========================================================================== */

.gap-point {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-point-gap);
  min-height: var(--gap-point-min-h);
  padding: var(--gap-point-pad);
  border-left: var(--gap-point-border) solid var(--gap-teal);
  font-family: var(--gap-font-secondary), system-ui, sans-serif;
  color: var(--gap-text);
}

.gap-point--light-blue { border-left-color: var(--gap-light-blue); }

.gap-point--highlight {
  padding: var(--gap-point-pad-hl);
  border-left-color: var(--gap-orange);
  background: var(--gap-orange-tint);
}

.gap-point-title {
  font-size: var(--gap-point-title);
  font-weight: 700;
  line-height: 121%;
}

.gap-point-body {
  font-size: var(--gap-point-body);
  font-weight: 300;
  line-height: 150%;
}

/* ==========================================================================
   2x2 diagram
   Sizes are Figma px × --u, where --u is 1px when the diagram is its Figma
   width (608px) and shrinks with it. Text has minimum sizes so it stays
   readable on phones.
   ========================================================================== */

.gap-diagram {
  container: gapdiag / inline-size;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.gap-diagram > * {
  --u: calc(100cqi / 608);
}

.gap-diagram {
  display: flex;
  align-items: center;
  gap: var(--gap-diagram-gap);
}

/* Y axis: label reads bottom → top, arrow points up */
.gap-y-axis {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-top: 2rem;   /* Figma: 32px */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--gap-teal);
  font-family: var(--gap-font-secondary), system-ui, sans-serif;
  font-size: var(--gap-y-label);
  font-weight: 700;
  line-height: 167%;
  letter-spacing: 0.105rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.gap-axis-arrow {
  display: flex;
  color: var(--gap-teal);
}

.gap-axis-arrow svg {
  width: 1rem;
  height: 1rem;
}

/* Upright in the vertical label, then flipped with it: ends up pointing up */
.gap-y-axis .gap-axis-arrow svg {
  transform: rotate(90deg);
}

.gap-chart {
  display: flex;
  flex-direction: column;
  gap: var(--gap-diagram-gap);
  flex: 1 1 0;
  min-width: 0;
}

.gap-quadrants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: var(--gap-axis-line) solid var(--gap-teal);
  border-bottom: var(--gap-axis-line) solid var(--gap-teal);
}

.gap-q {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;   /* Figma cells are square (280 × 279) */
  min-width: 0;
  padding: max(0.75rem, calc(21.383 * var(--u)));
  border: 1px solid var(--gap-cell-border);
  background: var(--gap-white);
  overflow: hidden;
}

/* Quadrant text: fixed Figma values (doesn't scale with the diagram) */
.gap-q-title {
  color: var(--gap-text);               /* Text-Primary #132C3A */
  font-family: var(--gap-font-secondary), system-ui, sans-serif;   /* Inter */
  font-size: 12.474px;
  font-style: normal;
  font-weight: 700;
  line-height: 20.492px;                /* 164.286% */
}

.gap-q-caption {
  color: var(--gap-teal);               /* Text-Secondary #3C6E82 */
  font-family: var(--gap-font-secondary), system-ui, sans-serif;   /* Inter */
  font-size: 10.692px;
  font-style: normal;
  font-weight: 300;
  line-height: 17.819px;                /* 166.667% */
}

.gap-dots {
  position: relative;
  flex: 1 1 auto;
}

.gap-dot {
  position: absolute;
  width: calc(var(--s) * max(0.65px, var(--u)));
  height: calc(var(--s) * max(0.65px, var(--u)));
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.gap-dot--teal { background: var(--gap-teal); }
.gap-dot--blue { background: var(--gap-light-blue); }

/* Top-right: airCFO */
.gap-q--tr {
  justify-content: center;
  align-items: center;
  border-style: dashed;
  border-color: var(--gap-cell-dashed);
  background: var(--gap-orange);
}

/* Uploaded image replaces the orange background */
.gap-q--tr.gap-q--has-image {
  background: transparent;
}

/* Pinned to the bottom-left, full cell width, natural height */
.gap-q-shape {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.gap-callout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(0.375rem, calc(12.474 * var(--u)));
  width: min(92%, calc(217 * var(--u)));
  padding:
    max(0.5rem, calc(16.037 * var(--u)))
    max(0.5rem, calc(21.383 * var(--u)))
    max(0.5rem, calc(16.037 * var(--u)))
    max(0.5rem, calc(17.819 * var(--u)));
  border-radius: max(0.625rem, calc(16 * var(--u)));
  background: var(--gap-white);
  box-shadow: var(--gap-callout-shadow);
  color: var(--gap-text);
  font-family: var(--gap-font-secondary), system-ui, sans-serif;
  text-align: center;
}

.gap-callout-icons {
  position: relative;
  display: flex;
  align-items: center;
  gap: max(0.375rem, calc(12 * var(--u)));
}

.gap-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: max(1.625rem, calc(40 * var(--u)));
  height: max(1.625rem, calc(40 * var(--u)));
  border-radius: 999px;
}

.gap-icon svg {
  width: 43%;
  height: 43%;
}

.gap-icon--person { background: var(--gap-teal); color: var(--gap-white); }
.gap-icon--chip   { background: var(--gap-light-blue); color: var(--gap-text); }

/* Small orange "+" overlapping both icons, centred between them */
.gap-icon-plus {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: max(1.125rem, calc(24 * var(--u)));
  height: max(1.125rem, calc(24 * var(--u)));
  border-radius: 999px;
  background: var(--gap-orange);
  color: var(--gap-text);
  transform: translate(-50%, -50%);
}

.gap-icon-plus svg {
  width: 50%;
  height: 50%;
}

/* Callout text: fixed Figma values (doesn't scale with the diagram) */
.gap-callout-name {
  color: var(--gap-text);               /* Text-Primary #132C3A */
  text-align: center;
  font-family: var(--gap-font-secondary), system-ui, sans-serif;   /* Inter */
  font-size: 16.037px;
  font-style: normal;
  font-weight: 600;
  line-height: 24.056px;                /* 150% */
}

.gap-callout-tagline {
  /* Figma: 1.782px under the name, i.e. the callout gap minus that */
  margin-top: calc(1.782px - max(0.375rem, calc(12.474 * var(--u))));
  color: var(--gap-text);               /* Text-Primary #132C3A */
  text-align: center;
  font-family: var(--gap-font-secondary), system-ui, sans-serif;   /* Inter */
  font-size: 12.474px;
  font-style: normal;
  font-weight: 400;
  line-height: 20.492px;                /* 164.286% */
  text-wrap: balance;
}

.gap-tagline-line {
  display: block;
}

/* X axis: fixed Figma values (doesn't scale with the diagram) */
.gap-x-axis {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7.128px;
  color: var(--gap-teal);               /* Text-Secondary #3C6E82 */
  font-family: var(--gap-font-secondary), system-ui, sans-serif;   /* Inter */
  font-size: 10.692px;
  font-style: normal;
  font-weight: 700;
  line-height: 17.819px;                /* 166.667% */
  letter-spacing: 1.497px;
  text-transform: uppercase;
}

.gap-x-axis .gap-axis-arrow svg {
  width: 14.255px;
  height: 14.255px;
}

/* ==========================================================================
   Scroll-in animation (useReveal.ts adds .is-hidden / .is-shown when enabled)
   ========================================================================== */

/* Gap Points slide in from the left, leading with their coloured border */
.gap-point.is-hidden {
  opacity: 0;
  transform: translateX(calc(-1 * var(--gap-reveal-shift)));
}

.gap-point.is-shown {
  transition:
    opacity 0.6s ease var(--gap-delay, 0ms),
    transform 0.6s var(--gap-ease-out) var(--gap-delay, 0ms);
}

/* Diagram builds in order: axes + quadrants → brush → dots → airCFO callout */
.gap-diagram.is-hidden .gap-y-axis,
.gap-diagram.is-hidden .gap-x-axis,
.gap-diagram.is-hidden .gap-q {
  opacity: 0;
}

.gap-diagram.is-hidden .gap-q-shape {
  opacity: 0;
  transform: scale(1.08);
}

.gap-diagram.is-hidden .gap-dot {
  transform: translate(-50%, -50%) scale(0);
}

.gap-diagram.is-hidden .gap-callout {
  opacity: 0;
  transform: translateY(1.5rem) scale(0.92);
}

.gap-q:nth-child(1) { --qi: 0; }
.gap-q:nth-child(2) { --qi: 1; }
.gap-q:nth-child(3) { --qi: 2; }
.gap-q:nth-child(4) { --qi: 3; }

.gap-diagram.is-shown .gap-q {
  transition: opacity 0.5s ease calc(var(--gap-delay, 0ms) + var(--qi, 0) * 80ms);
}

.gap-diagram.is-shown .gap-y-axis,
.gap-diagram.is-shown .gap-x-axis {
  transition: opacity 0.5s ease calc(var(--gap-delay, 0ms) + 250ms);
}

.gap-diagram.is-shown .gap-q-shape {
  transition:
    opacity 0.8s ease calc(var(--gap-delay, 0ms) + 350ms),
    transform 0.9s var(--gap-ease-out) calc(var(--gap-delay, 0ms) + 350ms);
}

.gap-diagram.is-shown .gap-dot {
  transition: transform 0.45s var(--gap-ease-pop) calc(var(--gap-delay, 0ms) + 450ms + var(--i, 0) * 90ms);
}

.gap-diagram.is-shown .gap-callout {
  transition:
    opacity 0.5s ease calc(var(--gap-delay, 0ms) + 750ms),
    transform 0.6s var(--gap-ease-pop) calc(var(--gap-delay, 0ms) + 750ms);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Below ~1000px of content the side-by-side layout gets too tight:
   stack the diagram under the text */
@container gapsec (max-width: 1000px) {
  .gap-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
  }

  .gap-text {
    flex: none;
    max-width: var(--gap-text-w-stack);
  }

  .gap-diagram {
    flex: none;
    width: 100%;
    max-width: 40rem;
  }
}

@container gapsec (max-width: 767px) {
  .gap-inner {
    padding-block: 4rem;
  }

  .gap-heading {
    font-size: var(--gap-h-size-m);
    line-height: var(--gap-h-lh-m);
  }
}

/* Gap Point on phones (queries the directory's container through the slot) */
@container gapsec (max-width: 479px) {
  .gap-point {
    min-height: 0;
    padding-left: 1rem;
  }

  .gap-point--highlight {
    padding: 1rem;
  }

  .gap-point-title {
    font-size: 1.25rem;
  }

  .gap-diagram {
    gap: 0.5rem;
  }

  .gap-y-axis {
    padding-top: 0;
    font-size: 0.625rem;
    letter-spacing: 0.06rem;
  }
}