/* ═══════════════════════════════════════════════════════════════════
   thegrossclinic.com — HOME-only layout (index.html).
   Loaded after site.css. Shared components and tokens live in site.css;
   this file only arranges them for the home page.
   ═══════════════════════════════════════════════════════════════════ */

/* Keep a short English run together (e.g. "// TEL AVIV, IL" in the hero eyebrow). */
.nowrap { white-space: nowrap; }

/* ───────── HERO + BACKGROUND VIDEOS ───────── */
/* Monochrome like the rest of the system (the clips carry green/blue screen colour), and dimmed
   so muted text stays AA on the brightest frame. */
.video-bg video { filter: grayscale(1) brightness(0.8); }   /* with the .82 overlay a pure-white frame tops out near #252525, so #8C8C8C labels keep 4.5:1 */
/* A little tighter than the shared hero so the heartbeat band sits closer to the fold. */
.hero .hero-buttons { margin-bottom: 3rem; }
.hero .trust-strip { padding-top: 1.6rem; }
.hero .notice { margin-top: 1.8rem; }

/* ───────── ABOUT: heading beside the prose ───────── */
.about-split { margin-top: 0; }
.about-split h2 { max-width: 11ch; }

/* ───────── TEAM: five tiles ───────── */
/* 5 in one row on wide screens, 3 + 2 on mid widths; site.css takes over at ≤900 (2 cols) and ≤480 (1 col). */
@media (min-width: 1101px) {
  .team-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .team-grid--5 .member { padding: 2.4rem 1.6rem; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .team-grid--5 { grid-template-columns: repeat(3, 1fr); }
}

/* ───────── MAYA: journey timeline + "try it" panel ───────── */
.maya-split {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 5rem;
}
.maya-split .timeline { margin-top: 0.4rem; }
/* In the half-width column the mono step label sits above the title (as the shared timeline does on phones). */
.maya-split .timeline-item { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
.maya-split .timeline-meta { grid-row: 1; text-align: right; padding-top: 0; padding-right: 1rem; }
.maya-split .timeline-item::after { top: 8px; }
.maya-try { min-width: 0; }

/* chips inside the panel: one per row, full width */
.maya-try .chips-label { margin-top: 0.2rem; }
.maya-try .chips { flex-direction: column; align-items: stretch; }
.maya-try .chips button { width: 100%; }
.maya-try .chips-hint { margin-bottom: 1.8rem; }

/* "Maya asks" example lines in the timeline */
.maya-ask {
  margin-top: 1.1rem;
  padding: 0.85rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: 2px solid var(--hair-bold);
  max-width: 620px;
}
.maya-ask-label,
.maya-summary-head {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  direction: ltr;
  text-align: right;
}
.maya-ask-label { margin-bottom: 0.35rem; }
.timeline-content .maya-ask p { font-size: 0.95rem; color: var(--text-primary); font-weight: 400; line-height: 1.7; }

/* Honest flag under the urgent step */
.maya-flag { margin-top: 1rem; }
.maya-flag .note-tag { align-items: baseline; }
.maya-flag .note-tag::before { align-self: center; }
.maya-flag a { color: var(--text-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Example booking summary (the message Maya sends after a booking) */
.maya-summary {
  margin-top: 1.1rem;
  max-width: 620px;
  background: var(--bg-card);
  border: 1px solid var(--hair-strong);
  border-top: 2px solid var(--accent);
}
.maya-summary-head { padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--border); }
.maya-summary dl { padding: 0.3rem 1.1rem 0.5rem; }
.maya-summary dl > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.maya-summary dl > div:last-child { border-bottom: none; }
.maya-summary dt { font-size: 0.85rem; color: var(--text-muted); font-weight: 400; }
.maya-summary dd { font-size: 0.92rem; color: var(--text-primary); font-weight: 400; line-height: 1.6; }

/* What Maya will not do (credentials grid reused) */
.maya-limits { margin-top: 6rem; }

/* ───────── VISIT ───────── */
.visit-note { margin-top: 1.6rem; font-size: 0.98rem; }

/* ───────── FAQ: "didn't find it?" row ───────── */
.faq-more { margin-top: 2.6rem; color: var(--text-body); }

/* ───────── RESPONSIVE ───────── */
@media (max-width: 900px) {
  .maya-split { grid-template-columns: 1fr; gap: 4rem; }
  .about-split h2 { max-width: none; }
  .maya-limits { margin-top: 4.5rem; }
}

@media (max-width: 600px) {
  .maya-split .timeline-meta { padding-right: 0.6rem; }
  .maya-ask, .maya-summary-head { padding-right: 0.9rem; padding-left: 0.9rem; }
  .maya-summary dl { padding-right: 0.9rem; padding-left: 0.9rem; }
  .maya-summary dl > div { grid-template-columns: 1fr; gap: 0.1rem; }
}