/* ── SRD Post Slider — hero background image style ───────────────────── */

:root {
    --srd-slider-height:   70vh;
    --srd-slider-min-h:    420px;
    --srd-slider-overlay:  rgba(0, 0, 0, 0.45);
    --srd-slider-accent:   #ffbf00;
    --srd-slider-text:     #ffffff;
    --srd-slider-radius:   0px;
}

/* Wrapper — height driven by per-slider CSS custom properties */
.srd-slider {
    width: 100%;
    height: var(--slider-h, 70vh);
    min-height: 300px;
    border-radius: var(--srd-slider-radius);
}

@media (max-width: 1024px) {
    .srd-slider {
        /* Falls back to desktop value if tablet not set */
        height: var(--slider-h-tablet, var(--slider-h, 60vh));
    }
}

@media (max-width: 767px) {
    .srd-slider {
        /* Small tier (601–767px) — falls back through mobile → tablet → desktop */
        height: var(--slider-h-small, var(--slider-h-mobile, var(--slider-h-tablet, var(--slider-h, 55vh))));
    }
}

@media (max-width: 600px) {
    .srd-slider {
        /* Falls back through tablet → desktop */
        height: var(--slider-h-mobile, var(--slider-h-tablet, var(--slider-h, 55vh)));
    }
}

