/* ══════════════════════════════════════════
   PRAESUM.AI — SHARED INNER PAGE STYLES
   Used by: methode, aanbod, insights, scan
═══════════════════════════════════════════ */

/* ── PAGE HERO (all inner pages) ── */
.page-hero {
  min-height:    55vh;
  display:       flex;
  align-items:   flex-end;
  padding-top:   96px;
  padding-bottom: 80px;
  position:      relative;
  overflow:      hidden;
  background:    var(--ink);
}
.page-hero-inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         80px;
  align-items: flex-end;
}
.page-hero-headline {
  font-family:    var(--font-display);
  font-size:      clamp(44px, 6vw, 80px);
  font-weight:    300;
  letter-spacing: -0.02em;
  line-height:    1.02;
  color:          var(--white);
  animation:      fadeUp 0.9s ease both 0.2s;
}
.page-hero-headline em { font-style: italic; color: var(--gold); }
.page-hero-intro {
  font-size:     16px;
  color:         var(--muted);
  line-height:   1.8;
  margin-bottom: 40px;
  animation:     fadeUp 0.9s ease both 0.35s;
}
.page-hero-meta {
  display:    flex;
  gap:        40px;
  padding-top: 32px;
  border-top: 0.5px solid var(--rule-light);
  animation:  fadeUp 0.9s ease both 0.5s;
}
.meta-item  { display: flex; flex-direction: column; gap: 4px; }
.meta-num {
  font-family: var(--font-display);
  font-size:   32px;
  font-weight: 300;
  color:       var(--white);
  line-height: 1;
}
.meta-label {
  font-size:      11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* Active nav link */
.nav-active { color: var(--surface) !important; }

/* ── BACK LINK ── */
.back-link {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-size:      11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted-2);
  margin-bottom:  40px;
  transition:     color var(--transition);
}
.back-link::before { content: '←'; }
.back-link:hover   { color: var(--muted); }

/* ── PROSE CONTENT ── */
.prose {
  font-size:   16px;
  color:       var(--muted);
  line-height: 1.85;
  max-width:   660px;
}
.prose p + p    { margin-top: 20px; }
.prose strong   { color: var(--surface); font-weight: 400; }

/* ── PULL QUOTE ── */
.pull-quote {
  border-left: 1px solid var(--gold);
  padding:     28px 32px;
  background:  rgba(201,168,76,0.025);
  margin:      40px 0;
}
.pull-quote p {
  font-family: var(--font-display);
  font-size:   20px;
  font-style:  italic;
  color:       var(--surface);
  line-height: 1.55;
  margin:      0;
}
.pull-quote cite {
  font-size:      11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold);
  font-style:     normal;
  display:        block;
  margin-top:     12px;
}

/* ── TWO-COL LAYOUT ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     80px;
  align-items: start;
}
.two-col-tight { gap: 48px; }

/* ── BOX BORDER ── */
.box-border {
  border:     0.5px solid var(--rule);
  padding:    36px;
  background: rgba(201,168,76,0.02);
}

@media (max-width: 768px) {
  .page-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .two-col         { grid-template-columns: 1fr; gap: 48px; }
}