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

/**
 * HeroWithSlot — two layout variants:
 *
 *  Default (.hero-with-slot-old):
 *    Two-column — info left, slot right. Same layout as HeroWithSlider.
 *    Visual spec: Figma node 4975:2863.
 *
 *  Column (.hero-with-slot-old.column):
 *    Single centered column — title + description above, slot in the middle,
 *    optional descriptionBelow below.
 *    Visual spec: Figma node 7110:1504.
 *
 * Tokens:
 *   Neutral/Darkest  = #292929
 *   Neutral/Darker   = #3b4540
 *   Neutral/Dark     = #52605a
 *   Neutral/Light    = #d6dcd9
 *   Neutral/Lighter  = #f1f3f2
 *   Neutral/Lightest = #ffffff
 *   Primary/Light    = #8edb00
 */

:host,
.hero-with-slot-old {
  display: block;
}

.hero-with-slot-old,
.hero-with-slot-old *,
.hero-with-slot-old *::before,
.hero-with-slot-old *::after {
  box-sizing: border-box;
}

/* ---------- section shell --------------------------------------- */

.hero-with-slot-old {
  position: relative;
  background-color: #f1f3f2;
  color: #292929;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  padding: 24px 20px 72px;
  overflow: hidden;

  @media (min-width: 768px) {
    /* padding: 80px 0; */
  }

  @media (min-width: 1024px) {
    /* Old creditas-site: section starts tight — 20px top / 0 bottom */
    /* padding: 20px 0 0; */
    padding: 96px 20px;
  }

  /* ---------- container ------------------------------------------- */

  .container {
    /* width: 90%;
    max-width: 1200px; */
    max-width: calc(1388px + 40px);
    margin: 0 auto;
  }

  /* ---------- grid ------------------------------------------------ */

  .grid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    grid-template-areas:
      'info'
      'awardcards'
      'slot';

    @media (min-width: 600px) {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      /* info + badge in the left column beside the image; the award-cards shelf
         gets its OWN full-width row below everything. The badge keeps its normal
         place/rhythm and is never affected by the shelf's overlap. */
      grid-template-areas:
        'info slot'
        'awardcards slot';
      /* Old creditas-site gutter between text/info and image/slot columns: 24px. */
      column-gap: 17%;
      row-gap: 48px;
      align-items: start;
      margin: 0 auto;
    }

    @media (min-width: 1024px) {
      max-width: 80%;
    }
  }

  /* ---------- info column ----------------------------------------- */

  .info {
    grid-area: info;
    /* Uniform 24px vertical rhythm between whatever elements are present
       (pretitle, title, description, CTA) — no per-element margins. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 24px; */
    max-width: 499px;
  }

  .pretitle {
    /* Body/small--14/Bold — #3b4540 */
    margin-top: 0 !important;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #3b4540;

    @media (min-width: 1024px) {
      /* Tablet + Desktop: 40 / 44 (old creditas-site) */
      font-size: 14px;
    }
  }

  .title {
    /* Old creditas-site: Maison Neue Extended, weight 300 (Light), 0.5px.
       Mobile 32 / 44; tablet+ 40 / 44. */
    margin-bottom: 24px;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.5px;
    color: #292929;

    @media (min-width: 1024px) {
      /* Tablet + Desktop: 40 / 44 (old creditas-site) */
      font-size: 40px;
      line-height: 52px;
    }
  }

  .description {
    /* Body/x-large--20/Light — old site: Neutral/Dark #52605a, no width cap */
    margin-bottom: 40px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    color: #52605a;
    max-width: none;

    @media (min-width: 1024px) {
      /* Tablet + Desktop: 40 / 44 (old creditas-site) */
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0.5px;
      line-height: 28px;
    }
  }

  /* ---------- CTA button ----------------------------------------- */
  /* The CTA is now the shared <CardCtaButton> (real @creditas-ui primary
     button, styled by the DS theme inside its own ShadowEmotionProvider).
     `.cta-button-area` is just its positioning wrapper; spacing is handled by
     the .info column gap (24px). The old hand-rolled `.cta-button` styles were
     removed so nothing competes with the design-system button. */

  .cta-button-area {
    display: flex;
  }

  /* ---------- stamps (award badge + optional cards) ---------------- */

  /* Award badge — a flex child at the end of the info column. The column's
     `gap` is commented out (this variant spaces via per-element margins), and
     neither the CTA area nor this badge carried a margin — so the CTA and the
     award ended up flush against each other. Add the 24px gap above the badge
     (the intended description/CTA → badge rhythm; matches the current
     HeroWithSlot, whose active `.info { gap: 24px }` already handles this). */
  .stamps {
    display: flex;
    flex-direction: column;
    max-width: 520px;
    margin-top: 24px;
  }

  /* Row: award image + description side by side */
  .stamps-badge {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .award {
    display: inline-block;
    flex-shrink: 0;
    max-width: 140px;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  .award-description {
    /* Old creditas-site award caption: 12 / 16 Neutral/Darker #3b4540, ~360px cap */
    margin: 0;
    color: #3b4540;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.3px;
    max-width: 360px;
  }

  /* Row of up to 3 cards over the hero — layout ported from the old
     creditas-site HeroImage "CardsShelf": a left-aligned horizontal row of
     fixed-width cards with a consistent gap, scrolling horizontally if they
     overflow on narrow screens instead of wrapping/stacking. */
  .award-cards {
    grid-area: awardcards;
    position: relative;
    /* z-index: 2; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 16px;
    /* Mobile/tablet: horizontal scroll when the fixed-width cards overflow.
       padding + negative margin give the card box-shadow room so it isn't
       clipped at the scroll-container edges. */
    overflow-x: auto;
    padding: 16px;
    margin: -16px;
    /* hide the scrollbar (matches the old shelf) */
    scrollbar-width: none;
    /* Card-sizing contract for any slotted card: fixed-width column, no grow,
       no shrink — so the three cards form an even row instead of each taking a
       full-width line. Inherits across the slot/shadow boundary to the card
       root (see components/README.md --card-* contract). */
    --card-grow: 0;
    --card-shrink: 0;
    --card-basis: 236px;
    --card-max: 236px;

    &::-webkit-scrollbar {
      display: none;
    }

    @media (min-width: 1024px) {
      /* The 3 cards fit, so no scroll container — let the box-shadow spill
         freely instead of being clipped. Negative top margin pulls the shelf up
         so the cards overlap onto the bottom of the image. */
      overflow: visible;
      padding: 0;
      margin: 0;
      /* margin-top: -160px; */
      --card-basis: 288px;
      --card-max: 288px;
    }
  }

  /* Each card wrapper holds the fixed width so the three sit in an even row.
     236px on smaller screens, 288px from desktop up (old-repo values). */
  .award-card {
    flex: 0 0 236px;
    width: 236px;
    display: flex;

    @media (min-width: 1024px) {
      flex: 0 0 288px;
      width: 288px;
    }
  }

  /* ---------- slot area ------------------------------------------- */

  .slot-area {
    grid-area: slot;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    /* Shape any slotted card via the shared card-sizing contract
       (--card-grow/-shrink/-basis/-max), which inherits across the slot/shadow
       boundary down to the card root. Mobile/tablet: each card takes its own
       row (basis 100%, capped at its natural max), stacked and centered.
       Desktop overrides to 2-up below. See components/README.md. */
    --card-basis: 100%;
    --card-grow: 0;
    --card-shrink: 1;
  }

  /* Description below the slot */
  .description-below {
    grid-area: below;
    /* Body/x-large--20/Light — same style as description */
    margin: 0;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
    color: #292929;
    text-align: center;
    max-width: 680px;
    width: 100%;
  }

  /* ---------- background modifiers -------------------------------- */

  &.bg-gray {
    background-color: #f1f3f2;
    color: #292929;
  }

  &.bg-white {
    background-color: #ffffff;
    color: #292929;
  }

  &.bg-dark {
    background-color: #292929;
    color: #ffffff;

    .pretitle {
      color: #d6dcd9;
    }

    .title {
      color: #ffffff;
    }

    .description,
    .description-below {
      color: #ffffff;
    }

    .award-description {
      color: #d6dcd9;
    }
  }

  /* Desktop two-column: the slot column is ~549px — let cards size to half
     the row (minus half the 24px gap) so two sit side-by-side instead of
     wrapping. grow:1 lets them fill the row up to their natural max-width. */
  &:not(.column) {
    @media (min-width: 1024px) {
      .slot-area {
        --card-basis: calc(50% - 12px);
        --card-grow: 1;
      }
    }
  }

  /* ================================================================
     Two-column reversed variant (.hero-with-slot-old.reversed)
     Visual spec: Figma node 7108:1162
     Slot left, info right — same proportions as two-column, mirrored.
     Mobile stacking order stays the same (info → slot → stamps).
     ================================================================ */

  &.reversed {
    @media (min-width: 1024px) {
      .grid {
        /* Slot gets the wider column (1.1fr) on the left */
        /* grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); */
        grid-template-areas:
          'slot info'
          'awardcards awardcards';
      }
    }
  }

  /* ================================================================
     Column layout variant (.hero-with-slot-old.column)
     Visual spec: Figma node 7110:1504
     ================================================================ */

  &.column {
    .grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        'info'
        'slot'
        'below'
        'stamps';
      gap: 32px;
      justify-items: center;

      /* Override the desktop two-column layout */
      @media (min-width: 1024px) {
        grid-template-columns: 1fr;
        grid-template-areas:
          'info'
          'slot'
          'below'
          'awardcards';
        gap: 40px;
        align-items: unset;
      }
    }

    /* Info: center-align all text */
    .info {
      text-align: center;
      max-width: 680px;
      width: 100%;
    }

    .description {
      max-width: unset;
    }

    /* Slot: switch to block so the child fills the container naturally.
       Flex centering is not needed — the grid's justify-items: center
       already centers the slot area itself within the column. */
    .slot-area {
      grid-area: slot;
      display: block;
      width: 100%;
      max-width: 680px;

      /* Stretch any slotted code-island to fill the slot area width.
         This is the light-DOM rule that overrides Webflow's default
         code-island sizing and lets the inner component's max-width take over. */
      > * {
        display: block;
        width: 100%;
      }
    }
  }
}

