/* JTL Link Box — a tech-blue rounded box carrying a white heading above a row of
   three white "link" cards (title + document icon, a category label + short
   description, and a "Mehr erfahren" arrow link). The heading and every card are
   nested, editable child elements; the widget owns only the box, the responsive
   heading/card-grid layout and the per-card document icon.
   Figma: Transition-Pages node 430:15845. */

/* Full-bleed, like every sibling band in this family (hero, text-media, card
   grid), and carrying the 80px/64px the design draws. Dropped into the theme's
   .container instead, the band inherited a 1320px width and its own 24px of
   side padding, so the blue box came out 1272 — 40px narrower than the bands
   above and below it, which reads as a misalignment rather than as a smaller
   box. At 1440 the numbers below put the box at exactly the 1312 drawn; the
   1344px cap on the box is the same value measured on the wider artboard, so
   both are satisfied by one rule.

   100vw includes the scrollbar where the container's width does not, so on a
   platform that reserves one this overhangs by its width; every other
   full-bleed band in the plugin behaves the same way, and matching them matters
   more here than being independently right. */
.jtl-link-box {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  padding: 80px 64px;
  box-sizing: border-box;
}

/* The tech-blue rounded box — centred, capped to the site content width. */
.jtl-link-box__box {
  max-width: 1344px;
  margin: 0 auto;
  padding: 46px;
  box-sizing: border-box;
  background-color: #2722f8;
  border-radius: 46px;
}

/* Heading spans the full row; the three cards sit in one equal-width row below. */
.jtl-link-box__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 32px;
  align-items: stretch;
}
.jtl-link-box__inner > .jtl-link-box__title {
  grid-column: 1 / -1;
}

/* Section heading — reuse the H2 atom, recoloured white for the blue box.
   Card titles — reuse the H3 atom at the widget's navy.

   Both selectors fight the product-landing template, which colours headings by
   element and which the widget's own one-class rules lose to:

     .page-template-product-landing h1..h6            (0,1,1)  #333
     body.page-template-product-landing main
       section:not(.section-1690) h2                  (0,2,4)  #0b1b45 !IMPORTANT

   So the section heading came out NAVY ON BLUE — the white the widget declares
   never applied — and the card titles came out #333 rather than the navy every
   other heading on the page uses.

   The card title needs specificity only: it loses to a plain (0,1,1) rule, and
   specificity compares CLASS count before element count, so repeating the widget
   class to reach (0,3,0) wins outright, independent of stylesheet load order.

   The section heading needs `!important` as well, because the declaration
   beating it carries one and no amount of specificity outranks that. It asserts
   a colour the widget already owns — nothing outside .jtl-link-box can be
   reached by either rule. */
.jtl-link-box .jtl-link-box__title .jtl-text__heading {
  color: #ffffff !important;
}
/* A nested Subline keeps the JTL Text atom's tech-blue default, which disappears
   on this widget's tech-blue surface. Set only a direct section pre-heading to
   white; `!important` is required when the author promotes the atom to h1-h3,
   because those supported heading tags carry an important colour of their own.
   The more-specific navy variant below intentionally keeps light blue. */
.jtl-link-box .jtl-link-box__inner > .jtl-text--subline .jtl-text__eyebrow {
  color: #ffffff !important;
}
.jtl-link-box .jtl-link-box__card .jtl-text__heading {
  color: #0b1b45;
}

/* Cards — nested Simple Containers, auto-placed into the row under the heading. */
.jtl-link-box__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 24px;
  box-sizing: border-box;
}

/* Card icon — a scoped decorative tile the widget owns, pinned top-right. */
.jtl-link-box__card::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: url(assets/document-text.svg) center / contain no-repeat;
}

/* Card title — reuse the H3 atom at the smaller card size, kept clear of the
   icon on the right. */
.jtl-link-box__card .jtl-text--h3 {
  padding-right: 64px;
}
.jtl-link-box__card .jtl-text--h3 .jtl-text__heading {
  font-size: 20px;
  line-height: 28px;
}
/* Two wide cards carry the larger title the design draws them with — the size is
   a consequence of the card's width, not of the page it sits on. */
.jtl-link-box.is-cols-2 .jtl-link-box__card .jtl-text--h3 .jtl-text__heading {
  font-size: 28px;
  line-height: 36px;
}

/* Category label + description — two Paragraph atoms at the 16/24 card size, set
   tight together, with the category emphasised. */
.jtl-link-box__card .jtl-text--paragraph .jtl-text__body {
  font-size: 16px;
  line-height: 24px;
}
.jtl-link-box__card .jtl-link-box__cat {
  margin-top: 28px;
}
/* A card with no category label ran its description straight into the title with
   no gap at all: the 28px above belongs to the category, and the description's
   own tightness is what pairs it with one. `:not()` keeps the pair tight where a
   category IS present, so nothing that already renders correctly moves. */
