/* Image and text (library block, T22). Tokens only; written for phones first.
   Phones and tablets: one column, the image above the text (whichever side is chosen).
   From 1024 px: 12-column row as in the prototype: text 5 columns, image 6 columns,
   one empty column between; "image left" swaps the sides.
   The image is a fixed-height box cropped with object-fit around its focal point
   (shared/image writes object-position from the focal point). Nothing animates. */

.image-text {
  --image-text-media-height: clamp(280px, 40vw, 600px); /* prototype image box height */
  --image-text-heading-measure: 560px;                  /* prototype heading width */
  --image-text-text-measure: 480px;                     /* prototype text and bullet width */
}

.image-text__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10) var(--gutter);
}

/* Image first on small screens. */
.image-text__media {
  grid-row: 1;
  position: relative;
  min-height: var(--image-text-media-height);
  border-radius: var(--radius-card);
  background: var(--color-surface-quiet);
  overflow: hidden;
}
.surface-quiet .image-text__media { background: var(--color-hairline); }
.image-text__media picture,
.image-text__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.image-text__img { object-fit: cover; }

.image-text__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  min-width: 0;
}
.image-text__body > * { margin: 0; }

.image-text__heading { max-width: var(--image-text-heading-measure); }
.image-text__text {
  max-width: var(--image-text-text-measure);
  color: var(--color-text);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.image-text__bullets {
  max-width: var(--image-text-text-measure);
  padding: 0;
  list-style: none;
}
.image-text__bullets li {
  margin: 0;
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-hairline);
  color: var(--color-heading);
  line-height: var(--lh-body-tight);
  overflow-wrap: break-word;
}

.image-text__button { align-self: flex-start; margin-top: var(--space-2); }

@media (min-width: 1024px) {
  .image-text__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }
  .image-text__media, .image-text__body { grid-row: 1; }
  /* Image on the right (default): text 1-5, image 7-12. */
  .image-text__body { grid-column: 1 / span 5; }
  .image-text__media { grid-column: 7 / span 6; }
  /* Image on the left: image 1-6, text 8-12. */
  .image-text--image-left .image-text__media { grid-column: 1 / span 6; }
  .image-text--image-left .image-text__body { grid-column: 8 / span 5; }
}