/* ============================================================
   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;
}

.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; }
}


/* ============================================================
   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; }
}