/* JTL Text Media — two-column Text-Media section.
   The 1312px content box is split 144px apart in one of two ways, both drawn in
   JTL-Website-Modules: 640 text / 528 square media (node 6918:824, the split for
   a band carrying an icon list), or 528 text / 640 landscape media (node
   6918:1276, the split for a band carrying copy and a CTA). Each split has its
   own media aspect and the two are NOT interchangeable — the wrong one either
   crops the artwork or makes the copy column too narrow to hold its list.
   Type and the inner rhythm come from Transition-Pages 416:8766.
   A full-bleed sand band holding a left text column (nested JTLText atoms + a JTL
   List with Icons) and a right media box. All selectors are scoped under
   .jtl-text-media; nested atoms are only re-spaced/re-styled here, never globally. */

.jtl-text-media {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  padding-top: var(--jtl-band-space-top, 80px);
  padding-bottom: var(--jtl-band-space-bottom, 80px);
  padding-left: 0;
  padding-right: 0;
  background-color: #eeeee7;
  box-sizing: border-box;
}
/* Band background variants. Sand is the rule above; this is the opt-in. The
   media placeholder keeps its own sand tint either way — it reads as a missing
   image on both bands, and turning it white would make it invisible. */
.jtl-text-media--surface-white {
  background-color: #ffffff;
}

.jtl-text-media *,
.jtl-text-media *::before,
.jtl-text-media *::after {
  box-sizing: border-box;
}

.jtl-text-media__inner {
  max-width: 1440px; /* the design viewport, so the content box is 1312 */
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  gap: 144px;
}
.jtl-text-media--media-left .jtl-text-media__inner {
  flex-direction: row-reverse;
}

/* ---- Left text column (nested atoms) ---- */
.jtl-text-media__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* 6px within a subline+headline pair; the intro and list add margin-top so the
     visible gap between blocks is 24px while an optional subline stays tight. */
  gap: 6px;
}
.jtl-text-media__content .jtl-text--paragraph {
  margin-top: 18px;
}
.jtl-text-media__content .jtl-list-with-icons {
  margin-top: 18px;
  row-gap: 32px;
}
/* Optional CTA below the copy. The column's own gap is 6px, so 26 here makes
   the visible space above the button the 32px the design leaves. */
.jtl-text-media__cta {
  margin-top: 50px;
}

/* The list's own icons are the default. 12px between icon and copy, and the
   icon aligned to the first line rather than centred on the whole row. */
.jtl-text-media .jtl-list-with-icons__item {
  align-items: flex-start;
  gap: 12px;
}

/* Arrow bullets — the alternative treatment, where a tech-blue arrow replaces
   the list's icons: hide the atom's <img> and paint a mask-image arrow on the
   icon box, so the atom is untouched everywhere else and the glyph inherits the
   brand colour.

   Opt-in through the "List bullets" control, and it did not used to be. As an
   unconditional rule it silently discarded whatever icons an instance supplied
   — the four icons drawn for this module were exported, imported and passed to
   the widget correctly, and were painted over by an arrow the whole way down.
   A container may style the atom; it may not overrule the content it was
   given. */
.jtl-text-media--bullets-arrow .jtl-list-with-icons__icon-img {
  display: none;
}
.jtl-text-media--bullets-arrow .jtl-list-with-icons__icon {
  width: 24px;
  height: 29px;
  background-color: #2722f8;
  -webkit-mask: url(assets/arrow-right.svg) left center / 24px 24px no-repeat;
          mask: url(assets/arrow-right.svg) left center / 24px 24px no-repeat;
}
.jtl-text-media .jtl-list-with-icons__text {
  font-size: 18px;
  line-height: 28px;
  color: #0b1b45;
}
/* The list at the size the List with Icons atom is drawn at (16/24, its own
   Figma node 79:2828) rather than the 18/28 this band enlarges it to. Both
   sizes are drawn: the band's own frame uses 18/28 for a four-line list, and a
   band carrying four TITLED rows uses 16/24, because at 18/28 those rows run a
   third longer than the media beside them. Opt-in, so nothing already authored
   changes size. */
.jtl-text-media--list-base .jtl-list-with-icons__text {
  font-size: 16px;
  line-height: 24px;
}