.jtl-link-box__card .jtl-text--h3 + .jtl-text--paragraph:not(.jtl-link-box__cat) {
  margin-top: 32px;
}
.jtl-link-box__card .jtl-link-box__cat .jtl-text__body {
  font-weight: 700;
}

/* "Mehr erfahren" — reuse the Link atom, pinned to the card bottom so cards align.
   Navy bold label on the left, orange arrow anchored on the right. */
.jtl-link-box__card .product-button-group__link {
  width: 100%;
  margin-top: auto;
  padding-top: 28px;
  color: #0b1b45;
}
.jtl-link-box__card .product-button-group__link--text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 700;
  text-decoration: none;
}
.jtl-link-box__card .product-button-group__link--icon {
  margin-left: 16px;
  color: #fb581f;
  transition: transform 300ms;
}
.jtl-link-box__card .product-button-group__link:hover .product-button-group__link--icon {
  margin-left: 16px;
  transform: translateX(6px);
}

/* ------------------------------------------------------------------ *
 * Variants. Every rule below is gated on a modifier class the author
 * picks in the element's settings, so an instance that picks nothing
 * renders exactly as it did before these existed.
 * ------------------------------------------------------------------ */

/* `is-cols-2` — two cards per row instead of three. */
.jtl-link-box.is-cols-2 .jtl-link-box__inner {
  grid-template-columns: repeat(2, 1fr);
}

/* `no-card-icon` — cards without the decorative document tile, so the title
   may use the card's full width. */
.jtl-link-box.no-card-icon .jtl-link-box__card::before {
  content: none;
}
.jtl-link-box.no-card-icon .jtl-link-box__card .jtl-text--h3 {
  padding-right: 0;
}

/* `is-navy` — the dark-blue surface. The box carries the dark background, so
   the copy that sits DIRECTLY on it is set light while the copy inside the
   white cards stays dark. Which side of that split an element is on is not
   derivable from its own class, so it is decided structurally: a direct child
   of the grid sits on the box, anything inside a card sits on white. */
.jtl-link-box.is-navy .jtl-link-box__box {
  background-color: #0b1b45;
}
.jtl-link-box.is-navy .jtl-link-box__inner > :not(.jtl-link-box__card) {
  grid-column: 1 / -1;
}
.jtl-link-box.is-navy .jtl-link-box__inner > .jtl-text--subline .jtl-text__eyebrow {
  color: #89d2ff !important;
}
/* Same reason as the tech-blue heading above: the template forces every <h2> in
   a <section> dark blue with `!important`, which is invisible on this box. */
.jtl-link-box.is-navy .jtl-link-box__inner > .jtl-text--h2 .jtl-text__heading,
.jtl-link-box.is-navy .jtl-link-box__inner > .jtl-text--h3 .jtl-text__heading {
  color: #ffffff !important;
}
.jtl-link-box.is-navy .jtl-link-box__inner > .jtl-text--paragraph .jtl-text__body {
  color: #ffffff;
}

/* Cards on the navy box — roomier than the tech-blue default, accent-blue
   title, dark body copy. */
.jtl-link-box.is-navy .jtl-link-box__card {
  padding: 24px;
}
.jtl-link-box.is-navy .jtl-link-box__card .jtl-text__heading {
  color: #2722f8;
  font-size: 28px;
  line-height: 36px;
  /* The three-up default gets this gap from its category label; a card without
     one needs the heading to hold its own space above the body copy. */
  margin-bottom: 16px;
}
.jtl-link-box.is-navy .jtl-link-box__card .jtl-text__body {
  color: #0b1b45;
}

/* `is-in-column` — sit inside the content column instead of breaking out
   full-bleed, and drop the side padding so the box reaches its 1344px cap on a
   wide viewport. On a stacked page this lines the box up on the same left/right
   edge as the cards above and below it. Opt-in; the default stays full-bleed for
   every other page that uses the widget. */
.jtl-link-box.is-in-column {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* `is-shell-frame` — sit in the content column (not full-bleed), drop the side
   padding and cap the box at 1558px flush-left, so it lines up on the same left
   edge as the page breadcrumb instead of the narrower 1344 box centred in the
   column. Opt-in; the default stays full-bleed for every other page. */
.jtl-link-box.is-shell-frame {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.jtl-link-box.is-shell-frame .jtl-link-box__box {
  max-width: 1558px;
  margin-left: 0;
  margin-right: 0;
}

/* Opt-in emphasis for a single card's body copy. */
.jtl-link-box .jtl-link-box__card .is-emphasis .jtl-text__body {
  font-weight: 700;
}

@media (max-width: 992px) {
  .jtl-link-box {
    padding: 64px 24px;
  }
  .jtl-link-box__box {
    padding: 32px;
  }
  .jtl-link-box__inner,
  .jtl-link-box.is-cols-2 .jtl-link-box__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .jtl-link-box {
    padding: 48px 16px;
  }
  .jtl-link-box__box {
    padding: 24px;
    border-radius: 32px;
  }
}