/* =============================================================
   page-hero.css — Shared page hero component
   Used on all interior pages of Mercury Integrated Manufacturing
   Mirrors the hs-hero design from about-history.
   Prefix: .ph-
   Brand: #454646 · #b0ce5a (green accent) · #0c0a0c (dark)
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   SECTION WRAPPER
   ───────────────────────────────────────────────────────────── */
.ph-hero {
    position: relative;
    background: #0c0a0c;
    overflow: hidden;
    min-height: 540px;
    display: flex;
    align-items: center;
}

/* Full-bleed background image */
.ph-hero__img-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    opacity: 0.38;
}

/* Dark gradient overlay so text is always readable */
.ph-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(12, 10, 12, 0.82) 0%,
        rgba(12, 10, 12, 0.55) 60%,
        rgba(12, 10, 12, 0.72) 100%
    );
    z-index: 1;
}

/* Modifier: adds a further 44% black layer over the hero image so
   headings and body copy read cleanly on busier photography.
   Opt in per page with .ph-hero--dark on the section. */
.ph-hero--dark .ph-hero__overlay {
    background:
        linear-gradient(
            rgba(12, 10, 12, 0.44),
            rgba(12, 10, 12, 0.44)
        ),
        linear-gradient(
            135deg,
            rgba(12, 10, 12, 0.82) 0%,
            rgba(12, 10, 12, 0.55) 60%,
            rgba(12, 10, 12, 0.72) 100%
        );
}

/* Modifier: lifts the hero image out of the dark base treatment for
   pages whose photography was reading as almost black. Brightens the
   image and eases back the gradient, keeping enough contrast under
   the white heading and body copy.

   The banner artwork used to carry a dark green duotone, so the base
   treatment only had to top up an image that was already dark. The
   photography is now full-colour and much brighter, which left the
   hero copy unreadable — the 16px subcopy and the 11px eyebrow were
   landing around 2:1 against a 4.5:1 requirement.

   These values are the *lightest* treatment that clears WCAG AA on
   every hero image in the set: white title 9.2:1, subcopy 6.9:1 and
   green eyebrow 5.2:1 at the worst-case (95th percentile brightest)
   point of the text band. Lighten either number and the small green
   eyebrow is the first thing to fail.
   Opt in per page with .ph-hero--bright on the section. */
.ph-hero--bright .ph-hero__img-bg {
    opacity: 0.58;
}

.ph-hero--bright .ph-hero__overlay {
    background: linear-gradient(
        135deg,
        rgba(12, 10, 12, 0.68) 0%,
        rgba(12, 10, 12, 0.52) 60%,
        rgba(12, 10, 12, 0.62) 100%
    );
}

/* Modifier: centre-weighted scrim, for heroes whose photography is
   busiest in the middle — faces, logos, high-contrast edges — right
   where the centred copy sits. Pools shade behind the text block and
   fades out towards the edges, so the picture still reads at the
   sides instead of being flattened everywhere.
   This rule replaces the --bright overlay rather than adding to it,
   so its linear layer has to track the same values, or a --scrim
   page silently keeps the older, darker treatment. */
.ph-hero--scrim .ph-hero__overlay {
    background:
        radial-gradient(
            ellipse 62% 72% at 50% 50%,
            rgba(12, 10, 12, 0.46) 0%,
            rgba(12, 10, 12, 0.26) 55%,
            rgba(12, 10, 12, 0) 82%
        ),
        linear-gradient(
            135deg,
            rgba(12, 10, 12, 0.68) 0%,
            rgba(12, 10, 12, 0.52) 60%,
            rgba(12, 10, 12, 0.62) 100%
        );
}

/* The chips are transparent by default, which leaves their green text
   sitting directly on photo detail. Give them a dark backing so they
   hold together as buttons. */
.ph-hero--scrim .ph-hero__chip {
    background: rgba(12, 10, 12, 0.42);
    border-color: rgba(176, 206, 90, 0.6);
}

