/* ==========================================================================
   VENUS — SECTIONS
   Richer page-level components shared across content pages (hero, value chain,
   feature splits, editorial provenance labels, element cards, contact form).
   Loads AFTER components.css. Consumes tokens only. Foundation files unchanged.
   Spec: 02_PAGE_SPECIFICATIONS, 03_CONTENT_ARCHITECTURE, 04_VISUAL_DESIGN_SYSTEM.
   ========================================================================== */

/* --------------------------------------------------- Layout safeguard ------
   Large row gutters (g-5 = 3rem) create -1.5rem side margins that exceed the
   container's mobile padding and cause horizontal overflow on full-bleed
   screens. Cap the horizontal gutter below lg; full gutter returns at lg+
   (where the container is wide enough to absorb it). Vertical gutter kept. */
/* Below xl the container side-padding (16px) is narrower than the g-5 gutter
   (24px/side), so the row's negative margins would overflow by ~8px when a
   scrollbar narrows the width. Cap the gutter to fit: 2rem in the lg band,
   1.5rem on mobile. Full 3rem returns at xl+, where the viewport margin absorbs it. */
@media (max-width: 1199.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 2rem; }
}
@media (max-width: 991.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ------------------------------------------------------- Provenance labels --
   Editorial rule (03 §5): general-industry education is visually distinct from
   Venus-specific claims, so external facts are never read as Venus's own. */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 0.6875rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.tag--context { color: var(--steel-500); border-color: var(--steel-300); background: transparent; }
.tag--focus   { color: var(--copper-600); border-color: var(--copper-500); background: transparent; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.section--dark .tag--context { color: var(--steel-300); border-color: var(--line-800); }
.section--dark .tag--focus { color: var(--copper-300); border-color: var(--copper-600); }

/* Callout: "What Venus does" inside an education block */
.callout {
  border-left: 3px solid var(--color-accent);
  background: var(--bg-surface);
  padding: var(--space-6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.callout > :last-child { margin-bottom: 0; }
.section--dark .callout { background: var(--bg-dark-alt); }

/* Lead paragraph */
.lead-text { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.5; color: var(--color-text); }
.section--dark .lead-text { color: var(--text-on-dark); }

/* --------------------------------------------------------------------- Hero -
   Home hero: dark, editorial, two-column on desktop. No unsupported claims. */
.hero { position: relative; background: var(--bg-dark); color: var(--text-on-dark); overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--space-12);
  align-items: center;
  padding-block: clamp(3rem, 2rem + 6vw, 7rem);
}
@media (min-width: 992px) {
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-16); }
}
.hero__title {
  font-size: var(--fs-display); line-height: var(--lh-tight);
  color: var(--text-on-dark); margin: 0 0 var(--space-6); letter-spacing: -0.02em;
}
.hero__title .accent { color: var(--copper-300); }
.hero__lede { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem); color: var(--text-on-dark-muted); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero__eyebrow { color: var(--copper-300); }
.hero__visual { display: none; }
@media (min-width: 992px) { .hero__visual { display: block; } }

/* Restrained material/element motif (inline SVG). Faint copper linework. */
.hero-motif { width: 100%; height: auto; color: var(--copper-500); opacity: 0.9; }
.hero-motif .ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.35; }
.hero-motif .node { fill: var(--copper-300); }
.hero-motif .grid-line { stroke: var(--line-800); stroke-width: 1; }
.hero-motif .tile { fill: none; stroke: var(--copper-600); stroke-width: 1.25; opacity: 0.7; }
.hero-motif .sym { fill: var(--text-on-dark); font-family: var(--font-heading); font-weight: 600; }
.hero-motif .num { fill: var(--copper-300); font-family: var(--font-mono); }

