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

/**
 * CarouselImageVideo — info block (pre-title + title + description) plus a
 * horizontal carousel of image/video cards with dot + arrow navigation.
 * Ports legacy `creditas-site/src/sections/CarouselImageVideo`.
 *
 * Class naming: single-class, no BEM `__` separator; the section's element
 * rules are nested under `.carousel-iv` and the card's under `.carousel-iv-card`.
 * The two blocks share no element names, so nothing leaks across the slot.
 *
 * Tokens inlined from @creditas-ui standard:
 *   colors.neutral.0 #ffffff  neutral.60 #52605a  neutral.90 #292929
 *   colors.primary.40 #8edb00  primary.60 #4f9e00  primary.90 #1c4200
 *   colors.neutral.20 #d6dcd9 (inactive dot / arrow border)
 *   heading.xl 40/52/0.5  body.xl 20/28/0.5  exception.md 14/20/1.5/700
 *   radius.lg 8px  shadow.md  breakpoints 3xl=768 5xl=1024
 */

.carousel-iv,
.carousel-iv *,
.carousel-iv *::before,
.carousel-iv *::after {
  box-sizing: border-box;
}

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

  .inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    gap: 32px;
    /* Mobile: info on top, carousel, then nav (matches the legacy stacking). */
    grid-template-areas:
      'info'
      'carousel'
      'nav';

    /* Desktop: carousel on the left (spanning both rows), info top-right, nav
       bottom-right — the two-column layout from the Figma + old repo. */
    @media (min-width: 1024px) {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      grid-template-rows: 1fr auto;
      grid-template-areas:
        'carousel info'
        'carousel nav';
      column-gap: 64px;
      align-items: start;
    }
  }

  .info {
    grid-area: info;
    max-width: 640px;
  }

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

  .title {
    margin: 0 0 16px;
    color: #292929; /* neutral.90 */
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.5px;

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

  .description {
    margin: 0;
    color: #52605a; /* neutral.60 */
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
  }

  /* ----- viewport / track ------------------------------------------ */

  .viewport {
    grid-area: carousel;
    width: 100%;
    /* Fixed height = the tall (active) card height, so the section never resizes
       as cards grow/shrink — the shorter, inactive squares just sit at the
       bottom of this masked area. */
    height: 418px;
    overflow: hidden;

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

  .track {
    display: flex;
    gap: 24px;
    height: 100%;
    /* Cards bottom-align so the active one grows upward (taller) while the
       neighbors stay short squares at the bottom of the fixed-height viewport. */
    align-items: flex-end;
    transition: transform 0.5s ease;
    will-change: transform;

    /* Flatten Webflow's slot wrapper so each projected card becomes a real flex
     * item of the track. Same project rule as the other slot/row components. */
    ::slotted(*) {
      display: contents;
    }
  }

  /* ----- controls -------------------------------------------------- */

  .controls {
    grid-area: nav;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;

    /* Desktop: nav sits at the bottom of the info column, aligned to the end. */
    @media (min-width: 1024px) {
      align-self: end;
      margin-top: 0;
    }
  }

  .dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d6dcd9; /* neutral.20 */
    cursor: pointer;
    transition: background-color 0.2s ease, width 0.2s ease;

    &.active {
      width: 24px;
      border-radius: 4px;
      background: #4f9e00; /* primary.60 */
    }

    &:focus-visible {
      outline: 2px solid #8edb00;
      outline-offset: 2px;
    }
  }

  .arrows {
    display: flex;
    gap: 12px;
  }

  .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d6dcd9; /* neutral.20 */
    border-radius: 50%;
    background: #ffffff;
    color: #292929;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      opacity 0.2s ease;

    &:hover:not(:disabled) {
      border-color: #292929;
    }

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

    &:focus-visible {
      outline: 2px solid #8edb00;
      outline-offset: 2px;
    }

    svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }
}

/* ----- CarouselImageVideoCard child ------------------------------ */

/* Card sizing — the "shrink" behaviour. Inactive cards are short squares; the
 * active card (data-active, set by the carousel on the code-island host in
 * Webflow or the card element in the playground) grows TALL at the same width,
 * with a smooth transition. Bottom-aligned by the track. */
.carousel-iv-card {
  position: relative;
  width: 236px;
  height: 236px;
  border-radius: 8px; /* radius.lg */
  overflow: hidden;
  background: #4f9e00; /* primary.60 */
  cursor: pointer;
  flex: 0 0 auto;
  transition: width 0.6s ease-in-out, height 0.6s ease-in-out;

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

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

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

  .scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.55) 100%
    );
    pointer-events: none;
  }

  .caption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    margin: 0;
    color: #ffffff;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.3px;
  }

  .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;
      outline-offset: -4px;
    }

    svg {
      width: 64px;
      height: 64px;
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
      transition: transform 0.2s ease;
    }

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

/* Active card grows tall. Dual selector so it fires in both contexts:
 *  - Webflow: parent sets `data-active` on the `<code-island>` host →
 *    `:host([data-active]) .carousel-iv-card` matches inside the shadow DOM.
 *  - Playground: no shadow DOM, parent sets it on the article →
 *    `.carousel-iv-card[data-active]` matches. */
:host([data-active]) .carousel-iv-card,
.carousel-iv-card[data-active] {
  height: 418px;
}

@media (min-width: 1024px) {
  :host([data-active]) .carousel-iv-card,
  .carousel-iv-card[data-active] {
    height: 683px;
  }
}