/* ---- Right media box ---- */
/* `align-self: flex-start` — the media hangs from the TOP of the band, not from
   its middle.

   The row centres its two columns, which is right for the text: it is the taller
   side on most instances, so centring it is what makes the band look balanced.
   It is wrong for the media. On the text-wide split the copy column carries a
   2x2 icon list and runs ~200px taller than the square image, and a centred
   image then floats with a gap above it and below it, level with nothing — the
   headline starts well above its top edge.

   Only the media column is moved. Doing this by flipping the ROW to flex-start
   would drag the text column up too, which changes every instance where the
   media is the taller side (the media-wide bands) for no reason. Here it is a
   no-op on those: their image already fills the row, so flex-start and center
   put it in the same place. */
.jtl-text-media__media {
  min-width: 0;
  display: flex;
  align-self: flex-start;
  align-items: center;
  justify-content: flex-end;
}
.jtl-text-media--media-left .jtl-text-media__media {
  justify-content: flex-start;
}
.jtl-text-media__image,
.jtl-text-media__placeholder {
  display: block;
  width: 100%;
  border-radius: 24px;
}
.jtl-text-media__image {
  height: auto;
  object-fit: cover;
}
.jtl-text-media__placeholder {
  background-color: #2722f8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jtl-text-media__placeholder-glyph {
  display: block;
  width: 88px;
  height: 88px;
}

/* ---- Column split -------------------------------------------------------
   The bare values are text-wide, the split this module is drawn in most often. */
.jtl-text-media__content {
  max-width: 640px;
}
.jtl-text-media__media {
  flex: 0 0 528px;
  max-width: 528px;
}
.jtl-text-media__image,
.jtl-text-media__placeholder {
  aspect-ratio: 1 / 1;
}

/* Legacy: instances authored before the split control existed, which were cut
   to a 1472px frame with landscape media. They are NOT text-wide — that split's
   media box is square, and the image is object-fit: cover, so letting them fall
   through to it would crop artwork with nothing reporting it. Applied by View.php
   when the shortcode carries no `split` attribute at all. */
.jtl-text-media--split-legacy .jtl-text-media__inner {
  max-width: 1472px;
  gap: 148px;
}
.jtl-text-media--split-legacy .jtl-text-media__content {
  max-width: 655px;
}
.jtl-text-media--split-legacy .jtl-text-media__media {
  flex: 0 0 541px;
  max-width: 541px;
}
.jtl-text-media--split-legacy .jtl-text-media__image,
.jtl-text-media--split-legacy .jtl-text-media__placeholder {
  aspect-ratio: 541 / 370;
}
.jtl-text-media--split-legacy .jtl-text-media__content .jtl-list-with-icons {
  row-gap: 24px;
}

/* Media-wide: 640 with the 1.461 ratio produces the design's 438px row height
   exactly, which is what sets that band's 598px total. */
.jtl-text-media--split-media-wide .jtl-text-media__content {
  max-width: 528px;
}
.jtl-text-media--split-media-wide .jtl-text-media__media {
  flex: 0 0 640px;
  max-width: 640px;
}
.jtl-text-media--split-media-wide .jtl-text-media__image,
.jtl-text-media--split-media-wide .jtl-text-media__placeholder {
  aspect-ratio: 640 / 438;
}

/* ---- Card frame ---------------------------------------------------------
   The band keeps its colour while the text column sits in a white rounded
   panel, with the media as a separate blue square beside it — the downloads
   row (Figma 428:10930: 883 card / 33 gap / 425 square media inside a 1344
   content width). Listed after the split widths so it wins the specificity
   tie against --split-legacy's column rules. */
.jtl-text-media--frame-card {
  padding-left: 64px;
  padding-right: 64px;
}
/* A run of card bands is ONE section in the design (Figma 423:9277): the cards
   stack 46px apart inside it, the same 46px the card uses as its inner inset.
   Each card is its own full-bleed band here, so back-to-back cards would
   otherwise show this band's 80px bottom padding plus the next one's 80px top —
   160px, more than three times the design. Collapse the seam between two
   adjacent cards to that single 46px; the first card keeps its full padding
   above and the last keeps its full padding below, so the run still sits
   correctly against whatever precedes and follows it. */
.jtl-text-media--frame-card:has(+ .jtl-text-media--frame-card) {
  padding-bottom: 0;
}
.jtl-text-media--frame-card + .jtl-text-media--frame-card {
  padding-top: 46px;
}

.jtl-text-media--frame-card .jtl-text-media__inner {
  max-width: 1344px;
  padding: 0;
  gap: 33px;
  align-items: stretch;
}
.jtl-text-media--frame-card .jtl-text-media__content {
  max-width: none;
  padding: 46px;
  background-color: #ffffff;
  border-radius: 46px;
  /* Figma 423:9509 / 423:10261: the card's inner column is justify-between —
     heading + copy at the top, the action row pinned to the bottom — and the
     heading-to-copy rhythm is 32px (wider than the band's default). */
  gap: 32px;
}
.jtl-text-media--frame-card .jtl-text-media__content .jtl-text--paragraph,
.jtl-text-media--frame-card .jtl-text-media__content .jtl-list-with-icons {
  margin-top: 0;
}
/* Card copy runs at p-small (Figma): 16/24, one step down from the paragraph
   atom's 18/28 default. Colour (navy) and weight (400) already match. */
