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

/**
 * MediaLogos — centered section title over a wrap grid of press/partner
 * logos. Parent holds the title + a Logos slot; each logo is a `MediaLogo`
 * child (image + optional link). Both blocks live in this file (MediaLogo
 * imports it); they share no element names, so nothing leaks across the slot.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.media-logos` (section) and `.media-logo` (logo).
 *
 * Tokens inlined from @creditas-ui standard:
 *   colors.neutral.60 = #52605a  .90 = #292929
 *   heading.sm 24/32/0.5 · heading.md 28/36/0.5 (>=768) · heading.xl 40/52/0.5 (>=1024)
 */

.media-logos,
.media-logos *,
.media-logos *::before,
.media-logos *::after {
  box-sizing: border-box;
}

.media-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #ffffff;
  padding: 80px 24px;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  .title {
    margin: 0 0 12px;
    max-width: 876px;
    text-align: center;
    color: #292929; /* neutral.90 */
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 300; /* headingSmLight */
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.5px;

    @media (min-width: 768px) {
      font-size: 28px; /* headingMdLight */
      line-height: 36px;
    }

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

  /* Shared description area: shows the active (hovered/pinned) logo's
     description, centered under the title. Fades in/out; reserves a stable
     min-height so the grid doesn't jump. */
  .active-description {
    margin: 0 0 32px;
    min-height: 24px;
    max-width: 720px;
    text-align: center;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    color: #52605a; /* neutral.60 */
    opacity: 0;
    transition: opacity 0.25s ease;

    &[data-visible='true'] {
      opacity: 1;
    }
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 40px;
    width: 100%;
    max-width: 1024px;

    @media (min-width: 1024px) {
      gap: 32px 80px;
    }

    /* Flatten slotted child code-islands so they sit directly in the flex row */
    ::slotted(*) {
      display: contents;
    }
  }
}

/* ----- MediaLogo child ------------------------------------------- */

.media-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  max-width: 204px;
  height: 40px;

  @media (min-width: 768px) {
    height: 60px;
  }

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

  .image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Grayscale + slightly dimmed until hovered (ports the legacy MediaLogos
       Template02 de-emphasis; Figma shows the logos muted). */
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.25s ease, opacity 0.25s ease;
  }

  &:hover .image,
  &:focus-within .image {
    filter: grayscale(0);
    opacity: 1;
  }

  /* Small title tip under the logo, revealed on hover / pin. The description
     itself is shown in the section's shared area (see .active-description). */
  .title-tip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    width: max-content;
    max-width: 200px;
    text-align: center;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.3px;
    color: #292929; /* neutral.90 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1;
  }

  &:hover .title-tip,
  &:focus-within .title-tip,
  &[data-pinned='true'] .title-tip {
    opacity: 1;
  }

  /* Pinned logo also stays at full color. */
  &[data-pinned='true'] .image {
    filter: grayscale(0);
    opacity: 1;
  }

  .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;

    /* Button reset for the non-linked logo (so click can pin the description). */
    &.button {
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      font: inherit;
      color: inherit;
    }
  }
}