/* JP-1092 — Entwickler-Dokumentation / Developer documentation
 *
 * Figma teRt2FXM9JffFSebtSTocH node 1991-9442. The frame is 1300.61px wide for
 * a 1440px design, so every Figma value below is the reported number x 1.1068.
 *
 * The page is built from the shared redesign primitives (hero-product-section,
 * basic-br cards, the button widget), so those need no CSS here. What remains
 * is the typography scale for the section/card headings, which otherwise falls
 * through to the theme's default h2/h3 (Kurdis at #333), and the media block
 * geometry.
 *
 * Every selector below is a jp1092-* class emitted only by this page's own
 * content, so nothing here can reach another page — including the English
 * twin's shared page-id, which is why no body.page-id-* scope is used.
 */

/* --- Section heading: Kurdis Wide Bold 32, +0.64px ----------------------- *
 * Size, weight and colour already come from the product-landing template's own
 * h2 rule (32px / 700 / #0b1b45), so only the tracking is added here. That rule
 * also pins line-height to 40px where Figma specifies 46px; it is left alone
 * deliberately — these headings are single-line, so the 6px is not visible, and
 * overriding a rule that styles every product landing page is not worth it.
 */
.jp1092-section__title {
  letter-spacing: 0.64px;
}

/* --- Section overline: Inter SemiBold 18/24, +0.9px, Tech Blue ----------- *
 * This needs its own class rather than reusing product-support-section__subtitle.
 * That class only resolves to Tech Blue underneath a .hero-product-section or
 * .product-support-section ancestor; in a bare section-head row it instead picks
 * up the widget plugin's teal gradient (background-clip:text with a TRANSPARENT
 * -webkit-text-fill-color), and the product-landing h2 rule then forces it to
 * 32px/700 — so the word rendered as a large teal-gradient heading, not an
 * overline. background/-webkit-text-fill-color must both be reset to undo that.
 *
 * The three-class chain is load-bearing: custom-clone.css has
 * `body.page-template-product-landing main section:not(.section-1690) h2` with
 * every declaration !important, which is (0,2,4). Two !important rules are
 * settled on specificity, so this needs (0,3,1) to carry the font metrics —
 * a (0,1,0) selector loses and the overline stays 32px/700 Kurdis.
 */
body.page-template-product-landing .jp1092-section-head .jp1092-section__overline {
  display: block;
  margin-bottom: 8px;
  font-family: Inter, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase;
  background: none !important;
  color: #2722f8 !important;
  -webkit-text-fill-color: #2722f8 !important;
}

/* --- Card / CTA / column heading: Inter SemiBold ------------------------- *
 * Figma uses the h3 component token (Inter Semi Bold, #0b1b45) here, not the
 * Kurdis display face. Two rules have to be beaten, hence the shape below:
 *
 *   1. `h3, h4, h5, h6 { font-family: Kurdis ... !important }` in
 *      theme/jtl/custom-clone.css — global, so font-family needs !important.
 *   2. `.page-template-product-landing h1..h6 { font-family: Inter…;
 *      color: #333333 }` in the widget plugin's assets/style.css, at (0,1,1) —
 *      beaten on specificity by prefixing the template class, no !important.
 */
body.page-template-product-landing .jp1092-card__title,
body.page-template-product-landing .jp1092-cta__title,
body.page-template-product-landing .jp1092-twocol__subhead {
  font-family: Inter, sans-serif !important;
  font-weight: 600;
  color: #0b1b45;
  -webkit-text-fill-color: #0b1b45;
}

body.page-template-product-landing .jp1092-card__title,
body.page-template-product-landing .jp1092-cta__title {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.4px;
}

body.page-template-product-landing .jp1092-twocol__subhead {
  font-size: 20px;
  line-height: 28px;
}

/* --- Vertical rhythm ------------------------------------------------------ *
 * Figma stacks the card rows 32.5px apart (36px at 1440) and leaves the same
 * 36px between a section heading and the row beneath it. A product group opens
 * and closes with 48px, so the break between two groups reads as 96px.
 *
 * The theme gives every `section > .container` 4rem top and bottom from 576px
 * up. That is the right rhythm for a page of full-width bands, but this page is
 * a list of cards: it put 128px between two rows where the design asks for 36,
 * and 160px under a heading — 128 of container padding plus the heading's own
 * 32px margin, which sits inside the row and so is invisible to a section-to-
 * section measurement. Together they stretched the page ~1080px past the design.
 *
 * The theme rule is global, so it is left alone and the padding is re-set per
 * section here. Below 992px the media and copy stack and the design has no frame
 * for that width, so the theme's rhythm is kept there.
 */
