/* Hero block — auto-loaded by /inc/blocks.php when this block renders. */

/* ------------------------------------------------------------------
   Defeat the legacy reveal-animation rule from the appended Blocksy
   stylesheet:

     html.mm-js .mm-hero h1 { opacity: 0; transform: translateY(16px); }

   That rule expects `mm-animate.js` to add `.is-visible` — but the
   IntersectionObserver doesn't reliably fire for the very first H1 on the
   page (race with first paint), leaving the headline invisible forever.
   The new Hero block doesn't animate in (it's above the fold), so we just
   pin opacity/transform to their visible values with higher specificity.
   ------------------------------------------------------------------ */
html.mm-js .wp-block-mindmixer-hero .mm-hero__headline,
html.mm-js .wp-block-mindmixer-hero h1 {
    opacity: 1;
    transform: none;
}


.mm-hero {
    position: relative;
    padding: clamp(3rem, 4vw + 1rem, 5.5rem) clamp(1rem, 3vw, 2.5rem);
    overflow: hidden;
}
.mm-hero--bg-light-grey { background: var(--wp--preset--color--light-grey); }
.mm-hero--bg-white      { background: var(--wp--preset--color--mist-0); }
.mm-hero--bg-navy       { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--mist-0); }
.mm-hero--bg-gradient   { background: var(--wp--preset--gradient--hero-navy); color: var(--wp--preset--color--mist-0); }

.mm-hero__inner {
    max-width: var(--wp--style--global--wide-size, 1400px);
    margin: 0 auto;
    display: grid;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}
.mm-hero--layout-split .mm-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.mm-hero--layout-centered .mm-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 720px;
}
@media (max-width: 880px) {
    .mm-hero--layout-split .mm-hero__inner { grid-template-columns: 1fr; }
    /* On mobile the split image stacks under the copy; cap its height so a
       tall illustration doesn't push the CTAs far below the fold. */
    .mm-hero--layout-split .mm-hero__image { max-height: 340px; width: auto; margin: 0 auto; }
}

@media (max-width: 560px) {
    /* Image-free + photo covers: trim the min-height and padding so the hero
       isn't disproportionately tall on phones. */
    .mm-hero--layout-cover { min-height: 0; padding: clamp(2.75rem, 12vw, 4rem) 1rem; }
    .mm-hero--no-image.mm-hero--layout-cover { min-height: 0; }
    /* Stack hero CTAs full-width for comfortable tap targets. */
    .mm-hero__actions { width: 100%; }
    .mm-hero__actions .mm-button { width: 100%; }
}

.mm-hero__eyebrow {
    display: inline-block;
    font-family: var(--wp--preset--font-family--lato);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    background: rgba(0, 30, 102, 0.08);
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}
.mm-hero--bg-navy .mm-hero__eyebrow,
.mm-hero--bg-gradient .mm-hero__eyebrow {
    color: var(--wp--preset--color--mist-0);
    background: rgba(255, 255, 255, 0.16);
}

.mm-hero__headline {
    font-family: var(--wp--preset--font-family--azo-sans);
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    color: inherit;
}
.mm-hero__subhead {
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
    line-height: 1.55;
    max-width: 36ch;
    margin: 0 0 1.5rem;
    color: inherit;
    opacity: 0.92;
}
.mm-hero--layout-centered .mm-hero__subhead { margin-left: auto; margin-right: auto; }

.mm-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.mm-hero--layout-centered .mm-hero__actions { justify-content: center; }

.mm-hero__trust {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    opacity: 0.78;
}
.mm-hero--layout-centered .mm-hero__trust { justify-content: center; }
.mm-hero__trust-item::before {
    content: "✓";
    color: var(--wp--preset--color--orange);
    font-weight: 700;
    margin-right: 0.35rem;
}

.mm-hero__media {
    position: relative;
}
.mm-hero__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.mm-hero__bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    z-index: 0;
}
.mm-hero--layout-centered .mm-hero__inner { position: relative; z-index: 1; }

