/*
 * home.css: Lane H (Home) styles. Loads after ve-site.css; tokens from
 * tokens.css only; every class is ve-home-*. Components shared with the kit
 * (.ve-stars, .ve-cta, .ve-photo-frame, .ve-related, .ve-acc) live in
 * chrome.css; this file only lays out the home compositions around them.
 */

/* ---------------------------------------------- legacy overrides (home) */
/* ve-site.css section 7 still restyles .ve-eyebrow (uppercase, dot rule);
   the brief wants normal case, 16/600 pink (base.css). Home restores that
   until the integrator deletes the legacy rule. */
body.home .ve-eyebrow {
  display: block;
  gap: 0;
  margin: 0 0 10px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
body.home .ve-eyebrow::before { content: none; }
/* Section H2s on the home read as one line like Premier's: the heading block
   spans its container; only the intro keeps the 62ch measure. */
body.home .ve-heading { max-width: none; }
body.home .ve-heading--center .ve-heading-intro { max-width: 62ch; margin-left: auto; margin-right: auto; }
body.home .ve-heading:not(.ve-heading--center) .ve-heading-intro { max-width: 62ch; }

/* ------------------------------------------------------------ rhythm */
.ve-home-body > .ve-cta-wrap { padding-top: 0; }
.ve-home-body > .ve-section + .ve-cta-wrap { padding-top: 0; }
.ve-home-intro { padding-top: calc(var(--section-y) * 0.6); padding-bottom: calc(var(--section-y) * 0.5); }
.ve-home-pillars-section { padding-top: calc(var(--section-y) * 0.75); padding-bottom: calc(var(--section-y) * 0.5); }
.ve-home-team { padding-top: calc(var(--section-y) * 0.6); }
.ve-home-after .ve-cta-wrap { padding-bottom: var(--section-y); }

/* ------------------------------------------------------ C7 intro split */
.ve-home-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ve-home-intro-text h2 { margin: 0 0 18px; }
.ve-home-intro-text .ve-lead { margin-bottom: 1em; }
.ve-home-intro-text .ve-btn-row { margin-top: 26px; }
.ve-home-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ve-home-collage-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--c-surface);
}
.ve-home-collage-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Two offset columns: the left column starts with a tall photo, the right
   with a short one, so the rows never line up (Premier's masonry feel). */
.ve-home-collage-item--tall { aspect-ratio: 4 / 5; }
.ve-home-collage-item--wide { aspect-ratio: 4 / 3; }
.ve-home-collage-item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
.ve-home-collage-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.ve-home-collage-item:nth-child(3) { grid-column: 2; grid-row: 2; }
.ve-home-collage-item:nth-child(4) { grid-column: 1; grid-row: 3; }
.ve-home-collage-item:nth-child(5) { grid-column: 2; grid-row: 3; aspect-ratio: 4 / 5; }
.ve-home-collage-item:nth-child(4) { aspect-ratio: 4 / 5; }
.ve-home-collage-item:nth-child(1) img { object-position: 50% 30%; }
.ve-home-collage-item:nth-child(2) img { object-position: 50% 30%; }
.ve-home-collage-item:nth-child(4) img { object-position: 45% 50%; }
.ve-home-collage-item:nth-child(5) img { object-position: 50% 30%; }

/* ------------------------------------------------- C8 announcement bar */
.ve-home-announce {
  /* The pillars section below carries its own --section-y top padding, so
     the bar keeps only a small bottom margin (the old var(--section-y) here
     doubled the gap before "How we help"). */
  margin: calc(var(--section-y) * 0.25) 0 0;
  padding: 4px;
  border: 2px solid var(--c-navy);
  border-radius: calc(var(--radius-card) + 2px);
  background: var(--c-white);
}
.ve-home-announce-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 26px 40px;
  border: 1px solid var(--c-navy);
  border-radius: var(--radius-card);
}
.ve-home-announce-copy { min-width: 0; }
.ve-home-announce-title { margin: 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; line-height: 1.25; }
.ve-home-announce-text { margin: 8px 0 0; max-width: 62ch; color: var(--c-text); font-size: var(--fs-small); line-height: 1.6; }
.ve-home-announce-inner .ve-btn { flex: 0 0 auto; min-width: 220px; }

