/**
 * Post / page content media containment.
 *
 * WordPress's [caption] shortcode renders the figure with an INLINE width taken from the
 * source image — `<figure class="wp-caption" style="width: 1020px">`. Nothing in the theme
 * ever overrode it, so the figure keeps that width no matter how narrow the column is.
 *
 * The blog's body column is `.uk-width-2xlarge` = 750px, so every captioned image on the
 * site sat 270px proud of the text measure on desktop, and ran to 1035px inside a 390px
 * viewport on mobile — where an ancestor's overflow clipped it rather than scrolling, so
 * the right-hand third of the photo was simply cut off.
 *
 * theme.css already caps the IMAGE (`img{max-width:100%!important}`), but `max-width:100%`
 * resolves against the figure — and the figure was 1020px. Capping the figure is what makes
 * that existing rule do its job.
 *
 * `!important` is required here and is not defensive: an author !important declaration is
 * what beats a plain inline style. `fit-content` keeps the shortcode's original intent for
 * images NARROWER than the column (the caption still shrink-wraps the photo) while letting
 * `max-width` cap anything wider.
 */
.wp-caption {
    width: fit-content !important;
    max-width: 100%;
}

/* The image and caption both inherited the figure's old fixed width; let them follow it. */
.wp-caption img,
.wp-caption > a > img {
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    max-width: 100%;
}

/* Centre the shrink-wrapped figure when the editor asked for it. */
.wp-caption.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/**
 * Fixed-width oEmbeds — the same bug class, different tag. A YouTube embed in a post comes
 * through with `width="500" height="281"` attributes (see westworlds3), and theme.css caps
 * img/video/svg/canvas but NOT iframe, so it ran 125px past a 390px viewport.
 *
 * Capping the width alone would letterbox the player against its fixed height attribute, so
 * the aspect ratio is restated for the video hosts — the only embeds on the site, and the
 * only ones whose ratio is known. Any other embed is contained but left at its own height.
 */
.geodir-embed-container,
.wp-block-embed,
.wp-block-embed__wrapper {
    max-width: 100%;
}

.geodir-embed-container iframe,
.wp-block-embed iframe,
.wp-embedded-content {
    max-width: 100%;
}

.geodir-embed-container iframe[src*="youtube.com/embed"],
.geodir-embed-container iframe[src*="youtube-nocookie.com/embed"],
.geodir-embed-container iframe[src*="player.vimeo.com"],
.wp-block-embed iframe[src*="youtube.com/embed"],
.wp-block-embed iframe[src*="youtube-nocookie.com/embed"],
.wp-block-embed iframe[src*="player.vimeo.com"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}