/* 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;
}
/* A card carrying its own icon drops the default tile, so the two never stack.
   The class is set by the JTL Card when its icon field is filled; the icon
   itself is styled by that widget's own sheet. */
.jtl-card-grid__card.jtl-has-icon::before {
  content: none;
}
.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;
  }
}

/* ---------------------------------------------------------------------------
   Variant: icon tiles
   Figma JTL-Website-Modules node 6918:1330. The same module — centred header,
   one row of icon cards, closing CTA — with the two grounds inverted: a white
   band carrying sand tiles.

   That frame is a 1440px layout drawn at 1415.14px, so every value below is the
   raw Figma number divided by 0.9827361 and lands on the design system's round
   numbers. The base rules above come from node 132:24726 and were traced at a
   different scale, which is why the two blocks disagree on the last decimal of
   values that mean the same thing (24.533 vs 24).

   Declared after the base block, and every rule carries the variant class, so a
   card grid without it renders exactly the bytes it did before.
   --------------------------------------------------------------------------- */

/* A painted band has to own its vertical space or the page's own ground shows
   above and below it. The base treatment gets away with taking that space from
   the section container because its sand matches the page; a white band does
   not, so the padding is set here rather than on the base rule, where it would
   move every existing instance. */
.jtl-card-grid--icon-tiles {
  background-color: #ffffff;
  padding: 80px 64px;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__inner {
  /* 1440 design viewport, so the content box is the 1312px the sibling bands on
     the same page use — not this widget's original 1570. */
  max-width: 1440px;
  padding: 0;
  column-gap: 32px;
}

/* Header — the design stacks overline, headline and intro with no gaps at all;
   their line-heights carry the rhythm. */
.jtl-card-grid--icon-tiles .jtl-card-grid__inner > .jtl-text {
  max-width: 860px;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__inner > .jtl-text--paragraph {
  margin-top: 0;
}

.jtl-card-grid--icon-tiles .jtl-card-grid__card {
  margin-top: 32px;
  padding: 24px;
  background-color: #eeeee7;
  border-radius: 24px;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__card > .jtl-card__icon {
  width: 64px;
  height: 64px;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__card > .jtl-text--subline {
  margin-top: 32px;
}
.jtl-card-grid--icon-tiles .jtl-card-grid__card .jtl-text--subline .jtl-text__eyebrow {
  font-size: 20px;
  line-height: 28px;
}

/* The design separates the tiles from the CTA by the band's own 32px stack gap
   PLUS the button row's 32px top padding. */
.jtl-card-grid--icon-tiles .jtl-card-grid__cta {
  margin-top: 64px;
}

@media (max-width: 992px) {
  .jtl-card-grid--icon-tiles {
    padding: 64px 24px;
  }
}

@media (max-width: 768px) {
  .jtl-card-grid--icon-tiles {
    padding: 48px 24px;
  }
  .jtl-card-grid--icon-tiles .jtl-card-grid__inner {
    padding: 0;
  }
  .jtl-card-grid--icon-tiles .jtl-card-grid__cta {
    margin-top: 40px;
  }
}