/* ============================================================================
   Landing — Hero (Split Variant)

   Spec:
   - docs/DESIGN-SYSTEM.md       §3 typography, §4 colour, §5 spacing, §8 components, §11 tokens
   - docs/LANDING-PAGE-DESIGN.md §2.2 hero, §3 hero strategy
   - docs/COMPONENT-LIBRARY.md   §2 Hero Block, §13 Buttons

   Tokens use nested fallback chain: var(--new-token, var(--legacy-token, #literal))
   so this CSS works against both the current runtime injection (legacy names)
   and a future DESIGN-SYSTEM-aligned injection (new names) without changes.

   BEM convention: ms-{block}__{element}--{modifier}
   ============================================================================ */

/* ── Hero container ─────────────────────────────────────────────────────────
   Layered backdrop:
     1. Base sunken surface (#FAFBFC).
     2. Radial gradient mesh — two soft brand-green glows (top-left + mid-right)
        to lift the panel out of flat-white SaaS territory.
     3. ::before pseudo carries a SVG-grain texture at low opacity. Grain
        survives any background swap and gives the hero a tactile depth.
   2026-05-13 depth pass.
*/
.ms-hero {
  position: relative;
  width: 100%;
  background:
    radial-gradient(1100px 720px at 0% 0%, rgba(20, 97, 57, 0.10), transparent 60%),
    radial-gradient(900px 720px at 100% 100%, rgba(20, 97, 57, 0.07), transparent 60%),
    radial-gradient(620px 420px at 50% -10%, rgba(136, 36, 33, 0.06), transparent 65%),
    var(--ms-surface-sunken, #FAFBFC);
  font-family: var(--ms-font-body, 'Urbanist', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif);
  color: var(--ms-text-primary, var(--ms-text, #1A202C));
  overflow: hidden;
  isolation: isolate;
}

/* Fine SVG grain — sits above the gradient mesh, below all content. ~3% opacity
   keeps it discoverable but never noisy. The fractal noise filter primitive is
   inline so we don't ship an extra image asset. */
.ms-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.045;
  z-index: 0;
  mix-blend-mode: multiply;
}

/* Two soft floating blobs in brand green for depth — pure decoration, very
   subtle. Positioned so they don't clash with paired-photo composition. */
.ms-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(20, 97, 57, 0.18), transparent 65%);
  filter: blur(40px);
  z-index: 0;
  animation: ms-hero-float 18s ease-in-out infinite alternate;
}

@keyframes ms-hero-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-24px, 32px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-hero::after { animation: none; }
}

.ms-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); /* 48 / 52 — photos ~17% wider */
  align-items: stretch;
  min-height: 80vh;
  position: relative;
  z-index: 1;
}

/* ── Text panel (left, 60%) ────────────────────────────────────────────────
   Padding scale: 160px vertical / 96px horizontal desktop (per DS §5.3 hero rule).
   At small viewports falls back to scale step.
*/
.ms-hero__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ms-space-2xl, 48px);
  padding: var(--ms-space-6xl, 160px) clamp(24px, 6vw, 96px);
  background: transparent;          /* let the hero's layered backdrop show through */
  z-index: 1;
}

/* Brand-green accent rule running down the left edge of the hero panel —
   short, deliberate, signals editorial structure rather than corporate noise.
   Slight vertical drift animation gives the hero a sense of life without
   the bouncy-scroll-indicator SaaS noise. Respects reduced motion. */
