/* ============================================================
   MORETECH -- HERO
   First-party markup + CSS (see partials/hero.php's own header for the
   full rationale) -- not derived from Fable5's forge hero or from the
   shared platform hero-css-v2.css engine. Every recurring visual value
   is a real --mt-* token (00-tokens.css); the only local custom
   properties here (--hero-overlay-start/-end) are per-render computed
   values derived from overlay_opacity, the same real convention the
   platform's own universal hero.php already uses -- not brand values.
   Three compositions, one shared root (.mt-hero) and one shared actions/
   container/heading/button convention -- see hero.php's own docstring
   for why that consistency is deliberate.

   COLOR ARCHITECTURE (Live UAT correction round): .mt-hero is the ONE
   source of foreground color for every composition (color: ... set once
   per composition below, on .mt-hero / .mt-hero--editorial). Every text
   element (title/subtitle/description/micro/proof-item) declares
   `color: currentColor` EXPLICITLY -- not left to plain inheritance --
   for a real, verified reason: the shared platform's own
   web/assets/css/01-foundation.css sets `h1, h2, h3, h4, h5, h6 { color:
   var(--mt-text-heading) }` (a sane default for a light page), a bare
   element selector that matches this Hero's own <h1> directly and wins
   over pure inheritance regardless of source order (a real, confirmed
   bug: the default Hero's own headline rendered near-invisible on a dark
   composition before this fix, verified by real screenshot). An explicit
   `currentColor` on the class-scoped title element beats that bare
   element selector by specificity, and keeps the whole text stack
   correctly following whatever .mt-hero's own `color` is -- including a
   real Studio `self` color style edit, which this document's own
   HEADING_ROUTED_PROPS mechanism already re-targets onto the real
   heading selector. Hierarchy among text elements is expressed with
   `opacity` only (never a second, competing color value) -- this is what
   lets a Studio/AI self.color edit reach every text element correctly,
   on every composition, with no per-composition special-casing.
============================================================ */

.mt-hero {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    font-family: var(--mt-font-sans);
    color: var(--mt-text-inverse);
}

.mt-hero__container {
    position: relative;
    z-index: 1;
    padding-top: var(--mt-space-24);
    padding-bottom: var(--mt-space-24);
}

.mt-hero__micro {
    display: inline-flex;
    align-items: center;
    margin: 0 0 var(--mt-space-3);
    padding: var(--mt-space-2) var(--mt-space-4);
    border-radius: var(--mt-radius-full);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: currentColor;
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-widest);
    text-transform: uppercase;
    opacity: 0.85;
}

.mt-hero__title {
    margin: 0 0 var(--mt-space-5);
    color: currentColor;
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, var(--mt-text-4xl));
    font-weight: var(--mt-weight-black);
    line-height: var(--mt-leading-tight);
    letter-spacing: var(--mt-tracking-tight);
    max-width: 22ch;
}

.mt-hero--purpose-homepage .mt-hero__title,
.mt-hero--purpose-internal .mt-hero__title { max-width: 20ch; }

.mt-hero__subtitle {
    margin: 0 0 var(--mt-space-4);
    color: currentColor;
    font-size: var(--mt-text-lg);
    font-weight: var(--mt-weight-medium);
    line-height: var(--mt-leading-snug);
    max-width: 46ch;
    opacity: 0.92;
}

.mt-hero__description {
    margin: 0 0 var(--mt-space-6);
    color: currentColor;
    font-size: var(--mt-text-base);
    font-weight: var(--mt-weight-normal);
    line-height: var(--mt-leading-relaxed);
    max-width: 52ch;
    opacity: 0.82;
}

