/* Typography comes from the section/block typography settings (the `title*` /
   `body*` classes). No font-family / font-size / font-weight below: such
   selectors would tie with the typography classes on specificity and win on
   source order, making the settings inert. */

.image-text-module {
  background-color: var(--itm-panel-background, #1a1a1a);
}

/* full-bleed split: no page-width wrapper, the two halves meet edge to edge */
.image-text-module__inner {
  display: grid;
  grid-template-columns: var(--itm-image-width, 44%) minmax(0, 1fr);
  align-items: stretch;
  min-height: var(--itm-min-height, 640px);
}

.image-text-module--image-right .image-text-module__inner {
  grid-template-columns: minmax(0, 1fr) var(--itm-image-width, 44%);
}

.image-text-module--image-right .image-text-module__media {
  grid-column: 2;
  grid-row: 1;
}

.image-text-module--image-right .image-text-module__panel {
  grid-column: 1;
  grid-row: 1;
}

.image-text-module__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.image-text-module__media img,
.image-text-module__media svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-text-module__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  background-color: var(--itm-panel-background, #1a1a1a);
}

.image-text-module__heading {
  margin: 0;
  color: rgb(var(--color-text));
}

.image-text-module__intro {
  margin: 24px 0 0;
  color: rgba(var(--color-text), 0.82);
}

.image-text-module__footnote {
  margin: 40px 0 0;
  color: rgba(var(--color-text), 0.82);
}

.image-text-module__actions {
  margin-block-start: 28px;
}

/* square corners: the theme builds the radius on both .button and its ::after
   ring from this one variable, so scoping it here covers both */
.image-text-module {
  --button-border-radius: 0px;
}

/* hover inverts the theme colours: filled -> outlined.
   The extra .image-text-module in these selectors is needed to outrank the
   theme's own :hover and ::after rules, which sit at the same specificity. */
.image-text-module .image-text-module__actions .button {
  border: 1px solid rgb(var(--color-button-background));
  box-shadow: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.image-text-module .image-text-module__actions .button::after,
.image-text-module .image-text-module__actions .button:not([disabled]):hover::after {
  /* the theme draws its border as an ::after box-shadow; the real border above
     replaces it, and this stops a second ring appearing on hover */
  box-shadow: none;
}

.image-text-module .image-text-module__actions .button:not([disabled]):hover {
  color: rgb(var(--color-text));
  background-color: transparent;
  border-color: rgb(var(--color-text));
}

/* ---- comparison columns ---- */
.image-text-module__columns {
  display: grid;
  grid-template-columns: repeat(var(--itm-column-count, 3), minmax(0, 1fr));
  gap: var(--itm-column-gap, 24px);
  margin-block-start: 40px;
}

.itm-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.itm-column--divided {
  padding-block-start: 20px;
  border-block-start: 1px solid var(--itm-column-divider-color, #5a5a5a);
}

.itm-column__label {
  display: block;
  width: 100%;
  letter-spacing: var(--itm-label-letter-spacing, 1px);
  text-transform: uppercase;
  color: var(--itm-label-color, rgb(var(--color-text)));
}

.itm-column__item {
  width: 100%;
  margin: 16px 0 0;
  /* muted by default; the column's "emphasize" switch lifts it to full colour */
  color: rgba(var(--color-text), 0.6);
}

.itm-column--emphasize .itm-column__item {
  color: rgb(var(--color-text));
}

/* ---- responsive ---- */
@media (max-width: 959px) {
  /* stack: image on top, panel below, each full width */
  .image-text-module__inner,
  .image-text-module--image-right .image-text-module__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .image-text-module--image-right .image-text-module__media,
  .image-text-module--image-right .image-text-module__panel {
    grid-column: 1;
    grid-row: auto;
  }

  .image-text-module__media {
    aspect-ratio: 4 / 3;
  }

  .image-text-module__columns {
    margin-block-start: 32px;
  }
}

@media (max-width: 599px) {
  /* the columns get too narrow to hold a phrase, so stack them */
  .image-text-module__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .itm-column--divided {
    margin-block-start: 24px;
  }

  .itm-column:first-child.itm-column--divided {
    margin-block-start: 0;
  }
}