/* ---------- Cover variant: full-bleed image + gradient overlay ----------
   Stacking order (bottom → top):
     1. .mm-hero__bg-img  — real <img> with fetchpriority="high"
     2. .mm-hero--layout-cover::before  — gradient overlay
     3. .mm-hero__inner   — content (text + buttons)
*/
.mm-hero--layout-cover {
    color: var(--wp--preset--color--mist-0);
    min-height: 540px;
    padding: clamp(4rem, 6vw + 1rem, 7rem) clamp(1rem, 3vw, 2rem);
    position: relative;
    isolation: isolate;
    overflow: hidden;                    /* clip the absolutely-positioned bg-img */
    background: var(--mm-primary, #16243F); /* navy fallback if cover image fails to load */
}
.mm-hero__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.mm-hero--layout-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: var(--mm-hero-overlay-opacity, 0.8);
    background: linear-gradient(135deg, #16243F 0%, #E05300 100%); /* default: navy-orange */
    pointer-events: none;
}
/* All hero overlay variants now use the brand navy → orange gradient.
   Legacy "navy-red" and "red-orange" slugs in migration HTML still resolve
   to the correct brand gradient instead of the old red/pink mix. */
.mm-hero--overlay-navy-orange::before { background: linear-gradient(135deg, #16243F 0%, #E05300 100%); }
.mm-hero--overlay-navy-red::before    { background: linear-gradient(135deg, #16243F 0%, #E05300 100%); }
.mm-hero--overlay-navy-solid::before  { background: #16243F; }
.mm-hero--overlay-red-orange::before  { background: linear-gradient(135deg, #16243F 0%, #E05300 100%); }
/* Spec-safe navy gradient for image-free heroes (navy → deep navy). */
.mm-hero--overlay-navy-gradient::before { background: linear-gradient(135deg, #16243F 0%, #0d1729 100%); }

/* ---------- Image-free cover hero (no photo, e.g. subpages) ----------
   Same tall, centered, white-text treatment as the photo cover, but the
   ::before fill is painted fully opaque over the navy base so it reads as a
   clean solid / gradient hero rather than a washed-out overlay. */
.mm-hero--no-image.mm-hero--layout-cover {
    min-height: 420px;                   /* a touch shorter than the photo cover */
}
.mm-hero--no-image.mm-hero--layout-cover::before {
    opacity: 1;
}

.mm-hero--layout-cover .mm-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
    position: relative;
    z-index: 2;                  /* sit above image + overlay */
}
.mm-hero--layout-cover .mm-hero__headline {
    font-size: clamp(2.5rem, 2vw + 1rem, 4rem);
    color: var(--wp--preset--color--mist-0);
    /* Defeat the legacy `.mm-hero h1 { max-width: 24ch }` rule from the
       appended Blocksy-era stylesheet — 24ch wraps long headlines into
       awkward 4–5 line ladders. */
    max-width: none;
}
.mm-hero--layout-cover .mm-hero__subhead {
    color: rgba(255, 255, 255, 0.92);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}
/* Also defeat the legacy `.mm-hero p { max-width: 56ch }` for the subhead
   so it inherits from the rule above. */
.wp-block-mindmixer-hero .mm-hero__subhead { max-width: 60ch; }
.wp-block-mindmixer-hero .mm-hero__headline { max-width: none; }
.mm-hero--layout-cover .mm-hero__eyebrow {
    background: rgba(255, 255, 255, 0.16);
    color: var(--wp--preset--color--mist-0);
}
.mm-hero--layout-cover .mm-hero__actions { justify-content: center; }
.mm-hero--layout-cover .mm-button--outline {
    color: var(--wp--preset--color--mist-0);
    border-color: var(--wp--preset--color--mist-0);
}
.mm-hero--layout-cover .mm-button--outline:hover {
    background: transparent;
    color: var(--wp--preset--color--mist-0);
    border-color: var(--wp--preset--color--orange-deep);
}
.mm-hero--layout-cover .mm-button--primary:hover { color: var(--wp--preset--color--mist-0); }
.mm-hero--layout-cover .mm-hero__trust { justify-content: center; }

/* ---------- Editorial variant: light page-title banner ----------
   Matches the production /aboutus/ "About Us" strip — a single centered
   H1 over a flat (light-grey or white) band, with no image, eyebrow,
   subhead, CTAs, or trust signals. Use for simple section landing pages
   where the body content does all the talking.
*/
.mm-hero--layout-editorial {
    padding: clamp(2.5rem, 3vw + 1rem, 4.5rem) clamp(1rem, 3vw, 2rem);
    min-height: 0;
    text-align: center;
    color: #2a2d31;                         /* matches production header text color */
}
.mm-hero--layout-editorial.mm-hero--bg-navy,
.mm-hero--layout-editorial.mm-hero--bg-gradient {
    color: var(--wp--preset--color--mist-0);
}
.mm-hero--layout-editorial .mm-hero__inner {
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.mm-hero--layout-editorial .mm-hero__copy {
    text-align: center;
}
.mm-hero--layout-editorial .mm-hero__headline {
    font-family: var(--wp--preset--font-family--azo-sans);
    font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.005em;
    margin: 0 auto;
    color: inherit;
    max-width: 22ch;                        /* keeps long page titles readable */
}
.wp-block-mindmixer-hero.mm-hero--layout-editorial .mm-hero__headline {
    max-width: 22ch;
}
/* Optional thin orange rule below the H1 (off by default). */
.mm-hero--layout-editorial .mm-hero__rule {
    width: 56px;
    height: 3px;
    background: var(--wp--preset--color--orange);
    border: 0;
    margin: 1rem auto 0;
    border-radius: 2px;
}