/* One-time sheen sweep across the hero (M2). Disabled for reduced motion. */
.hero__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(232,168,124,0.08) 50%, transparent 60%);
  transform: translateX(-100%);
}
body.js-loaded .hero__sheen { animation: heroSheen 1400ms var(--ease-out) 300ms 1 both; }
@keyframes heroSheen { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { body.js-loaded .hero__sheen { animation: none; } }

/* ---------------------------------------------------------- Interior header -
   Lighter page header for About / Rare Earth Metals / Research / Contact. */
.page-header { background: var(--bg-page); border-bottom: var(--border-hairline); }
.page-header__inner { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.page-header__title { font-size: var(--fs-h1); margin: 0 0 var(--space-4); max-width: 20ch; }
.page-header__lede { max-width: 54ch; color: var(--color-text-muted); font-size: var(--fs-body); }

/* ---------------------------------------------------------- Value chain ----
   Desktop: horizontal rail with connectors. Mobile: vertical stepper (06). */
.value-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.value-chain__step { position: relative; padding-left: calc(var(--space-12) + var(--space-2)); }
.value-chain__num {
  position: absolute; left: 0; top: 0;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1.5px solid var(--color-accent); border-radius: 50%;
  font-family: var(--font-mono); font-size: 1rem; color: var(--color-accent-strong);
  background: var(--bg-page);
}
.value-chain__step:not(:last-child)::before {
  content: ""; position: absolute; left: 23px; top: 48px; bottom: calc(-1 * var(--space-6));
  width: 2px; background: var(--color-border);
}
.value-chain__label { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-h3); margin: 0 0 var(--space-1); }
.value-chain__text { margin: 0; color: var(--color-text-muted); }

@media (min-width: 992px) {
  .value-chain { grid-template-columns: repeat(var(--vc-cols, 5), minmax(0, 1fr)); gap: var(--space-4); }
  .value-chain__step { padding-left: 0; padding-top: calc(48px + var(--space-6)); }
  .value-chain__num { left: 0; }
  .value-chain__step:not(:last-child)::before {
    left: 48px; right: calc(-1 * var(--space-4)); top: 23px; bottom: auto; width: auto; height: 2px;
  }
  .value-chain__step:hover .value-chain__num { background: var(--color-accent); color: var(--paper-50); transition: background var(--dur-standard) var(--ease-out); }
}
.section--dark .value-chain__num { background: var(--bg-dark); }
.section--dark .value-chain__step:not(:last-child)::before { background: var(--color-border-dark); }
.section--dark .value-chain__text { color: var(--text-on-dark-muted); }

/* ----------------------------------------------------------- Feature split -
   Two-column alternating text/visual (uses Bootstrap grid + order utils). */
.feature-visual {
  border: var(--border-hairline); border-radius: var(--radius-lg);
  background: var(--bg-surface); padding: var(--space-8);
  display: grid; place-items: center; min-height: 220px;
}
/* Cap the motif width so the panel doesn't balloon to full column width and
   tower over the adjacent text column — keeps the two-column row balanced. */
.feature-visual svg { width: 100%; max-width: 300px; height: auto; margin-inline: auto; color: var(--color-accent); }
.section--dark .feature-visual { background: var(--bg-dark-alt); border-color: var(--color-border-dark); }

/* --------------------------------------------------------- Element cards ---
   REE education grid: symbol + name + primary use (industry context). */
.element-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 576px) { .element-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .element-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.element-card { border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-4); background: var(--bg-page); }
.element-card__sym { font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--color-accent-strong); }
.element-card__name { font-weight: var(--fw-semibold); margin: var(--space-1) 0 0; }
.element-card__use { font-size: var(--fs-small); color: var(--color-text-muted); margin: var(--space-1) 0 0; }

/* --------------------------------------------------------- Definition list -
   Research areas / focus items with controlled maturity labels. */
.focus-list { display: grid; gap: var(--space-4); }
.focus-item { border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-6); background: var(--bg-page); }
.focus-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.focus-item__title { margin: 0; font-size: var(--fs-h3); }

/* -------------------------------------------------------- Leadership card --
   Directory card with a neutral avatar placeholder (no invented photos). */
