/* COR Carousel — a paged row of cards on a Midnight band.
   The band itself is printed per-section from the PHP (see cor_car_band_css);
   everything here is the carousel mechanism, and all of it is gated on
   `.cor-car--ready` so a page whose script never arrives keeps Elementor's grid.

   1.1.0 shows three cards at a time rather than one. That means the cards are
   the size they were designed at, so **none of their own styling is touched** —
   no type overrides, no alignment overrides. The carousel only decides how many
   are on screen and which ones. The 1.0 build had to restate the title size and
   the alignment because one card stretched across the whole band; at three-up
   there is nothing to restate.

   A note on specificity. The two controls below are stated three classes deep
   and reset width, height, padding, border, font and display explicitly. The
   kit's own <button> rule — a 143px Midnight pill, Circular 700/16, 2px border —
   reaches any button on the page, so anything it sets has to be answered here by
   name rather than left to inherit.
   ------------------------------------------------------------------------- */

/* ---------- the viewport ---------- */

/* width:100% is load-bearing, not belt-and-braces.
 *
 * The band is an Elementor flex container in column direction, and it does not
 * stretch its items — so a plain <div> dropped into it is sized shrink-to-fit,
 * against the max-content of what is inside. What is inside is a nowrap row of
 * seven cards, each asking for 100% of a width that is itself being derived from
 * them. At 386px the view resolved to 1160px and the whole page scrolled
 * sideways; on desktop the number happened to land near the right answer, which
 * is why it only showed up on a phone.
 *
 * min-width:0 for the same family of reasons: a flex item's automatic minimum
 * size is its content, so without it the view can refuse to shrink below the
 * widest card no matter what width it is given. */
.cor-car--ready .cor-car-view{
    overflow:hidden;
    width:100%;
    align-self:stretch;
    min-width:0;
    max-width:100%;
}

.cor-car--ready .cor-car-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch;
    /* Elementor's own 30px, kept so the paged row and the no-JS grid are the
       same row. `--cor-car-gap` is here rather than hard-coded so a second
       section with different spacing needs no new rule. */
    gap:var(--cor-car-gap, 30px) !important;
    transition:transform .55s cubic-bezier(.22,1,.36,1);
    will-change:transform;
}

/* Three across by default; `--cor-car-per` is set by the script from the
   breakpoint, so the card width follows the same arithmetic at every size:
   N cards and N−1 gaps fill the track exactly. */
.cor-car--ready .cor-car-track > *{
    flex:0 0 calc(
        (100% - (var(--cor-car-per, 3) - 1) * var(--cor-car-gap, 30px))
        / var(--cor-car-per, 3)
    ) !important;
    max-width:none !important;
    width:auto !important;
    margin:0 !important;
}

/* Cards on a page the reader has not reached are still in the flow — they have
   to be, or the row would collapse — but they are out of the tab order and out
   of the accessibility tree, so Tab does not wander off-screen. */
.cor-car--ready .cor-car-track > [aria-hidden="true"]{ visibility:hidden; }

/* ---------- the foot: dots left, arrows right ---------- */

.cor-car-foot{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; margin:56px 0 0; width:100%;
}
/* The gap is small because the buttons carry their own side padding — see
   below. Glyph to glyph reads at about 30px. */
.cor-car-nav{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }

/* Arrows are the site's arrows: a literal character set in Utile Display, not an
   icon font. Every other arrow on this build is drawn that way, so a chevron
   here would read as a different component.

   Bare Agave glyphs, no circle — the same treatment as the featured rails. The
   padding is not decoration: a 40px glyph is a 40px tap target, under the 44px
   minimum, so the button is padded out to roughly 64 × 48 and the nav gap pulled
   in to 4 so the spacing a reader sees is unchanged. */