/* Real bug fix (whole-page design review round): .mt-hero__title/
   __subtitle/__description are block-level elements with their own
   max-width (22ch/46ch/52ch) but no margin — Bootstrap's text-center/
   text-end utility classes (applied to whichever real ancestor holds this
   content: .mt-hero__container for media/split, .mt-hero__editorial-content
   for editorial) only set text-align, which aligns the TEXT INSIDE each
   already-narrow box, not the box itself within the wider container.
   Confirmed via real computed styles on a real render: these three
   elements' own left offset stayed an identical 133px regardless of
   whether text_align was left, center, or right, while .mt-hero__proof/
   .mt-hero__actions (real flex rows with justify-content already applied)
   and .mt-hero__micro (inline-flex, which DOES follow ancestor text-align
   the way inline-level boxes do) all correctly repositioned. Unlike the
   CTA boxed-alignment fix, there was no existing margin technique here to
   recalibrate — these three elements had no alignment-aware margin at
   all, so this adds one, scoped to exactly the two real ancestors that
   ever carry the alignment class. text-start needs no rule: margin:0 on
   both sides (the existing default, from .mt-hero__title/__subtitle/
   __description's own shorthand `margin` above) already produces the
   correct flush-left position. */
.mt-hero__container.text-center .mt-hero__title,
.mt-hero__container.text-center .mt-hero__subtitle,
.mt-hero__container.text-center .mt-hero__description,
.mt-hero__editorial-content.text-center .mt-hero__title,
.mt-hero__editorial-content.text-center .mt-hero__subtitle,
.mt-hero__editorial-content.text-center .mt-hero__description {
    margin-left: auto;
    margin-right: auto;
}

.mt-hero__container.text-end .mt-hero__title,
.mt-hero__container.text-end .mt-hero__subtitle,
.mt-hero__container.text-end .mt-hero__description,
.mt-hero__editorial-content.text-end .mt-hero__title,
.mt-hero__editorial-content.text-end .mt-hero__subtitle,
.mt-hero__editorial-content.text-end .mt-hero__description {
    margin-left: auto;
    margin-right: 0;
}

.mt-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-3) var(--mt-space-6);
    margin: 0 0 var(--mt-space-6);
}

.mt-hero__proof-item {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    padding: var(--mt-space-2) var(--mt-space-4);
    border-radius: var(--mt-radius-full);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    color: currentColor;
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wide);
    opacity: 0.85;
    transition: background-color var(--mt-duration-fast) var(--mt-ease-default),
                border-color var(--mt-duration-fast) var(--mt-ease-default);
}

.mt-hero__proof-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}

.mt-hero__proof-item::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--mt-radius-full);
    background: var(--mt-accent);
    flex-shrink: 0;
}

.mt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-4);
}

.mt-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mt-space-3) var(--mt-space-8);
    border-radius: var(--mt-radius);
    font-size: var(--mt-text-base);
    font-weight: var(--mt-weight-semibold);
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform var(--mt-duration-normal) var(--mt-ease-default),
                background-color var(--mt-duration-normal) var(--mt-ease-default),
                box-shadow var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-hero__btn:hover { transform: translateY(-2px); }

/* CTA hierarchy: primary is the commanding, filled, elevated action;
   secondary stays visibly present but subordinate (outline, no glow) --
   a real default hierarchy Studio's shared 'button' target can still
   restyle for both at once, and the new 'button-primary'/
   'button-secondary' targets can now override independently. */
.mt-hero__btn--primary {
    background-color: var(--mt-accent);
    color: var(--mt-text-inverse);
    box-shadow: var(--mt-shadow-accent);
}

.mt-hero__btn--primary:hover { background-color: var(--mt-accent-hover); color: var(--mt-text-inverse); }

.mt-hero__btn--secondary {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: currentColor;
    color: inherit;
    opacity: 0.9;
    backdrop-filter: blur(10px);
}

.mt-hero__btn--secondary:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.14); }


/* ============================================================
   COMPOSITION: MEDIA -- full-bleed background, layered atmospheric
   overlay, centered/aligned content on top. Even with no real image set,
   the default background is a real, layered dark gradient (curated
   --mt-gradient-dark) plus a soft accent glow -- never a single flat
   color -- so the composition reads as designed before any real photo
   or AI edit is added.
============================================================ */
.mt-hero--media {
    min-height: clamp(520px, 74vh, 780px);
    background-color: var(--mt-surface-dark);
    background-image: var(--mt-gradient-dark);
    background-size: cover;
    background-position: center;
    display: flex;
}

