/**
 * Banner Slider Pro — frontend.
 *
 * Everything is scoped under .bsp-banner so theme styles stay out and ours
 * stay in. Colors come from two custom properties set inline per banner:
 *   --bsp-accent  active pagination / highlights
 *   --bsp-text    overlay text color
 * The banner height is printed per-instance in a <style> block (the mobile
 * breakpoint is a setting, so it can't live in this static file).
 */

.bsp-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--bsp-text, #fff);
}

.bsp-banner *,
.bsp-banner *::before,
.bsp-banner *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------- slides */

.bsp-slides,
.bsp-slide {
    position: absolute;
    inset: 0;
}

.bsp-slide {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bsp-speed, 500ms) ease;
    z-index: 1;
}

.bsp-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.bsp-slide picture,
.bsp-slide .bsp-slide-link {
    position: absolute;
    inset: 0;
    display: block;
}

.bsp-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ------------------------------------------------------------ text groups */

.bsp-content {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    padding: 0 clamp(20px, 7vw, 96px);
    pointer-events: none;
    /* Offset lives here (not on .bsp-group) so it can't fight the group's
       own enter animation, which also uses transform. */
    transform: translateY(var(--bsp-content-offset, 0px));
}

.bsp-valign-top {
    align-items: flex-start;
    padding-top: clamp(32px, 8vh, 96px);
}

.bsp-valign-bottom {
    align-items: flex-end;
    padding-bottom: clamp(48px, 14vh, 130px); /* Clears the pagination row. */
}

.bsp-halign-center {
    justify-items: center;
    text-align: center;
}

.bsp-halign-right {
    justify-items: end;
    text-align: right;
}

.bsp-group {
    grid-area: 1 / 1;
    max-width: var(--bsp-content-width, 640px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--bsp-anim-speed, 600ms) ease,
        transform var(--bsp-anim-speed, 600ms) ease,
        filter var(--bsp-anim-speed, 600ms) ease,
        visibility 0s linear var(--bsp-anim-speed, 600ms);
}

/* Initial (hidden) state per animation type. The class sits on .bsp-banner. */
.bsp-anim-fade-up     .bsp-group { transform: translateY(24px); }
.bsp-anim-fade-down   .bsp-group { transform: translateY(-24px); }
.bsp-anim-slide-left  .bsp-group { transform: translateX(48px); }
.bsp-anim-slide-right .bsp-group { transform: translateX(-48px); }
.bsp-anim-zoom-in     .bsp-group { transform: scale(.85); }
.bsp-anim-zoom-out    .bsp-group { transform: scale(1.15); }
.bsp-anim-blur        .bsp-group { filter: blur(12px); }

/* Active state resets every animation. Must come after the rules above. */
.bsp-banner .bsp-group.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    transition:
        opacity var(--bsp-anim-speed, 600ms) ease,
        transform var(--bsp-anim-speed, 600ms) ease,
        filter var(--bsp-anim-speed, 600ms) ease,
        visibility 0s;
    pointer-events: auto;
}

.bsp-header {
    margin: 0 0 .35em;
    font-size: var(--bsp-header-size, 54px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--bsp-header-color, #fff);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.bsp-subheader {
    margin: 0 0 .6em;
    font-size: var(--bsp-subheader-size, 26px);
    font-weight: 500;
    line-height: 1.25;
    color: var(--bsp-subheader-color, var(--bsp-accent, #ffd200));
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.bsp-paragraph {
    font-size: var(--bsp-paragraph-size, 18px);
    line-height: 1.6;
    color: var(--bsp-paragraph-color, inherit);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.bsp-paragraph p { margin: 0 0 .8em; }
.bsp-paragraph p:last-child { margin-bottom: 0; }

.bsp-button {
    display: inline-block;
    margin-top: 14px;
    padding: .75em 1.9em;
    background: var(--bsp-btn-bg, #ffd200);
    color: var(--bsp-btn-color, #111);
    border-radius: var(--bsp-btn-radius, 4px);
    font-size: var(--bsp-paragraph-size, 18px);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
    transition: filter .2s ease, transform .2s ease;
}

.bsp-button:hover,
.bsp-button:focus {
    color: var(--bsp-btn-color, #111);
    filter: brightness(1.08);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ------------------------------------------------------------- pagination */

.bsp-pagination {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    gap: 12px;
    padding: 0 clamp(20px, 7vw, 96px);
}

.bsp-pos-left   { justify-content: flex-start; }
.bsp-pos-center { justify-content: center; }
.bsp-pos-right  { justify-content: flex-end; }

/* Keep right-positioned pagination clear of the arrow buttons. */
.bsp-banner:has(.bsp-arrows) .bsp-pos-right { padding-right: 112px; }

.bsp-page {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--bsp-text, #fff);
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

/* Numbers style: 01 02 03 in circles, active ringed with the accent color. */

.bsp-pag-numbers .bsp-page {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: rgba(0, 0, 0, .25);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.bsp-pag-numbers .bsp-page:hover {
    border-color: var(--bsp-accent, #ffd200);
}

.bsp-pag-numbers .bsp-page.is-active {
    border-color: var(--bsp-accent, #ffd200);
    color: var(--bsp-accent, #ffd200);
}

/* Dots style */

.bsp-pag-dots .bsp-page {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transition: background .2s ease, transform .2s ease;
}

.bsp-pag-dots .bsp-page:hover { background: rgba(255, 255, 255, .75); }

.bsp-pag-dots .bsp-page.is-active {
    background: var(--bsp-accent, #ffd200);
    transform: scale(1.25);
}

/* ----------------------------------------------------------------- arrows */

.bsp-arrows {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
}

.bsp-arrow {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    width: 44px;
    height: 40px;
    background: rgba(0, 0, 0, .35);
    color: var(--bsp-text, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}

.bsp-arrow:hover {
    background: rgba(0, 0, 0, .55);
    color: var(--bsp-accent, #ffd200);
}

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

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .bsp-slide,
    .bsp-group {
        transition-duration: 0.01ms;
    }
}

@media (max-width: 767px) {
    .bsp-pagination { bottom: 16px; gap: 8px; }
    .bsp-pag-numbers .bsp-page { width: 32px; height: 32px; font-size: 12px; }

    /* Scale the configured desktop sizes down on small screens. */
    .bsp-header    { font-size: calc(var(--bsp-header-size, 54px) * .6); }
    .bsp-subheader { font-size: calc(var(--bsp-subheader-size, 26px) * .75); }
    .bsp-paragraph { font-size: calc(var(--bsp-paragraph-size, 18px) * .9); }
    .bsp-button    { font-size: calc(var(--bsp-paragraph-size, 18px) * .9); }
}