/*
 * Sparrow ACF Slider — Frontend Styles v2.3.0
 * ============================================================================
 *
 * Changes from v2.2.0:
 *   - Padding removed from .sparrow-slide__content (now set inline from ACF).
 *   - text-align on heading/body now set inline from ACF alignment fields.
 *   - align-self on button now set inline from ACF alignment field.
 *   - No other structural changes — animation system unchanged.
 */

/* ============================================================================
   1. Wrapper
   ========================================================================== */

.sparrow-slider {
    position: relative;
    width: 100%;
}

/* ============================================================================
   2. Splide track, list, slides
   ========================================================================== */

.sparrow-slider .splide__track {
    height: 100%;
    overflow: hidden;
}

.sparrow-slider .splide__list {
    height: 100%;
}

.sparrow-slider .splide__slide,
.sparrow-slider .sparrow-slide {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ============================================================================
   3. Background image
   ========================================================================== */

.sparrow-slider .sparrow-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    max-height: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   4. Overlay
   ========================================================================== */

.sparrow-slider .sparrow-slide__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================================
   5. Content wrapper + position variants
   NOTE: padding is set INLINE from the ACF padding fields — not here.
   ========================================================================== */

.sparrow-slider .sparrow-slide__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* padding set inline: padding: {v} {h} from ACF fields */
}

/* All 9 position variants */
.sparrow-slide__content--top-left      { justify-content: flex-start; align-items: flex-start; }
.sparrow-slide__content--top-center    { justify-content: flex-start; align-items: center;     }
.sparrow-slide__content--top-right     { justify-content: flex-start; align-items: flex-end;   }
.sparrow-slide__content--middle-left   { justify-content: center;     align-items: flex-start; }
.sparrow-slide__content--middle-center { justify-content: center;     align-items: center;     }
.sparrow-slide__content--middle-right  { justify-content: center;     align-items: flex-end;   }
.sparrow-slide__content--bottom-left   { justify-content: flex-end;   align-items: flex-start; }
.sparrow-slide__content--bottom-center { justify-content: flex-end;   align-items: center;     }
.sparrow-slide__content--bottom-right  { justify-content: flex-end;   align-items: flex-end;   }

/* ============================================================================
   6. Container — centered column, max-width + padding set inline from ACF
   ========================================================================== */

.sparrow-slider .sparrow-slide__container {
    width: 100%;
    /* max-width and padding set inline from ACF fields */
    /* margin: auto centers the container within the flex content area,
       regardless of the position class's align-items value */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ============================================================================
   6b. Inner column — text max-width set inline from ACF field
   ========================================================================== */

.sparrow-slider .sparrow-slide__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* max-width set inline from ACF field */
}

/* ============================================================================
   7. Heading
   color, font-size, font-weight, text-align all set inline from ACF fields.
   ========================================================================== */

.sparrow-slider .sparrow-slide__heading {
    margin: 0 0 0.5em;
    line-height: 1.15;
    /* Defaults — overridden inline when ACF fields are set */
    font-size: clamp(1.6rem, 4vw, 3.5rem);
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    /* text-align set inline from ACF heading_align field */
}

/* ============================================================================
   8. Body text
   color, font-size, font-weight, text-align all set inline from ACF fields.
   ========================================================================== */

.sparrow-slider .sparrow-slide__body {
    margin: 0 0 1.25em;
    line-height: 1.65;
    /* Defaults — overridden inline */
    font-size: clamp(0.95rem, 2vw, 1.25rem);
    font-weight: 400;
    color: #ffffff;
    /* text-align set inline from ACF body_align field */
}

/* ============================================================================
   9. CTA Button — three style variants via CSS custom properties + class
   align-self and text-align set inline from ACF button_align field.
   ========================================================================== */

.sparrow-slider .sparrow-slide__button {
    display: inline-block;
    padding: 0.7em 2.2em;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    /* align-self set inline from button_align → flex-start / center / flex-end */
    border-radius: var(--btn-radius, 4px);
}

.sparrow-slider .sparrow-slide__button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* Outlined */
.sparrow-slider .sparrow-slide__button--outlined {
    background-color: transparent;
    color: var(--btn-color, #ffffff);
    border: 2px solid var(--btn-border, #ffffff);
}
.sparrow-slider .sparrow-slide__button--outlined:hover {
    background-color: var(--btn-bg, rgba(255,255,255,0.15));
}

/* Solid */
.sparrow-slider .sparrow-slide__button--solid {
    background-color: var(--btn-bg, #ffffff);
    color: var(--btn-color, #111111);
    border: 2px solid var(--btn-bg, #ffffff);
}
.sparrow-slider .sparrow-slide__button--solid:hover {
    opacity: 0.85;
}

/* Text / Link */
.sparrow-slider .sparrow-slide__button--text-link {
    background: none;
    border: none;
    padding-left: 0;
    padding-right: 0;
    color: var(--btn-color, #ffffff);
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.sparrow-slider .sparrow-slide__button--text-link:hover {
    opacity: 0.75;
}

/* ============================================================================
   10. Navigation arrows
   ========================================================================== */

.sparrow-slider .splide__arrow {
    background: rgba(0,0,0,0.35);
    opacity: 1;
    transition: background-color 0.2s ease;
    width: 3rem;
    height: 3rem;
}
.sparrow-slider .splide__arrow:hover,
.sparrow-slider .splide__arrow:focus-visible {
    background: rgba(0,0,0,0.6);
}
.sparrow-slider .splide__arrow svg {
    fill: #ffffff;
    width: 1.1em;
    height: 1.1em;
}

/* ============================================================================
   11. Pagination dots
   ========================================================================== */

.sparrow-slider .splide__pagination { bottom: 1rem; z-index: 3; }

.sparrow-slider .splide__pagination__page {
    background: rgba(255,255,255,0.5);
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.sparrow-slider .splide__pagination__page.is-active {
    background: #ffffff;
    transform: scale(1.3);
}

/* ============================================================================
   12. Entrance animations
   Elements start invisible; JS adds .sparrow-anim--playing when slide is active.
   animation-delay is set inline from ACF delay fields.
   ========================================================================== */

.sparrow-slider .sparrow-anim { opacity: 0; }

.sparrow-slider .sparrow-anim.sparrow-anim--playing[data-anim="fade-in"]     { animation: sparrowFadeIn   0.7s ease both; }
.sparrow-slider .sparrow-anim.sparrow-anim--playing[data-anim="slide-up"]    { animation: sparrowSlideUp  0.7s ease both; }
.sparrow-slider .sparrow-anim.sparrow-anim--playing[data-anim="slide-down"]  { animation: sparrowSlideDown 0.7s ease both; }
.sparrow-slider .sparrow-anim.sparrow-anim--playing[data-anim="slide-left"]  { animation: sparrowSlideLeft 0.7s ease both; }
.sparrow-slider .sparrow-anim.sparrow-anim--playing[data-anim="slide-right"] { animation: sparrowSlideRight 0.7s ease both; }
.sparrow-slider .sparrow-anim.sparrow-anim--playing[data-anim="zoom-in"]     { animation: sparrowZoomIn   0.7s ease both; }

@keyframes sparrowFadeIn    { from{opacity:0}                            to{opacity:1} }
@keyframes sparrowSlideUp   { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes sparrowSlideDown { from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)} }
@keyframes sparrowSlideLeft { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes sparrowSlideRight{ from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)} }
@keyframes sparrowZoomIn    { from{opacity:0;transform:scale(0.85)}      to{opacity:1;transform:scale(1)}     }

/* ============================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .sparrow-slider .splide__arrow { width: 2.25rem; height: 2.25rem; }
}