/*
  Image and text (imageTextBlock, MB-7; contract umbraco/blocks/imageTextBlock.md). Mobile first: text, then photo.
  From 1024 px two equal columns; --image-left puts the photo in the first column (reading order unchanged).
*/
.image-text { padding: var(--section-space) var(--page-gutter); }
.image-text__inner {
  display: grid;
  gap: var(--space-10);
  max-width: var(--container-max);
  margin: 0 auto;
}
.image-text__heading { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); overflow-wrap: break-word; }
.image-text__eyebrow + .image-text__heading { margin-top: var(--space-3); }
.image-text__text p { margin: var(--space-5) 0 0; line-height: var(--lh-body); }
/* MB-23 additions (each only when the editor fills it): bullets, button, large heading, anchor id. */
.image-text[id] { scroll-margin-top: calc(var(--site-sticky-header-height, 0px) + 1rem); }
.image-text__heading--large { font-size: var(--fs-h1); }
/* FC-MFIX6 (M-FIX5-1): Heading size "Small label": the h2 in the small label's look (the --eyebrow-* tokens, css/starter.css
   .eyebrow), for a section whose only title is an old site's small capitals label. Still the section's heading. */
.image-text__heading--small {
  color: var(--eyebrow-color, var(--color-eyebrow, #4a4a4a));
  font-family: var(--eyebrow-font, inherit);
  font-size: var(--eyebrow-fs, 0.8125rem);
  font-weight: var(--eyebrow-fw, 700);
  letter-spacing: var(--eyebrow-ls, 0.06em);
  line-height: var(--lh-label, 1.3);
  text-transform: var(--eyebrow-transform, uppercase);
}
.image-text__bullets { margin: var(--space-5) 0 0; padding: 0; list-style: none; line-height: var(--lh-body); }
.image-text__bullets li { position: relative; padding-left: var(--space-6); }
.image-text__bullets li + li { margin-top: var(--space-2); }
.image-text__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-eyebrow);
}
/* MB-124: Bullet list Long (up to 16 bullets of 200 characters). Same look; a site may tighten the list with
   --image-text-long-list-gap (space between bullets) and --image-text-long-list-lh (line height). */
.image-text--long-list .image-text__bullets { line-height: var(--image-text-long-list-lh, var(--lh-body)); }
.image-text--long-list .image-text__bullets li + li { margin-top: var(--image-text-long-list-gap, var(--space-2)); }
.image-text__action { margin-top: var(--space-8); }
.image-text__media { margin: 0; }
.image-text__media img,
.image-text__img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; border-radius: var(--radius-media); }
/* MB-148 (FuelChief import, MC-18): Photo shape other than standard; the box takes the crop's shape. */
.image-text--shape-landscape-960-650 :is(.image-text__media img, .image-text__img) { aspect-ratio: 960 / 650; }
.image-text--shape-wide-1440-750 :is(.image-text__media img, .image-text__img) { aspect-ratio: 1440 / 750; }

@media (min-width: 1024px) {
  .image-text__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); align-items: start; }
  .image-text--image-left .image-text__media { grid-column: 1; grid-row: 1; }
  .image-text--image-left .image-text__body { grid-column: 2; grid-row: 1; }
  .image-text--no-image .image-text__inner { grid-template-columns: minmax(0, var(--container-text)); }
}
/* MB-143: Formatted text (bold, links) keeps Text's paragraphs; its links are underlined in the section's link colour.
   More photos (slider): the photos take turns in the photo's place (shared/photoSlider, css/blocks/photo-slider.css);
   the photos can be dragged, as the original's grab cursor showed. */
.image-text__text--formatted a { text-decoration: underline; text-underline-offset: 3px; }
.image-text__slider .carousel__viewport { cursor: grab; }
.image-text__slider.is-dragging .carousel__viewport { cursor: grabbing; }