/* ==========================================================================
   Michelle Sohn Coaching — INTERIOR PAGES (October 2026)
   Loaded after home.css on every page except the homepage. Uses only the
   tokens defined there; .card and .card-icon (CardGrid.jsx) are styled in
   home.css because the homepage uses them too.
   ========================================================================== */

/* ---------- page intro ---------- */
.page-intro{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,4.5rem)}
.page-intro h1{font-size:clamp(1.99rem,4.14vw,3.53rem)}
/* Text beside a photograph (Leadership Coaching, Elite). */
.page-intro--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}

/* ---------- photographs ---------- */
.page-hero{aspect-ratio:4/3;width:100%;border-radius:var(--r-lg);box-shadow:var(--lift)}
.page-intro--split .page-hero{aspect-ratio:5/4}
/* A band of photography between sections, inset to the content width. */
.band-image{
  aspect-ratio:auto;height:clamp(240px,36vw,480px);
  width:calc(var(--maxw) - 2 * var(--gutter));margin-inline:auto;border-radius:var(--r-lg);
}

/* ---------- card grids (CardGrid.jsx) ---------- */
.pain{background:var(--bg-2);border-block:var(--border) solid var(--line)}
.pain-grid,.omi,.addon-grid{display:grid;gap:1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.pain-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.omi{grid-template-columns:repeat(3,minmax(0,1fr))}
.addon-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{display:grid;align-content:start;gap:.85rem;padding:clamp(1.5rem,2.6vw,2rem)}
.card h3{font-size:1.2rem}
.card p{color:var(--ink-soft);font-weight:300;font-size:.98rem}
/* Outcome / Method / Impact get a little more presence than the grid above. */
.omi .card{padding:clamp(1.8rem,3vw,2.4rem)}
.omi .card h3{font-size:1.34rem}

/* ---------- going deeper: note and facts ---------- */
.fact-note{
  margin-top:clamp(1.5rem,3vw,2rem);max-width:none;color:var(--ink-soft);font-weight:300;
  padding:1.3rem 1.5rem;background:var(--accent-soft);border-radius:var(--r);
}
.fact-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem;margin:1rem 0 0;
}
.fact-list > div{padding:1.4rem 1.5rem;background:var(--surface);border-radius:var(--r)}
.fact-list dt{display:flex;align-items:center;gap:.6rem;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.fact-list dt .icon{font-size:.95rem}
.fact-list dd{margin:.6rem 0 0;font-family:var(--display);font-size:1.03rem;line-height:1.35}

/* ---------- closing call to action: a panel ---------- */
.cta-band .wrap{
  display:grid;justify-items:center;text-align:center;
  padding-block:clamp(3rem,6vw,5rem);border-radius:var(--r-lg);background:var(--surface);
}
.cta-band .sec-head{justify-items:center}
.cta-band .sec-head > h2{font-size:clamp(1.69rem,3.22vw,2.76rem);max-width:15em}
.cta-band .btn{margin-top:2.2rem}
.cta-band .fineprint{margin-top:1.2rem;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- testimonials page ---------- */
.testimonials{padding-top:0}

/* ---------- connect ---------- */
.connect-page{padding-bottom:clamp(4rem,9vw,7rem)}
.book{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem 2rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding:clamp(1.8rem,4vw,3rem);
  border-radius:var(--r-lg);background:var(--surface);
}
.book-text{display:grid;gap:.6rem;max-width:56ch}
.book-text h2{font-size:clamp(1.45rem,2.3vw,1.99rem)}
.book-text p:not(.eyebrow){color:var(--ink-soft);font-weight:300}
.connect-email{margin-top:1.6rem;color:var(--ink-soft);font-weight:300}
.connect-email .icon{color:var(--accent);margin-right:.35rem}
.connect-email a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:4px}
.connect-email a:hover{color:var(--accent)}

/* ---------- legal pages ---------- */
.legal{max-width:72ch;padding-block:clamp(3.5rem,7vw,5.5rem)}
.legal h1{font-size:clamp(1.84rem,3.53vw,2.76rem)}
.legal .updated{color:var(--ink-faint);font-size:.9rem;margin-top:1rem}
.legal h2{font-size:1.3rem;margin-top:2.8rem;padding-top:1.6rem;border-top:var(--border) solid var(--line)}
.legal h3{font-family:var(--body);font-size:1rem;font-weight:600;margin-top:1.6rem}
.legal p,.legal li{color:var(--ink-soft);font-weight:300;overflow-wrap:break-word}
.legal p{margin-top:.9rem}
.legal ul{margin:.9rem 0 0;padding-left:1.15rem;display:grid;gap:.45rem}
.legal a{color:var(--ink);text-decoration-color:var(--accent)}
.legal .callout{margin-top:2rem;padding:1.2rem 1.4rem;background:var(--accent-soft);border-radius:var(--r)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .page-intro--split{grid-template-columns:1fr}
  .pain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .omi{grid-template-columns:1fr}
  .book{grid-template-columns:auto 1fr}
  .book .btn{grid-column:1 / -1;justify-self:start}
}
@media (max-width:600px){
  .pain-grid{grid-template-columns:1fr}
  .book{grid-template-columns:1fr}
  .book .btn{width:100%}
}