.home-post-slider-module {
    z-index: 2;
}

/*
 * .contact-info-blocks__item sits in a flex row (Bootstrap .row) with an
 * explicit .h-100 utility class stretching every column to match the
 * tallest sibling's content - the image ends up in a taller box than its
 * own natural proportions call for. object-fit:cover crops to fill that
 * box instead of the image being non-uniformly scaled to match it.
 */
.contact-info-blocks__image {
    overflow: hidden;
}

.contact-info-blocks__image picture {
    display: block;
    height: 100%;
}

.contact-info-blocks__image img {
    height: 100%;
    object-fit: cover;
}

/*
 * .category-grid__image (search results, and the category-grid pattern it
 * shares with page-category.php/page-category-overview.php) already has
 * min/max-height: 350px in main.css - min/max alone don't reliably count
 * as a "definite" height for percentage-height children to resolve
 * against (unlike an explicit `height`), which is why height:100% further
 * down the chain wasn't actually filling it. Pinning an explicit height
 * here fixes that for every descendant at once. .image-link (the <a>
 * between this and <picture>) is already display:block sitewide but has
 * no height of its own either, so the 100% chain needs restating there
 * too before it reaches the image.
 */
.category-grid__image {
    height: 350px;
    overflow: hidden;
}

.category-grid__image .image-link {
    height: 100%;
}

.category-grid__image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.category-grid__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * /newsroom/ (archive-single.php): the grid's masonry effect comes from a
 * small inline script that sets each image's `style.height` directly to a
 * random px value - that's an absolute pixel value set straight on the
 * <img>, not a percentage, so it doesn't depend on <picture> having any
 * size of its own. display:block here is just consistency/insurance for
 * the width:100% (already applied by the sitewide .photo__image img /
 * .image img rules) - percentage width resolution through an inline
 * ancestor is usually fine but not guaranteed the same way height is.
 */
.regular-post-item__image picture {
    display: block;
}

/*
 * video-baner-module.php puts a real <img> (not a CSS background, despite
 * the "__bg"/"photo--background" naming) directly inside this fixed-height
 * hero container. There was never any CSS making that image actually fill
 * or crop to the container - object-fit needs a definite box to crop
 * against, so this also gives the image absolute positioning to fill it.
 */
.article-hero__bg,
.about-hero__bg {
    position: relative;
    overflow: hidden;
}

.article-hero__bg picture,
.about-hero__bg picture {
    display: block;
    position: absolute;
    inset: 0;
}

.article-hero__bg img,
.about-hero__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.brands-slider-module .photo__image {
    height: auto;
    aspect-ratio: auto;
}

.post-slider-module .photo--grandient.photo__image {
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 393;
}

/*
 * Both carousels' images now render as <picture><img></picture> (see
 * expondo_corporate_picture() in functions.php). <picture> has no default
 * sizing of its own - browsers render it display:inline and it isn't a
 * replaced element - so without this, height/object-fit on .owl-slide-img
 * itself has nothing definite to resolve percentages against.
 */
.post-slider-module picture,
.brands-slider-module picture {
    display: block;
    width: 100%;
    height: 100%;
}

.post-slider-module .owl-slide-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
}

.brands-slider-module .owl-slide-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: auto;
    object-fit: contain;
}

.progressive-image {
    height: auto;
}

.progressive-image,
.progressive-bg {
    opacity: 1;
    transition:
        filter 650ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.progressive-image.is-loading,
.progressive-bg.is-loading {
    filter: blur(8px);
    opacity: 0.88;
}

.progressive-image.is-loaded,
.progressive-bg.is-loaded {
    filter: none;
    opacity: 1;
}

/*
 * .progressive-bg is for elements whose image is a CSS background-image
 * rather than an <img>. progressive-images.js preloads the real image then
 * sets both `background-image` directly (the common case) and this custom
 * property (for the few hero sections that put the background on a
 * ::before pseudo-element instead, which JS can't style directly - the
 * pseudo-element's own CSS references `background-image:
 * var(--progressive-bg-image)` so it still gets the swap).
 */
.progressive-bg {
    --progressive-bg-image: none;
}

.home-slider-header__wrapper,
#home-slider-header,
.home-slider-header__item,
.home-slider-header__photo,
#home-slider-header .owl-stage-outer,
#home-slider-header .owl-stage,
#home-slider-header .owl-item {
    height: 830px;
}

.home-slider-header__photo {
    min-height: 830px;
}

#home-slider-header.owl-carousel {
    display: block;
}

#home-slider-header .home-slider-header__item {
    display: none;
}

#home-slider-header .home-slider-header__item:first-child {
    display: block;
}

#home-slider-header.owl-loaded .home-slider-header__item {
    display: block;
}

.home-slider-header__photo picture {
    display: block;
    width: 100%;
    height: 100%;
}

.home-slider-header__image {
    display: block;
    width: 100% !important;
    max-width: none;
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
}

.post-slider-module__read-more {
    position: absolute;
    right: 5%;
    bottom: -10%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 184px;
    height: 60px;
    border-radius: 6px;
    background-color: #221e1e;
    color: #fff;
    font-size: 16px;
}

.post-slider-module__read-more:hover {
    color: #fff;
}

.post-slider-module__read-more-icon {
    margin-left: 10px;
    font-size: 30px;
}

.more-articles-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 258px;
    height: 60px;
    margin: 0 auto 64px;
    border-radius: 6px;
    background-color: #00175a;
    color: #fff;
    font-size: 16px;
}

.more-articles-button:hover {
    color: #fff;
}

@media only screen and (max-width: 983px) {
    .brands-slider-module .section-header__subtitle br {
        display: none;
    }

    .home-post-slider-module-carousel__nav,
    .post-slider-module-carousel__nav {
        top: 90%;
        left: 0;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 767px) {
    .home-slider-header__wrapper,
    #home-slider-header,
    .home-slider-header__item,
    .home-slider-header__photo,
    #home-slider-header .owl-stage-outer,
    #home-slider-header .owl-stage,
    #home-slider-header .owl-item {
        height: clamp(500px, calc(100svh - 80px), 800px);
    }

    .home-slider-header__photo {
        min-height: 500px !important;
        max-height: 800px;
    }
}

@media only screen and (max-width: 450px) {
    .home-image-baner-module .home-image-baner-module__btn {
        padding: 1rem 0.5rem;
    }
}

/*
 * Source of truth is resources/assets/styles/adrianStyles.scss (same rule,
 * same comment) - mirrored here because this file is enqueued directly and
 * takes effect immediately, whereas the .scss needs a build step this repo
 * has no discoverable Gruntfile/npm script for. If/when that SCSS build
 * runs and gets committed into this theme's compiled main.css, this block
 * becomes a harmless duplicate (identical rule, same specificity) rather
 * than a conflict - safe to remove at that point.
 *
 * .timeline-content picks up the same width/padding/margin steps
 * .container gets from Bootstrap (see bootstrap.css: base .container is
 * width:100%, padding:0 10px, margin:0 auto, then max-width steps to
 * 768/960/1432px at the 768/992/1200px breakpoints) - but only from 768px
 * up. Below that, .timeline-content is deliberately left alone: no width,
 * padding or margin rule at all here, so its current (unconstrained)
 * mobile layout stays exactly as it is today.
 */
@media (min-width: 768px) {
    .timeline-content {
        width: 100%;
        max-width: 768px;
        padding-right: 10px;
        padding-left: 10px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 992px) {
    .timeline-content {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .timeline-content {
        max-width: 1632px;
    }
}