.video-section__media {
  position: relative;
   aspect-ratio: 19 / 9;
   width: 100%;
  height: auto;
  overflow: hidden;
}

.video-section__media .placeholder {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-image-background));
  position: absolute;
  top: 0;
  left: 0;
}

.video-section__media .video-section__cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.video-section__media.deferred-media:after {
  content: none;
}

.video-section__media iframe {
  border: 0;
}

.video-section__poster,
.video-section__media iframe,
.video-section__media video {
  position: absolute;
  width: 100%;
  height: 100%;
}

.video-section__title-wrapper {
  margin-bottom: 30px;
}

@media (max-width: 959px) {
  .video-section__title-wrapper {
    margin-bottom: 20px;
  }
}
/* === Video section max-width cap === */
.page-width.page-width--video {
    max-width: 1300px !important;
    /* out-prioritize the global 1358px */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    box-sizing: border-box;
}

/* Belt-and-suspenders: ensure the media itself cannot overflow */
.page-width.page-width--video .video-section__media {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Cap the colored section */
.page-width.page-width--video {
    max-width: 1300px !important;
    /* beats the global 1358px */
    margin: 0 auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    box-sizing: border-box;
        border-radius: 30px;
}

/* Keep the media boxed too (safety) */
.page-width.page-width--video .video-section__media {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;

}

/* The ipad end responds to the mobile end in vertical screen */

/* @custom-media --tablet (max-width: 959px); */

/* @custom-media --gt-mobile (min-width: 751px); */

/* detectingScreen need to consider the configuration of the tablet */
/* Global page-width container */
/* === Canonical cap for the video section container === */
.page-width.page-width--video {
    max-width: 1300px;
    /* cap width */
    margin-inline: auto;
    /* center */
    padding-inline: var(--page-padding, 20px);
    box-sizing: border-box;
    border-radius: 30px;
}

/* Keep the media boxed inside the capped container */
.page-width.page-width--video .video-section__media {
    max-width: 90%;
    width: 90%;
    margin: 0 auto;
    border-radius: inherit;
    /* match rounded corners */
    overflow: hidden;
    /* clip video to radius */
}

/* === Mobile: force side padding even if theme's var is 0 === */
@media (max-width: 959px) {
    .page-width.page-width--video {
        /* ensure left/right padding exists on phones/tablets */
        padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
    }
}

/* Optional: if any "full-bleed" utility strips padding, cancel it here */
@media (max-width: 959px) {

    .full-bleed .page-width.page-width--video,
    .page-width--full .page-width.page-width--video {
        padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)) !important;
    }
}

/* Safety: remove duplicate/older definitions that might conflict */
/* (No code needed here—just keep only the single .page-width.page-width--video block above) */
/* Remove any global full-width background */
.video-section,
[data-section-type="video-section"] {
    background: transparent !important;
}

/* Main container cap */
.page-width.page-width--video {
    position: relative;
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: 0;
    /* background handles padding visually */
    border-radius: 30px;
    box-sizing: border-box;
    overflow: visible;
}

/* Draw the yellow box inside the capped area */
.page-width.page-width--video::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f0ec08;
    /* your yellow */
    border-radius: inherit;
    z-index: -1;
}

/* Ensure the media respects the rounded box */
.page-width.page-width--video .video-section__media {
    border-radius: inherit;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
}

/* === Mobile: enforce 20px white margins on each side === */
@media (max-width: 959px) {
    .page-width.page-width--video {
        width: calc(100% - 40px);
        /* 20px left + 20px right */
        margin: 0 auto;
        /* center it */
        border-radius: 20px;
        /* slightly smaller rounding if you want */
    }

    .page-width.page-width--video::before {
        width: 100%;
        left: 0;
        transform: none;
        border-radius: inherit;
    }
}