/* 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)
 */

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

.generic-image {
  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 {
  .container {
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    padding: 64px 24px; /* spacing.16xl vertical, 24px horizontal */

    @media (min-width: 1024px) {
      padding-top: 96px; /* spacing.21xl */
      padding-bottom: 96px;
      padding-left: 36px;
      padding-right: 36px;
    }
  }

  &.img-small.no-mobile-pad .container {
    /* Template02 mobile: image bleeds full-width, padding handled on info */
    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;
    }
  }
}

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

.generic-image {
  .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px; /* spacingY.8xl */
    width: 100%;

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

  /* Template02 mobile padding for the text when the image is full-bleed */
  &.img-small.no-mobile-pad .info {
    padding-left: 16px;
    padding-right: 16px;

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

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

.generic-image {
  .pretitle {
    margin: 0;
    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 {
  .title {
    margin: 0;
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 300; /* 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 {
  .description {
    margin: 0;
    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 {
  .cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 0;
    border-radius: 8px; /* radius.lg */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, 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: #1c4200; /* primary.90 */

      &:hover {
        background: #4f9e00; /* primary.60 */
        color: #ffffff;
      }
    }

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

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

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

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

.generic-image {
  .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 {
  .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: 330px;
      height: 330px;
      border-radius: 8px;
      filter: drop-shadow(0px 28px 64px rgba(31, 45, 39, 0.16)); /* shadow.lg */
    }

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

    @media (min-width: 1024px) {
      width: 392px;
      height: 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__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;
    }
  }
}