/* JTL Card Grid — full-bleed sand band with a centred header, a row of icon
   cards (each a nested Simple Container + JTLText atoms) and a closing CTA pill.
   The widget owns only the band, the layout, the card icon and the CTA; every
   text is a nested JTLText atom that keeps its own design-system styling.
   Figma: Transition-Pages node 132:24726. */

.jtl-card-grid {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  padding: 0;
  background-color: #eeeee7;
  box-sizing: border-box;
}

.jtl-card-grid__inner {
  max-width: 1570px;
  margin: 0 auto;
  padding: 0 64px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  column-gap: 32.71px;
  row-gap: 0;
}

/* Header — the three JTLText atoms each span the full row, centred and capped. */
.jtl-card-grid__inner > .jtl-text {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 879px;
  text-align: center;
}
.jtl-card-grid__inner > .jtl-text--h2 {
  margin-top: 0;
}
.jtl-card-grid__inner > .jtl-text--paragraph {
  margin-top: 24.533px;
}

/* Cards — nested Simple Containers, auto-placed into one row under the header. */
.jtl-card-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32.71px;
  padding: 24.533px;
  background-color: #ffffff;
  border-radius: 24.533px;
  text-align: center;
  box-sizing: border-box;
}
/* Card icon — a scoped decorative tile (the widget owns the card chrome). */
.jtl-card-grid__card::before {
  content: "";
  flex: 0 0 auto;
  width: 65.42px;
  height: 65.42px;
  background: url(assets/document-code.svg) center / contain no-repeat;
}
.jtl-card-grid__card > .jtl-text {
  width: 100%;
  text-align: center;
}
.jtl-card-grid__card > .jtl-text--subline {
  margin-top: 32.71px;
}
.jtl-card-grid__card > .jtl-text--paragraph {
  margin-top: 16.355px;
}
/* Card title — reuse the Subline atom, restyled to the navy card heading. */
.jtl-card-grid__card .jtl-text--subline .jtl-text__eyebrow {
  color: #0b1b45;
  font-weight: 600;
  font-size: 20.444px;
  line-height: 28.621px;
  letter-spacing: 0;
  text-transform: none;
}
/* Card copy — reuse the Paragraph atom at the smaller card size. */
.jtl-card-grid__card .jtl-text--paragraph .jtl-text__body {
  font-size: 16.355px;
  line-height: 24.533px;
}

/* CTA — the reusable Button atom (Primary variant) owns its own styling; the
   widget only centres it and adds the closing spacing. */
.jtl-card-grid__cta {
  grid-column: 1 / -1;
  margin-top: 32.71px;
  display: flex;
  justify-content: center;
}

@media (max-width: 992px) {
  .jtl-card-grid__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .jtl-card-grid {
    padding: 0;
  }
  .jtl-card-grid__inner {
    grid-template-columns: 1fr;
    padding: 0 24px;
  }
  .jtl-card-grid__card {
    margin-top: 24px;
  }
}