/* === Front Page Hero Background Update === */
/* Component-scoped hero styles: background image + left-aligned content with overlay */

.hero-section {
    position: relative;
    width: 100%;
    min-height: 90vh; /* tall hero on desktop */
    padding: 6rem 2rem; /* desktop padding: 6rem top/bottom, 2rem sides */
    /* Use a theme-relative path without hardcoding the theme folder name */
    background-image: url('../../assets/images/hero.png');
    background-size: cover; /* default large-screen behavior */
    background-position: 70% center; /* keep person visible on right for desktop */
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: flex-start; /* left align on wide screens */
    color: #fff;
    overflow: hidden; /* prevent horizontal scroll */
    box-sizing: border-box;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25); /* subtle overlay for contrast */
    z-index: 1;
    pointer-events: none;
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.hero-content {
    width: 64%; /* tighter measure to help the headline stay ~1.5 lines */
    max-width: 820px;
    margin-left: 6%;
    z-index: 2;
}

.hero-content h1 {
    /* responsive scaling tuned so the heading stays within two lines on all viewports */
    font-size: clamp(1.4rem, 3.2vw, 2.6rem);
    line-height: 1.08; /* slightly looser to improve readability while keeping two-line target */
    margin: 0 0 0.85rem 0;
    /* use ch unit to better control the measure (approx. characters per line) */
    max-width: 52ch; /* tuned to make the specific title wrap into two lines */
    width: 100%;
    color: #ffffff;
    text-shadow: 0 6px 18px rgba(0,0,0,0.35);
    font-weight: 700;
    transform: translateY(-6px);
    overflow-wrap: break-word;
    word-break: normal;
}

/* keep inline spans for natural wrap control */
.hero-content h1 .h1-line-1,
.hero-content h1 .h1-line-2 { display: inline; }

.hero-content .hero-subtitle {
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    margin-bottom: 1.2rem;
    color: rgba(255,255,255,0.95);
    max-width: 60ch; /* control measure so subtitle wraps into 2-3 readable lines */
    line-height: 1.35;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap; /* allow buttons to wrap on very small widths without causing overflow */
}

.hero-buttons .btn { display: inline-flex; align-items: center; white-space: nowrap; }

/* Make sure button text does not break; allow slight padding reduction on smaller viewports */
.hero-buttons a, .hero-buttons button {
    white-space: nowrap;
    min-width: 0; /* avoid intrinsic min-width forcing overflow */
    padding: clamp(0.55rem, 1.2vw, 0.85rem) 1.2rem;
    box-sizing: border-box;
}

/* Tablet: center content, reduce padding */
@media (max-width: 992px) {
    .hero-section { min-height: 72vh; padding: 5rem 1.5rem; }
    .hero-content { width: 84%; margin-left: auto; margin-right: auto; text-align: center; }
    .hero-content h1 { max-width: 100%; }
    .hero-buttons { justify-content: center; }
}

