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

/**
 * PersonalizedService — sidebar info + card grid section, with layout
 * variants (template01 side-bar / template02-03 column / quotes) and a
 * background variant (white/gray/dark).
 *
 * Class naming: single-class, no BEM `__` separator. Base element rules are
 * nested under `.personalized-service`; the header title/description are nested
 * under `.info` so they don't reach the slotted cards (which carry their own
 * `.title`/`.description`). Layout-variant rules stay flat top-level, scoped by
 * the unique `.personalized-service.<variant>` modifier class.
 *
 * Tokens inlined from @creditas-ui/themes standard:
 *   colors.neutral.0 #ffffff  .10 #f1f3f2  .90 #292929  primary.40 #8edb00
 *   heading.xl 40/52/0.5 · heading.lg 32/40/0.5 · body.md 16/24/0.3 · body.lg 18/26/0.3
 *   breakpoints 2xl=600 5xl=1024
 */

.personalized-service,
.personalized-service *,
.personalized-service *::before,
.personalized-service *::after {
  box-sizing: border-box;
}

.personalized-service {
  position: relative;
  padding: 20px 0 64px;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  background: #ffffff;
  color: #292929;

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

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

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

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

  /* ----- layout shell --------------------------------------------- */

  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* ----- info column (title/description scoped here) --------------- */

  .info {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .title {
      margin: 0;
      font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
        'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
        sans-serif;
      font-weight: 400;
      font-size: 32px;
      line-height: 40px;
      letter-spacing: 0.5px;

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

    .description {
      margin: 0;
      font-weight: 400;
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0.3px;
    }
  }

  /* ----- cards row/grid ------------------------------------------- */

  .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;

    @media (min-width: 600px) {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Webflow slot wrapper flattening */
    ::slotted(*) {
      display: contents;
    }
  }
}

/* ====================================================================
 * Template01: info column + cards column at desktop
 * ================================================================== */

.personalized-service.template01 .grid {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .personalized-service.template01 .grid {
    /* "side-bar": cards balanced 1:1 with the info column. */
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* ====================================================================
 * Template02 / Template03: info stacked above, cards row below
 * ================================================================== */

.personalized-service.template02 .grid,
.personalized-service.template03 .grid {
  grid-template-columns: 1fr;
}

.personalized-service.template02 .info,
.personalized-service.template03 .info {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.personalized-service.template02 .cards,
.personalized-service.template03 .cards {
  margin-top: 48px;
}

@media (min-width: 1024px) {
  .personalized-service.template02 .cards,
  .personalized-service.template03 .cards {
    /* "column" layout: 4 cards across on desktop, per Figma. */
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ====================================================================
 * Cards layout modifiers (stack / row)
 * ================================================================== */

.personalized-service.cards-stack .cards {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .personalized-service.cards-stack .cards {
    grid-template-columns: 1fr;
  }
}

/* Row: cards in a horizontal row of equal columns (flex overrides grid),
   wrapping when narrower than ~220px. The --card-* contract makes each card a
   flexible equal-width column. */
.personalized-service.cards-row .cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  --card-grow: 1;
  --card-shrink: 1;
  --card-basis: 220px;
}

/* ====================================================================
 * Quotes variant (SocialProof) — 724px narrow container, left title,
 * cards in a flex row.
 * ================================================================== */

.personalized-service.quotes .container {
  max-width: 724px;
}

.personalized-service.quotes .grid {
  display: flex;
  flex-direction: column;
  gap: 59px; /* title → cards gap from Figma */
}

.personalized-service.quotes .info {
  text-align: left;
  max-width: none;
  margin: 0;
}

/* Title in Quotes variant is Medium (500) weight, 40px */
.personalized-service.quotes .info .title {
  font-weight: 500; /* Maison Neue Extended Medium */
  font-size: 40px;
  line-height: 52px;
}

.personalized-service.quotes .cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 32px;
  grid-template-columns: none; /* override the grid */
}

@media (max-width: 767px) {
  .personalized-service.quotes .grid {
    gap: 40px;
  }
  .personalized-service.quotes .cards {
    flex-direction: column;
    align-items: stretch;
  }
}