.jtl-text-media--frame-card .jtl-text-media__content .jtl-text--paragraph .jtl-text__body {
  font-size: 16px;
  line-height: 24px;
}
/* Whatever closes the card — the pill row or the store badges — sits at the
   bottom edge, so every card's actions line up regardless of copy length. */
.jtl-text-media--frame-card .jtl-text-media__content > :last-child {
  margin-top: auto;
}
/* Pill row: 33px between buttons (Figma). */
.jtl-text-media--frame-card .jtl-downloads__pills {
  gap: 33px;
}
.jtl-text-media--frame-card .jtl-text-media__media {
  flex: 0 0 425px;
  max-width: 425px;
  /* Fill the card's height instead of locking to a 425 square — on the taller
     list cards the media would otherwise leave a gap below it. min-height keeps
     the design's square as the floor on short cards. */
  align-self: stretch;
  align-items: stretch;
  min-height: 425px;
}
.jtl-text-media--frame-card .jtl-text-media__image,
.jtl-text-media--frame-card .jtl-text-media__placeholder {
  width: 100%;
  height: 100%;
  border-radius: 46px;
}
/* Empty media reads as a solid tech-blue panel (a real screenshot dropped into
   `image` replaces it); the placeholder glyph dims to a faint white so it still
   signals "image goes here" on the blue. */
.jtl-text-media--frame-card .jtl-text-media__placeholder {
  background-color: #2722f8;
}
.jtl-text-media--frame-card .jtl-text-media__placeholder-glyph {
  color: rgba(255, 255, 255, 0.5);
}

/* ---- App-store badges ---------------------------------------------------
   The official Google Play / App Store artwork, rendered below the copy in
   place of a CTA on the mobile-apps download box. */
.jtl-text-media__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.jtl-text-media__badge {
  display: inline-flex;
  line-height: 0;
}
.jtl-text-media__badge img {
  display: block;
  width: auto;
  height: 48px;
}

/* ---- Responsive ---- */

/* The legacy split stacks earlier than the shared 992px breakpoint, because its
   columns do not shrink: 541 media + 148 gap + 2x64 padding = 817px of fixed
   width, so by 993px the text column is down to ~176px — a headline a few
   characters wide, with no horizontal scrollbar to make it obvious. Stack it
   from 1200px down instead.

   The gutter stays 64px here rather than dropping to the stacked 24px: between
   993 and 1199 the other sections on the page are still on their 64px gutter and
   the page is meant to hold one content edge. Below 992 the block after this one
   takes over and every section moves to 24px together.

   Scoped to --split-legacy on purpose. The `split-text` and `split-media`
   variants pin their media the same way and squeeze the same way (measured at
   1100px: 300px and 188px text columns on /de/greyhound-basic-preise and
   /de/ki/juno), but those are pre-existing on live pages this change does not
   otherwise touch, so widening the fix here would move them with nothing asking
   for it. --split-legacy renders on one page today. */
@media (max-width: 1199.98px) {
  .jtl-text-media--split-legacy .jtl-text-media__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 0 64px;
  }
  .jtl-text-media--split-legacy .jtl-text-media__content {
    max-width: none;
  }
  .jtl-text-media--split-legacy .jtl-text-media__media {
    flex: 1 1 auto;
    max-width: none;
    justify-content: center;
    align-self: stretch;
  }
}

