/* ==========================================================================
   SPEARPOINT ADVISORS — Why Page Stylesheet
   ==========================================================================
   Page-specific rules only. Loaded after style.css, so it can rely on all
   design tokens (--color-*, --space-*, --fs-*, --radius-*, --shadow-*,
   --transition-*) and shared components already defined there.

   Per the site owner's request, this page is plain text throughout (bold/
   underline preserved exactly as in the source script) — the one exception
   is the "I Help Owners Make the Best-Possible Exit Scenario Happen"
   examples section, which keeps its original card design and uses the
   shared .examples-grid/.example-card/.callout-banner rules below.
   ========================================================================== */

/* --- Why Page Hero --- */
.why-hero {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
}

/* Shared .section padding (var(--space-24), 96px top+bottom) reads like a
   real gap between every block of body copy — this page is meant to read
   like the docx it's built from, one continuous document, not stacked
   cards, so every section on this page gets a much tighter gap. Scoped to
   #main-content since why.css only loads on this page; other pages keep
   the full .section padding. .section.why-hero needs the higher-
   specificity override below since it still needs extra top clearance
   under the fixed nav (not just var(--space-8) like every other section). */
#main-content .section {
  padding: var(--space-8) 0;
}

#main-content .section.why-hero {
  padding-top: calc(var(--nav-height) + var(--space-8));
}

/* .split-panel__grid has no max-width of its own (fills .container, which
   is wider than this) — without this it renders noticeably wider than
   every other section on this page, which is capped below via
   .why-simple. Matches that same width so the hero lines up with the
   rest of the page instead of bleeding wider. */
.why-hero .split-panel__grid {
  max-width: 1200px;
  margin: 0 auto;
  /* Overrides the shared align-items: center — the text column now runs
     much longer than the photo after merging the former why-exit/
     play-your-hand sections into this one, so centering left the photo
     floating mid-page instead of sitting with the opening lines. */
  align-items: start;
}

/* Same fix as .why-hero above, applied to the founder-story photo block
   further down the page — otherwise its split-panel__grid fills the
   wider .container and reads as a different column width than the rest
   of this plain-text page. */
#mike-story .split-panel__grid {
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* This block is only two short paragraphs, so the photo (whose img rule
   is width:100%/height:auto sitewide) renders noticeably taller than the
   text next to it. Capping the height and cropping with object-fit
   keeps the photo proportional to the copy instead of towering over it. */
#mike-story .split-panel__visual--photo img {
  max-height: 320px;
  object-fit: cover;
}

/* --- Plain text content blocks (hero, story, blindsided, reasons, etc.) ---
   Widened from the Examples section's 1040px header width per site
   owner's request for more breathing room; kept in sync with the hero
   grid and final-CTA width above/below so every section on this page
   still reads at the same width. --- */
.why-simple {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

/* No divider seams between the plain-text sections — reads as one
   continuous page instead of stacked blocks. Scoped to this page only
   (#main-content only exists here with why.css loaded), .section + .section
   ::before is the shared sitewide rule other pages still rely on. */
#main-content .section + .section::before {
  display: none;
}

.why-simple h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-8);
}

.why-simple p {
  font-size: var(--fs-lg);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-6);
}

.why-simple p:last-child {
  margin-bottom: 0;
}

.why-simple strong {
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

/* .why-simple strong above wins over the plain .text-accent class on
   specificity, so the 5 Ds callout needs this explicit pairing to stay
   orange instead of falling back to the default text color. */
.why-simple strong.text-accent {
  color: var(--color-orange);
}

.why-simple ul {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
  list-style: disc;
}

.why-simple ul li {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-orange);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
  display: list-item;
}

.why-simple ul li:last-child {
  margin-bottom: 0;
}

.why-simple ul li::marker {
  color: var(--color-orange);
}

/* --- Examples section --- */
.examples-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
  margin-bottom: var(--space-10);
}

.example-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  position: relative;
  overflow: hidden;
}

.example-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(232, 83, 14, 0.3);
}

.example-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(232, 83, 14, 0.1);
  color: var(--color-orange);
  font-size: var(--fs-md);
  margin-bottom: var(--space-5);
}

.example-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
  font-weight: var(--fw-bold);
}

.example-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-bottom: 0;
}

/* --- Callout Banner --- */
.callout-banner {
  max-width: 800px;
  margin: var(--space-10) auto 0;
  padding: var(--space-8) var(--space-10);
  background: linear-gradient(135deg, rgba(232, 83, 14, 0.1), rgba(232, 83, 14, 0.02));
  border: 1px solid rgba(232, 83, 14, 0.25);
  border-radius: var(--radius-lg);
  text-align: center;
}

.callout-banner p {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  margin: 0;
  color: var(--color-text-2);
}

/* --- Final CTA — style.css's .cta-section caps its paragraphs at 600px
   (fine for shorter site-wide CTAs), but this page's closing lines (both
   plain <p>s, matching the docx — neither is a heading) read cramped at
   that width. Widened to 1040px, same as .why-simple above, so the final
   CTA lines up with the rest of the page. --- */
.cta-section p {
  max-width: 1200px;
  text-align: left;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .examples-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .examples-grid {
    grid-template-columns: 1fr;
  }
}