/* Legacy (creditas-site) render: the pre-title is rendered above the title
   inside the union header block (.css-1oil8ay), not inside the .hero-with-slot-old
   BEM layout above (that BEM tree is the Figma render and is unused by this
   legacy DOM). Give the pre-title the old exception-label bottom rhythm so it
   sits correctly above the title. */
.css-1oil8ay .pretitle {
  margin: 0 0 16px;
}

/* Flatten Webflow's slot wrapper so the slotted card fills the fixed-width
   wrapper as a flex item instead of being swallowed by the wrapper. */
.hero-with-slot-old .award-card ::slotted(*) {
  display: contents;
}

/* Flatten Webflow's slot wrapper so multiple slotted cards become direct
   flex items of the slot area (laid out in a row with a gap) instead of
   collapsing into a single block wrapper and stacking vertically.
   Same fix used in Exponencial / MediaLogos / Navbar.
   Scoped to non-column so the column variant's own > * rule is untouched. */
.hero-with-slot-old:not(.column) .slot-area ::slotted(*) {
  display: contents;
}

/* --- Legacy render (creditas-site) hero image height parity ---------- */
/* Old site: the image column .css-1ssnpcw has min-height:720px and the image
   is absolutely-positioned object-fit:cover, so it never grows the column.
   Our hero image is a slotted (nested) code-island in NORMAL flow at its
   natural height (~819px), which over-grows the column (~824 vs 720) and makes
   the whole hero taller than the live site. Clamp the column to 720 and
   center-crop the overflow so it matches the old cover framing. Desktop only
   (>=1024px) where the split layout applies and the negative bleed margins are
   reset; smaller breakpoints keep their full-bleed behavior untouched. */
@media (min-width: 1024px) {
  .css-1ssnpcw {
    height: 720px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }
}