/*
 * Home slider — image + text + optional CTA button.
 * The image is a <picture> layer (not a CSS background) so each breakpoint can load
 * its own file, and so the theme's `.bg--cover { background-size: 100% auto !important }`
 * rule below 768px can't squash it.
 */
.ps-banner--media {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #10192b;
}

.ps-banner__media {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
}

.ps-banner__media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Content ------------------------------------------------------------------ */
.ps-banner__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 32px 24px;
    display: flex;
}

.ps-banner__inner {
    max-width: 620px;
}

.ps-banner--pos-left .ps-banner__inner { margin-right: auto; text-align: left; }
.ps-banner--pos-center .ps-banner__inner { margin: 0 auto; text-align: center; }
.ps-banner--pos-right .ps-banner__inner { margin-left: auto; text-align: right; }

/*
 * Overlay scrim — style, colour and opacity all come from the admin as custom properties.
 * `--slide-overlay-rgb` is "r, g, b" so each gradient stop can vary the alpha.
 */
.ps-banner[class*='ps-banner--ov-']::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ps-banner--ov-solid::before {
    background: rgba(var(--slide-overlay-rgb), var(--slide-overlay-opacity));
}

.ps-banner--ov-left::before {
    background: linear-gradient(90deg,
        rgba(var(--slide-overlay-rgb), var(--slide-overlay-opacity)) 0%,
        rgba(var(--slide-overlay-rgb), calc(var(--slide-overlay-opacity) * .45)) 45%,
        rgba(var(--slide-overlay-rgb), 0) 72%);
}

.ps-banner--ov-right::before {
    background: linear-gradient(270deg,
        rgba(var(--slide-overlay-rgb), var(--slide-overlay-opacity)) 0%,
        rgba(var(--slide-overlay-rgb), calc(var(--slide-overlay-opacity) * .45)) 45%,
        rgba(var(--slide-overlay-rgb), 0) 72%);
}

.ps-banner--ov-top::before {
    background: linear-gradient(180deg,
        rgba(var(--slide-overlay-rgb), var(--slide-overlay-opacity)) 0%,
        rgba(var(--slide-overlay-rgb), calc(var(--slide-overlay-opacity) * .35)) 50%,
        rgba(var(--slide-overlay-rgb), 0) 85%);
}

.ps-banner--ov-bottom::before {
    background: linear-gradient(0deg,
        rgba(var(--slide-overlay-rgb), var(--slide-overlay-opacity)) 0%,
        rgba(var(--slide-overlay-rgb), calc(var(--slide-overlay-opacity) * .35)) 50%,
        rgba(var(--slide-overlay-rgb), 0) 85%);
}