/* ------------------------------------------------- C9 pillar photo cards */
.ve-home-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}
.ve-home-pillar { display: block; color: var(--c-text); text-decoration: none; }
.ve-home-pillar:hover { color: var(--c-text); text-decoration: none; }
.ve-home-pillar .ve-photo-frame { margin-bottom: 18px; }
.ve-home-pillar-title { margin: 0 0 8px; font-size: 22px; font-weight: 500; color: var(--c-ink); transition: color var(--dur-fast) var(--ease-std); }
.ve-home-pillar:hover .ve-home-pillar-title { color: var(--c-pink); }
.ve-home-pillar-text { margin: 0; font-size: var(--fs-small); line-height: 1.7; }

/* ------------------------------------------------------ C11 team strip */
.ve-home-team-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ve-home-team-tiles { display: grid; gap: 16px; }
.ve-home-team-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--grad-brand);
  color: var(--c-white);
  font-size: 26px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.ve-home-team-tile:hover { color: var(--c-white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-card); }
.ve-home-doctors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ve-home-doctors li { margin: 0; }
.ve-home-doctor { display: block; color: var(--c-text); text-decoration: none; }
.ve-home-doctor:hover { text-decoration: none; color: var(--c-text); }
.ve-home-doctor .ve-photo-frame { margin-bottom: 14px; }
.ve-home-doctor .ve-photo-frame img { object-position: 50% 20%; }
.ve-home-doctor-name { display: block; font-size: 18px; font-weight: 600; color: var(--c-ink); }
.ve-home-doctor-note { display: block; margin-top: 2px; color: var(--c-pink); font-size: var(--fs-small); line-height: 1.5; }
.ve-home-doctor-more { display: inline-block; margin-top: 8px; color: var(--c-muted); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; }
.ve-home-doctor:hover .ve-home-doctor-more { color: var(--c-pink); }

