/* 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 (Old) — centered section title over a wrap grid of logos.
 * Ported 1:1 from the live creditas.com/beneficios-empresas section.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.media-logos-old` (section) and `.media-logo-old` (logo). The two blocks
 * share no element names, so nothing leaks across the slot.
 *
 * Live class → local class map:
 *   .css-h4hqs4 → .media-logos-old   ·  .css-1vnp7jl → .media-logos-old .title
 *   .css-vts3hj → .media-logos-old .grid  ·  .css-ny5xvi → .media-logo-old
 */

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

/* Outer container — live .css-h4hqs4 */
.media-logos-old {
  margin-left: auto;
  margin-right: auto;
  max-width: 1428px;
  width: 100%;
  min-height: 120px;
  padding: 80px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  @media (min-width: 320px) {
    padding-left: 20px;
    padding-right: 20px;
  }

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

  /* Title — live .css-1vnp7jl (text is fully bold via the <b> wrapper) */
  .title {
    margin: 0 0 32px;
    max-width: 876px;
    text-align: center;
    color: #292929; /* neutral.90 */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.5px;

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

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

    /* The title text is wrapped in <b>. The UA default (bolder) would resolve
       to 400 against the container's 300, but the live site renders it at 700. */
    b {
      font-weight: 700;
    }
  }

  /* Grid — live .css-vts3hj */
  .grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;

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

/* ----- MediaLogo child — live .css-ny5xvi ------------------------ */

.media-logo-old {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  max-width: 204px;
  height: 70px;
  aspect-ratio: 16 / 9;
  flex: 1 0 10%;

  @media (max-width: 1279.98px) {
    height: 60px;
    flex: 1 0 9%;
  }

  @media (max-width: 879.98px) {
    height: 40px;
    flex: 1 0 12%;
    margin: 12px 16px;
  }

  @media (max-width: 767.98px) {
    flex: 1 0 21%;
  }

  /* Logo image — full colour (the live section applies no grayscale/hover). */
  .image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

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

    /* Button reset for the non-linked logo. */
    &.button {
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      font: inherit;
      color: inherit;
    }
  }
}

/* --- Webflow slot flatten — PROJECT RULE --------------------------- */
/* Flatten the Webflow slot wrapper so the logo islands become direct
   flex children of the grid row. */
::slotted(*) {
  display: contents !important;
}