/* 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,
.generic-video *,
.generic-video *::before,
.generic-video *::after {
  box-sizing: border-box;
}

.generic-video {
  display: block;
  width: 100%;
  background: #ffffff;
  padding: 60px 24px;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

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

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

  .inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .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: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 500;
    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: #52605a; /* neutral.60 */
    font-weight: 400;
    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;
  }

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

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

    &.layout-row-reversed .inner {
      flex-direction: row-reverse;
      align-items: center;
      gap: 54px;
    }

    &.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: 72px;
      height: 72px;
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
      transition: transform 0.2s ease;
    }

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