.cor-car--ready .cor-car-nav .cor-car-btn{
    appearance:none; -webkit-appearance:none;
    box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center;
    width:auto; min-width:0; height:auto;
    padding:4px 12px; margin:0;
    border:0; border-radius:0;
    background:transparent; color:#259596;
    box-shadow:none; text-transform:none; letter-spacing:0;
    font:400 40px/1 utile-display, Georgia, serif;
    cursor:pointer;
    transition:color .25s ease, opacity .25s ease;
}
.cor-car--ready .cor-car-nav .cor-car-btn:hover:not(:disabled),
.cor-car--ready .cor-car-nav .cor-car-btn:focus-visible:not(:disabled){
    background:transparent; color:#fff;
}
.cor-car--ready .cor-car-nav .cor-car-btn:disabled{ opacity:.3; cursor:default; }

/* ---------- the dots ---------- */
/* One per page, not one per card — with seven perks three at a time that is
   three dots, which is the number a reader can actually use. */

.cor-car-dots{
    display:flex; align-items:center; gap:14px;
    flex:0 1 auto; width:auto;
    margin:0; padding:0; list-style:none;
}
.cor-car-dots li{ display:block; width:auto; margin:0; padding:0; list-style:none; }
.cor-car-dots li::marker{ content:none; }

/* The dot the eye sees is the ::after, not the button — the same shape CS-118
   arrived at on the portfolio gallery, and for the same two reasons.

   `transform: scale()` on a 10px circle rasterises a 10px box and stretches it,
   which on a 3x screen comes out flat-sided rather than round. And a `50%`
   radius on a pseudo-element larger than its containing block gets resolved by
   Safari against the containing block, which turns the active dot into a rounded
   rectangle. So: the button is sized to the LARGEST state so nothing ever spills
   it, the states are real widths and heights rather than a scale, and the radius
   is a px value, which the spec clamps to half the box for any square element. */
.cor-car--ready .cor-car-dots .cor-car-dot{
    appearance:none; -webkit-appearance:none;
    box-sizing:border-box;
    display:block; position:relative;
    width:15px; min-width:0; height:15px; padding:0; margin:0;
    border:0; border-radius:999px;
    background:transparent;
    box-shadow:none; font-size:0; line-height:0;
    cursor:pointer;
}
.cor-car--ready .cor-car-dots .cor-car-dot::after{
    content:""; position:absolute; inset:0; margin:auto;
    width:10px; height:10px;
    border-radius:999px; background:rgba(255,255,255,.35);
    transition:width .25s ease, height .25s ease, background .25s ease;
}
.cor-car--ready .cor-car-dots .cor-car-dot:hover::after{ background:rgba(255,255,255,.7); }
.cor-car--ready .cor-car-dots .cor-car-dot[aria-current="true"]::after{
    background:#B8DCFC; width:15px; height:15px;
}
.cor-car--ready .cor-car-dots .cor-car-dot:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:999px; }

/* A single page is not a carousel — if every card fits, the chrome goes. */
.cor-car--single .cor-car-foot{ display:none; }

/* ---------- responsive ---------- */

@media (max-width:1024px){
    .cor-car-foot{ margin-top:44px; }
    .cor-car--ready .cor-car-nav .cor-car-btn{ font-size:34px; }
}
@media (max-width:767px){
    /* One card per page means seven dots rather than three, which with the
       arrows is close to the width of a phone. Wrap rather than stack: they stay
       on one line where they fit and drop to two where they do not, instead of
       always taking two rows or always crushing. */
    .cor-car-foot{ flex-wrap:wrap; gap:20px 16px; margin-top:36px; }
    /* 6px keeps the button 44px tall — the tap-target floor — at the smaller
       glyph size. */
    .cor-car--ready .cor-car-nav .cor-car-btn{ font-size:32px; padding:6px 10px; }
}

@media (prefers-reduced-motion: reduce){
    .cor-car--ready .cor-car-track{ transition:none; }
    .cor-car--ready .cor-car-nav .cor-car-btn,
    .cor-car--ready .cor-car-dots .cor-car-dot::after{ transition:none; }
}