/* ==========================================================================
   HERO BANNER SLIDER
   ========================================================================== */

.verdora-hero { position: relative; }

.verdora-hero__slider {
    position: relative;
    min-height: clamp(420px, 70vh, 720px);
    overflow: hidden;
}

.verdora-hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-standard);
}
.verdora-hero__slide:not([hidden]) { opacity: 1; position: relative; }
.verdora-hero__slide[hidden] { display: block; opacity: 0; pointer-events: none; }

.verdora-hero__media { position: absolute; inset: 0; z-index: 0; }
.verdora-hero__image { width: 100%; height: 100%; object-fit: cover; }
.verdora-hero__image--placeholder {
    background: linear-gradient(135deg, var(--verdora-mist), var(--verdora-clay-pink));
}
/* Soft gradient so light-colored heading text stays legible over any photo */
.verdora-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(31,46,35,0.55) 0%, rgba(31,46,35,0.05) 55%, transparent 75%);
}

.verdora-hero__content {
    position: relative;
    z-index: 1;
    padding-bottom: var(--space-9);
    color: var(--verdora-white);
    max-width: 640px;
}
.verdora-hero__heading { color: var(--verdora-white); }
.verdora-hero__subheading { font-size: 1.125rem; opacity: 0.92; max-width: 480px; }

.verdora-hero__dots {
    position: absolute;
    bottom: var(--space-5);
    right: var(--container-pad);
    z-index: 2;
    display: flex;
    gap: var(--space-2);
}
.verdora-hero__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--verdora-white);
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.verdora-hero__dot[aria-selected="true"] { background: var(--verdora-white); }

/* Scroll-reveal: elements with this class fade/rise in once .is-visible is toggled by core.js's IntersectionObserver */
.verdora-fade-in-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}
.verdora-fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
    .verdora-hero__slider { min-height: 520px; }
    .verdora-hero__content { padding-bottom: var(--space-7); max-width: 100%; }
}