.leader-card { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: var(--space-6); background: var(--bg-page); border: var(--border-hairline); border-radius: var(--radius-md); }
.leader-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--color-border);
  display: grid; place-items: center; color: var(--steel-300);
}
.leader-card__tier { font-family: var(--font-heading); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-strong); }
.leader-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-h3); margin: 0; }
.leader-card__title { color: var(--color-text-muted); margin: 0; }
.leader-card__note { font-size: var(--fs-small); color: var(--steel-500); margin: auto 0 0; }

/* ----------------------------------------------------------------- Form ----
   Contact form — frontend UX only (backend integration pending). */
.form-field { margin-bottom: var(--space-6); }
.form-label { display: block; font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-small); margin-bottom: var(--space-2); }
.form-label .req { color: var(--danger); }
.form-control-venus {
  width: 100%; padding: 0.75rem 0.875rem; font-size: var(--fs-body);
  color: var(--color-text); background: var(--paper-50);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.form-control-venus:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(47,111,176,0.18); }
textarea.form-control-venus { min-height: 140px; resize: vertical; }
select.form-control-venus { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235C554C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.25rem; }

.form-field.has-error .form-control-venus { border-color: var(--danger); }
.form-error { display: none; color: var(--danger); font-size: var(--fs-small); margin-top: var(--space-2); }
.form-field.has-error .form-error { display: flex; align-items: center; gap: var(--space-2); }
.form-error::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; flex: 0 0 auto; }

.form-consent { display: flex; gap: var(--space-3); align-items: flex-start; }
.form-consent input { margin-top: 0.2rem; width: 18px; height: 18px; flex: 0 0 auto; }
.form-consent label { font-size: var(--fs-small); color: var(--color-text-muted); }

.form-success {
  display: none; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-6); border: 1px solid var(--success); border-radius: var(--radius-md);
  background: rgba(46,125,91,0.06); color: var(--color-text);
}
.form-success.is-visible { display: flex; }
.form-success__icon { color: var(--success); flex: 0 0 auto; }

/* Contact split layout */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
@media (min-width: 992px) { .contact-grid { grid-template-columns: 1.3fr 0.7fr; gap: var(--space-16); } }
.contact-detail { margin-bottom: var(--space-6); }
.contact-detail__label { font-family: var(--font-heading); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-500); margin-bottom: var(--space-1); }

/* ==========================================================================
   STAGE 4 — DEPTH, MATERIAL & INTERACTION REFINEMENT
   Additive layers only. All decorative layers are position:absolute, inset:0,
   pointer-events:none inside overflow-clipped, relative containers — so they
   never affect layout, scroll width, or interaction. Everything degrades to
   the flat design without JS and collapses under reduced motion.
   ========================================================================== */

/* --- Technical grid + controlled glow on dark surfaces --------------------- */
.hero, .error-hero, .cta-band { position: relative; overflow: hidden; isolation: isolate; }

/* Fine engineering grid, faded at the edges via mask. */
.hero::before, .error-hero::before, .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 78%);
}
/* Soft copper glow — pure gradient (no blur filter) for performance. */
.hero::after, .error-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 720px; height: 720px; top: -260px; right: -180px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-copper) 0%, transparent 65%);
}
.cta-band::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 520px; height: 520px; bottom: -260px; left: -140px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-copper-soft) 0%, transparent 68%);
}
.hero > .container, .error-hero > .container, .cta-band > * { position: relative; z-index: 1; }

/* --- Interior page-header: subtle, distinct-but-related depth -------------- */
.page-header { position: relative; overflow: hidden; }
.page-header::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-light) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 62%);
          mask-image: linear-gradient(90deg, #000, transparent 62%);
}
/* A thin copper accent tick under the eyebrow gives each header identity. */
.page-header__inner { position: relative; z-index: 1; }
.page-header .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
.page-header .eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--color-accent);
  display: inline-block;
}

/* --- Page hero identity ----------------------------------------------------
   Each interior page carries a distinct, systematic marker: a large faint
   copper-hairline INDEX numeral (01–08) watermarked into the header. One
   pattern, one [data-index] per page — pages feel individuated but unified.
   Desktop-only (space), decorative, clipped by the header's overflow:hidden. */
