/* ==========================================================================
   DC Clinic — layout-stability (CLS) overrides
   --------------------------------------------------------------------------
   The homepage carousels are server-rendered as multi-row CSS grids and then
   collapsed to a single-row Owl carousel ~100 ms after DOMContentLoaded. That
   grid(N rows) -> carousel(1 row) height collapse was the entire CLS 0.55.

   Fix: before Owl adds `.owl-loaded` / `.owl-carousel`, render the container as
   a single-row horizontal scroller whose height already equals the carousel
   that replaces it. Pure CSS, no JS, no DOM duplication. Once Owl initialises,
   these rules stop matching and the existing carousel styles take over
   unchanged.
   ========================================================================== */

.dc-home-reviews__scroll:not(.owl-loaded),
.dc-home-promo__grid:not(.owl-loaded),
.dc-home-articles__carousel:not(.owl-loaded),
.dc-home-facilities__grid:not(.owl-loaded):not(.owl-carousel),
.dc-certificate__grid:not(.owl-loaded):not(.owl-carousel) {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* keep the row clear of the section's negative-margin bleed on mobile */
    scrollbar-width: none;
}

.dc-home-reviews__scroll:not(.owl-loaded)::-webkit-scrollbar,
.dc-home-promo__grid:not(.owl-loaded)::-webkit-scrollbar,
.dc-home-articles__carousel:not(.owl-loaded)::-webkit-scrollbar,
.dc-home-facilities__grid:not(.owl-loaded):not(.owl-carousel)::-webkit-scrollbar,
.dc-certificate__grid:not(.owl-loaded):not(.owl-carousel)::-webkit-scrollbar {
    display: none;
}

.dc-home-reviews__scroll:not(.owl-loaded) > *,
.dc-home-promo__grid:not(.owl-loaded) > *,
.dc-home-articles__carousel:not(.owl-loaded) > *,
.dc-home-facilities__grid:not(.owl-loaded):not(.owl-carousel) > *,
.dc-certificate__grid:not(.owl-loaded):not(.owl-carousel) > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Per-carousel card width for the pre-init row (matches the Owl item widths at
   the corresponding breakpoint closely enough that swap-in is shift-free). */
.dc-home-reviews__scroll:not(.owl-loaded) > *      { width: min(300px, 78vw); }
.dc-home-promo__grid:not(.owl-loaded) > *          { width: min(320px, 82vw); }
.dc-home-articles__carousel:not(.owl-loaded) > *   { width: min(320px, 82vw); }
.dc-home-facilities__grid:not(.owl-loaded):not(.owl-carousel) > * { width: min(320px, 82vw); }
.dc-certificate__grid:not(.owl-loaded):not(.owl-carousel) > *     { width: min(280px, 76vw); }

@media (min-width: 992px) {
    .dc-home-reviews__scroll:not(.owl-loaded) > *      { width: 300px; }
    .dc-home-promo__grid:not(.owl-loaded) > *          { width: calc((100% - 40px) / 3); }
    .dc-home-articles__carousel:not(.owl-loaded) > *   { width: calc((100% - 32px) / 3); }
    .dc-home-facilities__grid:not(.owl-loaded):not(.owl-carousel) > * { width: calc((100% - 40px) / 3); }
    .dc-certificate__grid:not(.owl-loaded):not(.owl-carousel) > *     { width: calc((100% - 48px) / 3); }
}

/* --------------------------------------------------------------------------
   Reserve intrinsic space for images that ship as bare <img> without a sized
   wrapper, so first paint does not jump when they decode. Ratios match the
   approved crops already used elsewhere in home-landing.css.
   -------------------------------------------------------------------------- */
.dc-home-article-card__img { aspect-ratio: 3 / 2; }
.dc-home-services__sub-img { aspect-ratio: 1 / 1; height: auto; }

.dc-home-article-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Promotion cards intentionally use object-fit: contain (see home-landing.css) —
   do NOT force a ratio/crop here. Space is reserved via width/height attributes
   on the <img> itself in template-parts/home/section-promotions.php. */

/* Campaign banner + footer logo: prevent reflow before the raster loads. */
.dc-home-campaign__banner img { aspect-ratio: 1200 / 400; width: 100%; height: auto; }