/**
 * Gelderhorst gallery carousel styles.
 *
 * Standalone stylesheet enqueued by functions.php so the WP [gallery]
 * shortcode renders as a Swiper carousel inside flexible-template blocks
 * without requiring an SCSS rebuild. Mirrors the rules added in
 * src/sass/page-templates/_flexible-template.scss.
 */

/* Stop the bg-image rule (".block-inner img { position:absolute }") from
   hijacking thumbnails or arbitrary content images. Only the direct child
   img of .block-inner should stay absolutely positioned (background). */
.page-template-flexible-template .components .section-blocks .blocks .block .block-inner .gallery img,
.page-template-flexible-template .components .section-blocks .blocks .block .block-inner .content img,
.page-template-flexible-template .components .section-blocks .blocks .block .block-inner .gh-gallery img {
    position: static;
    width: auto;
    height: auto;
    border-radius: 0;
    object-fit: initial;
    object-position: initial;
}

/* Hide the raw WP gallery once the carousel has been built next to it. */
.block-inner .content > .gallery {
    display: none;
}

.gh-gallery {
    position: relative;
    margin: 24px 0 0;
    padding-bottom: 32px;
}

.gh-gallery .swiper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(13, 38, 39, 0.08);
}

.gh-gallery .swiper-slide {
    position: relative;
    display: block;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
}

.gh-gallery .swiper-slide img {
    position: static !important;
    width: 100% !important;
    height: 320px !important;
    max-height: 360px;
    object-fit: cover !important;
    object-position: center center;
    border-radius: 12px !important;
    display: block;
}

@media (max-width: 992px) {
    .gh-gallery .swiper-slide img {
        height: 240px !important;
    }
}

.gh-gallery .gh-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 56px 20px 18px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-align: left;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(13, 38, 39, 0) 0%,
        rgba(13, 38, 39, 0.65) 100%
    );
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.gh-gallery .gh-gallery-nav {
    position: absolute;
    top: calc(50% - 16px);
    z-index: 10;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 100%;
    background: #fff;
    border: 0;
    box-shadow: 0 4px 12px rgba(13, 38, 39, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0D2627;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.gh-gallery .gh-gallery-nav:hover {
    background: #77CDD2;
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}

.gh-gallery .gh-gallery-nav.gh-gallery-prev { left: -16px; }
.gh-gallery .gh-gallery-nav.gh-gallery-next { right: -16px; }

@media (max-width: 992px) {
    .gh-gallery .gh-gallery-nav.gh-gallery-prev { left: 8px; }
    .gh-gallery .gh-gallery-nav.gh-gallery-next { right: 8px; }
}

.gh-gallery .gh-gallery-nav.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

.gh-gallery .gh-gallery-nav i {
    font-style: normal;
    font-size: 18px;
    line-height: 1;
}

.gh-gallery .gh-gallery-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    height: 24px;
}

.gh-gallery .gh-gallery-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: rgba(13, 38, 39, 0.2);
    opacity: 1;
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease, transform 0.25s ease;
    margin: 0;
}

.gh-gallery .gh-gallery-pagination .swiper-pagination-bullet:hover {
    background: rgba(13, 38, 39, 0.4);
}

.gh-gallery .gh-gallery-pagination .swiper-pagination-bullet-active {
    background: #77CDD2;
    width: 24px;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Native HTML5 <video> rendered for the [video] shortcode (see
   wp_video_shortcode_override in functions.php). Fixed letterbox container
   so vertical clips show in full with black side bars, matching the
   neighbouring blocks.
   ------------------------------------------------------------------------- */
.block-inner .content .gh-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    max-height: 460px;
    min-height: 280px;
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.block-inner .content .gh-video-wrap .gh-video {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    background: #000;
    border-radius: 12px;
    display: block;
}

/* oEmbed / pasted iframe (Vimeo, YouTube, ...) tagged server-side with
   .gh-embed-video. PHP injects an inline aspect-ratio derived from the
   iframe's width/height attributes; the rule below makes the iframe fluid
   (100% wide, height proportional via aspect-ratio). */
.block-inner .content iframe.gh-embed-video {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 560px;
    border: 0;
    border-radius: 12px;
    background: #000;
    margin: 16px auto 0;
}

@media (max-width: 992px) {
    .block-inner .content iframe.gh-embed-video {
        max-height: 420px;
    }
}

@media (max-width: 992px) {
    .block-inner .content .gh-video-wrap {
        aspect-ratio: 4 / 3;
        max-height: 380px;
    }
}

/* Defensive fallback if any [video] still renders through MediaElement
   (e.g. cached output). Tame the container so it can't blow up the layout. */
.block-inner .content .wp-video,
.block-inner .content .mejs-container.wp-video-shortcode {
    width: 100% !important;
    max-width: 100% !important;
    height: 380px !important;
    min-width: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    margin-top: 16px;
}

.block-inner .content .wp-video .mejs-inner,
.block-inner .content .wp-video .mejs-mediaelement,
.block-inner .content .wp-video .mejs-layers,
.block-inner .content .wp-video mediaelementwrapper {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.block-inner .content .wp-video video {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    background: #000;
    border-radius: 12px;
}

@media (max-width: 992px) {
    .block-inner .content .wp-video,
    .block-inner .content .mejs-container.wp-video-shortcode {
        height: 320px !important;
    }
}