/* Flex Media block styles (frontend copy of wordpress/plugins/flex-media/src/style.scss) */
.flex-media {
    --flex-media-object-fit: cover;
}

.flex-media.is-fit-contain {
    --flex-media-object-fit: contain;
}
.flex-media.is-fit-cover {
    --flex-media-object-fit: cover;
}
.flex-media.is-fit-fill {
    --flex-media-object-fit: fill;
}
.flex-media.is-fit-none {
    --flex-media-object-fit: none;
}
.flex-media.is-fit-scale-down {
    --flex-media-object-fit: scale-down;
}

.flex-media__placeholder {
    padding: 12px;
    opacity: 0.8;
}

.flex-media__figure {
    margin: 0;
}

.flex-media__caption {
    margin-top: 6px;
}

.flex-media__media {
    width: 100%;
}

.flex-media__media--image,
.flex-media__media--video,
.flex-media__media--youtube {
    width: 100%;
    aspect-ratio: var(--flex-media-aspect-ratio, auto);
    overflow: hidden;
    position: relative;
}

.flex-media__media--youtube {
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* When aspect-ratio is auto, set min-height so object-fit works */
.flex-media__media--image:not([style*="aspect-ratio"]),
.flex-media__media--video:not([style*="aspect-ratio"]),
.flex-media__media--youtube:not([style*="aspect-ratio"]) {
    min-height: 300px;
}

@media (max-width: 600px) {
    .flex-media__media--image:not([style*="aspect-ratio"]),
    .flex-media__media--video:not([style*="aspect-ratio"]),
    .flex-media__media--youtube:not([style*="aspect-ratio"]) {
        min-height: 200px;
    }
}

.flex-media__img,
.flex-media__video,
.flex-media__iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.flex-media__img,
.flex-media__video {
    object-fit: var(--flex-media-object-fit);
}

/* Make YouTube embeds behave more like object-fit media.
   (iframe can't use object-fit, so we scale/crop within an overflow-hidden wrapper.) */
.flex-media__media--youtube .flex-media__iframe {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
}

.flex-media.is-fit-cover .flex-media__media--youtube .flex-media__iframe {
    transform: scale(1.25);
}

.flex-media.is-fit-contain .flex-media__media--youtube .flex-media__iframe,
.flex-media.is-fit-fill .flex-media__media--youtube .flex-media__iframe,
.flex-media.is-fit-none .flex-media__media--youtube .flex-media__iframe,
.flex-media.is-fit-scale-down .flex-media__media--youtube .flex-media__iframe {
    transform: none;
}

/* Sizing: auto (default - maintain aspect ratio) */
.flex-media.is-sizing-auto .flex-media__img,
.flex-media.is-sizing-auto .flex-media__video {
    height: auto;
    max-height: 100%;
}

/* Sizing: fullWidth (fill container width, maintain aspect) */
.flex-media.is-sizing-fullWidth .flex-media__media--image,
.flex-media.is-sizing-fullWidth .flex-media__media--video,
.flex-media.is-sizing-fullWidth .flex-media__media--youtube {
    width: 100%;
}

.flex-media.is-sizing-fullWidth .flex-media__img,
.flex-media.is-sizing-fullWidth .flex-media__video {
    width: 100%;
    height: auto;
}

/* Sizing: fullHeight (fill container height) */
.flex-media.is-sizing-fullHeight .flex-media__media--image,
.flex-media.is-sizing-fullHeight .flex-media__media--video,
.flex-media.is-sizing-fullHeight .flex-media__media--youtube {
    height: 100%;
}

/* In slideshow/carousel, height must propagate down to the viewport/track/slide. */
.flex-media.is-sizing-fullHeight.flex-media--mode-slideshow,
.flex-media.is-sizing-fullHeight.flex-media--mode-carousel {
    height: 100%;
}

.flex-media.is-sizing-fullHeight.flex-media--mode-grid {
    height: 100%;
}

.flex-media.is-sizing-fullHeight.flex-media--mode-grid .flex-media__grid {
    height: 100%;
    grid-auto-rows: 1fr;
}

.flex-media.is-sizing-fullHeight.flex-media--mode-grid .flex-media__cell {
    height: 100%;
    min-height: 0;
}

.flex-media.is-sizing-fullHeight.flex-media--mode-slideshow .flex-media__viewport,
.flex-media.is-sizing-fullHeight.flex-media--mode-carousel .flex-media__viewport,
.flex-media.is-sizing-fullHeight.flex-media--mode-slideshow .flex-media__track,
.flex-media.is-sizing-fullHeight.flex-media--mode-carousel .flex-media__track,
.flex-media.is-sizing-fullHeight.flex-media--mode-slideshow .flex-media__slide,
.flex-media.is-sizing-fullHeight.flex-media--mode-carousel .flex-media__slide {
    height: 100%;
}

.flex-media.is-sizing-fullHeight.flex-media--mode-slideshow .flex-media__track,
.flex-media.is-sizing-fullHeight.flex-media--mode-carousel .flex-media__track {
    align-items: stretch;
}

.flex-media.is-sizing-fullHeight .flex-media__img,
.flex-media.is-sizing-fullHeight .flex-media__video {
    height: 100%;
    width: auto;
    max-width: none;
}

/* For Fit=Stretch + fullHeight, media must fill both dimensions. */
.flex-media.is-sizing-fullHeight.is-fit-fill .flex-media__img,
.flex-media.is-sizing-fullHeight.is-fit-fill .flex-media__video {
    width: 100%;
    height: 100%;
}

.flex-media.is-sizing-fullHeight .flex-media__media--image,
.flex-media.is-sizing-fullHeight .flex-media__media--video,
.flex-media.is-sizing-fullHeight .flex-media__media--youtube {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.flex-media.is-sizing-fullHeight .flex-media__media--youtube .flex-media__iframe {
    position: static;
    height: 100%;
    width: auto;
    max-width: none;
    aspect-ratio: 16 / 9;
    transform: none;
}

/* Mobile: always use fullWidth behavior for better responsiveness */
@media (max-width: 600px) {
    .flex-media__media--image,
    .flex-media__media--video,
    .flex-media__media--youtube {
        width: 100%;
    }

    /* Respect sizing mode explicitly (avoid generic video{height:auto} behavior). */
    .flex-media.is-sizing-auto .flex-media__img,
    .flex-media.is-sizing-auto .flex-media__video {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .flex-media.is-sizing-fullWidth .flex-media__img,
    .flex-media.is-sizing-fullWidth .flex-media__video {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .flex-media.is-sizing-fullHeight .flex-media__img,
    .flex-media.is-sizing-fullHeight .flex-media__video {
        height: 100%;
        width: auto;
        max-width: none;
    }
}

.flex-media__iframe {
    border: 0;
}

.flex-media--mode-grid .flex-media__grid {
    display: grid;
    grid-template-columns: repeat(var(--flex-media-columns-desktop, 3), minmax(0, 1fr));
    gap: var(--wp--style--block-gap, 12px);
}

@media (max-width: 1024px) {
    .flex-media--mode-grid .flex-media__grid {
        grid-template-columns: repeat(var(--flex-media-columns-tablet, 2), minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .flex-media--mode-grid .flex-media__grid {
        grid-template-columns: repeat(var(--flex-media-columns-mobile, 1), minmax(0, 1fr));
    }
}

.flex-media--mode-slideshow .flex-media__viewport,
.flex-media--mode-carousel .flex-media__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.flex-media__track {
    display: flex;
    will-change: transform;
    transition: transform 250ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .flex-media__track {
        transition: none;
    }
}

.flex-media__slide {
    flex: 0 0 auto;
}

.flex-media__nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.flex-media__button {
    pointer-events: auto;
    border: 0;
    background: transparent;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.flex-media__dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}

.flex-media__dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    background: transparent;
    padding: 0;
    cursor: pointer;
    opacity: 0.5;
}

.flex-media__dot.is-active {
    opacity: 1;
    background: currentColor;
}

/* Featured image placement wrapper */
.flex-media-featured-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
}

.flex-media-featured-wrapper.is-flow-height {
    height: auto;
}

.flex-media-featured-wrapper.is-full-height {
    height: 100%;
}

/* Desktop: Show flex-media block, hide original featured image */
.flex-media-featured-original {
    display: none;
}

.flex-media-featured-block {
    display: block;
    height: 100%;
}

.flex-media-featured-block .flex-media {
    height: 100%;
}

/* FullWidth/auto featured media must stay in normal flow (prevents global overlap). */
.flex-media-featured-wrapper.is-flow-height .flex-media-featured-block {
    height: auto;
}

.flex-media-featured-wrapper.is-flow-height .flex-media-featured-block .flex-media {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
}

/* FullHeight featured media intentionally overlays/fills the hero container. */
.flex-media-featured-wrapper.is-full-height .flex-media-featured-block,
.flex-media-featured-wrapper.is-full-height .flex-media-featured-block .flex-media {
    height: 100% !important;
}

.flex-media-featured-wrapper.is-full-height .flex-media-featured-block .flex-media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Keep featured placement height consistent regardless of internal sizing mode */
.flex-media-featured-block .flex-media__grid,
.flex-media-featured-block .flex-media__cell,
.flex-media-featured-block .flex-media__media--image,
.flex-media-featured-block .flex-media__media--video,
.flex-media-featured-block .flex-media__media--youtube {
    height: 100%;
    min-height: 0;
}

.flex-media-featured-block .flex-media__img,
.flex-media-featured-block .flex-media__video,
.flex-media-featured-block .flex-media__iframe {
    height: 100%;
}

/* Mobile: Keep flex-media block visible (same behavior as desktop) */
@media (max-width: 600px) {
    .flex-media-featured-wrapper {
        min-height: inherit !important;
        height: 100%;
    }
    
    .flex-media-featured-original {
        display: none;
        width: 100%;
        height: 100%;
    }
    
    .flex-media-featured-original img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
    }
    
    .flex-media-featured-block {
        display: block !important;
        height: 100%;
    }
}

/* Safety net: never allow parallax translate on smaller viewports */
@media (max-width: 992px) {
    .flex-media-featured-block.parallax-featured-image {
        transform: none !important;
    }
}