/* With more of the photo showing through, the copy needs its own
   contrast rather than relying on the overlay alone. A soft dark
   halo lifts the text off whatever detail sits behind it. */
.ph-hero--bright .ph-hero__tag,
.ph-hero--bright .ph-hero__title,
.ph-hero--bright .ph-hero__sub {
    text-shadow:
        0 1px 2px rgba(12, 10, 12, 0.55),
        0 2px 12px rgba(12, 10, 12, 0.45);
}

/* Left green accent bar */
.ph-hero__accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(
        to bottom,
        transparent,
        #b0ce5a 30%,
        #b0ce5a 70%,
        transparent
    );
    z-index: 2;
}

/* Content wrapper — sits above overlays */
.ph-hero__body {
    position: relative;
    z-index: 3;
    padding: 140px 0 100px;
}

/* ─────────────────────────────────────────────────────────────
   EYEBROW TAG
   ───────────────────────────────────────────────────────────── */
.ph-hero__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #b0ce5a;
    margin-bottom: 18px;
}
.ph-hero__tag::before,
.ph-hero__tag::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: #b0ce5a;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   HEADLINE
   ───────────────────────────────────────────────────────────── */
.ph-hero__title {
    font-size: 52px;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}
.ph-hero__title em {
    font-style: normal;
    color: #b0ce5a !important;
}

/* ─────────────────────────────────────────────────────────────
   SUBCOPY
   ───────────────────────────────────────────────────────────── */
.ph-hero__sub {
    font-size: 16px;
    /* Solid white. Was rgba(220,223,223,0.92), itself raised from 0.70 for
       contrast — at 16px this is body copy and needs 4.5:1, which no alpha
       under 1 could reach over photography without crushing the image far
       harder than the scrim above already does. */
    color: #ffffff;
    line-height: 1.8;
    max-width: 560px;
    margin: 20px auto 30px;
}

/* ─────────────────────────────────────────────────────────────
   CALLOUT CHIPS
   ───────────────────────────────────────────────────────────── */
.ph-hero__chips {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
    overflow-x: auto;
}
.ph-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(176, 206, 90, 0.45);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #b0ce5a;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
    -webkit-font-smoothing: antialiased;
}
.ph-hero__chip i {
    font-size: 14px;
    color: #b0ce5a;
}
.ph-hero__chip:hover {
    background: rgba(176, 206, 90, 0.10);
    border-color: rgba(176, 206, 90, 0.75);
}

/* ─────────────────────────────────────────────────────────────
   BREADCRUMB
   ───────────────────────────────────────────────────────────── */
.ph-hero__breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}
.ph-hero__breadcrumb li {
    font-size: 12px;
    color: rgba(220, 223, 223, 0.40);
}
.ph-hero__breadcrumb li a {
    color: rgba(220, 223, 223, 0.40);
    text-decoration: none;
    transition: color 0.2s;
}
.ph-hero__breadcrumb li a:hover { color: #b0ce5a; }
.ph-hero__breadcrumb li + li::before {
    content: '›';
    margin: 0 8px;
    color: rgba(220, 223, 223, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .ph-hero { min-height: 420px; }
    .ph-hero__body { padding: 110px 0 80px; }
    .ph-hero__title { font-size: 40px; }
    .ph-hero__sub { font-size: 15px; }
}

@media (max-width: 767px) {
    .ph-hero { min-height: 360px; }
    .ph-hero__body { padding: 90px 0 60px; }
    .ph-hero__title { font-size: 32px; }
    .ph-hero__sub { font-size: 14px; }
    .ph-hero__chips {
        flex-wrap: wrap;
        gap: 8px;
        overflow-x: visible;
        padding: 0 8px;
    }
    .ph-hero__chip { font-size: 11px; padding: 7px 14px; }
}

@media (max-width: 480px) {
    .ph-hero__title { font-size: 28px; }
    .ph-hero__tag { font-size: 10px; letter-spacing: 0.26em; }
    .ph-hero__tag::before,
    .ph-hero__tag::after { width: 16px; }
}