@media (min-width: 992px) {
  .jp1092-card-row > .container,
  .jp1092-richtext > .container,
  .jp1092-twocol > .container,
  .jp1092-cta > .container {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* Against the neighbouring 18s: 96px above the heading, 36px below it. */
  .jp1092-section-head > .container {
    padding-top: 78px;
    padding-bottom: 18px;
  }

  /* The 36px below the heading is already the two containers' padding; the
   * heading's default margin would stack a further 32px on top of it. */
  .jp1092-section-head .jp1092-section__title {
    margin-bottom: 0;
  }
}

/* --- Hero image: no CSS corner ------------------------------------------ *
 * Nothing here rounds the hero. The silhouette — the concave curve down the
 * left, all three rounded corners, the badge over the lower-left — lives in the
 * PNG's alpha, which is how every hero on the redesign works (compare the JTL
 * AI hero on /de/ki: same 645px column, same organic shape, border-radius 0).
 *
 * A border-top-right-radius used to sit here to round a corner the asset was
 * rendering hard. The asset was the problem: its canvas had been cut to the
 * photo's width, which chopped the left curve off flat and squared the corners.
 * With the asset carrying its own arc again, a CSS radius would cut a second
 * arc into an already-rounded corner — so the shape has exactly one owner, and
 * it is the alpha channel.
 */

/* --- Media + card row --------------------------------------------------- *
 * Figma: a 375.7px square image beside a 780.4px card of the SAME height.
 * The column widths come from the content (1/3 + 2/3); the equal height and
 * the square crop are here.
 */
.jp1092-card-row > .row,
.jp1092-card-row .row {
  align-items: stretch;
}

/* 1:1, per Figma — the media slot is 375.73 x 375.73 in all fourteen rows. The
 * design ships a purpose-made square screenshot per card, so the square is the
 * asset's own aspect ratio and nothing is cropped by object-fit here. object-fit
 * is still declared so a future non-square upload degrades to a centre crop
 * rather than stretching. */
.jp1092-card-row__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 46px;
}

