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

.hero-with-slot--bg-gray {
  background-color: #f1f3f2;
  color: #292929;
}

.hero-with-slot--bg-white {
  background-color: #ffffff;
  color: #292929;
}

.hero-with-slot--bg-dark {
  background-color: #292929;
  color: #ffffff;
}

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

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

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

.hero-with-slot__container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

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

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

@media (min-width: 1024px) {
  .hero-with-slot__grid {
    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 ----------------------------------------- */

.hero-with-slot__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;
}

.hero-with-slot__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;
}

.hero-with-slot--bg-dark .hero-with-slot__pretitle {
  color: #d6dcd9;
}

.hero-with-slot__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;
}

.hero-with-slot--bg-dark .hero-with-slot__title {
  color: #ffffff;
}

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

.hero-with-slot__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;
}

.hero-with-slot--bg-dark .hero-with-slot__description,
.hero-with-slot--bg-dark .hero-with-slot__description-below {
  color: #ffffff;
}

/* ---------- CTA button ----------------------------------------- */

.hero-with-slot__cta-button {
  /* Primary / Text Only — Large variant */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  border-radius: 16px;
  background-color: #8edb00;
  color: #292929;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

/* CTA spacing is handled by the .hero-with-slot__info gap (24px). */

.hero-with-slot__cta-button:hover {
  background-color: #7ec300;
}

.hero-with-slot__cta-button:active {
  transform: translateY(1px);
}

.hero-with-slot__cta-button:focus-visible {
  outline: 3px solid #292929;
  outline-offset: 2px;
}

.hero-with-slot--bg-dark .hero-with-slot__cta-button:focus-visible {
  outline-color: #ffffff;
}

/* ---------- 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). */
.hero-with-slot__stamps {
  display: flex;
  flex-direction: column;
  max-width: 520px;
}

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

.hero-with-slot__award {
  display: inline-block;
  flex-shrink: 0;
  max-width: 140px;
}

.hero-with-slot__award img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-with-slot__award-description {
  margin: 0;
  color: #52605a;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.3px;
}

.hero-with-slot--bg-dark .hero-with-slot__award-description {
  color: #d6dcd9;
}

/* 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. */
.hero-with-slot__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;
}

.hero-with-slot__award-cards::-webkit-scrollbar {
  display: none;
}

/* 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). */
.hero-with-slot__award-card {
  flex: 0 0 236px;
  width: 236px;
  display: flex;
}

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

@media (min-width: 1024px) {
  .hero-with-slot__award-cards {
    /* 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;
  }

  .hero-with-slot__award-card {
    flex: 0 0 288px;
    width: 288px;
  }
}

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

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

.hero-with-slot__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;
}

/* 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. */
@media (min-width: 1024px) {
  .hero-with-slot:not(.hero-with-slot--column) .hero-with-slot__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).
   ================================================================ */

@media (min-width: 1024px) {
  .hero-with-slot--reversed .hero-with-slot__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
   ================================================================ */

.hero-with-slot--column .hero-with-slot__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) {
  .hero-with-slot--column .hero-with-slot__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'info'
      'slot'
      'below'
      'awardcards';
    gap: 40px;
    align-items: unset;
  }
}

/* Info: center-align all text */
.hero-with-slot--column .hero-with-slot__info {
  text-align: center;
  max-width: 680px;
  width: 100%;
}

.hero-with-slot--column .hero-with-slot__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. */
.hero-with-slot--column .hero-with-slot__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. */
.hero-with-slot--column .hero-with-slot__slot-area > * {
  display: block;
  width: 100%;
}

/* Description below the slot */
.hero-with-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%;
}