.page-header { --ph-pad: clamp(3rem, 2.4rem + 3.4vw, 5.5rem); }
.page-header__inner { padding-block: var(--ph-pad); }
.page-header__title {
  font-weight: var(--fw-bold); letter-spacing: -0.02em;
  font-size: clamp(2rem, 1.55rem + 2.2vw, 3.25rem); max-width: 18ch;
}
.page-header__lede { max-width: 54ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); }
.page-header[data-index]::after {
  content: attr(data-index);
  position: absolute; top: 50%; right: clamp(1rem, 4vw, 5rem); transform: translateY(-50%);
  font: var(--fw-bold) clamp(7rem, 15vw, 13rem)/0.9 var(--font-heading);
  letter-spacing: -0.05em; color: transparent;
  -webkit-text-stroke: 1.25px rgba(184, 115, 51, 0.16);
  z-index: 0; pointer-events: none; user-select: none; display: none;
}
@media (min-width: 992px) { .page-header[data-index]::after { display: block; } }

/* --- Hero 3D depth (perspective + pointer tilt, JS-driven) ----------------- */
.hero__visual { perspective: 1200px; }
.hero-tilt { transform-style: preserve-3d; }
[data-tilt] { transition: transform var(--dur-standard) var(--ease-out); will-change: transform; }
[data-tilt] .tilt-layer { transform: translateZ(40px); transition: transform var(--dur-standard) var(--ease-out); }

/* --- Scroll parallax base (transform set by JS) ---------------------------- */
[data-parallax] { will-change: transform; }

/* --- Card depth response --------------------------------------------------- */
.card-venus { position: relative; }
.card-venus::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--color-accent); border-radius: var(--radius-md) 0 0 0;
  transition: width var(--dur-standard) var(--ease-emphasis);
}
.card-venus:hover { transform: translateY(-3px); }
.card-venus:hover::after { width: 48px; }
.focus-item { transition: transform var(--dur-standard) var(--ease-out), box-shadow var(--dur-standard) var(--ease-out); }
.focus-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Feature/element visual panels get a gentle tilt target on desktop. */
.feature-visual { transition: transform var(--dur-standard) var(--ease-out); }

/* Element cards: crisp hover with copper edge. */
.element-card { transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.element-card:hover { transform: translateY(-2px); border-color: var(--copper-500); }

/* --- Button refinement: copper underline sweep on ghost, sheen on primary -- */
.btn-venus { position: relative; overflow: hidden; }
.btn-venus:not(.btn-venus--ghost)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  transform: translateX(-120%);
}
.btn-venus:not(.btn-venus--ghost):hover::before { transform: translateX(120%); transition: transform var(--dur-cinematic) var(--ease-out); }

/* --- Value-chain connector draw-in ---------------------------------------- */
@media (min-width: 992px) {
  .value-chain__step::before { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-cinematic) var(--ease-out); }
  [data-stagger].is-visible .value-chain__step::before { transform: scaleX(1); }
}

/* --- Section continuity: hairline copper edge between stacked bands -------- */
.section--dark { position: relative; }
.section--dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper-600), transparent);
  opacity: 0.5;
}

/* --- Route sweep bar (decorative; never blocks navigation) ----------------- */
.route-sweep {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 2000;
  background: linear-gradient(90deg, var(--copper-600), var(--copper-300));
  pointer-events: none; opacity: 0;
}
.route-sweep.is-sweeping { opacity: 1; width: 100%; transition: width var(--dur-cinematic) var(--ease-out), opacity var(--dur-micro); }

/* --- Reduced motion: strip all Stage-4 decorative motion ------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-tilt], [data-tilt] .tilt-layer, [data-parallax] { transform: none !important; }
  .btn-venus::before { display: none; }
  .value-chain__step::before { transform: scaleX(1) !important; transition: none; }
  .route-sweep { display: none; }
}