/* ==========================================================================
   Hero Component
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-background-warm);
}

.hero--large {
    min-height: 80vh;
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-5xl);
}

.hero--standard {
    min-height: 40vh;
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}

/* ---- Background Image ---- */
.hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Subtle blur to improve text contrast over the background image */
    filter: blur(3px);
    /* Prevent blurred edges from showing a gap */
    transform: scale(1.02);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-overlay);
    z-index: 1;
}

/* ---- Content ----
   Increased the max-width on the large hero so long, keyword-rich H1s
   (e.g. "Non-Surgical Reconstructive Care for Moms, Kids & Active Adults
   in Elmhurst") wrap onto fewer lines and grow horizontally instead of
   stacking vertically. The cap is wide enough for big screens yet still
   bound by the .container so it never blows past the page gutters. */
.hero__content {
    position: relative;
    z-index: 2;
    max-width: 72rem;
}

.hero--large .hero__content {
    max-width: 96rem;
}

/* Centered variant — used on Services page hero */
.hero--centered .hero__content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero--centered .hero__actions {
    justify-content: center;
}

.hero--centered .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* Hero label — small uppercase text above the heading */
.hero__label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    margin-bottom: var(--space-md);
}

.hero--has-image .hero__label {
    color: var(--color-white);
}

/* With background image → white text */
.hero--has-image .hero__title,
.hero--has-image .hero__subtitle {
    color: var(--color-white);
}

.hero__title {
    /* Fluid type: scales smoothly from ~18px on 320px screens up to 48px before
       the tablet breakpoint takes over. The lower bound + `overflow-wrap: anywhere`
       guarantees that long compound words (e.g. "Reconstructive") never overflow
       the viewport on the smallest supported phones. */
    font-size: clamp(1.8rem, 5.6vw, var(--fs-4xl));
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-md);
    /* `anywhere` is more aggressive than `break-word` and will break inside a
       long word as a last resort, which is exactly what we want at 320px. */
    overflow-wrap: anywhere;
    word-wrap: break-word;
    hyphens: auto;
}

.hero__subtitle {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    max-width: 60rem;
}

.hero--has-image .hero__subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* Subtitle centering in centered variant is handled by .hero--centered rule above */

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 768px) {
    .hero--large {
        min-height: 85vh;
    }

    .hero__title {
        font-size: var(--fs-5xl);
    }

    .hero__subtitle {
        font-size: var(--fs-lg);
    }
}

@media (min-width: 1024px) {
    .hero__title {
        font-size: var(--fs-hero);
    }

    .hero__subtitle {
        font-size: var(--fs-xl);
    }
}