/* ═══════════════════════════════════════════════════════════════════════════
   LAUNCHPAD TECHNOLOGY — LAYOUT
   Section patterns, grids, hero, and page-specific layouts.
   Load after components.css.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Section Pattern ─────────────────────────────────────────────────── */

.section {
  padding-block: var(--space-16);
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-24);
  }
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-header h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.section-header p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin-inline: auto;
}

.overline {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
  display: block;
}


/* ── Grid System ─────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-60-40 { grid-template-columns: 1.5fr 1fr; }
.grid-40-60 { grid-template-columns: 1fr 1.5fr; }

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-60-40,
  .grid-40-60 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}


/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: var(--space-32) 0 var(--space-24);
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--max-width);
}

.hero-content {
  max-width: 680px;
}

.hero h1 {
  font-size: var(--text-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-6);
}

.hero-lead {
  font-size: 1.125rem;
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark-secondary);
  max-width: 540px;
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Two-column hero variant */
.hero-inner--split {
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
}

.hero-visual img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: var(--space-24) 0 var(--space-16);
  }
  .hero h1 {
    font-size: 2.25rem;
  }
  .hero-inner--split {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    order: -1;
  }
}


/* ── About / Two-Column Content ──────────────────────────────────────── */

.about-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-12);
  align-items: start;
}

.about-text h2 {
  margin-bottom: var(--space-6);
}

.about-text p {
  margin-bottom: var(--space-4);
}

.about-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}


/* ── Process / How It Works ──────────────────────────────────────────── */

.process-step {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.process-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #FFFFFF;
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
}

.process-detail h3 {
  margin-bottom: var(--space-2);
}

.process-detail p {
  max-width: none;
}


/* ── Contact Section ─────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.contact-info h2 {
  margin-bottom: var(--space-4);
}

.contact-info p {
  margin-bottom: var(--space-6);
}

.contact-detail {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.contact-detail svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

.contact-detail a {
  color: var(--color-text-secondary);
}

.contact-detail a:hover {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}


/* ── Scroll Reveal Animation ─────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger reveals when multiple .reveal items sit inside the same .grid /
     .reveal-stagger parent — each child waits a beat after the previous one.
     Capped at 8 children to avoid runaway delays on long lists. */
  .grid > .reveal:nth-child(1).visible,
  .reveal-stagger > .reveal:nth-child(1).visible { transition-delay:   0ms; }
  .grid > .reveal:nth-child(2).visible,
  .reveal-stagger > .reveal:nth-child(2).visible { transition-delay:  80ms; }
  .grid > .reveal:nth-child(3).visible,
  .reveal-stagger > .reveal:nth-child(3).visible { transition-delay: 160ms; }
  .grid > .reveal:nth-child(4).visible,
  .reveal-stagger > .reveal:nth-child(4).visible { transition-delay: 240ms; }
  .grid > .reveal:nth-child(5).visible,
  .reveal-stagger > .reveal:nth-child(5).visible { transition-delay: 320ms; }
  .grid > .reveal:nth-child(6).visible,
  .reveal-stagger > .reveal:nth-child(6).visible { transition-delay: 400ms; }
  .grid > .reveal:nth-child(7).visible,
  .reveal-stagger > .reveal:nth-child(7).visible { transition-delay: 480ms; }
  .grid > .reveal:nth-child(8).visible,
  .reveal-stagger > .reveal:nth-child(8).visible { transition-delay: 560ms; }

  /* Hero content stagger — headline first, then lead, then CTAs.
     Triggers immediately on page load (no scroll required). */
  .hero-content .reveal { transition-delay: 0ms; }
  .hero-content .reveal:nth-child(1) { transition-delay:   0ms; }
  .hero-content .reveal:nth-child(2) { transition-delay: 120ms; }
  .hero-content .reveal:nth-child(3) { transition-delay: 260ms; }
}

/* ── Inner Page Layout ──────────────────────────────────────────────── */
.page-body {
  padding-top: 0;
}

/* Case study detail */
.case-study-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 768px) {
  .case-study-hero { grid-template-columns: 1fr; }
}

/* Feature list with icons */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 768px) {
  .feature-list { grid-template-columns: 1fr; }
}
.feature-list-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.feature-list-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-md);
  color: var(--color-accent);
}
.feature-list-item h4 {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.feature-list-item p {
  font-size: var(--text-small);
  max-width: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO — SANCTIONED PHOTO TREATMENT
   Per design.md §6.4 / launchpad-brand skill.
   Hero only — no other section uses these patterns.

   Layer stack (z-index 0 = back, z-index 1 = front):
     0.  .hero-photo          — NASA HUDF photograph, Ken-Burns slow zoom
     0.5 .hero-overlay        — navy gradient for text legibility
     0.5 .hero-halo           — single blue radial halo for brand cohesion
     0.5 .hero-circuit        — repeated circuit-trace SVG, lower-left
     1.  .hero-inner          — content (headline, lead, CTAs)
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
  /* Keep solid navy as fallback while photo loads; image lays over it. */
  background-color: var(--color-bg-dark);
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
  overflow: hidden;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Ken-Burns: 60-second slow zoom from 100% to 106%, infinite alternate.
     Subtle by design — visitors feel depth, not movement. */
  animation: hero-kenburns 60s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1.5%, -0.5%); }
}

/* Navy gradient overlay — denser at the bottom-left where the headline sits. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(11, 17, 32, 0.85) 0%, rgba(11, 17, 32, 0.55) 50%, rgba(11, 17, 32, 0.65) 100%),
    linear-gradient(to bottom, rgba(11, 17, 32, 0) 0%, rgba(11, 17, 32, 0.4) 100%);
}

/* Blue brand halo — anchors the photo to the Launchpad palette. */
.hero-halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 78% 22%,
              rgba(68, 144, 226, 0.18), transparent 55%);
  mix-blend-mode: screen;
}

.hero-circuit {
  position: absolute;
  left: 4%;
  bottom: 6%;
  width: 260px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  filter: drop-shadow(0 0 12px rgba(68, 144, 226, 0.35));
}

.hero-inner,
.hero-content {
  position: relative;
  z-index: 1;
}

/* Mobile: less overlay (smaller image, text already centred above it),
   no circuit accent (would crowd the layout). */
@media (max-width: 768px) {
  .hero-circuit { display: none; }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(11, 17, 32, 0.6) 0%, rgba(11, 17, 32, 0.85) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo img { animation: none; transform: none; }
}