/* ============================================================
   HERO REDESIGN  (experiment)
   Centered single-column layout with the image framed as a wide
   banner below the copy. Loaded last so it overrides the base
   styles. Remove this file and its line in includes/inline_styles.php
   to revert.
   ============================================================ */

/* ---- Navbar shares the hero's top color so they blend -------- */
body:has(.home-page) .header {
    background: #f0ecff !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.theme-dark:has(.home-page) .header {
    background: #0f0b20 !important;
    border-bottom-color: transparent !important;
}
/* Remove the white pill behind the nav links so they sit on the lavender */
body:has(.home-page) .nav-links {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---------------- HERO: centered single column -------------- */
.home-page .hero-copy-grid {
    grid-template-columns: minmax(0, 880px) !important;
    justify-content: center !important;
    justify-items: center !important;
    text-align: center !important;
}
.home-page .hero-copy-grid > .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
.home-page .hero-copy:before { align-self: center !important; }
.home-page .hero-copy-grid h1 {
    margin-left: auto !important;
    margin-right: auto !important;
}
.home-page .hero-copy-grid .lead {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 620px !important;
}
.home-page .hero-copy-grid .search {
    width: 100% !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.home-page .home-paths {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero photo removed */
.home-page .hero-photo-card { display: none !important; }

/* ---- AI screening story: line up the two columns' tops ------ */
.home-page .ai-story-grid { align-items: start !important; }
/* Make the eyebrow a block-level pill so it sits flush to the top
   (matching the card), instead of an inline pill with leading above it */
.home-page .ai-story-copy .eyebrow {
    display: flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-top: 0 !important;
}