/* =========================================================================
   Justin Karlin, MD — home.css (homepage v2)
   Layered on styles.css. Order of the page:
   surgeon-led hero -> proof (consented results) -> surgeon + credentials ->
   procedures -> method -> patient guide -> FAQ -> journal -> one consult band.
   ========================================================================= */

/* ---------- Hero: the surgeon, not an anonymous eye ---------- */
.hero-v2 .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.hero-v2 h1 { font-size: clamp(38px, 5.2vw, 64px); }
.hero-v2 .hero-intro { max-width: 540px; }

.hero-proof {
  list-style: none;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14px;
  color: var(--muted);
}
.hero-proof li { display: inline-flex; align-items: baseline; gap: 7px; }
.hero-proof b { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink); letter-spacing: -0.01em; }
.hero-proof a { display: inline-flex; align-items: baseline; gap: 7px; border-bottom: 1px solid var(--accent-line); padding-bottom: 2px; transition: border-color .2s ease, color .2s ease; }
.hero-proof a:hover { color: var(--ink); border-color: var(--accent); }
.hero-proof .star { color: var(--accent); }

.hero-portrait {
  margin: 0;
  justify-self: end;
  width: min(100%, 430px);
}
.hero-portrait .frame {
  position: relative;
  aspect-ratio: 449 / 504;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.hero-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }  /* anchor to the top: never crop the head */
.hero-portrait figcaption {
  margin-top: 14px;
  display: grid;
  gap: 3px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.hero-portrait figcaption b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 19px; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .hero-portrait .frame img { animation: heroSettle 2.2s cubic-bezier(.22,.61,.36,1) both; }
  .hero-copy .hero-proof { animation: heroRise 1.0s cubic-bezier(.22,.61,.36,1) .30s both; }
}

/* ---------- Proof: three consented cases, drag to compare ---------- */
.home-results { border-top: 1px solid var(--line); }
/* (compare-tile components moved to site.css — shared with Results and procedure pages) */

/* ---------- Surgeon + credentials (one list instead of three repeats) ---------- */
.home-surgeon { border-top: 1px solid var(--line); }
.surgeon-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.surgeon-v2 h2 { margin-top: 14px; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.04; letter-spacing: -0.025em; }
.surgeon-v2 .lead { margin-top: 22px; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.65; max-width: 540px; }
.cred-list { margin: 0; border-top: 1px solid var(--line); }
.cred-list > div { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.cred-list dt { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cred-list dd { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; letter-spacing: -0.01em; }
.cred-list dd a { border-bottom: 1px solid var(--accent-line); transition: color .2s, border-color .2s; }
.cred-list dd a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Method: three columns, not three screens ---------- */
.method-v2 .principles-v2 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(26px, 3.5vw, 44px);
  border-top: 1px solid var(--line);
  padding-top: clamp(22px, 3vw, 34px);
}
.principle-v2 .idx { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; color: var(--faint); }
.principle-v2 .word {
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.principle-v2.accent .word { color: var(--accent); }
.principle-v2 .sub { margin-top: 16px; color: var(--muted); font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.6; max-width: 380px; }

/* ---------- Consultation: one band, fee stated plainly ---------- */
.consult-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
}
.consult-v2 .consult-actions { margin-top: 0; flex-direction: column; align-items: stretch; }
.consult-v2 .consult-actions .btn { justify-content: space-between; }
.fee-note { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.fee-note b { color: var(--ink); font-weight: 600; }

/* section rhythm: every homepage section opens on a hairline */
#guide, #faq { border-top: 1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-v2 .hero-grid { grid-template-columns: 1fr; }
  .hero-portrait { order: -1; justify-self: start; width: min(100%, 360px); }  /* tablet: whole portrait, uncropped */
  .hero-portrait figcaption { display: none; }
  .surgeon-v2, .consult-v2 { grid-template-columns: 1fr; }
  .method-v2 .principles-v2 { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 620px) {
  .hero-v2 { padding-top: 18px; }
  .hero-v2 h1 { font-size: clamp(40px, 12vw, 54px); }
  .hero-portrait { width: 100%; }
  .hero-portrait .frame { aspect-ratio: auto; height: 300px; }  /* phone: head-to-chest band, top-anchored */
  .hero-proof { gap: 8px 18px; font-size: 13.5px; }
  .hero-proof b { font-size: 17px; }
  .principle-v2 .word { font-size: clamp(40px, 12vw, 52px); }
}