.wp-block-media-text {
  margin-left: auto;
  margin-right: auto;
  margin-top: 64px;
  margin-bottom: 64px;
  width: 70%;
}

.wp-block-media-text.alignwide,
.wp-block-media-text.alignfull {
  /* width: min(1489px, 80vw); */
  width: 1240px;
}


.wp-block-media-text .wp-block-media-text__content,
.wp-block-media-text .wp-block-media-text__ccn-title {
  padding-left: 153px;
  padding-right: 0;
  margin: 0;
}

.wp-block-media-text h1.wp-block-media-text__ccn-title,
.wp-block-media-text h4.wp-block-media-text__ccn-title
 {
  text-align : left;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content,
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__ccn-title {
  padding-left: 0;
  padding-right: 153px;
  margin: 0;
}

.wp-block-media-text.has-media-on-the-right h1.wp-block-media-text__ccn-title,
.wp-block-media-text.has-media-on-the-right h4.wp-block-media-text__ccn-title
 {
  text-align : left;
}



/* media ratio (ratio attribute, see functions.php + media-text-title.js) — width unchanged, only the aspect-ratio is forced */
.wp-block-media-text.ccn-ratio-landscape .wp-block-media-text__media img,
.wp-block-media-text.ccn-ratio-landscape .wp-block-media-text__media video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
}

.wp-block-media-text.ccn-ratio-square .wp-block-media-text__media img,
.wp-block-media-text.ccn-ratio-square .wp-block-media-text__media video {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* the native "Crop image to fill entire column" toggle (is-image-fill-element) absolutely
   positions the media at height:100% of a 250px-floor figure, which fights our aspect-ratio
   sizing above (figure stays at 250px while the image renders taller, causing the overlap) —
   neutralize it so our ratio fully governs the media's size when the attribute is set. */
.wp-block-media-text.ccn-ratio-landscape.is-image-fill-element .wp-block-media-text__media,
.wp-block-media-text.ccn-ratio-square.is-image-fill-element .wp-block-media-text__media {
  position: static;
  height: auto;
  min-height: 0;
}
.wp-block-media-text.ccn-ratio-landscape.is-image-fill-element .wp-block-media-text__media a,
.wp-block-media-text.ccn-ratio-square.is-image-fill-element .wp-block-media-text__media a {
  display: block;
  height: auto;
}
.wp-block-media-text.ccn-ratio-landscape.is-image-fill-element .wp-block-media-text__media img,
.wp-block-media-text.ccn-ratio-square.is-image-fill-element .wp-block-media-text__media img {
  position: static;
  clip-path: none;
}

.wp-block-media-text .wp-block-media-text__media {
  margin-right: 10px;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
  margin-left: 10px;
}

/* On desktop, media and content share a single grid row: a short content column must not let
   the ratio-constrained media overflow past the block into the next element, so the block itself
   is also given a floor aspect-ratio (still grows taller if the content needs more space).
   Media column is ~50% of the block width by default, hence the block ratio is doubled. */
.wp-block-media-text.ccn-ratio-landscape {
  aspect-ratio: 32 / 9;
}
.wp-block-media-text.ccn-ratio-square {
  aspect-ratio: 2 / 1;
}


/* stacked on mobile: media and content are on separate grid rows (no sharing/overflow risk),
   so the container-level floor ratio above must be cancelled, otherwise it fights with the
   stacked layout's own row sizing and clips/overlaps the content below the media. */
@media only screen and (max-width: 1280px) {
  .wp-block-media-text.ccn-ratio-landscape.is-stacked-on-mobile,
  .wp-block-media-text.ccn-ratio-square.is-stacked-on-mobile {
    aspect-ratio: auto;
  }

  /* no padding for smaller screens */
  .wp-block-media-text .wp-block-media-text__content,
  .wp-block-media-text .wp-block-media-text__ccn-title {
    padding-left: 0;
    padding-right: 0;
  }
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content,
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__ccn-title {
    padding-left: 0;
    padding-right: 0;
  }

  .wp-block-media-text .wp-block-media-text__ccn-title,
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__ccn-title {
    margin-bottom: 20px;
  }

  /* less space between media-text for smaller screens */
  .wp-block-media-text {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .wp-block-media-text .wp-block-media-text__media {
    margin-right: 0;
  }

  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    margin-left: 0;
  }
}

/* === custom H1 title (ccnTitle attribute, see functions.php + media-text-title.js) === */

/* desktop: title sits above the content column, media spans both rows */
.wp-block-media-text.has-ccn-title {
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "media-text-media media-text-title"
    "media-text-media media-text-content";
}
.wp-block-media-text.has-ccn-title.has-media-on-the-right {
  grid-template-areas:
    "media-text-title media-text-media"
    "media-text-content media-text-media";
}
.wp-block-media-text.has-ccn-title .wp-block-media-text__media {
  grid-area: media-text-media;
}
.wp-block-media-text.has-ccn-title .wp-block-media-text__content {
  grid-area: media-text-content;
}
.wp-block-media-text__ccn-title {
  grid-area: media-text-title;
  margin: 0 0 1rem;
}

/* mobile (stacked): title above the media */
@media only screen and (max-width: 1280px) {
  .wp-block-media-text.has-ccn-title.is-stacked-on-mobile {
    grid-template-areas:
      "media-text-title"
      "media-text-media"
      "media-text-content" !important;
  }
}