.mt-hero--media .mt-hero__overlay {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    /* Layered atmosphere: a soft warm glow (real accent token, low
       opacity, off-center for a real focal point) UNDER the same dark
       wash the overlay_opacity content field already controls -- the
       glow is a fixed, restrained design constant; the dark wash stays
       the one real per-render control. */
    background-image:
        radial-gradient(ellipse 60% 55% at 20% 15%, rgba(var(--mt-brand-primary-rgb), 0.35) 0%, rgba(var(--mt-brand-primary-rgb), 0) 60%),
        linear-gradient(180deg, var(--hero-overlay-start, rgba(11,18,32,0.5)) 0%, var(--hero-overlay-end, rgba(11,18,32,0.6)) 100%);
}

.mt-hero--purpose-internal.mt-hero--media { min-height: clamp(360px, 46vh, 520px); }


/* ============================================================
   COMPOSITION: SPLIT -- text panel (layered brand gradient, not flat) +
   a real, distinct media column that reads as an intentional panel even
   with no real image set (layered gradient + soft glow + inner ring),
   never an empty rectangle.
============================================================ */
.mt-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: clamp(480px, 66vh, 720px);
}

.mt-hero__split-content { position: relative; display: flex; }

.mt-hero--split .mt-hero__overlay {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    background-image:
        radial-gradient(ellipse 70% 60% at 100% 100%, rgba(var(--mt-brand-primary-rgb), 0.4) 0%, rgba(var(--mt-brand-primary-rgb), 0) 60%),
        linear-gradient(160deg, var(--mt-brand-primary) 0%, var(--mt-brand-primary-hover) 100%);
    color: var(--mt-text-inverse);
}

.mt-hero__split-media {
    position: relative;
    overflow: hidden;
    background: var(--mt-surface-sunken);
}

