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

/**
 * GenericImage — image + text section. Ports the legacy
 * `creditas-site/src/sections/GenericImage` (Template01 "full" image and
 * Template02 "small" image) into a single Code Component, and merges the
 * three Figma designs into one by exposing:
 *
 *   - layout:    Row (info left / image right) vs Row reversed
 *   - imageSize: Full (large image) vs Small (square image + drop shadow)
 *   - ctaType:   Button (single themed CTA) vs Store download (App Store +
 *                Google Play badges that link to the fixed store URLs)
 *   - theme:     White vs Dark (swaps text + section colors)
 *
 * Token values inlined from @creditas-ui/themes standard
 * (creditas-site/node_modules/@creditas-ui/themes/dist/esm/themes/standard):
 *
 *   colors.neutral.0   = #ffffff
 *   colors.neutral.60  = #52605a   (description / preTitle on white)
 *   colors.neutral.80  = #3b4540
 *   colors.neutral.90  = #292929   (title on white / dark section bg)
 *   colors.primary.40  = #8edb00   (secondary cta on dark / focus ring)
 *   colors.primary.60  = #4f9e00   (primary cta hover)
 *   colors.primary.80  = #317500   (secondary cta on white)
 *   colors.primary.90  = #1c4200   (primary cta text)
 *
 *   spacingTop/Bottom.16xl = 64px  (section padding, mobile)
 *   spacingTop/Bottom.21xl = 96px  (section padding, >=1024px)
 *   spacingX.9xl           = 36px  (column gap, >=768px)
 *   spacingX.6xl           = 24px  (column gap, >=880px)
 *   spacingY.5xl           = 20px  (stacked gap / image margin, mobile)
 *   spacingY.8xl           = 32px  (info block gap)
 *   radius.lg              = 8px   (button radius)
 *   radius.pill            = 500px
 *   shadow.lg              = 0px 28px 64px rgba(31,45,39,0.16)
 *
 *   breakpoints.3xl = 768px   breakpoints.4xl = 880px   breakpoints.5xl = 1024px
 *
 *   typography.heading.md  -> 28px / 36px / 0.5px  (title, mobile)
 *   typography.heading.xl  -> 40px / 52px / 0.5px  (title, >=1024px)
 *   typography.body.md     -> 16px / 24px / 0.3px  (description, mobile)
 *   typography.body.xl     -> 20px / 28px / 0.5px  (description, >=600px)
 *   typography.body.lg     -> 18px / 26px / 0.3px  (description, >=1024px)
 *   typography.exception.sm-> 12px / 16px / 1.5px / 700  (preTitle, mobile)
 *   typography.exception.md-> 14px / 20px / 1.5px / 700  (preTitle, >=1024px)
 */

/* ================================================================
 * Variant hooks — honor Layout + Theme on the LEGACY (creditas-site)
 * render without editing the injected union creditas.css.
 *
 * The rendered DOM uses the union `css-*` hashes. Those hashes were
 * captured from the DARK creditas.com example, so the section (css-1jrkuu2)
 * bakes a dark background and the text (css-1awqwd2 pre-title / css-19r514a
 * title / css-we3e6h description) bakes white type. The JSX already swaps the
 * grid class per layout (css-pc74ux row / css-5ga3a reversed). Theme is
 * handled here: the marker classes below (added on the <section> alongside
 * css-1jrkuu2) override the union dark background + white text back to the
 * light palette for the White theme; the Dark theme keeps the union defaults.
 * Two-class selectors outrank the single-class union rules, so no !important.
 * ============================================================== */
.gi-old--white.css-1jrkuu2 {
  background-color: #ffffff; /* neutral.0 */
}
.gi-old--white .css-1awqwd2 {
  color: #52605a; /* pre-title neutral.60 */
}
.gi-old--white .css-19r514a {
  color: #292929; /* title neutral.90 */
}
.gi-old--white .css-we3e6h {
  color: #52605a; /* description neutral.60 */
}
.gi-old--dark.css-1jrkuu2 {
  background-color: #292929; /* neutral.90 */
}

