/* ==========================================================================
   CLIFF Image Carousel — frontend
   Every dimension is driven by CSS custom properties written inline by PHP,
   so one stylesheet serves every carousel on the site.
   ========================================================================== */

.cic-carousel {
    /* Fallbacks — PHP overrides all of these inline. */
    --cic-gap: 0px;
    --cic-radius: 0px;
    --cic-accent: #008bc9;
    --cic-arrow-color: #ffffff;
    --cic-arrow-bg: #008bc9;
    --cic-speed: 450ms;
    --cic-arrow-size: 44px;

    --cic-minh: 0px;
    --cic-minh-tab: 0px;
    --cic-minh-mob: 0px;
    --cic-pad-top: 0px;
    --cic-pad-bottom: 0px;
    --cic-pad-x: 0px;
    --cic-pad-top-mob: 0px;
    --cic-pad-bottom-mob: 0px;
    --cic-pad-x-mob: 0px;
    --cic-margin-top: 0px;
    --cic-margin-bottom: 0px;

    --cic-ov-max: 760px;
    --cic-ov-pad-y: 64px;
    --cic-ov-pad-x: 24px;
    --cic-ov-gap: 18px;

    --cic-title-size: 46px;
    --cic-subtitle-size: 30px;
    --cic-text-size: 18px;
    --cic-title-weight: 400;
    --cic-title-color: #ffffff;
    --cic-subtitle-color: #feeb41;
    --cic-text-color: #ffffff;
    --cic-divider-color: #feeb41;

    /* Mobile overlay — PHP overrides these when a mobile-specific value is
       set; otherwise they arrive equal to the fluid desktop sizes above. */
    --cic-title-size-mob: 25px;
    --cic-subtitle-size-mob: 17px;
    --cic-text-size-mob: 14px;
    --cic-ov-pad-y-mob: 38px;
    --cic-ov-pad-x-mob: 16px;
    --cic-ov-max-mob: 760px;

    --cic-btn-radius: 3px;
    --cic-btn-gap: 12px;

    position: relative;
    width: 100%;
    margin-top: var(--cic-margin-top);
    margin-bottom: var(--cic-margin-bottom);
    padding: var(--cic-pad-top) var(--cic-pad-x) var(--cic-pad-bottom);
    box-sizing: border-box;
}

.cic-carousel *,
.cic-carousel *::before,
.cic-carousel *::after {
    box-sizing: border-box;
}

/* Break out of the theme's content column for edge-to-edge heroes. */
.cic-carousel.cic-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ---------- Stage (viewport + scrim + overlay + arrows) ---------- */

.cic-stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--cic-radius);
}

.cic-viewport {
    overflow: hidden;
    width: 100%;
}

.cic-track {
    display: flex;
    gap: var(--cic-gap);
    will-change: transform;
    transition: transform var(--cic-speed) cubic-bezier(0.25, 0.8, 0.35, 1);
}

.cic-carousel.is-dragging .cic-track {
    transition: none;
}

.cic-carousel.is-dragging .cic-slide-inner {
    cursor: grabbing;
}

/* Width is set by JS as a flex-basis percentage; this is the fallback. */
.cic-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.cic-slide-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #e9eef2;
    text-decoration: none;
    color: inherit;
}

/* Rounding lives on the stage when slides sit flush together, and on the
   slides themselves once there's a visible gap between them. */
.cic-carousel:not(.cic-nogap) .cic-slide-inner {
    border-radius: var(--cic-radius);
}

a.cic-slide-inner:focus-visible {
    outline: 3px solid var(--cic-accent);
    outline-offset: -4px;
}

.cic-image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    transition: transform 700ms ease;
}

a.cic-slide-inner:hover .cic-image {
    transform: scale(1.04);
}

/* ---------- Aspect ratios ---------- */

.cic-ratio-16-9 .cic-slide-inner { aspect-ratio: 16 / 9; }
.cic-ratio-4-3  .cic-slide-inner { aspect-ratio: 4 / 3; }
.cic-ratio-3-2  .cic-slide-inner { aspect-ratio: 3 / 2; }
.cic-ratio-1-1  .cic-slide-inner { aspect-ratio: 1 / 1; }
.cic-ratio-3-4  .cic-slide-inner { aspect-ratio: 3 / 4; }

.cic-ratio-auto .cic-slide-inner { aspect-ratio: auto; }
.cic-ratio-auto .cic-image { height: auto; }

/* A fixed minimum height wins over the ratio — this is what makes a
   full-bleed hero possible regardless of the image's own proportions. */
.cic-has-minh .cic-slide-inner {
    aspect-ratio: auto;
    height: var(--cic-minh);
    min-height: var(--cic-minh);
}

.cic-fit-cover   .cic-image { object-fit: cover; }
.cic-fit-contain .cic-image { object-fit: contain; }
.cic-fit-fill    .cic-image { object-fit: fill; }

/* ---------- Scrim ---------- */

.cic-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* ---------- Content overlay ---------- */

