/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * WhyChooseUsChart — comparison section with a vertical bar chart that
 * pits Creditas products against typical competitors (personal loan,
 * credit-card revolving). Mirrors
 * `creditas-site/src/sections/WhyChooseUsChart/`.
 *
 * The original used `useTriggerOnScroll` + a state flag to gate CSS
 * `@keyframes` (animation-play-state toggled on view). Here we use
 * `animation-timeline: view()` so bars grow as the section enters the
 * viewport — no JS observer required.
 *
 * Token values inlined from @creditas-ui/themes standard:
 *
 *   colors.neutral.0   = #ffffff
 *   colors.neutral.10  = #f1f3f2
 *   colors.neutral.40  = #c5cccd
 *   colors.neutral.80  = #5e6566
 *   colors.neutral.90  = #3d3d3d
 *   colors.neutral.100 = #292929
 *   colors.primary.50  = #8edb00
 *   colors.primary.60  = #4f9e00
 *
 *   typography.heading.2xl → 48px / 64px / 0.5px
 *   typography.heading.lg  → 24px / 32px / 0.3px
 *   typography.body.lg     → 18px / 26px / 0.3px
 *   typography.body.md     → 16px / 24px / 0.3px
 */

:host,
.why-choose-us-chart {
  display: block;
}

.why-choose-us-chart,
.why-choose-us-chart *,
.why-choose-us-chart *::before,
.why-choose-us-chart *::after {
  box-sizing: border-box;
}

.why-choose-us-chart {
  padding: 64px 0;
  background-color: #ffffff;
  color: #292929;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  @media (min-width: 1024px) {
    padding: 96px 0;
  }

  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .grid {
    display: grid;
    gap: 32px;
    /* Tablet / mobile: single column — content, then chart, then CTA
       (matches the tablet 4974:2738 and mobile 4974:2746 Figma frames). */
    grid-template-areas:
      'content'
      'description'
      'chart'
      'button';

    @media (min-width: 1024px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        'chart content'
        'chart description'
        'chart button';
      gap: 48px;
      align-items: center;
    }
  }

  .chart-area {
    grid-area: chart;
  }

  .content {
    grid-area: content;
  }

  .description-area {
    grid-area: description;
  }

  .button-area {
    grid-area: button;
    margin-top: 8px;
  }

  /* ----- typography ------------------------------------------------ */

  .pretitle {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #3b4540;
  }

  .title {
    margin: 0;
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 400;
    /* Mobile: Maison 32 (Figma 4974:2746). Tablet + desktop: Maison 40. */
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.3px;

    @media (min-width: 744px) {
      font-size: 40px;
      line-height: 52px;
      letter-spacing: 0.5px;
    }
  }

  .description {
    margin: 0;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;

    /* rich-unwrap-marker — description is RichText (editor bold/links). It wraps
       content in <p>; collapse the inner <p> margins so it matches the previous
       plain <p>. */
    > p {
      margin: 0;
      font: inherit;
      color: inherit;
      letter-spacing: inherit;
    }
    > p + p {
      margin-top: 16px;
    }
    strong,
    b {
      font-weight: 700;
    }
  }

  /* ----- CTA ------------------------------------------------------- */

  /* CTA is now the shared <CardCtaButton> (real @creditas-ui primary button,
     styled by the DS theme inside its own ShadowEmotionProvider). The old
     hand-rolled `.cta-link` styles were removed; `.button-area` still positions
     the CTA in the grid. */

  /* ==================================================================
   * Chart
   * 1-5 vertical bars in equal columns. The tallest bar (largest
   * percentage) reaches 90% of the plot height — headroom is left for the
   * top value label; the rest scale linearly via `--bar-target-height`
   * set inline from JSX. Each bar has a dashed leader line running from
   * the left axis across to the bar, with the percentage value at the
   * left end. Bars grow as the section scrolls into view; leader lines
   * and values fade in on the same view() timeline.
   * ================================================================ */

  .chart {
    width: 100%;
    max-width: 429px;
    margin: 0 auto;
    /* Dedicated left gutter for the value labels so the numbers always have
       their own space and never sit over the bars (bars start after it). */
    --chart-gutter: 96px;
  }

  .plot {
    position: relative;
    height: 288px;
    border-bottom: 1px solid #d6dcd9;

    @media (min-width: 1024px) {
      height: 344px;
    }
  }

  /* Leader lines + value labels (y-axis side) */
  .plot-lines {
    position: absolute;
    inset: 0;
  }

  .plot-line {
    position: absolute;
    left: 0;
    bottom: var(--label-pos, 0%);
    /* Runs from the label gutter (x:0) across to the centre of its bar,
       which lives in the bars area that starts after --chart-gutter. */
    width: calc(
      var(--chart-gutter) +
        (var(--bar-index) + 0.5) / var(--bar-count) *
        (100% - var(--chart-gutter))
    );
    border-top: 1px dashed #c5cccd;
    opacity: 0;
    animation: why-choose-us-chart-fade linear both;
    animation-timeline: view();
    animation-range: cover 15% cover 45%;

    /* Leader line matches its own bar's colour. */
    &.ours {
      border-top-color: #4f9e00;
    }
    &.ours-2 {
      border-top-color: #8edb00;
    }
    &.competitor-1 {
      border-top-color: #9fada7;
    }
    &.competitor-2 {
      border-top-color: #3b4540;
    }
    &.extra {
      border-top-color: #6d7280;
    }
  }

  /* Value sits at the left (y-axis side), above the left end of its
     leader line — matches the Figma layout. */
  .plot-value {
    position: absolute;
    left: 0;
    bottom: 6px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    color: #3b4540;
    white-space: nowrap;
  }

  /* Percentage value matches its own bar's colour. */
  .plot-line.ours .plot-value {
    color: #4f9e00;
  }
  .plot-line.ours-2 .plot-value {
    color: #8edb00;
  }
  .plot-line.competitor-1 .plot-value {
    color: #9fada7;
  }
  .plot-line.competitor-2 .plot-value {
    color: #3b4540;
  }
  .plot-line.extra .plot-value {
    color: #6d7280;
  }

  /* Bars */
  .bars {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--chart-gutter);
    display: flex;
    align-items: flex-end;
  }

  .col {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .bar {
    position: relative;
    /* 74% of the column keeps a clear gap between bars (never glued),
       capped at the Figma bar width. */
    width: 74%;
    max-width: 93px;
    height: var(--bar-target-height, 82%);
    border-radius: 6px 6px 0 0;
    mix-blend-mode: multiply;
    transform-origin: bottom;
    animation: why-choose-us-chart-bar linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
    background-color: #9fada7;

    &.ours {
      background-color: #4f9e00;
    }

    &.ours-2 {
      background-color: #8edb00;
    }

    &.competitor-1 {
      background-color: #9fada7;
    }

    &.competitor-2 {
      background-color: #3b4540;
    }

    &.extra {
      background-color: #6d7280;
    }
  }

  /* Creditas logo mark resting on top of the Creditas ("ours") bar, just
     above its top edge (not overlapping it) — as in the Figma. */
  .bar-mark {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    width: 26px;
    height: 26px;
    object-fit: contain;
    mix-blend-mode: normal;
  }

  /* Product name labels under the axis, aligned to the columns */
  .labels {
    display: flex;
    margin-top: 8px;
    /* Align the product-name labels with the bars (which start after the
       label gutter), not with the value gutter. */
    padding-left: var(--chart-gutter);
  }

  .col-label {
    flex: 1 1 0;
    padding: 0 4px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.3px;
    color: #6d7280;
  }
}

@keyframes why-choose-us-chart-bar {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes why-choose-us-chart-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}