/**
 * /assets/css/hero-slider.css
 * CLA Hero Slider — native CSS, no library dependencies
 */

/* ── SLIDER WRAPPER ───────────────────────────────────────────────────────── */

/* Ensure ACF block wrapper and WP template part wrapper don't collapse the slider */
.wp-block-acf-hero-slider,
.wp-block-acf-hero-slider > div {
    display: block;
    width: 100%;
}

.cla-hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #1a1a1a;
    border-bottom: 5px solid var(--color-primary, #2e6c3b);
    /* Height set via inline style from ACF — e.g. style="height:80vh;" */
    /* DO NOT set height here — it must come from the inline style */
}

/* ── TRACK ────────────────────────────────────────────────────────────────── */
.cla-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── INDIVIDUAL SLIDE ─────────────────────────────────────────────────────── */
.cla-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* inherits from .cla-slider-track which inherits from .cla-hero-slider inline style */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
    overflow: hidden;
}
/* ── CIRCLES OVERLAY ──────────────────────────────────────────────────────── */
.cla-hero-slider .cla-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url( '../images/bg-transparent-balls.png' );
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    z-index: 4;
    pointer-events: none;
}

.cla-slide--active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* No-JS fallback — first slide always visible before JS initialises */
.cla-hero-slider:not(.cla-slider-ready) .cla-slide:first-child {
    opacity: 1;
    pointer-events: auto;
}

/* Track and slides inherit height from the wrapper's inline style */
.cla-slider-track {
    height: 100%;
}

/* ── PRIMARY BACKGROUND IMAGE ─────────────────────────────────────────────── */
.cla-slide__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    z-index: 1;
}

/* ── SECONDARY DECORATIVE IMAGE ───────────────────────────────────────────── */
.cla-slide__deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 2;
    pointer-events: none;
}

/* ── DARK OVERLAY ─────────────────────────────────────────────────────────── */
.cla-slide__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}


/* ── HEADLINE BLOCK ───────────────────────────────────────────────────────── */
.cla-slide__headline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding-bottom: 60px; /* room for dots */
}

.cla-slide__headline .container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

/* ── CONTENT LEFT: H1 + H2 ────────────────────────────────────────────────── */
.cla-slide__content-left {
    flex: 1;
    max-width: 65%;
}

.cla-slide__h1 {
    font-size: clamp( 2rem, 5vw, 3.75rem );
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    color: #fff;
}

.cla-slide__h1 a {
    color: #fff;
    text-decoration: none;
}

.cla-slide__h2 {
    font-size: clamp( 0.875rem, 1.5vw, 1.0625rem );
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    color: #fff;
}

.cla-slide__h2 a {
    color: #fff;
    text-decoration: none;
}

/* CTA BUTTON WRAPPER */
.cla-slide-cta-wrapper {
	margin-top: 20px;
}

/* CTA button — now a <span> inside the clickable <a> slide wrapper */
.cla-slide__cta {
    display: inline-block;
    padding: 10px 20px;
    line-height: 1.25;
    border: 2px solid #fff;
    border-radius: var(--border-radius, 5px);
    background-color: var(--color-primary, #2e6c3b);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    pointer-events: auto; /* allow independent hover */
    transition: all 0.5s ease-out;
}

.cla-slide__cta:hover,
.cla-slide__cta:focus {
    background-color: #fff;
    border-color: var(--color-primary, #2e6c3b);
    color: var(--color-primary, #2e6c3b);
    scale: 1.15;
}

/* ── DOT PAGINATION ───────────────────────────────────────────────────────── */
.cla-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cla-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease,
                width 0.3s ease,
                height 0.3s ease;
}

.cla-slider-dot--active {
    background-color: var(--color-gold, #f0c31f);
    width: 14px;
    height: 14px;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media only screen and (max-width: 992px) {
    .cla-hero-slider {
        height: 350px !important; /* override inline height on mobile */
    }

    .cla-slide__headline .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .cla-slide__content-left {
        max-width: 100%;
    }

    .cla-slide__h1 {
        font-size: clamp( 1.5rem, 6vw, 2.5rem );
    }

    .cla-slide__h2 {
        font-size: 0.9rem;
    }

    .cla-slide__headline {
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 600px) {
    .cla-hero-slider {
        height: 280px !important;
    }

    .cla-slide__h1 {
        font-size: 1.5rem;
    }

    .cla-slide__h2 {
        display: none; /* hide subtext on very small screens */
    }
}

/* ── EDITOR STYLES ────────────────────────────────────────────────────────── */

/* Prevent double scrollbar — editor adds its own scroll container */
.editor-styles-wrapper .cla-hero-slider {
    overflow: hidden;
    height: auto !important;
}

/* Track height auto in editor */
.editor-styles-wrapper .cla-slider-track {
    height: auto;
}

/* All slides visible and stacked in editor */
.editor-styles-wrapper .cla-slide {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto;
    margin-bottom: 2px;
    min-height: 300px;
}

/* Slide number badge — fully isolated styles */
.editor-styles-wrapper .cla-slide::after {
    content: 'Slide ' counter(slide-counter);
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: sans-serif !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    z-index: 100;
    pointer-events: none;
}

/* Make slide image fill properly in editor */
.editor-styles-wrapper .cla-slide__bg {
    position: relative;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Keep headline positioned at bottom in editor */
.editor-styles-wrapper .cla-slide__headline {
    position: relative;
    bottom: auto;
    padding: 20px 0;
    background: rgba(0,0,0,0.6);
}

/* Dots — static in editor, no absolute positioning */
.editor-styles-wrapper .cla-slider-dots {
    position: relative;
    bottom: auto;
    padding: 10px 0;
    background: rgba(0,0,0,0.4);
}

/* ── Hero Static — shares slider CSS classes ─────────────────────────────── */
/* The .cla-hero-static class inherits all .cla-hero-slider styles above.     */
/* Only differences from the slider are noted here.                            */

.cla-hero-static {
    overflow: hidden;
    position: relative;
}

/* Circles overlay div — mirrors the slider's ::before pseudo-element */
.cla-hero-static .cla-slide__circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* Editor preview */
.editor-styles-wrapper .cla-hero-static .cla-slide__bg {
    position: relative;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.editor-styles-wrapper .cla-hero-static .cla-slide__headline {
    position: relative;
    padding: 20px;
    background: rgba(0,0,0,0.3);
}