/*
 * Featured Video Section — WP YouTube Lyte fixes
 * Fixes: hardcoded 420px width + wrong fourthree (4:3) aspect ratio
 */

/* =============================================
   FORCE FULL-WIDTH ON THE LYTE WRAPPER
   (plugin inlines width:420px which we override)
   ============================================= */

.wp-block-embed .lyte-wrapper,
.wp-block-embed-youtube .lyte-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* The lL div sits directly below the lyte wrapper and
   also gets the same inline 420px — fix it too */
.wp-block-embed .lL,
.wp-block-embed-youtube .lL {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* =============================================
   FIX ASPECT RATIO — override fourthree (75%)
   back to correct 16:9 (56.25%)
   ============================================= */

.wp-block-embed .lyte-wrapper .lyMe,
.wp-block-embed .lyte-wrapper .lyte,
.wp-block-embed .lyte-wrapper.fourthree .lyMe,
.wp-block-embed .lyte-wrapper.fourthree .lyte,
.wp-block-embed-youtube .lyte-wrapper.fourthree .lyMe,
.wp-block-embed-youtube .lyte-wrapper.fourthree .lyte {
    padding-bottom: 56.25% !important;
}

/* =============================================
   COLUMNS LAYOUT — tighten gap between
   video column and content column, and cap
   max-width so the video doesn't outgrow
   the text box on the right at wide screens
   ============================================= */

.wp-block-columns:has(.wp-block-embed-youtube) {
    gap: 2rem;
    align-items: center;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}

/* Make the embed figure itself fill its column */
.wp-block-column .wp-block-embed-youtube {
    margin: 0;
    width: 100%;
}

.wp-block-column .wp-block-embed-youtube .wp-block-embed__wrapper {
    width: 100%;
}