/* ==========================================================================
   Static reproduction of Owl Carousel's post-init layout.

   The theme's slider CSS is written entirely against Owl's runtime DOM
   (.owl-item.active / .owl-item.center), so rather than overriding those rules
   we emit Owl's post-init structure statically:

       .owl-carousel.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item

   Owl assigns each item a pixel width at runtime. We have no runtime, so the
   widths are reproduced with flex, using Owl's own sizing formula:

       itemWidth = (carouselWidth + margin) / items - margin

   i.e. N items plus N-1 gutters exactly fill the carousel; every item carries
   the margin and the resulting overhang is clipped by .owl-stage-outer
   (overflow: hidden) -- which is exactly how Owl renders it.

   One wrinkle: .blog-slider carries Bootstrap's .row, so `.row > *` gives
   .owl-stage-outer 12px horizontal gutters. That padding is correct (it is what
   aligns the items with the container, and the live site has it too), but it
   makes .owl-stage 24px narrower than the carousel Owl measured. Percentages
   below therefore resolve against a box 24px short, and that slider adds the
   difference back. Values verified against the live site at 1440px: blog item
   424px, certificates item 636px.

   Per-view counts come from the theme's real Owl configs:
     .c-slider    (certificates) items:1  -- no .row, so no gutter correction
     .blog-slider                items:3, margin:12, dots:true,
                                 responsive { 0:1, 768:2 (center off), 1000:3 }

   .f-2-slider (the hero) was here too, at items:1/margin:10. It left on
   2026-07-26 when the hero became one static full-bleed frame with no Owl DOM.
   .blog-slider's own component was deleted in the Phase-2 rebrand, so of the
   three only .c-slider is still live.

   Note: .owl-carousel is display:none until .owl-loaded, which the ported
   markup already carries -- so no display override is needed here.
   ========================================================================== */

/* The stage-outer is the carousel's only child. Two of these carousels also
   carry .row (a flex container), hence flex-basis as well as width. */
.owl-carousel > .owl-stage-outer {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

/* Owl floats items; lay the track out with flex so the per-view counts hold. */
.owl-carousel .owl-stage {
  display: flex;
}

/* Base case: a single item fills the track (.c-slider relies on this). */
.owl-carousel .owl-item {
  float: none;
  flex: 0 0 100%;
  max-width: 100%;
}

/* .f-2-slider (hero) had a block here until 2026-07-26: items:1, margin:10,
   flex-basis:calc(100% + 24px). The hero is no longer a carousel -- it is one
   static full-bleed frame with no Owl DOM at all -- so the rule matched nothing
   and its comment, which described the narrow image "peek" as intentional
   design, had become actively misleading. Both are archived with the rest of the
   carousel in wiki/reference/hero-archive.md, restorable verbatim.            */

/* --- .blog-slider: items:3, margin:12, inside a .row --------------------- */
.blog-slider .owl-item {
  margin-right: 12px;
  flex-basis: calc(100% + 24px); /* items:1 below 768px */
  max-width: calc(100% + 24px);
}

@media (min-width: 768px) {
  .blog-slider .owl-item {
    flex-basis: calc(50% + 6px); /* items:2 */
    max-width: calc(50% + 6px);
  }
}

@media (min-width: 1000px) {
  .blog-slider .owl-item {
    flex-basis: 33.3333%; /* items:3 */
    max-width: 33.3333%;
  }
}