/* ██████████████████████████████████████████████████████████
   HERO LAYOUT SYSTEM (Phase 1, 2026-09-16 — Hero Architectural Audit)
   ──────────────────────────────────────────────────────────
   Hero-level `hero_layout` composition axis, independent of purpose/
   type/media_type — see section_helpers.php::heroNormalizeContent().
   full_bleed's own markup/CSS is UNCHANGED (hero-css-v2.css owns it —
   `.hero-industrial`); this file adds the two genuinely new structural
   compositions: split_media (a real, distinct media column — new
   `.hero-lyt-split*` classes, deliberately NOT reusing the legacy
   `.hero-split*` classes in hero-media-types.css, which stay serving
   ONLY the retired media_type='split' + video_embed_url read-compat
   path) and editorial (light, off-center, no overlay).

   Also owns the cross-layout `.hero-slide` slide-wrapper base rules
   that make ANY of the three layouts multi-slide-capable without a
   separate rendering path — see hero-slider.css for the slider-mode
   (stacked/cross-fade) override and web/assets/js/hero-slider.js for
   the behavior.
   ██████████████████████████████████████████████████████████ */


/* ----------------------------------------------------------
   SLIDE WRAPPER — shared base (every layout wraps its content in one
   .hero-slide per slide; in the single-slide case this is a completely
   transparent, unstyled block wrapper — zero visual effect).
---------------------------------------------------------- */
.hero-slide {
  display: block;
}

/* full_bleed: .hero-slide itself carries NO z-index (position only, so it
   does NOT establish its own stacking context) — its children compete
   directly in .hero-industrial's own stacking context (isolation:isolate,
   hero-css-v2.css), exactly like the pre-Phase-1 markup did. The
   background image/video lives in a dedicated CHILD, .hero-slide__bg,
   which DOES get the negative z-index (that element alone establishes
   its own context, so the negative value only pulls the background
   behind ::before/::after — it cannot also pull down its SIBLING
   .hero-overlay, unlike when both lived in the same z-index:-1 element;
   see the Pre-Runtime Audit note in web/partials/hero.php). Each slide
   still carries its own image, so multi-slide full_bleed keeps working. */
.hero-industrial .hero-slide {
  position: relative;
}

.hero-industrial .hero-slide__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Restores the pre-Phase-1 video-mode positioning (previously carried by
   a `.hero-video-bg` class on the SECTION that Phase 1's rewrite dropped
   without replacing — a second regression found alongside the stacking
   bug during the Pre-Runtime Audit). */
.hero-industrial .hero-slide__bg .hero-video-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ----------------------------------------------------------
   LAYOUT: SPLIT_MEDIA — text column + a real, distinct media column
---------------------------------------------------------- */
.hero-lyt-split {
  position: relative;
  overflow: hidden;
}

.hero-lyt-split .hero-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}

/* media_position='start' — swap columns via `order`, not by
   reauthoring the markup (keeps the DOM/source order = text-then-media
   for every reader/tool, only the VISUAL order flips). */
.hero-lyt-split--media-start .hero-slide .hero-lyt-split__text  { order: 2; }
.hero-lyt-split--media-start .hero-slide .hero-lyt-split__media { order: 1; }

.hero-lyt-split__text {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--mt-neutral-950, #0c0e14);
}

.hero-lyt-split__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--hero-overlay-start, rgba(12,14,20,0.82)) 0%, var(--hero-overlay-end, rgba(10,12,18,0.92)) 100%);
  display: flex;
  align-items: center;
}

.hero-lyt-split__text .container {
  position: relative;
  z-index: 1;
  padding: 56px 8px;
  max-width: 620px;
}

.hero-lyt-split__media {
  position: relative;
  background: var(--mt-neutral-900, #12141c);
  overflow: hidden;
}

.hero-lyt-split__media-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-lyt-split__media-el--placeholder {
  background: linear-gradient(135deg, var(--mt-neutral-900, #12141c), var(--mt-neutral-950, #0c0e14));
}

@media (max-width: 900px) {
  .hero-lyt-split .hero-slide {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-lyt-split--media-start .hero-slide .hero-lyt-split__text,
  .hero-lyt-split--media-start .hero-slide .hero-lyt-split__media {
    order: initial;
  }
  .hero-lyt-split__media { min-height: 260px; }
  .hero-lyt-split__text .container { padding: 40px 20px; max-width: none; }
}


/* ----------------------------------------------------------
   LAYOUT: EDITORIAL — no full-bleed media, generous whitespace, an
   off-center content column. Light canvas (NOT the dark-overlay
   convention every other Hero context uses) — inherits the page's own
   background; text recolored to the normal token-driven light-theme
   scale instead of hero-css-v2.css's hardcoded white/inverse.
---------------------------------------------------------- */
.hero-lyt-editorial {
  position: relative;
  padding: 96px 0;
}

.hero-lyt-editorial .hero-slide .container {
  max-width: 1160px;
}

.hero-lyt-editorial__row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-lyt-editorial__content {
  max-width: 620px;
}

.hero-lyt-editorial__visual img {
  width: 100%;
  border-radius: var(--mt-radius-lg, 16px);
  display: block;
}

/* No visual on this slide → content alone, not force-split. */
.hero-lyt-editorial__row:has(> .hero-lyt-editorial__content:only-child) {
  grid-template-columns: 1fr;
}

/* Text recolor for the light editorial canvas — beats hero-css-v2.css's
   base rules by specificity (0,2,0 vs 0,1,0), no !important needed. */
.hero-lyt-editorial .hero-micro {
  color: var(--mt-text-muted, #64748b);
  background: var(--mt-surface-sunken, #f1f5f9);
  border-color: var(--mt-border-default, #e2e8f0);
}
.hero-lyt-editorial .hero-title       { color: var(--mt-text-heading, #0f172a); }
.hero-lyt-editorial .hero-subtitle,
.hero-lyt-editorial .hero-description { color: var(--mt-text-body, #334155); }
.hero-lyt-editorial .hero-proof span {
  background: var(--mt-surface-sunken, #f1f5f9);
  border-color: var(--mt-border-default, #e2e8f0);
  color: var(--mt-text-body, #334155);
}
.hero-lyt-editorial .mt-hero-btn-secondary {
  background: transparent;
  color: var(--mt-text-heading, #0f172a);
  border: 1px solid var(--mt-border-default, #e2e8f0);
  backdrop-filter: none;
}

@media (max-width: 900px) {
  .hero-lyt-editorial { padding: 64px 0; }
  .hero-lyt-editorial__row { grid-template-columns: 1fr; gap: 32px; }
  .hero-lyt-editorial__content { max-width: none; }
}