.media-and-text {
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
  max-width: 100% !important;
}

.media-and-text__container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: var(--wp--style--global--content-size);
  width: 100%;
}

@media screen and (min-width: 768px) {
  .media-and-text__container {
    flex-direction: row;
  }
}

.media-and-text__media {
  flex: 0 0 100%;  
}

@media screen and (min-width: 768px) {
  .media-and-text--media-size-half .media-and-text__media {
    flex: 0 0 50%; /* 50/50 split */
  }
  .media-and-text--media-size-two-thirds .media-and-text__media {
    flex: 0 0 66.6667%; /* 2/3 split */
  }
}

.media-and-text__text {
  flex: 1;

  @media screen and (min-width: 768px) {
    padding: 0 0 0 var(--wp--preset--spacing--70);
  }
}

.media-and-text__text > .acf-innerblocks-container {
  display: flex;
  flex-direction: column;
}

.media-and-text__text > .acf-innerblocks-container * {
  text-align: center;

  @media screen and (min-width: 768px) {
    text-align: left;
  }
}

.media-and-text__text .wp-block-buttons {
  margin-block-start: var(--wp--preset--spacing--70);
}

/* Buttons are a flex row, so text-align above doesn't move them. */
@media screen and (max-width: 767px) {
  .media-and-text__text > .acf-innerblocks-container .wp-block-buttons {
    justify-content: center;
  }

  /* Centered list text strands the bullets at the left edge. Keep items
     left-aligned and center the list itself instead. */
  .media-and-text__text > .acf-innerblocks-container > .wp-block-list {
    margin-inline: auto;
    width: fit-content;
  }

  .media-and-text__text > .acf-innerblocks-container .wp-block-list,
  .media-and-text__text > .acf-innerblocks-container .wp-block-list * {
    text-align: left;
  }
}

.media-and-text__figure {
  height: 100%;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

.media-and-text__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.media-and-text__video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.media-and-text__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media-and-text__video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-and-text--media-right .media-and-text__container {
  @media screen and (min-width: 768px) {
    flex-direction: row-reverse;
  }
}

.media-and-text--media-right .media-and-text__text {
  @media screen and (min-width: 768px) {
    padding: 0 var(--wp--preset--spacing--70) 0 0;
  }
}

.media-and-text__heading {
  color: var(--wp--custom--color--primary);
  font-weight: 700;
}

/* Extend Media to Edge: the media runs to the block's top, bottom and outer
   edge instead of sitting inside the content width. The text keeps its place
   on the content grid. Block padding set in the editor (inline) still wins. */
.media-and-text--extend-media {
  /* Padding % resolves against the full-width container, so this lines the
     text's outer edge up with the content width, never tighter than the
     default gutter. */
  --media-and-text--outer-gutter: max(
    var(--wp--preset--spacing--50),
    calc((100% - var(--wp--style--global--content-size)) / 2)
  );
  padding: 0;
}

.media-and-text--extend-media .media-and-text__container {
  max-width: none;
}

.media-and-text--extend-media .media-and-text__text {
  padding: var(--wp--preset--spacing--50);
}

@media screen and (min-width: 768px) {
  /* Side by side, the image covers its column instead of setting the row
     height - otherwise the wider column makes the image, and the block,
     taller. The text sets the height. */
  .media-and-text--extend-media .media-and-text__media {
    position: relative;
  }

  .media-and-text--extend-media .media-and-text__figure {
    inset: 0;
    position: absolute;
  }

  .media-and-text--extend-media.media-and-text--media-left .media-and-text__text {
    padding-inline: var(--wp--preset--spacing--70) var(--media-and-text--outer-gutter);
  }

  .media-and-text--extend-media.media-and-text--media-right .media-and-text__text {
    padding-inline: var(--media-and-text--outer-gutter) var(--wp--preset--spacing--70);
  }
}

/* Block editor preview styles */
.acf-block-preview {
  .media-and-text {
    padding: 60px 0;
  }
  
  .media-and-text__container {
    padding: 0 30px;
  }

  .media-and-text--extend-media,
  .media-and-text--extend-media .media-and-text__container {
    padding: 0;
  }

  .media-and-text__container > .block-editor-inner-blocks {
    flex: 1;
  }
  
  .media-and-text__container > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
  }
}