/* ---------------------------------------------------------- C13 stories */
.ve-home-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ve-home-story-grid li { margin: 0; }
.ve-home-story { display: block; color: var(--c-text); text-decoration: none; }
.ve-home-story:hover { color: var(--c-text); text-decoration: none; }
.ve-home-story-photo { position: relative; display: block; margin-bottom: 14px; }
.ve-home-story-name {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  padding: 10px 16px;
  border-radius: calc(var(--radius-card) - 4px);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
  color: var(--c-ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.ve-home-story .ve-stars { display: inline-flex; }
.ve-home-story-tag { display: inline-block; color: var(--c-pink); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; }
.ve-home-story-quote { display: block; margin-top: 8px; font-size: var(--fs-small); line-height: 1.6; color: var(--c-text); }
.ve-home-story:hover .ve-home-story-quote { color: var(--c-ink); }

/* --------------------------------------------- VE sections that stay */
.ve-home-condition-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ve-home-conditions-more { margin: var(--block-gap) 0 0; }
.ve-home-guides .ve-row-media img { max-width: 425px; margin: 0 auto; }
.ve-home-faq .ve-acc { margin-top: 0; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1023px) {
  .ve-home-intro-grid { grid-template-columns: 1fr; }
  .ve-home-collage-wrap { order: -1; }
  .ve-home-team-grid { grid-template-columns: 1fr; }
  .ve-home-team-tiles { grid-template-columns: 1fr 1fr; }
  .ve-home-team-tile { min-height: 96px; font-size: 22px; }
  .ve-home-condition-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ve-home-announce-inner { flex-direction: column; align-items: stretch; text-align: center; padding: 22px 20px; }
  .ve-home-announce-text { max-width: none; margin-left: auto; margin-right: auto; }
  .ve-home-announce-inner .ve-btn { min-width: 0; }
  .ve-home-pillars { grid-template-columns: 1fr; gap: 28px; }
  .ve-home-doctors { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .ve-home-story-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .ve-home-story-name { font-size: 18px; }
}
@media (max-width: 479px) {
  .ve-home-collage { gap: 8px; }
  .ve-home-team-tiles { grid-template-columns: 1fr; }
  .ve-home-condition-links { grid-template-columns: 1fr; }
}

/* ------------------------------------------ direction A "Premier" navy */
/* conditions teaser sits on the faint navy wash (pink eyebrow 4.68:1 on it) */
.ve-home-conditions.ve-section--surface { background: var(--c-navy-wash); }
/* team tiles: the navy gradient with a thin gold hairline along the bottom */
.ve-home-team-tile { position: relative; overflow: hidden; font-weight: 300; letter-spacing: 0.2px; }
.ve-home-team-tile::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 18px; height: 2px; background: var(--c-gold); opacity: 0.9; transform: scaleX(0.18); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); pointer-events: none; }
.ve-home-team-tile:hover::after, .ve-home-team-tile:focus-visible::after { transform: scaleX(1); }
.ve-home-doctor-note { color: var(--c-pink); }
.ve-home-story-name { color: var(--c-navy); }

/* the collage enters from the right; clip it so the pending offset never widens the page */
.ve-home-intro { overflow-x: clip; }
/* HomeAfterWrap renders outside <main>, so its running-text links need the underline themselves (WCAG 1.4.1) */
.ve-home-after p a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ve-home-after p a:not([class]):hover { text-decoration-thickness: 2px; }

/* ------------------------------------------ proof line (report #3, #16) */
/* One quiet line of facts under the hero buttons. Each item carries its own
   leading separator; the list is pulled left by one separator width and the
   wrapper clips it, so wrapped lines never start with a dot. */
.ve-home-proof { margin-top: 26px; overflow: hidden; }
.ve-home-proof-list {
  --sep: 1.35em;
  display: block;
  margin: 0 0 0 calc(-1 * var(--sep));
  padding: 0;
  list-style: none;
  color: rgb(255 255 255 / 0.86);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  text-wrap: balance;
}
.ve-home-proof-list li { display: inline-block; margin: 0; white-space: nowrap; }
.ve-home-proof-list li::before {
  content: '\00b7' / '';
  display: inline-block;
  width: var(--sep);
  color: var(--c-gold);
  font-weight: 600;
  text-align: center;
}
.ve-home-proof-star { margin-right: 0.3em; color: var(--c-gold); }
@media (min-width: 1024px) {
  .ve-home-proof { max-width: calc(var(--side-text, 540px) + 64px); }
}
/* phones: the fixed accessibility button (bottom left) and chat bubble
   (bottom right) own roughly the bottom 72px of the screen. Keep the hero
   short enough that the whole proof line ends above them on the first
   screen: a slightly shorter photo crop (faces stay whole; the crop comes off
   the torsos), tighter gaps and a smaller line, which lets the last two facts
   share a line from 390px up. Measured 09-29: clear at 390x844, 393x852,
   412x915, 430x932, 375x812 and 360x800; at 375x667 the line starts just
   below the fold. */
@media (max-width: 479px) {
  body.home .ve-photo-hero.ve-photo-hero--side .ve-photo-hero-img { aspect-ratio: 1133 / 740; }
  body.home .ve-photo-hero--side .ve-photo-hero-actions { margin-top: 20px; }
  .ve-home-proof { margin-top: 14px; }
  .ve-home-proof-list { --sep: 1.1em; font-size: 13px; line-height: 1.55; }
}
@media (max-width: 374px) {
  body.home .ve-photo-hero.ve-photo-hero--side .ve-photo-hero-img { aspect-ratio: 1133 / 690; }
}

/* ------------------------------------------ testimonials (report #8) */
/* Real Google review quotes (src/components/home/testimonials.ts): the
   heading and one large pull quote side by side, then a quiet set of short
   quotes flowing in columns under a single hairline. No cards. Each quote
   opens with five small gold stars (owner ruling 09-29) instead of quote
   marks: a lone gold glyph read like a two-star rating. */
.ve-home-voices {
  --voice-bg: var(--c-white);
  --voice-ink: var(--c-ink);
  --voice-text: var(--c-text);
  --voice-name: var(--c-ink);
  --voice-soft: var(--c-muted);
  --voice-rule: var(--c-line);
  --voice-link: var(--c-pink);
  --voice-link-hover: var(--c-pink-deep);
  position: relative;
  padding: var(--section-y) 0;
  background: var(--voice-bg);
  color: var(--voice-text);
}
.ve-home-voices-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}
.ve-home-voices-head h2 { margin: 0; color: var(--voice-ink); font-size: var(--fs-h2); font-weight: 300; line-height: var(--lh-heading); }
.ve-home-voices-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 22px 0 0; font-size: var(--fs-small); }
.ve-home-voices-links a { color: var(--voice-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ve-home-voices-links a:hover { color: var(--voice-link-hover); text-decoration-thickness: 2px; }
.ve-home-voice { margin: 0; }
.ve-home-voice-quote { margin: 0; padding: 0; border-radius: 0; background: none; color: inherit; }
.ve-home-voice-quote p { margin: 0; }
.ve-home-voice-name { margin-top: 12px; color: var(--voice-name); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.ve-home-voice-source { margin-left: 10px; color: var(--voice-soft); font-weight: 400; }
.ve-home-voice-stars { display: flex; margin-bottom: 10px; color: var(--c-gold); }
.ve-home-voice-stars svg { width: 15px; height: 15px; }
/* the pull quote: large and light */
.ve-home-voice--featured .ve-home-voice-stars { margin-bottom: 18px; gap: 3px; }
.ve-home-voice--featured .ve-home-voice-stars svg { width: 20px; height: 20px; }
.ve-home-voice--featured .ve-home-voice-quote p {
  color: var(--voice-ink);
  font-size: clamp(1.375rem, 1.02rem + 1.55vw, 2.25rem);
  font-weight: 300;
  line-height: 1.42;
}
.ve-home-voice--featured .ve-home-voice-name { margin-top: 22px; font-size: var(--fs-body); }
.ve-home-voices-list {
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: clamp(32px, 4vw, 48px) 0 0;
  border-top: 1px solid var(--voice-rule);
  list-style: none;
  columns: 3 16rem;
  column-gap: clamp(32px, 4vw, 64px);
}
.ve-home-voices-list li { margin: 0 0 clamp(28px, 3vw, 40px); break-inside: avoid; }
.ve-home-voices-list .ve-home-voice-quote p { font-size: var(--fs-small); line-height: 1.7; }
@media (max-width: 1023px) {
  .ve-home-voices-top { grid-template-columns: 1fr; }
}

/* ------------------------------------------- home rhythm (report #10) */
/* Three changes of weight in an otherwise even page: one large-type
   statement (after the pillars), one full-width flat navy band (the
   testimonials) and one gentle curve (the band's top edge). */

/* large-type statement: the biggest words on the page after the H1 */
.ve-home-statement { padding-top: calc(var(--section-y) * 0.9); padding-bottom: var(--section-y); }
.ve-home-statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
}
.ve-home-statement-label {
  margin: 0;
  padding-top: 0.9em;
  color: var(--c-pink);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.4;
}
.ve-home-statement-text {
  max-width: 19ch;
  margin: 0;
  color: var(--c-ink);
  font-size: clamp(2.125rem, 1.25rem + 3.9vw, 4.5rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.ve-home-statement-text span { display: block; margin-top: 0.12em; color: var(--c-pink); }
.ve-home-statement-link {
  display: inline-block;
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.ve-home-statement-link:hover { text-decoration-thickness: 2px; }
@media (max-width: 1023px) {
  .ve-home-statement-grid { grid-template-columns: 1fr; gap: 12px; }
  .ve-home-statement-label { padding-top: 0; }
}

/* the navy band: flat navy (the CTA panels keep the gradient), white type,
   gold names and eyebrow; never pink text on navy */
.ve-home-voices--band {
  --voice-bg: var(--c-navy);
  --voice-ink: var(--c-white);
  --voice-text: rgb(255 255 255 / 0.9);
  --voice-name: var(--c-gold);
  --voice-soft: rgb(255 255 255 / 0.72);
  --voice-rule: rgb(255 255 255 / 0.2);
  --voice-link: var(--c-white);
  --voice-link-hover: var(--c-gold);
  margin-top: calc(var(--section-y) * 0.2);
  padding-top: calc(var(--section-y) + var(--curve-h));
}
.ve-home-voices--band .ve-eyebrow { color: var(--c-gold); }
.ve-home-voices--band a:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; box-shadow: none; }
/* the one body curve: the hero's curve mirrored both ways, so the band
   rises from the right where the hero's edge falls to the left */
.ve-home-voices .ve-home-voices-curve { transform: scale(-1, -1); }