/* Mobile small: ensure person stays visible, use contain to avoid cropping of subject and reposition background */
@media (max-width: 768px) {
    /* Mobile-specific typography tweaks requested: keep H1 at ~1.5 lines and subtitle at 2 lines */
    /* === Front Page Hero — production-grade responsive rules ===
       Goals:
       - Keep background flexible (cover) and subject visible on the right.
       - Ensure the main title displays in ~1.5–2 lines (never more than 2).
       - Ensure the subtitle stays within 2–3 readable lines.
       - Keep CTAs visible and never cropped; allow wrap without overflow.
       Notes: These rules use fluid typography (clamp), flexbox and safe box-sizing
       practices and are scoped to the hero component to avoid global side-effects.
    */

    .hero-section {
            position: relative;
            width: 100%;
            /* fluid vertical spacing: at least 6rem on large screens, smaller on mobile */
            padding: clamp(2.5rem, 6vw, 6rem) 1rem;
            display: flex;
            align-items: center; /* vertical centering */
            justify-content: center; /* center content block — visually balanced */
            color: #fff;
            box-sizing: border-box;
            overflow: hidden; /* prevent any child from creating horizontal scroll */
            /* Background: keep flexible and focused to the right where the subject is */
            /* Mobile: use a relative path to the hero image maintained inside the theme */
            background-image: url('../../assets/images/hero.png');
            background-repeat: no-repeat;
            background-position: 70% center;
            background-size: cover; /* fill container while preserving aspect ratio */
        }

        .hero-section::before {
            /* subtle overlay for text contrast; pointer-events:none so it doesn't block clicks */
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.22);
            z-index: 1;
            pointer-events: none;
        }

        /* Inner container that constrains measure for readable lines while staying fluid */
        .hero-container {
            position: relative;
            z-index: 2;
            width: min(1100px, 92%); /* fluid max width */
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        .hero-content {
            width: 100%;
            max-width: 760px; /* prevents extremely long measure on very large screens */
            margin: 0 auto;
            text-align: center; /* center the text block — works well with centered hero */
            box-sizing: border-box;
        }

        /* Make hero-content a column flex container so we can vertically distribute
           the text group and the buttons independently. This avoids changing markup
           order while allowing the text to be nudged down without overlap. */
        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* Main title: fluid sizing but constrained measure so it wraps into two lines predictably */
        .hero-title {
            display: block;
            font-weight: 700;
            color: #ffffff;
            text-shadow: 0 6px 18px rgba(0,0,0,0.35);
            /* fluid font-size: scales with viewport but stays within sensible bounds */
            font-size: clamp(1.4rem, 3.2vw, 2.6rem);
            line-height: 1.06; /* slightly tight to produce ~1.5 visual lines */
            margin: 0 0 0.85rem 0;
            /* measure control: use ch (character units) to tune wrapping for this specific sentence */
            max-width: 48ch; /* tuned for the provided French sentence to occupy ~2 lines */
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            overflow-wrap: break-word;
            hyphens: auto;
            /* Experimental: use balanced wrapping where supported */
            text-wrap: balance;
        }

        /* Text group wrapper: nudge downward slightly so title isn't cut off on mobile
           and so the visual centering is improved. Use viewport-based translate so
           the offset scales between devices. */
        .hero-text {
            width: 100%;
            box-sizing: border-box;
            /* small downward offset from center. tuned to avoid cutting off ascenders */
            transform: translateY(5vh);
            /* allow the transform to be smooth but not required */
        }

        /* Subheading: fluid, readable and limited measure to 2-3 lines */
        .hero-subtitle {
            font-size: clamp(0.95rem, 2.2vw, 1.15rem);
            line-height: 1.35;
            margin: 0 0 1.25rem 0;
            color: rgba(255,255,255,0.95);
            max-width: 60ch; /* keeps subtitle compact and readable */
            margin-left: auto;
            margin-right: auto;
            hyphens: auto;
        }

        /* CTAs — keep them visible and on one line each; allow the group to wrap without overflow */
        .hero-buttons {
            display: flex;
            gap: 1rem;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap; /* allow second button to drop under if space is narrow */
        }

        .hero-buttons .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap; /* prevent label breaking */
            min-width: 0; /* allow shrinking below intrinsic content width if needed */
            padding: clamp(0.55rem, 1.2vw, 0.9rem) clamp(1rem, 2.6vw, 2.2rem);
            border-radius: 9999px; /* pill look, matches site style */
            box-sizing: border-box;
        }

        /* Position the button group slightly lower so it doesn't overlap the text.
           Use margin-top instead of absolute positioning to keep layout flow intact. */
        .hero-buttons {
            margin-top: clamp(0.75rem, 3vh, 2.5rem);
            padding-bottom: env(safe-area-inset-bottom, 0); /* respect iPhone home indicator */
        }

        /* MOBILE / SMALL DEVICES: tightened rules to avoid cropping and overflow
           - background-position nudged right so subject remains visible
           - ensure containers never exceed viewport width
        */
            .hero-section {
                padding: clamp(2rem, 6vw, 4rem) 0.75rem;
                background-position: 80% center; /* keep the person visible on the right */
                background-size: cover; /* ensure full-bleed background, prevents layout jumps */
            }

            .hero-container,
            .hero-content {
                width: 100%;
                max-width: 100%;
                padding-left: 1rem;
                padding-right: 1rem;
            }

            /* Slightly reduce the title so it fits nicely in two lines on small screens */
            .hero-title {
                font-size: clamp(1.2rem, 5vw, 2rem);
                line-height: 1.08;
                max-width: 46ch; /* conservative for narrow viewports */
            }

            /* Reduce the downward nudge on small devices so the text remains fully visible
               and doesn't push the buttons off-screen. */
            .hero-text { transform: translateY(3.5vh);
                /* ensure text doesn't run into the absolute-positioned buttons */
                margin-bottom: clamp(2rem, 10vh, 4.5rem);
            }

            .hero-subtitle {
                font-size: clamp(0.9rem, 3.5vw, 1.05rem);
                line-height: 1.4;
                max-width: 44ch;
            }

            .hero-buttons .btn {
                padding: clamp(0.5rem, 1.8vw, 0.8rem) clamp(0.9rem, 3vw, 1.6rem);
            }

            /* Position buttons near the bottom of the hero on mobile only.
               Anchor to the entire hero section (not the text block) so they sit at the
               visual bottom and never overlap the subtitle. We reserve space in the
               text block via padding-bottom to avoid overlap on small screens.
            */
            .hero-section .hero-buttons {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                /* moved further down for small phones; safe-area respected */
                bottom: max(36px, calc(env(safe-area-inset-bottom, 0px) + 20px));
                z-index: 4;
                width: min(92%, 680px);
                justify-content: center;
                gap: 0.75rem;
            }

            /* Ensure the hero-content reserves space at the bottom so the text isn't
               covered by the absolutely positioned buttons. Positioning stays static
               so the buttons anchor to `.hero-section` instead. */
            .hero-content {
                position: static;
                /* Reserve more space so subtitle isn't overlapped by the lower buttons */
                padding-bottom: clamp(4rem, 14vh, 7rem);
            }

            /* defensive: ensure nothing creates horizontal scroll on mobile */
            html, body { overflow-x: hidden; }
        }

        /* Accessibility: reduce motion for users who prefer it */
        @media (prefers-reduced-motion: reduce) {
            .hero-buttons .btn,
            .hero-title { transition: none !important; }
        }

        /* Small fix: ensure any images inside hero (if re-introduced) don't overflow */
        .hero-section img { max-width: 100%; height: auto; display: block; }