/* Centre the shorter media block against the card instead of top-aligning it. */
.jp1092-card-row__media {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The card matches the row height rather than hugging its own content. */
.jp1092-card-row__body > .basic-br {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Body copy ----------------------------------------------------------- *
 * Moving onto the product-landing template makes the widget plugin's global
 * assets/style.css load on this page for the first time (its bootstrap
 * early-returns unless the template is allow-listed), and that sheet sets
 * `main { color: #333333 }`. So body copy went #585858 -> #333 as a side effect
 * of the template switch. Figma specifies Dark Blue for every text node on this
 * page (measured on 1991:9488, 9496, 9498, 9536, 9548, 9584), which is also
 * where the JP-786 body-copy fix landed.
 *
 * Sizes are set only where Figma was measured directly — the hero copy at 20/28
 * (node 1991:9488) and the card copy at 18/28 (node 1991:9498). The bullet
 * columns, intro and CTA paragraphs keep the theme's size and take the colour
 * only, rather than having a number guessed onto them.
 */
.jp1092-hero .hero-product-section__content p,
.jp1092-card-row__body p,
.jp1092-twocol__col p,
.jp1092-twocol__col li,
.jp1092-richtext__col p,
.jp1092-cta__col p {
  color: #0b1b45;
}

.jp1092-hero .hero-product-section__content p {
  font-size: 20px;
  line-height: 28px;
}

.jp1092-card-row__body p {
  font-size: 18px;
  line-height: 28px;
}

/* The two bullet columns run a looser leading than the rest of the page: Figma
 * nodes 1991:9537 / 9543 / 9554 (and their JTLwawiExtern twins) are all
 * 14.451/25.29 in the 1300.61px frame, i.e. 16/28 at 1440. The size already
 * matches — only the leading is short, at 24px on the paragraphs (the theme's
 * 1.5) and 25.6px on the list items (its 1.6).
 *
 * Unitless rather than 28px so the ratio survives the theme's responsive
 * font-size steps; 1.75 x 16 is exactly the 28px Figma specifies at 1440. */
.jp1092-twocol__col p,
.jp1092-twocol__col li {
  line-height: 1.75;
}

/* --- Inline body links --------------------------------------------------- *
 * Colour first, because it is the same everywhere: the widget plugin's
 * assets/style.css paints `.page-template-product-landing a` #333333, which
 * only started applying to this page when it moved onto that template — so
 * without this the three inline links per twin render legacy grey instead of
 * the Dark Blue the design gives every text run in this section.
 *
 * `p a` / `li a` deliberately: the sixteen widget button anchors are direct
 * children of a div, so this cannot reach a button's appearance.
 */
.jp1092-card-row__body p a,
.jp1092-twocol__col p a,
.jp1092-twocol__col li a,
.jp1092-richtext__col p a {
  color: #0b1b45;
  -webkit-text-fill-color: #0b1b45;
}

/* Underline is NOT the same everywhere, and an earlier revision of this file
 * asserted it for all four wrappers off a single node's spec. The design
 * distinguishes, and it is explicit about it in both directions:
 *
 *   1991:9548 / 1991:9565  two-column list items   <a> + `underline`
 *   1991:9600 / 9663 / 9715  card-row body copy    plain <p>, no <a> at all
 *
 * So: the two whole-item links in the two-column lists are underlined, and
 * body copy in a card row is not — even where it carries a live href (the
 * JTL-SCX card's "hier" → github.com/jtl-scx, which the design renders as
 * ordinary copy). `.jp1092-richtext__col` is grouped with the card rows: it
 * holds body copy of the same kind and, today, no inline links at all.
 */
.jp1092-twocol__col p a,
.jp1092-twocol__col li a {
  text-decoration: underline;
}

.jp1092-card-row__body p a,
.jp1092-richtext__col p a {
  text-decoration: none;
}

/* Hover / focus.
 *
 * The theme resets both properties — `a:not(:disabled):not(.disabled):not(.active):hover
 * { color:#6e8da4; text-decoration:none }` in dist/app.css. That is (0,4,1), so
 * the rest-state rules above lose to it and every link here would turn light
 * blue and lose its underline the moment the pointer lands. Both halves of that
 * are wrong: in the lists the underline IS what marks the item as clickable,
 * and #6e8da4 is not a colour the design uses for text anywhere on this page.
 *
 * The same `:not()` chain is repeated here purely to clear that specificity
 * without reaching for !important. `:focus` and `:focus-visible` are included
 * so a keyboard user sees what a mouse user sees; no outline is declared, so
 * the browser's own focus ring still shows. Each group simply holds its rest
 * state — the design specifies no hover treatment for either.
 */
:is(
  .jp1092-card-row__body p,
  .jp1092-twocol__col p,
  .jp1092-twocol__col li,
  .jp1092-richtext__col p
) a:not(:disabled):not(.disabled):not(.active):is(:hover, :focus, :focus-visible) {
  color: #0b1b45;
  -webkit-text-fill-color: #0b1b45;
}

:is(.jp1092-twocol__col p, .jp1092-twocol__col li)
  a:not(:disabled):not(.disabled):not(.active):is(:hover, :focus, :focus-visible) {
  text-decoration: underline;
}

:is(.jp1092-card-row__body p, .jp1092-richtext__col p)
  a:not(:disabled):not(.disabled):not(.active):is(:hover, :focus, :focus-visible) {
  text-decoration: none;
}

/* --- Centred contact CTA ------------------------------------------------- */
.jp1092-cta {
  text-align: center;
}

/* Layout only — the button's own appearance is owned by the button widget. */
.jp1092-cta__buttons {
  justify-content: center;
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .jp1092-card-row__body > .basic-br {
    height: auto;
  }

  .jp1092-section__title {
    letter-spacing: 0.4px;
  }

  body.page-template-product-landing .jp1092-card__title,
  body.page-template-product-landing .jp1092-cta__title {
    font-size: 22px;
    line-height: 30px;
  }
}