.ms-hero__accent {
  position: absolute;
  top: clamp(96px, 14vw, 160px);
  left: 0;
  width: 4px;
  height: clamp(64px, 8vw, 96px);
  background: linear-gradient(to bottom, var(--ms-primary, #146139), rgba(20, 97, 57, 0.35));
  border-radius: 0 4px 4px 0;
  pointer-events: none;
  animation: ms-accent-drift 6s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
@keyframes ms-accent-drift {
  from { transform: translateY(0); opacity: 0.85; }
  to   { transform: translateY(12px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-hero__accent { animation: none; }
}

/* ── Image panel (right, 45%) ──────────────────────────────────────────────
   No overlay — text doesn't sit on image (LPD §2.2 + §3.1).
   Two variants:
     .ms-hero__media           — single full-bleed image (legacy)
     .ms-hero__media--paired   — paired-photo composition (Archio-derived, LPD §2.2)
*/
.ms-hero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: transparent;          /* layered backdrop shows through */
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ms-hero__media:not(.ms-hero__media--paired) > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ms-hero__media--paired {
  padding: var(--ms-space-2xl, 48px) clamp(24px, 4vw, 64px);
  min-height: 0;
}
.ms-hero__media--paired .ms-paired-photo {
  max-width: 660px; /* +18% from 560px */
}

/* ── Section intro typography (shared, but lives here for now) ────────────
   When the Section Container component is built out, lift these into a
   shared file and import.
*/
.ms-section__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-md, 16px);
  max-width: 720px;
}

.ms-section__eyebrow {
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
  font-weight: 600;
  font-size: 0.75rem;       /* 12px */
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-text-secondary, #4A5568);
  margin: 0;
}

.ms-section__headline {
  font-family: var(--ms-font-display, var(--ms-font-heading, 'DM Serif Display', Georgia, serif));
  font-weight: 700;
  color: var(--ms-text-primary, var(--ms-text, #1A202C));
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.ms-section__headline--display {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 18ch;
}

.ms-section__lede {
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ms-text-secondary, #4A5568);
  max-width: 60ch;
  margin: 0;
}

/* ── Hero actions group ────────────────────────────────────────────────── */
.ms-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-md, 16px);
  align-items: center;
  margin-top: var(--ms-space-xs, 8px);
}

/* ── Hero credibility chip row ─────────────────────────────────────────────
   Replaces the avatar-stack social-proof block (2026-05-13).
   SAQA-registered chip + Est. 1976 chip — institutional, not personal.
   Sits 32px below the CTA row.
*/
.ms-hero__credibility {
  margin-top: var(--ms-space-xl, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-md, 16px);
}

.ms-cred-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: #ffffff;
  border: 1px solid rgba(20, 97, 57, 0.18);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(20, 97, 57, 0.06);
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
  font-weight: 600;
  font-size: 0.8125rem;       /* 13px */
  line-height: 1.2;
  color: var(--ms-text-primary, #1A202C);
  letter-spacing: 0.005em;
  transition:
    transform 220ms cubic-bezier(0.2, 0, 0.2, 1),
    border-color 220ms,
    box-shadow 220ms;
}
.ms-cred-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 97, 57, 0.32);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(20, 97, 57, 0.14);
}
.ms-cred-chip--simple {
  padding: 8px 14px;
}
.ms-cred-chip__logo {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ms-surface, #ffffff);
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.ms-cred-chip__text {
  display: inline-block;
  white-space: nowrap;
}
.ms-cred-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ms-primary, #146139);
  display: inline-block;
  flex-shrink: 0;
}
.ms-cred-chip__sep {
  width: 1px;
  height: 20px;
  background: var(--ms-border, #E2E8F0);
  display: inline-block;
}
@media (max-width: 480px) {
  .ms-cred-chip__sep { display: none; }
  .ms-cred-chip__text { white-space: normal; }
}

/* pxn-headline reveal — ensures the H1 stays visible if GSAP fails to load.
   The JS in landing-animations.js wraps each word in a span and animates it. */
.ms-section__headline.pxn-headline {
  /* No initial opacity:0 here — that's set by JS, only after split is ready. */
}

/* ── Button — primary, large size ─────────────────────────────────────────
   Per DESIGN-SYSTEM §8.1: solid primary, no gradient, no translateY hover.
   Hover = colour darken only (200ms). Focus = 3px outline at 2px offset.
   Touch target ≥ 44px.
*/
.ms-button {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-xs, 8px);
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  border-radius: var(--ms-radius, 8px);
  border: 1px solid transparent;
  cursor: pointer;
  padding: var(--ms-space-sm, 12px) var(--ms-space-lg, 24px);
  min-height: 44px;
  transition:
    background-color var(--ms-duration, 200ms) var(--ms-easing, cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--ms-duration, 200ms) var(--ms-easing, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--ms-duration, 200ms) var(--ms-easing, cubic-bezier(0.4, 0, 0.2, 1));
}
.ms-button--lg {
  padding: var(--ms-space-md, 16px) var(--ms-space-xl, 32px);
  font-size: 1rem;
}
.ms-button--primary {
  background: var(--ms-primary, #146139);
  color: #ffffff;
  border-color: var(--ms-primary, #146139);
}
.ms-button--primary:hover,
.ms-button--primary:active {
  background: var(--ms-primary-dark, #0e4a2b);
  color: #ffffff;
  border-color: var(--ms-primary-dark, #0e4a2b);
  text-decoration: none;
}
.ms-button:focus-visible {
  outline: 3px solid var(--ms-primary, #146139);
  outline-offset: 2px;
}
.ms-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125em;
  line-height: 1;
}

/* ── Hero secondary link ────────────────────────────────────────────────────
   Sits beside the primary CTA. Ghost text — no button shape.
   Per DS §8.1: tertiary / ghost variant.
*/
.ms-hero__secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ms-primary, #136138);
  text-decoration: none;
  transition: color 200ms, gap 200ms;
}
.ms-hero__secondary-link:hover {
  color: var(--ms-primary-dark, #0e4a2b);
  gap: 10px;
  text-decoration: none;
}
.ms-hero__secondary-link .ph {
  font-size: 1.125em;
}

/* ── Photo panel wrapper — positions year label + stat badge ────────────────
   The .ms-hero__media--paired already has flex/padding.
   .ms-hero__media-inner is a relative container for the absolute children.
*/
.ms-hero__media-inner {
  position: relative;
  width: 100%;
  max-width: 660px; /* +18% from 560px */
}

/* Floating stat badge — overlaid bottom-left of the B panel.
   White card, green number, muted label. Depth without template tropes. */
.ms-hero__stat-badge {
  position: absolute;
  bottom: -12px;
  left: -20px;
  background: #ffffff;
  border: 1px solid rgba(20, 97, 57, 0.14);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(20, 97, 57, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 10;
  pointer-events: none;
}
.ms-hero__stat-num {
  font-family: var(--ms-font-display, 'DM Serif Display', Georgia, serif);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ms-primary, #136138);
  display: block;
}
.ms-hero__stat-label {
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ms-text-muted, #718096);
  display: block;
}

/* Vertical "Est. 1976" year label — right edge of the photo panel.
   Typographic editorial detail, rotated 90°. Reads on desktop only. */
.ms-hero__year-label {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-text-muted, #718096);
  opacity: 0.6;
  white-space: nowrap;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 1023px) {
  .ms-hero__year-label { display: none; }
  .ms-hero__stat-badge { bottom: -8px; left: -8px; }
  .ms-hero__media-inner { max-width: 100%; }
}

/* ── Scroll indicator (bottom centre of hero) ──────────────────────────────
   Static — no continuous animation. Marketing motion budget (DS §10.4) treats
   bouncing scroll indicators as SaaS-template noise.
*/
.ms-hero__scroll {
  position: absolute;
  bottom: var(--ms-space-lg, 24px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ms-space-xs, 8px);
  color: var(--ms-text-muted, #718096);
  pointer-events: none;
  user-select: none;
}
.ms-hero__scroll-line {
  width: 1px;
  height: 36px;
  background: currentColor;
  opacity: 0.5;
}
.ms-hero__scroll-label {
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ── Header / nav adjustments on the landing page only ─────────────────────
   The default Sign In pill (rgba white .15) reads heavy against the hero.
   On the landing page, make it a ghost — transparent bg, 1px white border,
   white text — so the hero's primary CTA is the loudest thing on the page.
*/
.page-template-page-landing .ms-btn-login {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding-block: 8px;
}
.page-template-page-landing .ms-btn-login:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

/* ── Responsive ─────────────────────────────────────────────────────────────
   Stack at lg threshold (<1024px). 60/40 gets cramped before 768; collapse early.
   On stack: image first, text second (per LPD §2.2 wireframe).
   Hide scroll indicator on stacked layouts (less useful, the image already
   pulls the eye down).
*/
@media (max-width: 1023px) {
  .ms-hero--split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ms-hero__media {
    order: 1;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .ms-hero__media--paired {
    aspect-ratio: auto;
    padding: var(--ms-space-2xl, 48px) var(--ms-space-lg, 24px) 0;
  }
  .ms-hero__media--paired .ms-paired-photo {
    max-width: 100%;
  }
  .ms-hero__panel {
    order: 2;
    padding: var(--ms-space-4xl, 96px) var(--ms-space-lg, 24px);
    gap: var(--ms-space-xl, 32px);
  }
  .ms-hero__scroll {
    display: none;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ms-button {
    transition: none;
  }
}