/* 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;
}

/**
 * HeroWithSlider — hero section with a left-hand info column (pre-title,
 * title, description) and a right-hand "loan amount" slider card.
 *
 * Visual spec aligned with Figma "Sections / biblioteca" → HeroWithSlider
 * (node 4975:2863). Note: the Figma does not show +/- stepper buttons on
 * the value display — we intentionally keep them here because they're
 * useful for loan-amount fine-tuning on touch devices.
 *
 * Color & typography tokens (from Figma):
 *
 *   Neutral/Darkest  = #292929
 *   Neutral/Darker   = #3b4540
 *   Neutral/Dark     = #52605a   (Neutral/60)
 *   Neutral/Light    = #d6dcd9
 *   Neutral/Lighter  = #f1f3f2   (Neutral/10)
 *   Neutral/Lightest = #ffffff
 *   Primary/Light    = #8edb00
 *   Primary/Dark     = #4f9e00
 *   Semantic/Danger  = #b00020
 *
 *   Heading/large--32/Regular  → Maison Neue Extended 32 / 40 / 0.5
 *   Title (Maison Neue Medium) → Maison Neue Extended 40 / 52 / 0.5
 *   Body/x-large--20/Light     → Helvetica Now Display 20 / 28 / 0.5
 *   Body/x-large--20/Regular   → Helvetica Now Display 20 / 28 / 0.5
 *   Body/medium--16/Medium     → Helvetica Now Display 16 / 24 / 0.3
 *   Body/small--14/Bold        → Helvetica Now Display 14 / 20 / 0.3
 *   Body/x-small--12/Medium    → Helvetica Now Display 12 / 16 / 0.3
 *
 *   Shadow/Small  = 0 0 8px rgba(0,0,0,.08), 0 12px 12px rgba(0,0,0,.08)
 *   Shadow/XSmall = 0 0 1px rgba(165,174,167,.9), 0 2px 5px rgba(199,206,201,.16)
 */

:host,
.hero-with-slider {
  display: block;
}

.hero-with-slider,
.hero-with-slider *,
.hero-with-slider *::before,
.hero-with-slider *::after {
  box-sizing: border-box;
}

