/* 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):
 *    Two-column — info left, slot right. Same layout as HeroWithSlider.
 *    Visual spec: Figma node 4975:2863.
 *
 *  Column (.hero-with-slot.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 {
  display: block;
}

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

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

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

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

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

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

  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }

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

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

    @media (min-width: 1024px) {
      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 awardcards';
      /* 54px separation between the text/info column and the image/slot column. */
      column-gap: 54px;
      row-gap: 48px;
      align-items: start;
    }
  }

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

  .pretitle {
    /* Body/small--14/Bold — #3b4540 */
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #3b4540;
  }

  .title {
    /* Mobile: Maison Neue Medium 32 / 42 / 0.5px */
    margin: 0;
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 42px;
    letter-spacing: 0.5px;
    color: #292929;

    @media (min-width: 768px) {
      /* Tablet + Desktop: 40 / 52 */
      font-size: 40px;
      line-height: 52px;
    }
  }

  .description {
    /* Body/x-large--20/Light — #292929 */
    margin: 0;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
    color: #292929;
    max-width: 495px;
  }

  /* ---------- CTA button ----------------------------------------- */
  /* The CTA is now the shared <CardCtaButton> (real @creditas-ui 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 — now a normal flex child at the end of the info column, so it
     inherits the 24px rhythm (description → badge). */
  .stamps {
    display: flex;
    flex-direction: column;
    max-width: 520px;
  }

  /* 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 {
    margin: 0;
    color: #52605a;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
  }

  /* 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;
    /* stretch so slotted cards in a 2-up row match the tallest one's height
       (mirrors the .award-cards shelf above). Single-per-line on mobile is
       unaffected. */
    align-items: stretch;
    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.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.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%;
      }
    }
  }
}

/* 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 .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:not(.column) .slot-area ::slotted(*) {
  display: contents;
}