/* ============================================================
   HOMEPAGE HERO SLIDER
   4 slides, each with its own message, CTAs, and artwork.
   Image layering per slide: your JPG (if present) covers the
   built-in SVG scene. Drop JPGs into /assets/images/hero/
   (see README-IMAGES.txt) - no code changes needed.
   ============================================================ */

.hero-slider {
    position: relative;
    min-height: calc(100vh - 122px);
    overflow: hidden;
    background: #2A0E45;
}

.hero-slides {
    position: absolute;
    inset: 0;
}

/* ---------- Slides ---------- */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.1s ease;
}

.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.hero-slide .slide-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.hero-slide.active .slide-img {
    animation: kenBurns 9s ease-out forwards;
}

@keyframes kenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

/* Per-slide artwork: JPG first (yours), SVG scene as the base layer */
.slide-worship .slide-img {
    background-image: url('/assets/images/hero/hero-worship.jpg'), url('/assets/images/hero/hero-worship.svg');
}

.slide-prayer .slide-img {
    background-image: url('/assets/images/hero/hero-prayer.jpg'), url('/assets/images/hero/hero-prayer.svg');
}

.slide-family .slide-img {
    background-image: url('/assets/images/hero/hero-family.jpg'), url('/assets/images/hero/hero-family.svg');
}

.slide-community .slide-img {
    background-image: url('/assets/images/hero/hero-community.jpg'), url('/assets/images/congregacion1.jpg');
}

/* Per-slide veil for text contrast (inside each slide) */
.slide-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(26, 10, 40, 0.62) 0%, rgba(26, 10, 40, 0.34) 55%, rgba(26, 10, 40, 0.18) 100%);
    pointer-events: none;
}

.slide-veil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
}

/* ---------- Captions (unique per slide) ---------- */
.slide-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    z-index: 2;
}

.slide-caption .container {
    width: 100%;
}

.slide-caption .hero-label,
.slide-caption .hero-title,
.slide-caption .hero-subtitle,
.slide-caption .hero-buttons {
    opacity: 0;
}

.hero-slide.active .slide-caption .hero-label {
    animation: capUp 0.7s ease 0.15s both;
}

.hero-slide.active .slide-caption .hero-title {
    animation: capUp 0.7s ease 0.3s both;
}

.hero-slide.active .slide-caption .hero-subtitle {
    animation: capUp 0.7s ease 0.45s both;
}

.hero-slide.active .slide-caption .hero-buttons {
    animation: capUp 0.7s ease 0.6s both;
}

@keyframes capUp {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-caption .hero-label {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #F5C36B;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 1.5px;
    margin-bottom: 22px;
}

.slide-caption .hero-title {
    font-family: var(--font-display);
    font-size: 4.2rem;
    font-weight: 800;
    color: white;
    line-height: 1.08;
    margin-bottom: 20px;
    max-width: 760px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.slide-caption .hero-subtitle {
    font-size: 1.22rem;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 640px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.slide-caption .hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---------- Arrows ---------- */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.06);
}

.slider-arrow svg {
    width: 22px;
    height: 22px;
}

.slider-prev { left: 24px; }
.slider-next { right: 24px; }

/* ---------- Dots ---------- */
.slider-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 10px;
}

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

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.slider-dot.active {
    background: #F5C36B;
    width: 30px;
    border-radius: 6px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: opacity 0.3s ease; }
    .hero-slide.active .slide-img { animation: none; }
    .hero-slide.active .slide-caption .hero-label,
    .hero-slide.active .slide-caption .hero-title,
    .hero-slide.active .slide-caption .hero-subtitle,
    .hero-slide.active .slide-caption .hero-buttons {
        animation: none;
        opacity: 1;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .slide-caption .hero-title { font-size: 3.3rem; }
}

@media (max-width: 768px) {
    .hero-slider {
        min-height: calc(100vh - 112px);
    }

    .slide-veil {
        background: linear-gradient(180deg, rgba(26, 10, 40, 0.45) 0%, rgba(26, 10, 40, 0.62) 100%);
    }

    .slide-caption .hero-title { font-size: 2.4rem; }
    .slide-caption .hero-subtitle { font-size: 1.05rem; margin-bottom: 28px; }
    .slide-caption .hero-buttons { flex-direction: column; }

    .slider-arrow {
        width: 42px;
        height: 42px;
    }

    .slider-prev { left: 12px; }
    .slider-next { right: 12px; }
}

@media (max-width: 480px) {
    .slide-caption .hero-title { font-size: 2rem; }
    .slider-arrow { display: none; }
    .slider-dots { bottom: 20px; }
}