/* ============================================================
   INTEL.CSS — Intelligence Age page styles
   ============================================================ */

/* ── Field 1 — Hero ── */
.intel-hero {
  padding-top: calc(var(--space-3xl) + 60px);
  padding-bottom: var(--space-2xl);
  text-align: center;
}

.intel-hero h1 {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.intel-hero-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin: 0 auto var(--space-lg);
}

.intel-hero-line {
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  max-width: none;
  margin-inline: auto;
}

/* ── Field 2 — The Wave ── */
.intel-wave {
  padding-block: var(--space-2xl);
  background: var(--color-surface-alpha);
}

.intel-wave-img {
  max-width: 960px;
  margin: 0 auto var(--space-sm);
}

.intel-wave-img img {
  width: 100%;
  border-radius: var(--border-radius-lg);
}

.intel-caption {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0 auto var(--space-xl);
  text-align: center;
  max-width: 60ch;
}

.intel-wave-copy {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}

.intel-wave-copy p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  max-width: none;
}

.intel-wave-copy p:last-child {
  margin-bottom: 0;
}

.intel-wave-copy + .intel-nantz {
  margin-top: calc(var(--space-xl) * 0.66);
}

/* Wave closing statement */
.intel-wave-statement {
  font-size: var(--text-lg);
  text-align: center;
  max-width: 52ch;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid rgba(184, 150, 12, 0.3);
  border-bottom: 1px solid rgba(184, 150, 12, 0.3);
}

/* Nantz quote block */
.intel-nantz {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xl);
  align-items: start;
  max-width: var(--max-width-narrow);
  margin: 0 auto var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(184, 150, 12, 0.15);
}

.intel-nantz-img {
  width: 300px;
  flex-shrink: 0;
}

.intel-nantz-img img {
  width: 100%;
  border-radius: var(--border-radius);
}

.intel-nantz-caption {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: var(--space-sm);
  text-align: center;
}

.intel-nantz blockquote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  max-width: none;
}

.intel-nantz cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-accent-gold);
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 768px) {
  .intel-nantz {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .intel-nantz-img {
    width: 120px;
    margin-inline: auto;
  }
}

/* ── Field 3 — Every Era ── */
.intel-eras-intro {
  padding-block: var(--space-2xl);
}

.intel-eras-intro h2 {
  margin-bottom: var(--space-lg);
  max-width: 24ch;
  margin-inline: auto;
}

.intel-eras-intro-copy {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}

.intel-eras-intro-copy p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: var(--space-lg);
}

.intel-eras-intro-copy p strong {
  color: var(--color-text-primary);
}

.intel-kicker {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-gold-bright);
  margin-top: var(--space-lg);
  max-width: none;
  text-align: center;
}

/* ── Field 4 — Five Eras Chart ── */
.intel-eras-chart {
  padding-block: var(--space-2xl);
  background: var(--color-surface-alpha);
}

.intel-eras-chart h2 {
  margin-bottom: var(--space-lg);
}

.intel-chart-label {
  font-size: var(--text-sm);
  color: var(--color-accent-gold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.intel-chart-img {
  max-width: 960px;
  margin: 0 auto var(--space-sm);
}

.intel-chart-img img {
  width: 100%;
  border-radius: var(--border-radius-lg);
}

/* Era cards fallback / supplement below the image */
.intel-era-stack {
  max-width: var(--max-width-narrow);
  margin: var(--space-xl) auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.intel-era-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  padding: calc(var(--space-md) * 0.75) var(--space-lg);
  border-bottom: 1px solid rgba(184, 150, 12, 0.15);
  align-items: center;
}

.intel-era-row:last-child {
  border-bottom: none;
}

.intel-era-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.intel-era-measure {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  text-align: center;
}

.intel-era-civ {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  text-align: right;
}

.intel-era-row--accent {
  padding-block: var(--space-lg);
  border-bottom-color: var(--color-accent-gold);
}

.intel-era-row--accent .intel-era-name {
  color: var(--color-accent-gold);
  font-size: var(--text-xl);
}

.intel-era-row--accent .intel-era-measure,
.intel-era-row--accent .intel-era-civ {
  color: var(--color-text-primary);
}

.intel-era-connector {
  text-align: center;
  color: var(--color-accent-gold);
  font-size: var(--text-lg);
  padding: calc(var(--space-xs) * 0.75) 0;
}

@media (max-width: 768px) {
  .intel-era-row {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-xs);
  }
  .intel-era-measure,
  .intel-era-civ {
    text-align: center;
  }
}

/* ── Field 5 — Limits ── */
.intel-limits {
  padding-block: var(--space-2xl);
}

.intel-limits h2 {
  margin-bottom: var(--space-sm);
  max-width: 24ch;
  margin-inline: auto;
}

.intel-limits-subtitle {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-xl);
}

.intel-limits-copy {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}

.intel-limits-copy p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: var(--space-lg);
}

.intel-limits-copy p strong {
  color: var(--color-text-primary);
}

/* ── Field 6 — Invisible Architecture ── */
.intel-architecture {
  padding-block: var(--space-2xl);
  background: var(--color-surface-alpha);
}

.intel-architecture h2 {
  margin-bottom: var(--space-lg);
  max-width: 22ch;
  margin-inline: auto;
}

.intel-architecture-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto var(--space-xl);
}

.intel-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: var(--max-width-narrow);
  margin: 0 auto var(--space-xl);
}

.intel-arch-block h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

.intel-arch-close {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .intel-arch-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Field 7 — FH Measures the Invisible ── */
.intel-fh {
  padding-block: var(--space-2xl);
}

.intel-fh h2 {
  margin-bottom: var(--space-lg);
  max-width: 20ch;
  margin-inline: auto;
}

.intel-fh-copy {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}

.intel-fh-copy p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: none;
  margin-bottom: var(--space-lg);
}

.intel-fh-close {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  font-style: italic;
  text-align: center;
  max-width: 56ch;
  margin: var(--space-lg) auto 0;
}

/* ── Field 8 — Coherence Advantage ── */
.intel-advantage {
  padding-block: var(--space-2xl);
  background: var(--color-surface-alpha);
  text-align: center;
}

.intel-advantage h2 {
  margin-bottom: var(--space-lg);
}

.intel-advantage p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.intel-advantage-visual {
  max-width: 960px;
  margin: var(--space-xl) auto;
}

.intel-advantage-visual img {
  width: 100%;
  border-radius: var(--border-radius-lg);
}

.intel-advantage .intel-advantage-kicker {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 600;
  color: var(--color-gold-bright);
  max-width: none;
  margin-top: var(--space-lg);
}

/* ── Field 9 — CTA ── */
.intel-cta {
  padding-block: var(--space-2xl);
  background: var(--color-surface);
  text-align: center;
}

.intel-cta h2 {
  margin-bottom: var(--space-lg);
}

.intel-cta p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: none;
  margin: 0 auto var(--space-lg);
}

.intel-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.intel-cta-link {
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-bright);
  font-size: var(--text-sm);
}

.intel-cta-link:hover {
  color: var(--color-accent-gold);
}

/* ── Diamond lists — left-aligned, indented relative to body text ── */
.intel-eras-intro .diamond-list,
.intel-limits .diamond-list,
.intel-fh .diamond-list {
  text-align: left;
  padding-left: calc(var(--space-xl) + var(--space-xl));
}

.intel-arch-block .diamond-list {
  text-align: left;
}

/* ── Section closing lines — gold accent ── */
.intel-section-close,
.intel-section-close strong {
  color: var(--color-gold-bright);
  font-style: italic;
  font-size: var(--text-lg);
}