.cic-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    padding: var(--cic-ov-pad-y) var(--cic-ov-pad-x);
    /* Clicks fall through to the slide and the drag handler; only the
       buttons themselves re-enable pointer events. */
    pointer-events: none;
}

.cic-overlay-inner {
    display: flex;
    flex-direction: column;
    gap: var(--cic-ov-gap);
    width: 100%;
    max-width: var(--cic-ov-max);
}

/* Horizontal placement of the text block */
.cic-ovh-left   .cic-overlay { justify-content: flex-start; }
.cic-ovh-center .cic-overlay { justify-content: center; }
.cic-ovh-right  .cic-overlay { justify-content: flex-end; }

/* Vertical placement */
.cic-ovv-top    .cic-overlay { align-items: flex-start; }
.cic-ovv-middle .cic-overlay { align-items: center; }
.cic-ovv-bottom .cic-overlay { align-items: flex-end; }

/* Text alignment inside the block */
.cic-ovtext-left   .cic-overlay-inner { text-align: left; align-items: flex-start; }
.cic-ovtext-center .cic-overlay-inner { text-align: center; align-items: center; }
.cic-ovtext-right  .cic-overlay-inner { text-align: right; align-items: flex-end; }

.cic-ov-title,
.cic-ov-subtitle,
.cic-ov-text {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.cic-ov-title {
    font-size: var(--cic-title-size);
    font-weight: var(--cic-title-weight);
    line-height: 1.15;
    color: var(--cic-title-color);
}

.cic-ov-subtitle {
    font-size: var(--cic-subtitle-size);
    font-weight: 600;
    line-height: 1.25;
    color: var(--cic-subtitle-color);
}

.cic-ov-text {
    font-size: var(--cic-text-size);
    line-height: 1.6;
    color: var(--cic-text-color);
}

.cic-ov-text p {
    margin: 0 0 0.75em;
}

.cic-ov-text p:last-child {
    margin-bottom: 0;
}

.cic-ov-text a {
    color: inherit;
    text-decoration: underline;
    pointer-events: auto;
}

.cic-ov-divider {
    display: block;
    width: 64px;
    height: 3px;
    background: var(--cic-divider-color);
    border-radius: 2px;
}

/* Text shadow keeps headings readable over a busy photo even at low scrim
   opacity, which is usually preferable to darkening the image further. */
.cic-shadow .cic-ov-title,
.cic-shadow .cic-ov-subtitle,
.cic-shadow .cic-ov-text {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* ---------- Buttons ---------- */

.cic-ov-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cic-btn-gap);
    margin-top: 6px;
    pointer-events: auto;
}

.cic-ovtext-center .cic-ov-buttons { justify-content: center; }
.cic-ovtext-right  .cic-ov-buttons { justify-content: flex-end; }

.cic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: var(--cic-btn-radius);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease,
                background 180ms ease, color 180ms ease;
}

.cic-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.cic-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.cic-btn-outline {
    background: transparent;
}

.cic-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

.cic-btn-text {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cic-btnsize-small  .cic-btn { padding: 9px 20px;  font-size: 12px; }
.cic-btnsize-medium .cic-btn { padding: 13px 30px; font-size: 13px; }
.cic-btnsize-large  .cic-btn { padding: 17px 42px; font-size: 15px; }

/* ---------- Per-slide captions ---------- */

.cic-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cic-caption-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.cic-caption-sub {
    font-size: 0.875rem;
    opacity: 0.85;
    line-height: 1.4;
}

.cic-caption-overlay .cic-caption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 4;
    padding: 28px 18px 16px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
}

.cic-caption-below .cic-slide-inner { background: transparent; }

.cic-caption-below .cic-caption {
    padding: 12px 2px 0;
    color: inherit;
}

/* With captions below, the ratio belongs to the image, not the whole slide,
   or the text would eat into the picture. */
.cic-caption-below:not(.cic-ratio-auto):not(.cic-has-minh) .cic-slide-inner { aspect-ratio: auto; }
.cic-caption-below.cic-ratio-16-9 .cic-image { aspect-ratio: 16 / 9; }
.cic-caption-below.cic-ratio-4-3  .cic-image { aspect-ratio: 4 / 3; }
.cic-caption-below.cic-ratio-3-2  .cic-image { aspect-ratio: 3 / 2; }
.cic-caption-below.cic-ratio-1-1  .cic-image { aspect-ratio: 1 / 1; }
.cic-caption-below.cic-ratio-3-4  .cic-image { aspect-ratio: 3 / 4; }
.cic-caption-below .cic-image { border-radius: var(--cic-radius); }

/* ---------- Arrows ---------- */

.cic-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cic-arrow-size);
    height: var(--cic-arrow-size);
    padding: 0;
    margin: 0;

    color: var(--cic-arrow-color);
    background: var(--cic-arrow-bg);
    border: 0;
    cursor: pointer;
    transition: opacity 200ms ease, filter 200ms ease;
}

.cic-arrow:hover { filter: brightness(1.12); }

.cic-arrow:focus-visible {
    outline: 3px solid var(--cic-accent);
    outline-offset: 3px;
}

