/* 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: 80px 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;
}

/* ---- 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: #e2e2d9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jtl-text-media__placeholder-glyph {
  display: block;
  width: 88px;
  height: 88px;
  color: #b8b8ad;
}

/* ---- 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;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
  .jtl-text-media {
    padding: 48px 0;
  }
  .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;
  }
  .jtl-text-media--split-legacy .jtl-text-media__inner {
    gap: 40px;
  }
  .jtl-text-media__image,
  .jtl-text-media__placeholder {
    max-width: 640px;
    margin: 0 auto;
  }
}