@media (max-width: 992px) {
  .jtl-text-media {
    padding-top: var(--jtl-band-space-top, 48px);
    padding-bottom: var(--jtl-band-space-bottom, 48px);
  }
  /* The band compacts 80 -> 48 here, so the card seam compacts with it. */
  .jtl-text-media--frame-card + .jtl-text-media--frame-card {
    padding-top: 32px;
  }
  .jtl-text-media__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 0 24px;
  }
  .jtl-text-media--media-left .jtl-text-media__inner {
    flex-direction: column;
    align-items: stretch;
  }
  /* Every split is listed, not just the bare class: the split-scoped widths
     above carry one more class, so a bare selector loses the specificity fight
     and the column stays pinned at its desktop width on a phone. */
  .jtl-text-media__content,
  .jtl-text-media--split-media-wide .jtl-text-media__content,
  .jtl-text-media--split-legacy .jtl-text-media__content {
    max-width: none;
  }
  .jtl-text-media__media,
  .jtl-text-media--split-media-wide .jtl-text-media__media,
  .jtl-text-media--split-legacy .jtl-text-media__media {
    flex: 1 1 auto;
    max-width: none;
    justify-content: center;
    /* Undo the desktop top-alignment. The stack here is a COLUMN, so align-self
       is the horizontal axis: left as flex-start it would shrink the media to
       its content width and pin it to the left edge instead of letting it fill
       the phone's width. Same declaration, perpendicular meaning. */
    align-self: stretch;
  }
  /* The 1199.98px block above stacks this variant early and holds the 64px
     gutter for the tablet band. It is scoped on two classes, so the bare
     `.jtl-text-media__inner` padding above loses to it and the phone would keep
     that 64px gutter — re-assert the stacked 24px at the same weight here. */
  .jtl-text-media--split-legacy .jtl-text-media__inner {
    gap: 40px;
    padding: 0 24px;
  }
  .jtl-text-media__image,
  .jtl-text-media__placeholder {
    max-width: 640px;
    margin: 0 auto;
  }
}

/* Full-width (`is-fluid`): the band's content spans the page with a consistent
   gutter instead of the centred cap. Applied per instance; the gutter matches
   the other widgets on the page. On a card band the gutter sits on the outer
   padding (the white card then fills the width); elsewhere on the inner. */
.jtl-text-media.is-fluid .jtl-text-media__inner {
  max-width: none;
}
.jtl-text-media--frame-card.is-fluid {
  padding-left: max(42px, (100vw - 1600px) / 2 + 42px);
  padding-right: max(42px, (100vw - 1600px) / 2 + 42px);
}
.jtl-text-media.is-fluid:not(.jtl-text-media--frame-card) .jtl-text-media__inner {
  padding-left: max(42px, (100vw - 1600px) / 2 + 42px);
  padding-right: max(42px, (100vw - 1600px) / 2 + 42px);
}

/* ---- On the product shell, share the shell's box --------------------------
   A page carrying a sub-navigation puts the header pill, the sub-nav bar, the
   breadcrumb and the hero on one box (theme tokens): capped at the shell width
   and inset by the shell gutter, so their content edges line up. This widget's
   own 1472/64 grid is narrower than that, which left it inset from everything
   above it — on the shell it adopts the shared box so its content starts and
   ends on the same edges. Off the shell the widget keeps its own grid. */
body:has(.jtl-sub-navigation) .jtl-text-media__inner {
  max-width: var(--jtl-shell-max, 1600px);
  padding-left: var(--jtl-shell-content-gutter, 66px);
  padding-right: var(--jtl-shell-content-gutter, 66px);
}

/* A fluid band (`is-fluid`) spans the viewport — its inner is uncapped — so it
   can't take the centred cap above; it needs the gutter as a clamp that keeps
   its edge on the shell's inner content column at every width. Match the
   content gutter (the sub-nav's inner edge, where the breadcrumb and hero sit),
   not the outer one, and apply it once. A frame-card carries its gutter on the
   outer band so the card fills the width, so it takes the clamp on the section
   and its inner must not inset again (that stacked to a double gutter); a plain
   fluid band carries the clamp on the inner. */
body:has(.jtl-sub-navigation) .jtl-text-media--frame-card.is-fluid {
  padding-left: max(var(--jtl-shell-content-gutter, 66px), (100vw - var(--jtl-shell-max, 1600px)) / 2 + var(--jtl-shell-content-gutter, 66px));
  padding-right: max(var(--jtl-shell-content-gutter, 66px), (100vw - var(--jtl-shell-max, 1600px)) / 2 + var(--jtl-shell-content-gutter, 66px));
}
body:has(.jtl-sub-navigation) .jtl-text-media--frame-card.is-fluid .jtl-text-media__inner {
  padding-left: 0;
  padding-right: 0;
}
body:has(.jtl-sub-navigation) .jtl-text-media.is-fluid:not(.jtl-text-media--frame-card) .jtl-text-media__inner {
  padding-left: max(var(--jtl-shell-content-gutter, 66px), (100vw - var(--jtl-shell-max, 1600px)) / 2 + var(--jtl-shell-content-gutter, 66px));
  padding-right: max(var(--jtl-shell-content-gutter, 66px), (100vw - var(--jtl-shell-max, 1600px)) / 2 + var(--jtl-shell-content-gutter, 66px));
}