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

/**
 * GenericVideo — text block (pre-title + title + description) over a
 * click-to-play video. Ports legacy
 * `creditas-site/src/sections/GenericVideo` (thumbnail → YouTube iframe).
 *
 * Tokens inlined from @creditas-ui standard:
 *   colors.neutral.0  = #ffffff   colors.neutral.10 = #f1f3f2 (gray bg)
 *   colors.neutral.60 = #52605a   colors.neutral.90 = #292929
 *   heading.lg = 32/40/0.5 (title)  body.xl = 20/28/0.5 (description)
 *   exception.md = 14/20/1.5/700 (pre-title)
 *   spacing 15xl=60px 21xl=96px   radius.lg = 8px
 *   breakpoints.5xl = 1024px
 */

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

/* Section = full-width background only (live `.css-pbajzx`). */
.generic-video-old {
  display: block;
  width: 100%;
  background: #ffffff;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  &.gray {
    background: #f1f3f2; /* neutral.10 */
  }

  /* Inner = the centred, padded container (live `.css-ct5vse`):
     max-width 1428px, padding 60px 20px, 96px vertical at ≥1024. */
  .inner {
    max-width: 1428px;
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;

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

  .content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  &.layout-column .inner {
    flex-direction: column;
  }

  &.layout-column-reversed .inner {
    flex-direction: column-reverse;
  }

  /* Row layouts go side-by-side only at >=768px (see media query below); on
     mobile they stack as a column like the column layouts, so the video + text
     are never cramped into a narrow row. */
  &.layout-row .content,
  &.layout-row-reversed .content {
    min-width: 0;
  }

  .pretitle {
    margin: 0;
    color: #52605a; /* neutral.60 */
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  &.gray .pretitle {
    color: #52605a;
  }

  .title {
    margin: 0;
    color: #292929; /* neutral.90 */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif; /* legacy title font (css-15wvkgw) */
    font-weight: 700; /* legacy title rendered bold via <b> wrapper */
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.5px;

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

  .description {
    margin: 0;
    max-width: 640px;
    color: #3b4540; /* legacy css-bclacc colour (neutral.80) */
    font-weight: 400; /* legacy css-bclacc mobile */
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;

    @media (min-width: 600px) {
      font-weight: 300; /* legacy css-bclacc at 2xl */
      font-size: 20px;
      line-height: 28px;
      letter-spacing: 0.5px;
    }
  }

  /* ----- CTA slot --------------------------------------------------- */
  /* Sits under the description, inheriting the content column's 24px gap. Left
     aligned; a narrow CTA hugs its label, a full CTA spans the text column. */
  .cta-link {
    display: flex;
    margin-top: 8px;

    /* CTA button — mirrors the GenericImage primary CTA (green fill). The slot
       holds a link/button; if a full Cta component is dropped in Webflow it brings
       its own styles, but a plain link/button gets the branded button look here. */
    & > a,
    & > button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 18px 24px; /* legacy css-1gllto6 */
      border: 0;
      border-radius: 16px; /* legacy css-1gllto6 radius */
      background: #8edb00; /* primary.40 */
      color: #292929; /* neutral.90 */
      font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.3px;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      transition: box-shadow 0.3s ease-in-out, color 0.2s ease,
        border-color 0.2s ease;
    }

    & > a:hover,
    & > button:hover {
      box-shadow: rgba(0, 0, 0, 0.16) 0px 16px 12px -8px,
        rgba(0, 0, 0, 0.12) 0px 16px 8px -12px;
    }

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

  /* ----- video figure ---------------------------------------------- */

  .figure {
    position: relative;
    width: 100%;
    margin: 8px 0 0;
    /* border-radius: 8px; */ /* radius.lg */
    overflow: hidden;
    background: #292929;
    aspect-ratio: 16 / 9;
  }

  &.layout-row .figure,
  &.layout-row-reversed .figure {
    /* flex: 1 1 0; */
    min-width: 0;
    margin-top: 0;
  }

  &.portrait .figure {
    aspect-ratio: 9 / 16;
    max-width: 360px;
  }

  &.layout-row.portrait .figure,
  &.layout-row-reversed.portrait .figure {
    max-width: 320px;
  }

  /* Mobile: the landscape video bleeds edge-to-edge like the live
     (`.css-1okokri { margin: 0 -20px }` cancels the section's 20px horizontal
     padding). At ≥600 the live resets the margins, so the bleed is mobile-only.
     Portrait is excluded — it stays capped/centred. */
  @media (max-width: 599.98px) {
    &:not(.portrait) .figure {
      width: calc(100% + 40px);
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0;
    }
  }

  @media (min-width: 768px) {
    &.layout-row .inner {
      flex-direction: row;
      /* align-items: center; */
      gap: 8%;
    }

    &.layout-row-reversed .inner {
      flex-direction: row-reverse;
      /* align-items: center; */
      gap: 8%;
    }

    &.layout-row .content,
    &.layout-row-reversed .content {
      /* flex: 0 1 460px; */
    }
  }

  .thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
  }

  .iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;

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

    svg {
      width: 64px; /* live .css-18m1xtp: 64px mobile → 120px at ≥1024 */
      height: 64px;
      border-radius: 50%; /* so the box-shadow follows the circular icon */
      /* live play-button elevation (.css-1m41bn1 box-shadow) */
      box-shadow: rgba(0, 0, 0, 0.16) 0px 16px 12px -8px,
        rgba(0, 0, 0, 0.12) 0px 16px 8px -12px;
      transition: transform 0.2s ease;

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

    &:hover svg {
      transform: scale(1.06);
    }
  }
}