/* carousel */
#customCarousel { outline: none; }
#customCarousel:focus-visible { box-shadow: inset 0 0 0 3px #004643; }

.carousel-inner { position: relative; overflow: hidden; }

/* Custom fade engine (replaces Bootstrap's JS-driven .carousel-fade
   transitions, which only exist while Bootstrap's own carousel JS is
   running — this carousel no longer uses that plugin). */
.carousel-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}
.carousel-item.active {
    position: relative;   /* the active slide defines the container's height, EXCEPT at
                              lg+ where #customCarousel gets an explicit height instead --
                              see the comment below for why. */
    opacity: 1;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .carousel-item { transition: none; }
}

/* Pin the carousel to a steady height on desktop (lg+, matching the
   flex-lg-row breakpoint where image and text sit side by side).
   Without this, each slide's height was set by whichever was taller --
   the image at its natural aspect ratio, or that slide's caption/
   description text -- so the carousel visibly grew/shrank as it
   auto-advanced, just from caption length differences (the 6 photos
   already share close to the same ~16:9 aspect ratio, so image
   resolution wasn't the cause).

   #customCarousel's actual height is set by js/header.js on
   load/resize, to whatever viewport space is left below the fixed
   header+nav -- so the whole carousel (photo, caption, pill controls)
   fits within the initial screen without scrolling, on whatever size
   window the visitor actually has, rather than a single guessed
   number. The 740px below is only the fallback for the brief moment
   before that JS runs (or if it's disabled); .carousel-inner and the
   rest of the chain then stretch to fill whatever height
   #customCarousel ends up with, via height:100%.

   .carousel-inner already has overflow:hidden, so on a short enough
   window a long caption could get clipped rather than push the box
   taller -- js/header.js has a 480px floor to keep that from getting
   too extreme, but doesn't guarantee zero clipping on every possible
   window size.

   Below lg, the carousel stacks (image above text), which doesn't have
   this jumping-crop problem, so mobile/tablet keeps its natural,
   content-driven height instead of being forced into a fixed box. */
@media (min-width: 992px) {
    #customCarousel {
        height: 740px; /* fallback until js/header.js sets the real inline height */
    }
    .carousel-inner {
        height: 100%;
    }
    .carousel-item {
        height: 100%;
    }
    .carousel-item > .row {
        height: 100%;
    }
    /* Explicit, not left to the row's default align-items:stretch --
       tested and confirmed stretch alone does NOT propagate the row's
       height to these two flex children in this nested flex-in-flex
       chain (forcing align-items:stretch !important on the row made no
       difference; setting height:100% directly on these did). Without
       this, both columns silently fall back to their natural content
       height and the whole point of this media query -- a steady,
       viewport-fitting carousel -- doesn't actually happen. */
    .block-left,
    .block-rayt {
        height: 100%;
    }
}

.block-left {
    flex: 1;
    padding: 0 2rem 70px;  /* bottom reserve so the pill overlay never overlaps the CTA buttons, regardless of how long a given slide's paragraph runs */
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;  /* On a short browser window, the lg+ media query above can leave less
                          room than a longer caption needs. Scrolling within this column (rather
                          than overflow:hidden, which would silently hide the rest of the text)
                          keeps the whole carousel fitting on screen without ever losing content --
                          it's just a scroll away instead of always fully visible. No visible
                          effect when content already fits (the normal case). */
}
.block-rayt {
    flex: 1.6;  /* was 2 (a clean 1:2 split, ~66.7% of the row). This narrows the image
                   column to ~61.5%, handing the text column the other ~5 points, since the
                   photo was crowding out the caption on desktop. Only affects width at lg+
                   (flex-lg-row); below that the row is column-direction, so flex-grow
                   distributes vertical space instead, which mobile's auto-height layout
                   doesn't have spare room to redistribute anyway -- no visible mobile effect. */
    padding: 0 2rem;
    min-width: 0;
    overflow: hidden;
}
.block-rayt img {  width: 100%;
    height: 100%;
    object-fit: cover;          /* scales image to fill block while keeping aspect ratio */
    border-radius: 20px;
}
.no-photo-fallback {
    width: 100%;
    min-height: 260px;
    height: 100%;
    border-radius: 20px;
    background: #eef1ee;
    color: #8a8f8a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-align: center;
}
.block-text{
    margin-top: 2px;
    margin-left: 31px;
    padding-left: 4px;
    flex-direction: row !important; /* Desktop: left-block left, right-block right */
}

/* CTA buttons: plain adjacent .btn elements have no default margin, so
   without this they render edge-to-edge like a joined button group. */
.cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Headline: Bootstrap's default fluid h1 rendered at 40px/700 weight in
   the system font -- brought down to a calmer size (still clearly the
   biggest thing in the column) and switched to Montserrat (loaded via
   Google Fonts in index.html's <head>), still bold. Falls back to the
   same system-font stack Bootstrap would have used if Montserrat hasn't
   loaded yet or fails to load. */
.slide-caption {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}

/* Short description: a touch smaller than the default paragraph size so
   it reads less "shouty" next to the big headline. */
.slide-description {
    font-size: 0.93rem;
    white-space: pre-line; /* preserve the paragraph breaks entered in the admin textarea */
}

/* Publish date, above the headline (like a byline) -- first thing inside
   .block-text. */
.slide-date {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 14px;
    margin-bottom: 0;
}
.slide-date i {
    color: forestgreen;
    margin-right: 4px;
}

.carousel-divider{
    display: flex;
    margin-top: 16px;
    color: forestgreen;
    align-items: center;
}
.carousel-divider::before{
    content: "";
    width: 24px;
    border-top: 2px solid forestgreen;
    margin-left: 31px;
    margin-right: 8px;
    padding-left: 4px
}

/* FIX: the pill control used to be position:absolute against the WHOLE
   carousel with a fixed 50px offset — it only ever landed inside the text
   column because that column happened to be wide enough. It now sits in a
   persistent flex row (see the .pill-overlay-row markup in index.html)
   that reproduces the same flex:1 / flex:2 ratio as the real slide row,
   so its left slot is always exactly as wide as .block-left, by
   construction rather than by coincidence. */
.pill-overlay-row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    pointer-events: none; /* let clicks fall through to slide content, except the pill itself */
}
.pill-slot {
    display: flex;
    align-items: flex-end;
    justify-content: center; /* arrows + counter centered under the text column */
    padding: 0 2rem; /* mirror .block-left's own padding so the pill lines up under the text */
}
.pill-slot-spacer { pointer-events: none; }
.pill-wrapper {
    display: inline-flex;
    pointer-events: auto;
}
.pill-wrapper .btn-group span {
    font-size: 0.75rem; /* adjust as needed */
}
.pill-wrapper [data-pause] {
    background: transparent;
    border: none;
}
.pill-wrapper [data-pause]:hover { background: rgba(0,0,0,.05); }

@media (max-width: 768px) {
  .pill-overlay-row { position: static; margin-top: 1rem; }
  .pill-slot { padding: 0; }
}