/* --slide-text-color is set per slide in the admin; the scheme supplies the fallback. */
.ps-banner--light .ps-banner__title,
.ps-banner--light .ps-banner__desc { color: var(--slide-text-color, #fff); }

.ps-banner--dark .ps-banner__title { color: var(--slide-text-color, #10192b); }
.ps-banner--dark .ps-banner__desc { color: var(--slide-text-color, #3c4657); }

/*
 * --slide-title-size / --slide-text-size are unitless px numbers set per slide in the admin.
 * They are the DESKTOP size (the clamp ceiling); smaller screens scale down from there.
 */
.ps-banner__title {
    --_size: calc(var(--slide-title-size, 36) * 1px);
    font-size: clamp(calc(var(--_size) * .58), calc(var(--_size) * .45 + 1.2vw), var(--_size));
    line-height: 1.15;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.ps-banner__rule {
    display: block;
    width: 56px;
    height: 3px;
    margin: 18px 0;
    background: var(--color-1st, #d5172d);
    border-radius: 3px;
}

.ps-banner--pos-center .ps-banner__rule { margin-left: auto; margin-right: auto; }
.ps-banner--pos-right .ps-banner__rule { margin-left: auto; }

.ps-banner__desc {
    --_size: calc(var(--slide-text-size, 15) * 1px);
    font-size: clamp(calc(var(--_size) * .88), calc(var(--_size) * .8 + .25vw), var(--_size));
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 46ch;
}

.ps-banner--pos-center .ps-banner__desc { margin-left: auto; margin-right: auto; }
.ps-banner--pos-right .ps-banner__desc { margin-left: auto; }

/* CTA button --------------------------------------------------------------- */
.ps-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border-box, or the full-width mobile button overflows its column by its own padding. */
    box-sizing: border-box;
    gap: 14px;
    background: var(--color-1st, #d5172d);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 15px 26px;
    border: 1px solid var(--color-1st, #d5172d);
    border-radius: 3px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.ps-banner__btn:hover,
.ps-banner__btn:focus {
    background: transparent;
    color: #fff;
    text-decoration: none;
}

.ps-banner--dark .ps-banner__btn:hover,
.ps-banner--dark .ps-banner__btn:focus { color: var(--color-1st, #d5172d); }

.ps-banner__arrow { flex: none; transition: transform .2s ease; }
.ps-banner__btn:hover .ps-banner__arrow { transform: translateX(4px); }

/* Sizing ------------------------------------------------------------------- */
/*
 * Loading state — kills the flash of stacked slides before Owl boots.
 *
 * Owl's own CSS sets `.owl-carousel { display: none }`, but that class is only added by its JS;
 * before that the slides are plain divs stacked vertically. So until Owl marks the element
 * `owl-loaded`, we show only the FIRST slide and drop the rest from the flow.
 *
 * The first slide stays fully visible on purpose: it renders the real image and copy straight
 * away (good LCP, nothing to wait for) and reserves the exact final height, so when Owl takes
 * over there is no layout shift and nothing to fade in.
 */
.owl-slider--pending:not(.owl-loaded) {
    display: block;
}

.owl-slider--pending:not(.owl-loaded) > .ps-banner--media ~ .ps-banner--media {
    display: none;
}

/*
 * Equal-height slides.
 * Owl floats each .owl-item, so every slide sizes to its own content — a slide with a button
 * ends up taller than one without, and the carousel jumps between them. Making the stage a
 * flex row stretches every item to the tallest, so all slides match the with-button height.
 */
.ps-home-banner .owl-slider .owl-stage,
#homepage-1 .ps-home-banner .owl-slider .owl-stage {
    display: flex;
    align-items: stretch;
    height: auto;
}

/*
 * The height MUST be auto: the theme sets `.owl-item { height: 100% }`, and a definite height
 * disables flex stretch, which is exactly what left a button-less slide shorter. The selector
 * repeats the theme's own .owl-stage-outer .owl-stage chain to outrank it without !important.
 */
.ps-home-banner .owl-slider .owl-stage-outer .owl-stage .owl-item,
#homepage-1 .ps-home-banner .owl-slider .owl-stage-outer .owl-stage .owl-item {
    float: none;
    flex: 0 0 auto;
    display: flex;
    height: auto;
}

.ps-home-banner .owl-slider .owl-item > .ps-banner--media,
#homepage-1 .ps-home-banner .owl-slider .owl-item > .ps-banner--media {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .ps-banner--media { min-height: 400px; }
    .ps-banner__content { padding: 48px 40px; }
}

@media (min-width: 1200px) {
    .ps-banner--media { min-height: 460px; }
    .ps-banner__content { padding: 60px 70px; }
    .ps-banner--pos-left .ps-banner__inner,
    .ps-banner--pos-right .ps-banner__inner { max-width: 48%; }
}

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ps-banner--media { min-height: 300px; }

    /* With text on top the slide needs room to breathe, and the copy always centres. */
    .ps-banner--media.ps-banner--has-content { min-height: 440px; }

    .ps-banner__content { padding: 36px 20px; }

    .ps-banner--media .ps-banner__inner {
        margin: 0 auto;
        text-align: center;
        max-width: 100%;
    }

    .ps-banner--media .ps-banner__rule { margin: 14px auto; }
    .ps-banner--media .ps-banner__desc { margin-left: auto; margin-right: auto; }

    /*
     * The copy centres on mobile, so a left/right gradient would sit behind nothing.
     * Those two collapse to a bottom-up scrim; solid and top/bottom already work as-is.
     */
    .ps-banner--ov-left::before,
    .ps-banner--ov-right::before {
        background: linear-gradient(0deg,
            rgba(var(--slide-overlay-rgb), var(--slide-overlay-opacity)) 0%,
            rgba(var(--slide-overlay-rgb), calc(var(--slide-overlay-opacity) * .55)) 55%,
            rgba(var(--slide-overlay-rgb), calc(var(--slide-overlay-opacity) * .25)) 100%);
    }

    /* No font-size override here — the clamp above already scales the admin size down. */
    .ps-banner__desc { margin-bottom: 22px; }

    .ps-banner__btn {
        display: flex;
        width: 100%;
        padding: 14px 20px;
    }
}

/* The owl dots sit on top of the image, so lift them clear of the button. */
@media (max-width: 767px) {
    .ps-home-banner .owl-dots { margin-top: 10px; }
}

/*
 * Transitions.
 * Owl ships only the `fadeOut` keyframes and pins `animation-duration: 1s`, so every other
 * transition is defined here and the duration is driven by the admin via --slider-duration.
 */
.owl-slider .animated { animation-duration: var(--slider-duration, 1s); animation-fill-mode: both; }

.owl-slider .fadeIn { animation-name: fadeIn; }
.owl-slider .fadeOut { animation-name: fadeOut; }
.owl-slider .zoomIn { animation-name: slideZoomIn; }
.owl-slider .zoomOut { animation-name: slideZoomOut; }
.owl-slider .slideInUp { animation-name: slideInUp; }
.owl-slider .slideOutUp { animation-name: slideOutUp; }
.owl-slider .slideInDown { animation-name: slideInDown; }
.owl-slider .slideOutDown { animation-name: slideOutDown; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideZoomIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes slideZoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.94); } }
@keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideOutUp { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes slideInDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes slideOutDown { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* Respect a reduced-motion preference — the slide still changes, just without the animation. */
@media (prefers-reduced-motion: reduce) {
    .owl-slider .animated { animation: none !important; }
}