/* ── how-i-lead.css — How I Lead page only ────────────────────────────────────
   Loads after main.css.
   Universal: page-hdr, sec-hdr, sec-hdr--dark, section-inner → main.css.
   Everything below is unique to this page.

   Page structure (four stacked sections):
     How I approach product → .section .hil-section
     How I lead teams       → .section .hil-section
     How I use AI           → .section .section--surface .hil-section
     A failure I own        → .section .hil-section
   ─────────────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION WRAPPERS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Philosophy sections: light bg, bottom separator */
.hil-section { border-bottom: 1px solid var(--hairline); }

/* AI section: dark bg via .hil-section--dark */
.hil-section--dark {
  background: var(--dark);
  color: var(--dark-text);
}

/* sec-hdr in dark AI section uses standard margin-bottom (same as all pages) */
/* sec-intro colour on dark bg handled by main.css: .hil-section--dark .sec-intro */


/* ═══════════════════════════════════════════════════════════════════════════
   PRINCIPLE CARDS  (2-column grid — numbered, ranked)
   Principles 03 and 06 span full width (.hil-principle--featured) to give
   the "cornerstone" principles more visual weight.
   ═══════════════════════════════════════════════════════════════════════════ */

.hil-principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Standard card: accent top border, subtle border, flex column */
.hil-principle {
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  border-top: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

/* Full-width span — applied to principles 03 and 06 */
.hil-principle--featured {
  grid-column: 1 / -1;
}

/* Principle number — large mono numeral as visual anchor */
.hil-principle-num {
  font-family: var(--mono);
  font-size: var(--text-2xl);    /* 38px — prominent but not dominant */
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--hairline-strong);
  line-height: 1;
  margin-bottom: 16px;
  display: block;
}

/* Title — same styles, stacked instead of side-by-side */
.hil-principle-title {
  font-family: var(--serif);
  font-size: var(--text-28);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--accent-strong);
  margin: 0 0 16px;
}
.hil-principle-title em { font-style: italic; color: var(--highlight); }

/* Lead — same style */
.hil-principle-lead {
  font-size: var(--text-prose-lg);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
}

/* Detail — same style */
.hil-principle-detail {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOW I USE AI  (dark section)
   Cards use accent-soft bg — styled by user for dark-on-dark feel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* AI intro text: universal .sec-intro (main.css) with dark color via context */

.hil-ai-examples {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
  margin-bottom: 48px;
}

.hil-ai-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}


.hil-ai-card-title {
  font-family: var(--serif);
  font-size: var(--text-subhead);
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.25;
}

.hil-ai-card-desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 18px;
}

.hil-ai-card-output {
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: var(--text-link);
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
  border-left: 3px solid var(--accent);
  margin-top: auto;
}

.hil-ai-card-output strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--accent-strong);
  font-weight: 600;
  margin-bottom: 10px;
}

.hil-ai-card-output strong::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-strong);
  flex-shrink: 0;
}

/* ── AI section callout — page-specific variant (cool blue, not warm gold) ──
   Used only in the dark "How I Use AI" section.
   The universal .callout-gold (warm highlight) stays in main.css unchanged. */
.hil-ai-callout {
  padding: 20px 24px;
  background: var(--highlight-soft);
  border-left: 5px solid var(--highlight);
}

.hil-ai-callout-title {
  font-family: var(--serif);
  font-size: var(--text-subhead);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--highlight-dark);
  margin: 0 0 10px;
}

.hil-ai-callout-text {
  font-family: var(--serif);
  font-size: var(--text-subhead-sm);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

.hil-ai-callout-text p {
  font-family: var(--serif);
  font-size: var(--text-subhead-sm);
  line-height: 1.3;
  margin: 19px 0;
  color: var(--ink);
}

.hil-ai-callout-text em {
  font-style: italic;
  color: var(--highlight-strong);
}

/* ═══════════════════════════════════════════════════════════════════════════
   "IN PRACTICE" EXAMPLE LINE  (closes each principle card with proof)
   ═══════════════════════════════════════════════════════════════════════════ */
.hil-principle-practice {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.hil-principle-practice strong {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-strong);
  margin-bottom: 8px;
}

/* ── Failure card: one full-width card, constrained for readable line length ── */
.hil-fail-card {
  max-width: 860px;
}
.hil-fail-card .hil-ai-card-desc strong {
  color: var(--ink);
}