/**
 * Axis Mental Health - Homepage Hero Section Styles
 * 
 * UNIQUE HOMEPAGE DESIGN:
 * - Large full-viewport hero (500-700px)
 * - Background image with custom gradient overlay
 * - Three badge pills (Location, Telehealth, Hours)
 * - Centered layout with curved bottom
 * 
 * Mobile-first responsive design with fluid typography
 * All values use CSS variables from styles.css
 */

/* ==========================================================================
   Homepage Hero Container
   ========================================================================== */

.home-hero {
    min-height: clamp(500px, 80vh, 700px);
    display: flex;
    align-items: center;
    position: relative;
    /* Increased top padding for better spacing */
    padding: clamp(120px, 15vh, 160px) 0 clamp(40px, 8vh, 60px);
    border-bottom-left-radius: 50% 30px;
    border-bottom-right-radius: 50% 30px;
    overflow: hidden;
    margin-bottom: 0;
}

/* Background image element - editable in WordPress */
.home-hero .hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Gradient overlay on section - Subtle darkening for text readability */
.home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(to right, rgba(10, 20, 35, 0.50), rgba(10, 20, 35, 0.65)),
        var(--axis-gradient-overlay-dark);
    z-index: 1;
    pointer-events: none;
}

/* Ensure content is above image and overlay */
.home-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-hero .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(300px, 50vh, 400px);
    width: 100%;
}

.home-hero .hero-text {
    /* Use global hero-content-wrap utility for width/centering */
    text-align: center;
}

/* ==========================================================================
   Typography - Mobile-First with Fluid Scaling
   ========================================================================== */

.home-hero .hero-title {
    /* Fluid typography: 48px (mobile) → 64px (desktop) */
    font-size: clamp(48px, 10vw, 64px);
    font-weight: var(--axis-font-extrabold);
    font-family: var(--axis-font-family);
    color: var(--axis-white);
    line-height: var(--axis-line-height-tight);
    margin-bottom: var(--axis-space-6);
    text-align: center;
    letter-spacing: -0.01em;
}

.home-hero .hero-subtitle {
    /* Fluid typography: 16px (mobile) → 20px (desktop) - INCREASED for hierarchy */
    font-size: clamp(16px, 3.5vw, 20px);
    color: var(--axis-white);
    /* Improved line-height for better readability relative to hero size */
    line-height: 1.65;
    margin-bottom: var(--axis-space-7);
    /* Reduced max-width for optimal readability (45-75 chars per line) */
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    opacity: 0.96;
    font-weight: var(--axis-font-medium);
}

/* ==========================================================================
   Hero Pill Bar - Location, Telehealth, Hours
   ========================================================================== */

.home-hero .hero-pill-bar {
    display: inline-flex;
    align-items: center;
    /* Increased gap between pills for breathing room */
    gap: 12px;
    /* Subtle background - less prominent to avoid nav appearance */
    background: rgba(30, 42, 56, 0.45);
    backdrop-filter: blur(12px);
    border-radius: 50px;
    padding: 6px 10px;
    /* INCREASED spacing from subtitle - prevents cramped feeling */
    margin: clamp(32px, 6vh, 48px) auto 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Softer shadow - less competing with headline */
    /* box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2); */
}

.home-hero .hero-pill {
    display: flex;
    align-items: center;
    /* Consistent gap between icon and text */
    /* gap: 10px; */
    /* Uniform padding - fixes height variation issue */
    padding-right: 18px;
    color: var(--axis-white);
    /* Smaller font size to clearly distinguish from headline */
    font-size: var(--axis-text-sm);
    font-weight: 500;
    white-space: nowrap;
    position: relative;
}

/* Icon styling - Bricks Icon elements */
.home-hero .hero-pill .pill-icon {
    /* Consistent icon size across all pills */
    font-size: 18px;
    line-height: 1;
    /* Fix vertical alignment - icons now centered perfectly */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Text styling */
.home-hero .hero-pill .pill-text {
    margin: 0;
    /* Align baselines properly */
    line-height: 1.3;
    display: flex;
    align-items: center;
}

/* Individual pill icon colors */
.home-hero .pill-location .pill-icon {
    color: var(--axis-accent);
    /* orange */
}

.home-hero .pill-telehealth .pill-icon {
    color: #4FC3F7;
    /* light blue */
}

.home-hero .pill-hours .pill-icon {
    color: #FFD54F;
    /* gold */
}

/* Dividers between pills */
.home-hero .hero-pill:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile: Stack pills vertically */
@media (max-width: 768px) {
    .home-hero .hero-pill-bar {
        flex-direction: column;
        border-radius: 20px;
        padding: 2px 6px;
        gap: 2px;
        margin: var(--axis-space-8) var(--axis-space-6);
    }

    .home-hero .hero-pill {
        /* padding: 10px 16px; */
        /* justify-content: center; */
        width: 100%;
    }

    .home-hero .hero-pill:not(:last-child)::after {
        content: none;
    }

    .home-hero .hero-pill:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
}

/* ==========================================================================
   Responsive Enhancement (Desktop Only)
   ========================================================================== */

/* Desktop: Left-align text for better scanning */
@media (min-width: 992px) {
    .home-hero .hero-text {
        padding: 0;
    }
}

/* ==========================================================================
   Reduced Motion Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .home-hero .hero-pill-bar {
        /* Avoid heavy blur for users preferring reduced motion/effects */
        backdrop-filter: none;
        transition: none;
    }

    .home-hero,
    .home-hero .hero-pill {
        transition: none;
    }
}