.mt-hero__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mt-hero__media--placeholder {
    width: 100%;
    height: 100%;
    min-height: 320px;
    background-image:
        radial-gradient(ellipse 70% 60% at 25% 20%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(135deg, var(--mt-brand-primary) 0%, #2C4270 55%, var(--mt-accent) 145%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}


@media (max-width: 991px) {
    .mt-hero--split { grid-template-columns: 1fr; min-height: 0; }
    .mt-hero__split-media { min-height: 320px; }
}

/* ------------------------------------------------------------
   media_position (whole-page design review round): which side the
   media column occupies within the SAME 'split' composition -- a
   design decision independent of composition itself. Default ('end')
   needs no rule at all: it IS the markup's own natural DOM order
   (.mt-hero__split-content first, .mt-hero__split-media second),
   already rendering text-left/media-right with zero CSS help. This
   rule only fires for the deliberate 'start' choice -- reorders the
   media column to the first grid track via `order` (source order/DOM
   order stay untouched, so no accessibility/reading-order regression)
   and swaps which track gets the wider 1.1fr share so the CONTENT
   column keeps its original relative width regardless of which visual
   side it ends up on, rather than the wider track always landing on
   whichever element happens to render first.
   ------------------------------------------------------------ */
/* min-width-scoped so this can never outrank the max-width:991px collapse
   rule just above -- both would otherwise match below 991px with equal
   selector specificity (0,2,0), and source order alone is fragile to
   depend on across two separate rule blocks. Real 2-column track sizing
   only matters at the width .mt-hero--split is actually 2 columns at. */
@media (min-width: 992px) {
    .mt-hero--split.mt-hero--split-media-start {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }
}

.mt-hero--split.mt-hero--split-media-start .mt-hero__split-media {
    order: -1;
}

/* Below 991px the base rule already collapses .mt-hero--split to a
   single grid-template-columns:1fr column (stacked); `order: -1` above
   still applies at every width with no extra rule needed, so 'start'
   correctly puts media first (visually on top) in that stacked reading
   order too -- the same convention .mt-about--stacked's own visual
   already uses for its own single-column collapse. */


/* ============================================================
   COMPOSITION: EDITORIAL -- light, spacious, asymmetric content
   column; no full-bleed media; a restrained, deliberate atmosphere (a
   soft off-center glow + a fine accent rule) instead of either a flat
   empty page or a competing hardcoded text color -- see the file header
   for why color itself is no longer special-cased here at all.
============================================================ */
.mt-hero--editorial {
    position: relative;
    background-color: var(--mt-surface-page);
    /* Restrained atmosphere: a single, soft, off-center radial wash in
       the brand accent -- low enough opacity to read as considered
       lighting, not decoration. This is the composition's one deliberate
       depth cue; it does not scale with any content field, by design
       (quiet/minimal directions should stay exactly this quiet). */
    background-image: radial-gradient(ellipse 55% 60% at 85% 0%, rgba(var(--mt-brand-primary-rgb), 0.06) 0%, rgba(var(--mt-brand-primary-rgb), 0) 60%);
    color: var(--mt-text-heading);
    padding-top: var(--mt-space-16);
    padding-bottom: var(--mt-space-16);
}

.mt-hero--editorial .mt-hero__container {
    padding-top: var(--mt-space-16);
    padding-bottom: var(--mt-space-16);
}

.mt-hero--editorial .mt-hero__title { font-weight: var(--mt-weight-medium); }

/* A fine accent rule above the eyebrow -- the one graphic accent this
   restrained composition allows itself, a considered editorial cue
   (a "kicker" rule), not a color override. */
.mt-hero--editorial .mt-hero__micro {
    display: block;
    position: relative;
    padding: var(--mt-space-4) 0 0;
    background: none;
    border: none;
}
.mt-hero--editorial .mt-hero__micro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--mt-accent);
}

/* Proof pills need a light-ground tint here -- the dark-ground white-based
   surface above would be invisible against this composition's near-white
   background. Reuses the same brand rgb companion variable the media/split
   glow layers already rely on, not a new token. */
.mt-hero--editorial .mt-hero__proof-item {
    background: rgba(var(--mt-brand-primary-rgb), 0.06);
    border-color: rgba(var(--mt-brand-primary-rgb), 0.16);
}
.mt-hero--editorial .mt-hero__proof-item:hover {
    background: rgba(var(--mt-brand-primary-rgb), 0.1);
    border-color: rgba(var(--mt-brand-primary-rgb), 0.24);
}

.mt-hero--editorial .mt-hero__btn--secondary {
    background-color: transparent;
    backdrop-filter: none;
    border-color: var(--mt-border-strong);
    color: var(--mt-text-heading);
}
.mt-hero--editorial .mt-hero__btn--secondary:hover { background-color: var(--mt-surface-sunken); }

.mt-hero__editorial-row {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--mt-space-16);
}

/* Asymmetric offset: the content column is not centered -- it starts at
   the real content edge and the row's own extra column (present or not)
   is what creates the off-center feel, matching the composition's own
   design intent even with no visual set. */
.mt-hero__editorial-content { grid-column: 1 / span 1; position: relative; z-index: 1; }

.mt-hero__editorial-visual {
    grid-column: 2 / span 1;
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--mt-radius-xl);
    overflow: hidden;
    box-shadow: var(--mt-shadow-xl);
    transform: translateY(calc(-1 * var(--mt-space-8)));
}

.mt-hero__editorial-visual .mt-hero__media { border-radius: var(--mt-radius-xl); }

/* No visual set -- the content column alone, offset by whitespace only
   (grid-template-columns above already reserves the asymmetric ratio;
   without a second grid item, the content simply sits in its own
   narrower column rather than stretching full-width -- deliberate, not
   a layout bug). */

@media (max-width: 991px) {
    .mt-hero__editorial-row { grid-template-columns: 1fr; gap: var(--mt-space-10); }
    .mt-hero__editorial-visual { grid-column: 1; transform: none; aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
    .mt-hero--media,
    .mt-hero--split { min-height: 0; }
    .mt-hero__container,
    .mt-hero--editorial .mt-hero__container { padding-top: var(--mt-space-16); padding-bottom: var(--mt-space-16); }
    .mt-hero__title { max-width: none; }
}