.generic-image-old,
.generic-image-old *,
.generic-image-old *::before,
.generic-image-old *::after {
  box-sizing: border-box;
}

.generic-image-old {
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff; /* neutral.0 */
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  &.dark {
    background-color: #292929; /* neutral.90 */
  }
}

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

.generic-image-old {
  .container {
    width: 100%;
    max-width: 1428px; /* legacy container max (css-f7z73v) */
    margin: 0 auto;
    padding: 64px 16px; /* spacing.16xl vertical, 16px horizontal (legacy) */

    @media (min-width: 600px) {
      padding-left: 20px; /* legacy horizontal padding at 2xl */
      padding-right: 20px;
    }

    @media (min-width: 1024px) {
      padding-top: 96px; /* spacing.21xl */
      padding-bottom: 96px;
      padding-left: 20px; /* legacy keeps 20px horizontal past 5xl */
      padding-right: 20px;
    }
  }

  /* Template02 mobile: the small image bleeds edge-to-edge (like the live
     grid `grid-template-areas: 'info' 'image'` with grid-gap:0). The container
     drops its horizontal padding below 768; the text keeps its 16px gutter via
     the info rule further down. */
  @media (max-width: 767.98px) {
    &.img-small .container {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .grid {
    display: flex;
    flex-direction: column;
    gap: 20px; /* spacingY.5xl */
    width: 100%;

    @media (min-width: 768px) {
      flex-direction: row;
      align-items: center;
      /* 54px separation between the image and the text. */
      gap: 54px;
    }
  }

  /* Row = info left / image right; Row reversed = image left / info right */
  @media (min-width: 768px) {
    &.row-reversed .grid {
      flex-direction: row-reverse;
    }
  }

  /* ================================================================
   * Template02 DESKTOP layout — replicate the live 12-column grid so the content
   * is inset and centred within the container (leading/middle spacer columns),
   * instead of a flexbox row stretched edge-to-edge. Values verbatim from the
   * live `.css-5ga3a` (image-left / Row reversed); the Row (info-left) case
   * mirrors them:
   *
   *   768–879 : repeat(8,1fr)  gap 36px   image×4 info×4
   *   880–1023: repeat(12,1fr) gap 24px   image×6 info×4  (2 trailing empty cols)
   *   1024+   : repeat(12,1fr) gap 24px   . image×4 . info×6
   *
   * `minmax(0,1fr)` keeps the columns equal and shrinkable (a plain 1fr would let
   * the square image's min-content widen its tracks and break the layout). The
   * image below is capped with max-width:100% so it fills its cell up to its
   * square size instead of overflowing. Info/media map to the info/image areas. */
  @media (min-width: 768px) {
    &.img-small {
      .grid {
        display: grid;
        align-items: center;
        grid-gap: 36px;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-areas: 'info info info info image image image image';
      }
      &.row-reversed .grid {
        grid-template-areas: 'image image image image info info info info';
      }
      .info {
        grid-area: info;
      }
      .media {
        grid-area: image;
      }
    }
  }

  @media (min-width: 880px) {
    &.img-small {
      .grid {
        grid-gap: 24px;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-areas: 'info info info info image image image image image image . .';
      }
      &.row-reversed .grid {
        grid-template-areas: 'image image image image image image info info info info . .';
      }
    }
  }

  @media (min-width: 1024px) {
    &.img-small {
      .grid {
        grid-template-areas: 'info info info info info info . image image image image .';
      }
      &.row-reversed .grid {
        grid-template-areas: '. image image image image . info info info info info info';
      }
    }
  }
}

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

.generic-image-old {
  .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0; /* legacy spaces each element with margin-bottom, not a uniform gap */
    width: 100%;

    @media (min-width: 768px) {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  /* Template02 mobile: match the live layout exactly — a single-column CSS grid
     that stacks info over image with NO gap (live `.css-5ga3a`):
       grid-template-areas: 'info' 'image'; grid-gap: 0;
     The separation between the CTA and the image comes from a 64px margin-bottom
     on the button (see the CTA rule further down), NOT from a grid gap. The
     container drops its horizontal padding above, so the image bleeds edge-to-edge
     while the text keeps its 16px gutter. */
  @media (max-width: 767.98px) {
    &.img-small {
      .grid {
        display: grid;
        grid-gap: 0;
        grid-template-columns: 1fr;
        grid-template-rows: max-content;
        grid-template-areas: 'info' 'image';
      }
      .info {
        grid-area: info;
        padding-left: 16px;
        padding-right: 16px;
      }
      .media {
        grid-area: image;
        display: block;
        width: 100%;
      }
      /* <picture> is inline by default and would shrink to the image's intrinsic
         size, leaving side gaps; force it and the <img> to block/100%. */
      .media picture {
        display: block;
        width: 100%;
      }
      .image {
        display: block;
        width: 100%;
      }
    }
  }
}

/* ----- pre-title ------------------------------------------------- */

.generic-image-old {
  .pretitle {
    margin: 0 0 16px; /* legacy css-1awqwd2 margin-bottom */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #52605a; /* neutral.60 */

    @media (min-width: 1024px) {
      font-size: 14px;
      line-height: 20px;
    }
  }

  &.dark .pretitle {
    color: #ffffff; /* neutral.0 */
  }
}

/* ----- title ----------------------------------------------------- */

.generic-image-old {
  .title {
    margin: 0 0 24px; /* legacy css-19r514a margin-bottom */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif; /* legacy title font (css-19r514a) */
    font-weight: 700; /* headingMdLight */
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.5px;
    color: #292929; /* neutral.90 */

    @media (min-width: 1024px) {
      font-size: 40px; /* headingXlLight */
      line-height: 52px;
    }
  }

  &.dark .title {
    color: #ffffff; /* neutral.0 */
  }
}

/* ----- description ----------------------------------------------- */

.generic-image-old {
  .description {
    margin: 0 0 32px; /* template02 spacing between description and CTA */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400; /* bodyMdRegular */
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    color: #52605a; /* neutral.60 */

    @media (min-width: 600px) {
      font-weight: 300; /* bodyXlLight */
      font-size: 20px;
      line-height: 28px;
      letter-spacing: 0.5px;
    }

    @media (min-width: 1024px) {
      font-weight: 400; /* bodyLgRegular */
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0.3px;
    }
  }

  &.dark .description {
    color: #ffffff; /* neutral.0 */
  }
}

/* ----- single CTA button ----------------------------------------- */

.generic-image-old {
  .cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 24px; /* legacy css-1gllto6 */
    border: 0;
    border-radius: 16px; /* legacy css-1gllto6 radius */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    white-space: nowrap; /* legacy css-1gllto6 */
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out, color 0.2s ease,
      border-color 0.2s ease;

    &:focus-visible {
      outline: 2px solid #8edb00; /* primary.40 */
      outline-offset: 2px;
    }

    &.primary {
      background: #8edb00; /* primary.40 */
      color: #292929; /* legacy css-1gllto6 label colour (neutral.90) */

      &:hover {
        /* legacy hover = elevation, keeps the green fill (css-1gllto6:hover) */
        box-shadow: rgba(0, 0, 0, 0.16) 0px 16px 12px -8px,
          rgba(0, 0, 0, 0.12) 0px 16px 8px -12px;
      }

      /* Template02 mobile: the filled CTA spans the full width of the info column,
         and its 64px bottom margin is what separates it from the full-bleed image
         stacked below (the grid itself has grid-gap:0 — the spacing lives here). */
      @media (max-width: 767.98px) {
        width: 100%;
      }
    }

    /* Secondary = text/link button (no fill), themed colour */
    &.secondary {
      padding-left: 0;
      padding-right: 0;
      background: transparent;
      color: #317500; /* primary.80 on white */

      &:hover {
        color: #1c4200; /* primary.90 */
      }
    }
  }

  @media (max-width: 767.98px) {
    &.img-small {
      .cta-link,
      .stores {
        margin-bottom: 64px;
      }
    }
  }

  &.dark .cta-link.secondary {
    color: #8edb00; /* primary.40 on dark */

    &:hover {
      color: #e1ffa8; /* primary.20 */
    }
  }
}

/* ----- store-download badges ------------------------------------- */

.generic-image-old {
  .stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .store {
    display: inline-flex;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;

    &:hover {
      opacity: 0.85;
    }

    &:focus-visible {
      outline: 2px solid #8edb00; /* primary.40 */
      outline-offset: 2px;
    }
  }

  .store svg,
  .store-badge {
    display: block;
    height: 48px;
    width: auto;
  }

  /* Fallback label if no badge image is uploaded (never renders empty). */
  .store-label {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 20px;
    border: 1px solid currentColor;
    border-radius: 12px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #292929; /* neutral.90 */
  }

  &.dark .store-label {
    color: #ffffff;
  }
}

/* ----- media column ---------------------------------------------- */

.generic-image-old {
  .media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    @media (min-width: 768px) {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  .image {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Full image (Template01) ---------------------------------------- */

  &.img-full .image {
    height: 320px;
    margin: 20px 0; /* spacingY.5xl */
    border-radius: 8px;

    @media (min-width: 768px) {
      height: 338px;
      margin: 0;
    }

    @media (min-width: 880px) {
      height: 534px;
    }

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

  /* Small image (Template02): square, capped, drop shadow ---------- */

  &.img-small .image {
    height: 202px;

    @media (min-width: 768px) {
      width: 100%;
      max-width: 330px; /* square cap; fills the grid cell up to this size */
      height: auto;
      aspect-ratio: 1 / 1;
      border-radius: 0; /* template02 image is a hard-edged square (no rounding) */
      filter: drop-shadow(0px 28px 64px rgba(31, 45, 39, 0.16)); /* shadow.lg */
    }

    @media (min-width: 880px) {
      max-width: 424px;
    }

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

  @media (min-width: 768px) {
    &.img-small .media {
      flex: 0 0 auto;
      /* Size the media box to the (small, fixed-width) image instead of
         inheriting the base width:100%. With width:100% the flex:0 0 auto
         basis resolved to the full row, so the media hogged all the width and
         collapsed the info column, pushing the text off-canvas. */
      width: auto;
    }
  }

  /* Circle image (additive): round crop, e.g. the dark auto-loan hero.
     Placed after Full/Small so it overrides their sizing when both the
     size and shape modifiers are present. Figma node 8010:8446/8010:8456:
     457x444 circle, object-fit cover (base .generic-image-old__image already
     sets object-fit: cover). */

  &.img-circle .media {
    flex: 0 0 auto;
    width: auto;
  }

  &.img-circle .image {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 20px auto;
    border-radius: 50%;

    @media (min-width: 768px) {
      max-width: 400px;
      margin: 0;
    }

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

/* ================================================================
 * Image-SIZE hooks on the LEGACY (creditas-site) render — honor the
 * Full/Small Image size WITHOUT editing the injected union creditas.css.
 *
 * The union css-* hashes were captured from the SMALL (Template02) pages,
 * so the baseline they bake is the small render:
 *   - css-1q838ju (image box): 202 → 330+drop-shadow → 424 → 392
 *   - css-f7z73v  (container): padding-left/right:0 below 768 (noPaddingOnMobile)
 *   - css-hrwit8  (info col):  padding-left/right:16px below 880 (paddingOnMobile)
 *   - css-5ga3a   (Row reversed / image-left grid): the SMALL-left grid areas
 *   - css-pc74ux  (Row / info-left grid): the FULL-right grid areas (a capture
 *                 artifact — this hash came from a full-image page)
 *
 * The JSX now stamps gi-old--img-full / gi-old--img-small next to css-1jrkuu2.
 * Everything below is scoped to those markers and targets the union hashes, so
 * the single-class union rules are outranked (0,2,x vs 0,1,x) — no !important.
 * Media-query mins mirror the union exactly (creditas-ui media.up 3xl=768,
 * 4xl=880, 5xl=1024; media.down 2xl=767.98, 3xl=879.98).
 *
 * Tokens (from @creditas-ui/themes standard, verified against the source
 * GenericImage/components/{Image,Wrapper,InfoContainer}/styles.js):
 *   spacingY.5xl = 20px (full image base margin) · shadow.lg = drop-shadow(
 *   0 28px 64px rgba(31,45,39,.16)) · spacingRight.3xl = 16px (info mobile pad).
 * Theme (White/Dark) is orthogonal and handled by the gi-old--white/dark hooks
 * above; these size hooks touch only geometry.
 * ============================================================== */

/* ---- FULL image (Template01): large image, no square/drop-shadow cap ----
   Overrides the small css-1q838ju baseline back to the full sizing. The
   drop-shadow is present at every width for full (source: full base sets it,
   the up() blocks never clear it). */
.gi-old--img-full .css-1q838ju {
  width: 100%;
  height: 320px;
  margin: 20px; /* spacingY.5xl (all sides, per source `margin: spacingY.5xl`) */
  filter: drop-shadow(0px 28px 64px rgba(31, 45, 39, 0.16)); /* shadow.lg */
}
@media (min-width: 768px) {
  .gi-old--img-full .css-1q838ju {
    width: 325px;
    height: 338px;
    margin: 0;
  }
}
@media (min-width: 880px) {
  .gi-old--img-full .css-1q838ju {
    width: 100%;
    height: 534px;
  }
}
@media (min-width: 1024px) {
  .gi-old--img-full .css-1q838ju {
    width: 100%;
    height: 624px;
  }
}

/* ---- FULL container/info padding: restore the mobile gutter ----
   The full template never sets noPaddingOnMobile / paddingOnMobile, so undo
   the small baseline (container sides→0 below 768, info sides→16px below 880). */
@media (max-width: 767.98px) {
  .gi-old--img-full .css-f7z73v {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 879.98px) {
  .gi-old--img-full .css-hrwit8 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---- FULL grid on the Row-reversed (image-left, css-5ga3a) layout ----
   The union baked the SMALL-left grid into css-5ga3a, so restore the full-left
   areas. Full has no 5xl breakpoint, so the 4xl areas are re-applied at 1024
   to neutralize the union's small 5xl rule. */
@media (min-width: 880px) {
  .gi-old--img-full .css-5ga3a {
    align-items: center;
    grid-template-areas: 'image image image image image image . info info info info info info';
  }
}
@media (min-width: 1024px) {
  .gi-old--img-full .css-5ga3a {
    align-items: center;
    grid-template-areas: 'image image image image image image . info info info info info info';
  }
}

/* ---- SMALL grid on the Row (info-left, css-pc74ux) layout ----
   The union baked the FULL-right grid into css-pc74ux, so restore the
   small-right areas (and drop the full-only align-items:center). Small adds a
   5xl breakpoint the union's full css-pc74ux does not have. */
@media (min-width: 880px) {
  .gi-old--img-small .css-pc74ux {
    align-items: normal;
    grid-template-areas: 'info info info info info info image image image image';
  }
}
@media (min-width: 1024px) {
  .gi-old--img-small .css-pc74ux {
    align-items: normal;
    grid-template-areas: 'info info info info info info . image image image image .';
  }
}