/* ==========================================================================
   EGT Pillar Hub — phero AEO hero, prose, numbered cluster grid, GTU bridge.
   Loaded only on template-pillar.php.
   ========================================================================== */

/* ── Pillar hero AEO pattern ───────────────────────────────────────────── */
.phero { padding: var(--space-14) 0; }
.phero .eyebrow { display: block; margin-bottom: var(--space-3); }
.phero h1 { font-size: clamp(2.2rem, 4.5vw, 3.1rem); max-width: 780px; }
.phero .answer {
  font-size: 1.22rem;
  max-width: 680px;
  margin-top: var(--space-5);
  color: var(--ink-body);
}
.phero-example {
  margin-top: var(--space-8);
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.chord-example {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.chord-example strong { color: var(--ink-heading); }

/* ── Content prose strip ────────────────────────────────────────────────── */
.prose { padding: var(--space-10) 0 var(--space-6); }
.prose p { margin-bottom: var(--space-5); font-size: 1.1rem; }
.prose h2 { font-size: 1.6rem; margin: var(--space-8) 0 var(--space-4); }
.prose h3 { font-size: 1.3rem; margin: var(--space-6) 0 var(--space-3); }
.prose strong { color: var(--ink-heading); }
.prose a { color: var(--brand-strong); }
.prose ul, .prose ol { margin: 0 0 var(--space-5) var(--space-6); }
.prose li { margin-bottom: var(--space-2); line-height: var(--leading-normal); }

/* ── Cluster section ────────────────────────────────────────────────────── */
.cluster { padding: var(--space-16) 0; }
.cluster-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  border-bottom: 2px solid var(--hairline);
  padding-bottom: var(--space-6);
}
.cluster-head h2 {
  font-size: 1.7rem;
  color: var(--ink-heading);
}
.cluster-head .count {
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.cgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.ccard {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-5);
  align-items: start;
  text-decoration: none;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ccard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ccard-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ccard-body {}
.ccard-body h3 {
  font-size: 1.05rem;
  color: var(--ink-heading);
  margin-bottom: var(--space-2);
}
.ccard-body p {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: var(--leading-normal);
}
.ccard-body .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: var(--space-4);
  font-size: 0.86rem;
  font-weight: var(--weight-semibold);
  color: var(--brand-strong);
}
@media (max-width: 760px) {
  .cgrid { grid-template-columns: 1fr; }
}

/* ── GTU bridge at bottom of pillar ────────────────────────────────────── */
.pillar-bridge {
  padding: var(--space-12) 0 var(--space-16);
}