/* ============================================================
   BrentAI.ca — Hero Sections v2.0
   100vh scroll sections, gradient + image overlay
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-alt) 40%, var(--bg-primary) 100%);
}

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

/* Guardrail: keep full hero image visible on Series & Lab heroes (no feet cut off) */
.hero-page[data-page="the-series"] .hero-bg,
.hero-page[data-page="the-lab"] .hero-bg {
  background-size: contain;
  background-position: center center;
  background-color: var(--bg-primary);
}

/* Image-hero pages: fill the hero (cover), centered crop so no awkward half-cut */
/* Uses default .hero-bg: cover + center center. Taller min-height = better framing. */
.hero-page[data-page="the-signal"],
.hero-page[data-page="briefing-room"],
.hero-page[data-page="the-vault"],
.hero-page[data-page="the-architect"] {
  min-height: 72vh;
}

.hero-bg-family,
.hero-bg-technocrat {
  opacity: 0;
}

.view-family .hero-bg-family,
.view-technocrat .hero-bg-technocrat {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 15, 26, var(--overlay-opacity)) 0%,
    rgba(10, 15, 26, 0.3) 50%,
    rgba(10, 15, 26, 0.8) 100%
  );
  z-index: 1;
}

.hero-overlay-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    var(--bg-primary) 100%
  );
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

.hero h1 { margin-bottom: 1.25rem; }

.hero .lead {
  font-family: var(--font-body-override);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  color: var(--text-cream);
  opacity: 0.85;
  max-width: 36rem;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.hero .btn { margin-top: 0.5rem; }

/* Contrast panel for readable hero copy on image-heavy backgrounds */
.hero .hero-inner.reveal {
  background: linear-gradient(
    180deg,
    rgba(8, 12, 22, 0.62) 0%,
    rgba(8, 12, 22, 0.42) 100%
  );
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  backdrop-filter: blur(1px);
}

.hero-ghost-equation {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-code);
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  color: var(--gold);
  opacity: 0.08;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* === Page heroes (not full viewport) === */

.hero-page {
  min-height: 60vh;
}

/* Content pages (e.g. lab-7 white paper): hero must NOT cover content — no 100vh, content always visible */
.hero.hero-page.hero-page-content {
  min-height: 35vh !important;
  max-height: 50vh !important;
  height: auto !important;
}
.page-content-section {
  position: relative;
  z-index: 2;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero { min-height: 85vh; padding: 5rem 2rem 3.5rem; }
  .hero-page { min-height: 50vh; }
  .hero-page[data-page="the-signal"],
  .hero-page[data-page="briefing-room"],
  .hero-page[data-page="the-vault"],
  .hero-page[data-page="the-architect"] { min-height: 60vh; }

  .hero-page[data-page="the-series"] .hero-bg,
  .hero-page[data-page="the-lab"] .hero-bg {
    background-size: cover;
    background-position: center 15%;
  }

  .hero h1 { font-size: 2.2rem; }
  .hero .lead { font-size: 1.1rem; max-width: 85%; }
}

@media (max-width: 767px) {
  .hero { min-height: 70vh; padding: 4rem 1rem 2.5rem; }
  .hero-page { min-height: 45vh; }
  .hero-page[data-page="the-signal"],
  .hero-page[data-page="briefing-room"],
  .hero-page[data-page="the-vault"],
  .hero-page[data-page="the-architect"] { min-height: 55vh; }

  .hero-page[data-page="the-series"] .hero-bg,
  .hero-page[data-page="the-lab"] .hero-bg {
    background-size: cover;
    background-position: center 20%;
  }

  .hero h1 { font-size: 1.6rem; }
  .hero .lead { font-size: 0.95rem; max-width: 90%; }
}

@media (max-width: 480px) {
  .hero { min-height: 60vh; padding: 3.5rem 0.75rem 2rem; }
  .hero-page { min-height: 40vh; }
  .hero-page[data-page="the-signal"],
  .hero-page[data-page="briefing-room"],
  .hero-page[data-page="the-vault"],
  .hero-page[data-page="the-architect"] { min-height: 50vh; }

  .hero-page[data-page="the-series"] .hero-bg,
  .hero-page[data-page="the-lab"] .hero-bg {
    background-position: center 25%;
  }

  .hero h1 { font-size: 1.35rem; }
  .hero .lead { font-size: 0.88rem; }
}