/**
 * Uploaded media template — 10px radius on images, videos, and embeds.
 * Loaded last on public funnels and Brand Studio so existing pages pick it up.
 */
:root {
  --media-radius: 10px;
}

.clv2-hero__visual,
.clv2-hero__placeholder,
.clv2-hero .plf-slider,
.clv2-hero .plf-slide,
.clv2-hero__visual-wrap,
.plf-custom-block__media,
.plf-business-media__visual,
.clv2-bonus-embed__media,
.cl-hero-media,
.sw-hero-card,
.pco-media,
.pco-bump-v5__media,
.pco-ty-offer-page-hero-media,
.pco-ty-offer-page-hero-video,
.cbl-fs-bs-hero-media,
.cbl-fs-bs-hero-video,
.afp-video-embed,
.oto-ob-hero__media,
.oto-ob-showcase__media,
.cbl-image-stack__item,
.cbl-offer-image-preview,
.cbl-offer-saved-image,
[data-offer-hero-image-saved],
#cbl-img-preview {
  border-radius: var(--media-radius, 10px);
}

.clv2-hero__visual img,
.clv2-hero__visual video,
.clv2-hero__visual iframe,
.clv2-hero__visual .afp-video-embed,
.clv2-hero .plf-slide img,
.clv2-hero .plf-slide video,
.clv2-hero .plf-slide iframe,
.clv2-hero .plf-slide .afp-video-embed,
.plf-custom-block__media img,
.plf-custom-block__media video,
.plf-custom-block__media iframe,
.plf-business-media__visual img,
.plf-business-media__visual video,
.plf-business-media__visual iframe,
.clv2-bonus-embed__media img,
.cl-hero-media img,
.cl-hero-media video,
.cl-hero-media iframe,
.sw-hero-card img,
.sw-hero-card video,
.sw-hero-card iframe,
.sw-bonus-card__img,
.plf-slide img,
.plf-slide video,
.plf-slide iframe,
.pco-media img,
.pco-media video,
.pco-media iframe,
.pco-bump-v5__media img,
.pco-bump-v5__media video,
.pco-ty-offer-page-hero-media img,
.pco-ty-offer-page-hero-media video,
.pco-ty-offer-page-hero-video iframe,
.cbl-fs-bs-hero-media img,
.cbl-fs-bs-hero-media video,
.cbl-fs-bs-hero-video iframe,
.oto-ob-hero__media img,
.oto-ob-hero__media video,
.oto-ob-hero__media iframe,
.oto-ob-showcase__media img,
.oto-ob-showcase__media video,
.cbl-image-stack__item img,
.cbl-offer-image-preview img,
.cbl-offer-saved-image img,
[data-offer-hero-image-saved] img,
#cbl-img-preview img,
#cbl-img-preview video {
  border-radius: var(--media-radius, 10px) !important;
}

/* Existing funnels — hero/showcase media tracks text column; full image, no banner overflow */
.oto-ob-hero__split {
  margin: 4px 0 0;
}
@media (min-width: 769px) {
  .oto-ob-hero__split {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 24px 28px !important;
    align-items: stretch !important;
  }
  .oto-ob-hero__split-media {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  .oto-ob-hero__split-media .oto-ob-hero__media {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    height: 100%;
    min-height: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .oto-ob-hero__split-media .oto-ob-hero__media img,
  .pco-offer-page .pco-ty-oto-builder .oto-ob-hero__split-media .oto-ob-hero__media img,
  .pay-funnel-thanks-aligned .pco-ty-oto-builder .oto-ob-hero__split-media .oto-ob-hero__media img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  .oto-ob-hero__split-copy {
    min-width: 0;
  }
}

/* Stacked hero only — split column uses max-height:100% rules above */
.oto-ob-hero:not(:has(.oto-ob-hero__split)) .oto-ob-hero__media img,
.oto-ob-hero:not(:has(.oto-ob-hero__split)) .oto-ob-hero__media video,
.pco-ty-offer-page-hero-media img,
.pco-ty-offer-page-hero-media video,
.cbl-fs-bs-hero-media img,
.cbl-fs-bs-hero-media video {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (min-width: 769px) {
  .oto-ob-hero:not(:has(.oto-ob-hero__split)) .oto-ob-hero__media {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: min(420px, 48vh);
    overflow: hidden;
  }
  .oto-ob-hero:not(:has(.oto-ob-hero__split)) .oto-ob-hero__media img,
  .oto-ob-hero:not(:has(.oto-ob-hero__split)) .oto-ob-hero__media video {
    max-height: min(420px, 48vh) !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Offer pages: width drives height — no forced crop box */
  .pco-offer-page .oto-ob-hero:not(:has(.oto-ob-hero__split)) .oto-ob-hero__media,
  .pco-offer-page .oto-ob-hero--stage .oto-ob-hero__media {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .pco-offer-page .oto-ob-hero:not(:has(.oto-ob-hero__split)) .oto-ob-hero__media img,
  .pco-offer-page .oto-ob-hero:not(:has(.oto-ob-hero__split)) .oto-ob-hero__media video,
  .pco-offer-page .oto-ob-hero--stage .oto-ob-hero__media img,
  .pco-offer-page .oto-ob-hero--stage .oto-ob-hero__media video {
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

.oto-ob-showcase__grid,
.pco-ty-oto-builder .oto-ob-showcase__grid,
.pco-offer-page .oto-ob-showcase__grid {
  align-items: stretch;
}

.oto-ob-showcase__grid--dual .oto-ob-showcase__media-inner > img {
  object-fit: contain !important;
  object-position: center center !important;
}

@media (min-width: 769px) {
  .oto-ob-showcase__grid--copy:not(.oto-ob-showcase__grid--media-full) {
    align-items: stretch;
  }

  .oto-ob-showcase__grid--copy:not(.oto-ob-showcase__grid--media-full) .oto-ob-showcase__media {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
  }

  .oto-ob-showcase__grid--copy:not(.oto-ob-showcase__grid--media-full) .oto-ob-showcase__media-inner {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
  }

  .oto-ob-showcase__grid--copy:not(.oto-ob-showcase__grid--media-full) .oto-ob-showcase__media-inner > img,
  .oto-ob-showcase__grid--copy:not(.oto-ob-showcase__grid--media-full) .oto-ob-showcase__media > img,
  .oto-ob-showcase__grid--copy:not(.oto-ob-showcase__grid--media-full) .oto-ob-showcase__media img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}