.cic-arrow[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.cic-icon {
    width: 58%;
    height: 58%;
}

.cic-icon-flip { transform: scaleX(-1); }

.cic-arrowshape-circle .cic-arrow { border-radius: 50%; }
.cic-arrowshape-square .cic-arrow { border-radius: 4px; }

.cic-arrowshape-bare .cic-arrow {
    background: transparent;
    color: var(--cic-arrow-bg);
    width: auto;
    height: auto;
}

.cic-arrowshape-bare .cic-icon {
    width: var(--cic-arrow-size);
    height: var(--cic-arrow-size);
}

.cic-prev { left: 16px; }
.cic-next { right: 16px; }

/* "Outside" arrows sit on the very edge of the stage. Because the stage
   clips its children, they hug the inner edge rather than floating off it. */
.cic-arrows-outside .cic-prev { left: 4px; }
.cic-arrows-outside .cic-next { right: 4px; }

/* ---------- Dots ---------- */

.cic-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.cic-dots-over .cic-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 6;
    margin-top: 0;
}

.cic-dot {
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: background 220ms ease, width 220ms ease, transform 220ms ease;
}

.cic-dots-over .cic-dot { background: rgba(255, 255, 255, 0.45); }

.cic-dot:focus-visible {
    outline: 3px solid var(--cic-accent);
    outline-offset: 3px;
}

.cic-dotstyle-dot .cic-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cic-dotstyle-dot .cic-dot.is-active {
    background: var(--cic-accent);
    transform: scale(1.35);
}

.cic-dotstyle-bar .cic-dot {
    width: 26px;
    height: 4px;
    border-radius: 2px;
}

.cic-dotstyle-bar .cic-dot.is-active {
    width: 44px;
    background: var(--cic-accent);
}

.cic-dotstyle-number .cic-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-size: 0.8125rem;
    line-height: 1;
    color: inherit;
}

.cic-dots-over.cic-dotstyle-number .cic-dot {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.cic-dotstyle-number .cic-dot.is-active {
    background: var(--cic-accent);
    border-color: var(--cic-accent);
    color: #fff;
}

/* ---------- Tablet & mobile ---------- */

@media (max-width: 1024px) {
    .cic-arrows-outside .cic-prev { left: 10px; }
    .cic-arrows-outside .cic-next { right: 10px; }

    /* Tablet fixed height (601px–1024px). The mobile block below takes over,
       and wins the cascade, at 600px and below. */
    .cic-has-minh .cic-slide-inner {
        height: var(--cic-minh-tab);
        min-height: var(--cic-minh-tab);
    }
}

@media (max-width: 600px) {
    .cic-carousel {
        padding: var(--cic-pad-top-mob) var(--cic-pad-x-mob) var(--cic-pad-bottom-mob);
    }

    .cic-has-minh .cic-slide-inner {
        height: var(--cic-minh-mob);
        min-height: var(--cic-minh-mob);
    }

    .cic-overlay {
        /* Tight side padding on a phone wastes the little width there is.
           overlay_pad_y_mobile / overlay_pad_x_mobile override these from
           the admin screen; left at 0 there, PHP fills in the same 60%
           reduction this used to hard-code. */
        padding: var(--cic-ov-pad-y-mob) var(--cic-ov-pad-x-mob);
    }

    .cic-overlay-inner {
        max-width: var(--cic-ov-max-mob);
    }

    .cic-ov-title    { font-size: var(--cic-title-size-mob); }
    .cic-ov-subtitle { font-size: var(--cic-subtitle-size-mob); }
    .cic-ov-text     { font-size: var(--cic-text-size-mob); }

    /* Optional vertical-position override for mobile only (e.g. a desktop
       hero pinned to "top" can drop to "middle" so it clears a fixed
       header on a phone). */
    .cic-ovv-mob-top    .cic-overlay { align-items: flex-start; }
    .cic-ovv-mob-middle .cic-overlay { align-items: center; }
    .cic-ovv-mob-bottom .cic-overlay { align-items: flex-end; }

    /* Simplify-on-mobile toggles from the admin screen. */
    .cic-ov-hide-mobile .cic-overlay          { display: none; }
    .cic-ov-hide-title-mobile .cic-ov-title       { display: none; }
    .cic-ov-hide-subtitle-mobile .cic-ov-subtitle { display: none; }
    .cic-ov-hide-text-mobile .cic-ov-text         { display: none; }
    .cic-ov-hide-buttons-mobile .cic-ov-buttons   { display: none; }

    .cic-arrow {
        --cic-arrow-size: 36px;
    }

    .cic-prev { left: 8px; }
    .cic-next { right: 8px; }

    .cic-ov-buttons {
        width: 100%;
    }

    .cic-btn {
        flex: 1 1 auto;
        min-width: 140px;
    }
}

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
    .cic-track,
    .cic-image,
    .cic-dot,
    .cic-arrow,
    .cic-btn {
        transition-duration: 1ms !important;
    }
    a.cic-slide-inner:hover .cic-image,
    .cic-btn:hover {
        transform: none;
    }
}

.cic-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}