.hero-with-slider {
  position: relative;
  background-color: #f1f3f2;
  color: #292929;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  padding: 40px 0 40px;
  overflow: hidden;

  @media (min-width: 768px) {
    padding: 80px 0 80px;
  }

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

  /* ---------- container -------------------------------------------- */

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

  .grid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    grid-template-areas:
      'info'
      'slider'
      'stamps';

    @media (min-width: 1024px) {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      grid-template-areas:
        'info slider'
        'stamps slider';
      /* 54px separation between the text/info column and the image/slider column. */
      column-gap: 54px;
      row-gap: 48px;
      align-items: center;
    }
  }

  /* ---------- column layout variant (--column) --------------------
     Used by CreditResultHero's "Column" option: info stacked above a big,
     centered slider card (ports the LoanSlider `--large` state). Overrides the
     two-column grid at every breakpoint. */

  &.column {
    .grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        'info'
        'stamps'
        'slider';
      justify-items: center;
      text-align: center;
      row-gap: 32px;

      @media (min-width: 1024px) {
        grid-template-columns: 1fr;
        grid-template-areas:
          'info'
          'stamps'
          'slider';
        align-items: initial;
        row-gap: 40px;
      }
    }

    .description {
      margin-left: auto;
      margin-right: auto;
    }

    .stamps {
      justify-content: center;
    }

    /* The grid uses justify-items:center, which shrinks each item to its content
       width. The slider-area must span the full track so the 643px card has room
       to grow; justify-content:center (from the base rule) still centers the card
       inside it. */
    .slider-area {
      width: 100%;
      justify-self: stretch;
    }

    /* Big slider card (ports LoanSlider --large): 643px wide, inner controls
       constrained to 240px and centered, at every breakpoint. */
    .card {
      max-width: 643px;
      padding: 40px 24px;
      align-items: center;

      @media (min-width: 768px) {
        max-width: 643px;
      }

      @media (min-width: 1024px) {
        max-width: 643px;
      }
    }

    .range,
    .range-labels,
    .cta-link {
      max-width: 240px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* ---------- info column ----------------------------------------- */

  .info {
    grid-area: info;
  }

  .pretitle {
    /* Body/small--14/Bold — #3b4540 */
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #3b4540;
  }

  .title {
    /* Mobile (Figma 4975:2893): Maison Neue Medium 32 / 52 / 0.5px */
    margin: 0 0 16px;
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: 0.5px;
    color: #292929;

    @media (min-width: 768px) {
      /* Tablet + Desktop (Figma 4975:2878 / 4975:2863): 40 / 52 */
      font-size: 40px;
      line-height: 52px;
    }
  }

  .description {
    /* Body/x-large--20/Light — #292929. Same size across breakpoints in Figma. */
    margin: 0;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
    color: #292929;
    max-width: 495px;
  }

  /* ---------- stamps (Reclame Aqui badge etc.) -------------------- */

  .stamps {
    grid-area: stamps;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .award {
    display: inline-block;
    max-width: 140px;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  .award-description {
    margin: 0;
    max-width: 360px;
    color: #52605a; /* neutral.60 */
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
  }

  /* ---------- slider card ----------------------------------------- */

  .slider-area {
    grid-area: slider;
    display: flex;
    justify-content: center;
  }

  .card {
    /*
     * Card — radius 10, border #f1f3f2, Shadow/Small.
     * Card width per Figma:
     *   mobile  → 288px (matches inner controls)
     *   tablet  → 546px (card spans the copy column; inner controls stay narrow)
     *   desktop → 288–320px (right-hand column of the two-col layout)
     */
    background-color: #ffffff;
    border: 1px solid #f1f3f2;
    border-radius: 10px;
    padding: 24px;
    width: 100%;
    max-width: 288px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08), 0 12px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 20px;

    @media (min-width: 768px) {
      max-width: 546px;
    }

    @media (min-width: 1024px) {
      max-width: 320px;
    }
  }

  .card-title {
    /* Body/x-large--20/Regular — #52605a */
    margin: 0;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
    color: #52605a;
  }

  /* Value display + stepper buttons */

  .amount {
    /* Heading/large--32/Regular — Maison Neue Book 32 / 40 / 0.5px */
    margin: 0;
    text-align: center;
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.5px;
    color: #292929;
    font-variant-numeric: tabular-nums;
  }

  /* Range input — restyle thumb + track */

  .range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    margin: 0 auto;
    display: block;

    &::-webkit-slider-runnable-track {
      height: 6px;
      background: linear-gradient(
        to right,
        #8edb00 0%,
        #8edb00 var(--range-fill, 0%),
        #d6dcd9 var(--range-fill, 0%),
        #d6dcd9 100%
      );
      border-radius: 999px;
    }

    &::-moz-range-track {
      height: 6px;
      background: #d6dcd9;
      border-radius: 999px;
    }

    &::-moz-range-progress {
      height: 6px;
      background: #8edb00;
      border-radius: 999px;
    }

    /* Thumb: Neutral/Darker #3b4540 · 16×16 · Shadow/XSmall */
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #3b4540;
      border: none;
      box-shadow: 0 0 1px rgba(165, 174, 167, 0.9),
        0 2px 5px rgba(199, 206, 201, 0.16);
      margin-top: -5px;
      cursor: grab;
      transition: transform 0.1s ease;
    }

    &::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #3b4540;
      border: none;
      box-shadow: 0 0 1px rgba(165, 174, 167, 0.9),
        0 2px 5px rgba(199, 206, 201, 0.16);
      cursor: grab;
      transition: transform 0.1s ease;
    }

    &::-webkit-slider-thumb:hover {
      transform: scale(1.15);
    }
    &::-moz-range-thumb:hover {
      transform: scale(1.15);
    }
    &:active::-webkit-slider-thumb {
      cursor: grabbing;
      transform: scale(1.2);
    }
    &:active::-moz-range-thumb {
      cursor: grabbing;
      transform: scale(1.2);
    }

    &:focus-visible::-webkit-slider-thumb {
      outline: 2px solid #8edb00;
      outline-offset: 3px;
    }
    &:focus-visible::-moz-range-thumb {
      outline: 2px solid #8edb00;
      outline-offset: 3px;
    }
  }

  @media (min-width: 768px) and (max-width: 1023.98px) {
    /*
     * Tablet: card stretches to 546px but inner controls stay narrow,
     * matching Figma 4975:2878 (slider 296px, CTA 331px centered).
     */
    .range,
    .range-labels {
      max-width: 296px;
      margin-left: auto;
      margin-right: auto;
    }
    .cta-link {
      max-width: 331px;
      align-self: center;
      width: 100%;
    }
  }

  /* Min / max labels */

  .range-labels {
    /* Body/x-small--12/Medium — #52605a */
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.3px;
    color: #52605a;
    margin-top: -8px;
    font-variant-numeric: tabular-nums;
  }

  /* Validation message */

  .error {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    color: #b00020;
    text-align: center;
    min-height: 20px;
  }

  /* CTA */

  .cta-link {
    /* Primary/Light #8edb00 · radius 16 · padding 14/24 · Body/medium--16/Medium */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 16px;
    background-color: #8edb00;
    color: #292929;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;

    &:hover:not(:disabled) {
      background-color: #7ec300;
    }

    &:active:not(:disabled) {
      transform: translateY(1px);
    }

    &:focus-visible {
      outline: 3px solid #292929;
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }
  }
}