/* Individual slide — full background image via CSS custom properties */
.srd-slide {
    position: relative;
    background-image: var(--slide-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: var(--srd-slide-content-pos, center);
}

@media (max-width: 768px) {
    .srd-slide {
        /* Falls back to --slide-bg if no mobile image is set */
        background-image: var(--slide-bg-mobile, var(--slide-bg, none));
    }
}

/* Video background — covers the slide, sits below the overlay */
.srd-slide--video {
    background-image: none !important;
}

.srd-slide__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dark overlay over the image or video */
.srd-slide__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--srd-slide-overlay-bg, rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

/* Content — alignment and max-width driven by CSS custom properties */
.srd-slide__content {
    position: relative;
    z-index: 2;
    text-align: var(--srd-slide-align, center);
    max-width: var(--srd-slide-content-width, 860px);
    width: 100%;
    padding: 0 40px;
}

/* Title */
.srd-slide__title {
    margin: 0 0 16px;
    font-size: var(--srd-slide-title-size, clamp(1.75rem, 4vw, 3rem));
    font-weight: 700;
    color: var(--srd-slide-title-color, #ffffff);
    line-height: 1.2;
    text-transform: var(--srd-slide-title-transform, uppercase);
    letter-spacing: 0.5px;
}

/* Body text */
.srd-slide__body {
    margin: 0 0 28px;
    font-size: var(--srd-slide-body-size, clamp(0.9375rem, 1.5vw, 1.125rem));
    color: var(--srd-slide-body-color, rgba(255, 255, 255, 0.85));
    line-height: 1.6;
    text-transform: var(--srd-slide-body-transform, none);
}

/* Buttons row */
.srd-slide__buttons {
    display: flex;
    justify-content: var(--srd-slide-align, center);
    flex-wrap: wrap;
    gap: 12px;
}

/* Primary button */
.srd-slide__btn {
    display: inline-block;
    padding: 10px 28px;
    background: var(--srd-slide-btn1-bg, #ffbf00);
    color: var(--srd-slide-btn1-color, #000000);
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 3px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    letter-spacing: 0.3px;
    text-transform: var(--srd-slide-btn1-transform, none);
}

.srd-slide__btn:hover {
    opacity: 0.85;
    color: var(--srd-slide-btn1-color, #000000);
}


/* Secondary button */
.srd-slide__btn--secondary {
    background: var(--srd-slide-btn2-bg, transparent);
    color: var(--srd-slide-btn2-color, #ffffff);
    border: 2px solid var(--srd-slide-btn2-border, rgba(255, 255, 255, 0.75));
    text-transform: var(--srd-slide-btn2-transform, none);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.srd-slide__btn--secondary:hover {
    opacity: 1;
    border-color: var(--srd-slider-accent);
    color: var(--srd-slider-accent);
}

/* ── Swiper navigation overrides ─────────────────────────────────────── */

.srd-slider .swiper-button-prev,
.srd-slider .swiper-button-next {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    transition: background 0.2s ease;
}

.srd-slider .swiper-button-prev:hover,
.srd-slider .swiper-button-next:hover {
    background: var(--srd-slider-accent);
}

.srd-slider .swiper-button-prev::after,
.srd-slider .swiper-button-next::after {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
}

.srd-slider .swiper-button-prev:hover::after,
.srd-slider .swiper-button-next:hover::after {
    color: #000;
}

/* ── Swiper pagination overrides ─────────────────────────────────────── */

.srd-slider .swiper-pagination {
    bottom: 16px;
}

.srd-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.srd-slider .swiper-pagination-bullet-active {
    background: var(--srd-slider-accent);
    transform: scale(1.3);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .srd-slide__content {
        padding: 0 24px;
    }

    /* Opt-in via the "Hide body text on mobile" slider setting */
    .srd-slider--hide-body-mobile .srd-slide__body {
        display: none;
    }

    .srd-slider .swiper-button-prev,
    .srd-slider .swiper-button-next {
        width: 38px;
        height: 38px;
    }

    .srd-slider .swiper-button-prev::after,
    .srd-slider .swiper-button-next::after {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .srd-slide__buttons {
        flex-direction: column;
        align-items: center;
    }

    .srd-slide__btn {
        width: 100%;
        max-width: 260px;
        text-align: center;
    }
}

/* ── Content animations ─────────────────────────────────────────────────── */

/* Wrappers for custom HTML buttons — display:inline-block so transforms work */
.srd-slide__btn-1-html-wrap,
.srd-slide__btn-2-html-wrap {
    display: inline-block;
}

/* Hide each element while its own animation class is active */
[class*="srd-title-anim-"] .srd-slide__title                       { opacity: 0; }
[class*="srd-body-anim-"]  .srd-slide__body                        { opacity: 0; }
[class*="srd-btn1-anim-"]  .srd-slide__btn:not(.srd-slide__btn--secondary) { opacity: 0; }
[class*="srd-btn1-anim-"]  .srd-slide__btn-1-html-wrap             { opacity: 0; }
[class*="srd-btn2-anim-"]  .srd-slide__btn--secondary              { opacity: 0; }
[class*="srd-btn2-anim-"]  .srd-slide__btn-2-html-wrap             { opacity: 0; }

/* animation shorthand: name  duration               easing  delay                  fill */

/* Title */
.srd-title-anim-fade-up   .swiper-slide-active .srd-slide__title { animation: srd-fade-up   var(--srd-title-dur,.65s) ease var(--srd-title-del,0s) forwards; }
.srd-title-anim-fade-in   .swiper-slide-active .srd-slide__title { animation: srd-fade-in   var(--srd-title-dur,.65s) ease var(--srd-title-del,0s) forwards; }
.srd-title-anim-fade-down .swiper-slide-active .srd-slide__title { animation: srd-fade-down var(--srd-title-dur,.65s) ease var(--srd-title-del,0s) forwards; }
.srd-title-anim-zoom-in   .swiper-slide-active .srd-slide__title { animation: srd-zoom-in   var(--srd-title-dur,.65s) ease var(--srd-title-del,0s) forwards; }

/* Body */
.srd-body-anim-fade-up   .swiper-slide-active .srd-slide__body { animation: srd-fade-up   var(--srd-body-dur,.65s) ease var(--srd-body-del,.15s) forwards; }
.srd-body-anim-fade-in   .swiper-slide-active .srd-slide__body { animation: srd-fade-in   var(--srd-body-dur,.65s) ease var(--srd-body-del,.15s) forwards; }
.srd-body-anim-fade-down .swiper-slide-active .srd-slide__body { animation: srd-fade-down var(--srd-body-dur,.65s) ease var(--srd-body-del,.15s) forwards; }
.srd-body-anim-zoom-in   .swiper-slide-active .srd-slide__body { animation: srd-zoom-in   var(--srd-body-dur,.65s) ease var(--srd-body-del,.15s) forwards; }

/* Button 1 */
.srd-btn1-anim-fade-up   .swiper-slide-active .srd-slide__btn:not(.srd-slide__btn--secondary) { animation: srd-fade-up   var(--srd-btn1-dur,.65s) ease var(--srd-btn1-del,.3s) forwards; }
.srd-btn1-anim-fade-in   .swiper-slide-active .srd-slide__btn:not(.srd-slide__btn--secondary) { animation: srd-fade-in   var(--srd-btn1-dur,.65s) ease var(--srd-btn1-del,.3s) forwards; }
.srd-btn1-anim-fade-down .swiper-slide-active .srd-slide__btn:not(.srd-slide__btn--secondary) { animation: srd-fade-down var(--srd-btn1-dur,.65s) ease var(--srd-btn1-del,.3s) forwards; }
.srd-btn1-anim-zoom-in   .swiper-slide-active .srd-slide__btn:not(.srd-slide__btn--secondary) { animation: srd-zoom-in   var(--srd-btn1-dur,.65s) ease var(--srd-btn1-del,.3s) forwards; }

/* Button 1 — custom HTML wrapper */
.srd-btn1-anim-fade-up   .swiper-slide-active .srd-slide__btn-1-html-wrap { animation: srd-fade-up   var(--srd-btn1-dur,.65s) ease var(--srd-btn1-del,.3s) forwards; }
.srd-btn1-anim-fade-in   .swiper-slide-active .srd-slide__btn-1-html-wrap { animation: srd-fade-in   var(--srd-btn1-dur,.65s) ease var(--srd-btn1-del,.3s) forwards; }
.srd-btn1-anim-fade-down .swiper-slide-active .srd-slide__btn-1-html-wrap { animation: srd-fade-down var(--srd-btn1-dur,.65s) ease var(--srd-btn1-del,.3s) forwards; }
.srd-btn1-anim-zoom-in   .swiper-slide-active .srd-slide__btn-1-html-wrap { animation: srd-zoom-in   var(--srd-btn1-dur,.65s) ease var(--srd-btn1-del,.3s) forwards; }

/* Button 2 */
.srd-btn2-anim-fade-up   .swiper-slide-active .srd-slide__btn--secondary { animation: srd-fade-up   var(--srd-btn2-dur,.65s) ease var(--srd-btn2-del,.45s) forwards; }
.srd-btn2-anim-fade-in   .swiper-slide-active .srd-slide__btn--secondary { animation: srd-fade-in   var(--srd-btn2-dur,.65s) ease var(--srd-btn2-del,.45s) forwards; }
.srd-btn2-anim-fade-down .swiper-slide-active .srd-slide__btn--secondary { animation: srd-fade-down var(--srd-btn2-dur,.65s) ease var(--srd-btn2-del,.45s) forwards; }
.srd-btn2-anim-zoom-in   .swiper-slide-active .srd-slide__btn--secondary { animation: srd-zoom-in   var(--srd-btn2-dur,.65s) ease var(--srd-btn2-del,.45s) forwards; }

/* Button 2 — custom HTML wrapper */
.srd-btn2-anim-fade-up   .swiper-slide-active .srd-slide__btn-2-html-wrap { animation: srd-fade-up   var(--srd-btn2-dur,.65s) ease var(--srd-btn2-del,.45s) forwards; }
.srd-btn2-anim-fade-in   .swiper-slide-active .srd-slide__btn-2-html-wrap { animation: srd-fade-in   var(--srd-btn2-dur,.65s) ease var(--srd-btn2-del,.45s) forwards; }
.srd-btn2-anim-fade-down .swiper-slide-active .srd-slide__btn-2-html-wrap { animation: srd-fade-down var(--srd-btn2-dur,.65s) ease var(--srd-btn2-del,.45s) forwards; }
.srd-btn2-anim-zoom-in   .swiper-slide-active .srd-slide__btn-2-html-wrap { animation: srd-zoom-in   var(--srd-btn2-dur,.65s) ease var(--srd-btn2-del,.45s) forwards; }

/* Keyframes */
@keyframes srd-fade-up   { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes srd-fade-in   { from { opacity:0; }                             to { opacity:1; } }
@keyframes srd-fade-down { from { opacity:0; transform:translateY(-28px);} to { opacity:1; transform:translateY(0); } }
@keyframes srd-zoom-in   { from { opacity:0; transform:scale(0.82); }      to { opacity:1; transform:scale(1); } }