/* ============================================================================
   Vitaly Medical Concierge - Page-specific Stylesheet
   ============================================================================

   Loaded by the Medical Concierge family of pages (concierge.html, home.html,
   maternity.html, maternity-concierge.html), after css/styles.css. Contains ONLY
   layout that has no equivalent yet in the shared system (styles.css) - no
   color/typography tokens are redefined here, everything below consumes
   var(--color-*), var(--font-*), var(--spacing-*), etc. from styles.css's :root.
   See DESIGN.md "Future Extensibility": styles stay modular, no leaking
   between sections/pages.
*/

/* ============================================================================
   Hero - single-column variant (no portrait photo exists yet for this page)
   ============================================================================ */

.hero-section--single {
  grid-template-columns: minmax(0, 1fr);
}

.hero-section--single .hero-copy {
  text-align: center;
  align-items: center;
}

@media (min-width: 992px) {
  .hero-section--single {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .hero-section--single .hero-copy {
    padding: var(--spacing-4xl) var(--spacing-xl);
    max-width: 640px;
    margin: 0 auto;
  }

  .hero-section--single .hero-copy > * {
    max-width: none;
  }
}

/* Understated link out to Maternidad, right under the primary CTA - a text
   link, not a second button, so it never competes with "Talk to a Care
   Coordinator" for attention. */
.hero-secondary-link {
  margin: var(--spacing-lg) 0 0;
  font-size: var(--fs-small);
  color: rgba(247, 247, 245, 0.78);
}

.hero-secondary-link a {
  color: var(--color-light);
  text-decoration-color: rgba(247, 247, 245, 0.5);
}

.hero-secondary-link a:hover {
  color: var(--color-light);
  text-decoration-color: var(--color-light);
}

/* ============================================================================
   Vitaly Network Diagram
   ============================================================================ */

.network-section {
  background-color: var(--color-azul-cielo);
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

@media (min-width: 768px) {
  .network-section {
    padding: var(--spacing-3xl) 0;
  }
}

.network-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--spacing-2xl) auto 0;
  max-width: 640px;
}

.network-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 999px;
  background-color: var(--color-light);
  color: var(--color-neutral-dark);
  font-family: var(--font-ui);
  font-weight: var(--fw-demi-bold);
  font-size: var(--fs-body-sm);
  box-shadow: var(--shadow-sm);
}

.network-node--mother,
.network-node--vitaly {
  background-color: var(--color-primary);
  color: var(--color-light);
}

.network-node--hospital,
.network-node--support {
  background-color: var(--color-neutral-dark);
  color: var(--color-light);
}

.network-connector {
  width: 2px;
  height: var(--spacing-xl);
  background-color: var(--color-taupe);
}

.network-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
  margin: var(--spacing-sm) 0;
}

/* ============================================================================
   Bridge to Vitaly Maternidad
   ============================================================================

   Deliberately a single, quieter section - not a second card of equal weight
   to the Concierge body above it. Reuses .section-card (tan, low-contrast)
   and .btn-secondary (both already defined in styles.css but unused until
   now) so it reads as "related, but a different door", not "the other half
   of a 50/50 split". */

.bridge-section {
  background-color: var(--color-light);
  padding: var(--spacing-2xl) 0;
}

@media (min-width: 768px) {
  .bridge-section {
    padding: var(--spacing-3xl) 0;
  }
}

.bridge-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.bridge-card .section-title {
  margin-bottom: var(--spacing-md);
}

.bridge-cta {
  margin-top: var(--spacing-lg);
}

/* ============================================================================
   Section background modifiers
   ============================================================================

   The new pages reuse the same section components several times in a row, so
   the ground is chosen per instance instead of per component - that keeps the
   Luz / Arena Vital / Azul Cielo rhythm from DESIGN.md. "section." raises the
   specificity just enough to beat each component's own background-color. */

section.vitaly-bg-light {
  background-color: var(--color-light);
}

section.vitaly-bg-warm {
  background-color: var(--color-neutral-warm);
}

section.vitaly-bg-sky {
  background-color: var(--color-azul-cielo);
}

/* Even feature cards and the key-phrase box are Azul Cielo themselves; on a
   sky ground they would disappear. */
section.vitaly-bg-sky .feature-card:nth-child(even),
section.vitaly-bg-sky .solution-key-phrase {
  background-color: var(--color-light);
}

/* ============================================================================
   Navigation - services dropdown + persistent CTA
   ============================================================================ */

/* Bootstrap draws the caret with .dropdown-toggle::after, the same pseudo-element
   .nav-link uses for its hover underline. Neutralize the caret (a Tabler chevron
   goes in the markup instead) so the toggle underlines like every other link. */
.vitaly-navbar .dropdown-toggle::after {
  border: 0;
  margin: 0;
  vertical-align: initial;
}

.vitaly-navbar .dropdown-toggle .ti {
  font-size: 16px;
  vertical-align: -2px;
  margin-left: 2px;
}

.vitaly-navbar .nav-link.active::after,
.vitaly-navbar .nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.vitaly-navbar .dropdown-menu {
  min-width: 16rem;
  padding: var(--spacing-xs) 0;
  background-color: var(--color-light);
  border: 1px solid rgba(39, 62, 70, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.vitaly-navbar .dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-md);
  padding: 10px var(--spacing-lg);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-neutral-dark);
}

.vitaly-navbar .dropdown-item:hover,
.vitaly-navbar .dropdown-item:focus {
  background-color: var(--color-neutral-warm);
  color: var(--color-neutral-dark);
}

/* Areas that are not live yet stay visible (they tell the visitor where Vitaly
   is going) but are not links. Taupe-text, not raw Taupe: it still has to pass AA. */
.vitaly-navbar .dropdown-item.disabled {
  color: var(--color-taupe-text);
}

.soon-tag {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--color-taupe-text);
  white-space: nowrap;
}

.nav-cta {
  margin: var(--spacing-sm) 0 var(--spacing-xs);
}

.vitaly-btn-primary.vitaly-btn-sm {
  min-height: 48px; /* touch target */
  padding: 12px 22px;
  font-size: var(--fs-body-sm);
}

.vitaly-btn-sm .ti {
  font-size: 20px;
}

@media (max-width: 991px) {
  .nav-cta .vitaly-btn-primary {
    display: flex;
    width: 100%;
  }
}

@media (min-width: 992px) {
  .nav-cta {
    margin: 0 0 0 var(--spacing-xs);
  }
}

/* ============================================================================
   Hero - shared additions (second action, pillars line, photo placeholder)
   ============================================================================ */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
}

.hero-section--single .hero-actions,
.final-cta-section .hero-actions {
  justify-content: center;
}

/* Secondary action on the green panel: an outline, so it never competes with the
   Luz-filled primary. Hover is a solid darker green, not a translucent wash
   (DESIGN.md bans translucency effects). */
.vitaly-btn-primary.vitaly-btn-outline-on-dark {
  background-color: transparent;
  color: var(--color-light);
  border: 1px solid rgba(247, 247, 245, 0.75);
}

.vitaly-btn-primary.vitaly-btn-outline-on-dark:hover,
.vitaly-btn-primary.vitaly-btn-outline-on-dark:active {
  background-color: var(--color-primary-dark);
  border-color: var(--color-light);
  color: var(--color-light);
}

.vitaly-btn-primary.vitaly-btn-outline-on-dark:focus,
.vitaly-btn-primary.vitaly-btn-outline-on-dark:focus-visible {
  background-color: transparent;
  outline: 2px solid var(--color-light);
  outline-offset: 3px;
}

@media (max-width: 575px) {
  .vitaly-btn-primary.vitaly-btn-outline-on-dark {
    display: flex;
    width: 100%;
  }
}

.hero-pillars {
  margin: 0 0 var(--spacing-lg);
  font-size: var(--fs-body);
  font-weight: var(--fw-demi-bold);
  color: var(--color-light);
}

/* Synthetic placeholder (img/hero-medical-placeholder.svg) until a real photo exists.
   The placeholder is landscape-agnostic, so center it instead of the face-keeping 24%. */
.hero-figure--placeholder img {
  object-position: 50% 50%;
}

/* ============================================================================
   Fragments - "different doctors, different hospitals..." chips
   ============================================================================

   Dashed outline on purpose: these are the disconnected pieces Vitaly joins,
   so they read as loose parts rather than as buttons or tags. */

.fragment-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  max-width: 800px;
  margin: var(--spacing-xl) auto;
  padding: 0;
  list-style: none;
}

.fragment-list li {
  padding: 10px 18px;
  background-color: var(--color-light);
  border: 1px dashed var(--color-taupe);
  border-radius: 999px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-neutral-dark);
}

/* ============================================================================
   Feature grid variants
   ============================================================================ */

/* Any card count centered: an odd last row (7 = 3+3+1, 5 = 3+2) sits in the
   middle instead of hanging on the left. */
@media (min-width: 768px) {
  .features-grid--balanced {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .features-grid--balanced > * {
    flex: 0 1 calc((100% - var(--spacing-lg)) / 2);
  }
}

@media (min-width: 1024px) {
  .features-grid--balanced > * {
    flex-basis: calc((100% - 2 * var(--spacing-xl)) / 3);
  }

  .features-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-lg);
  }
}

/* ============================================================================
   Check list - "Vitaly can support patients who..."
   ============================================================================ */

.check-list {
  display: grid;
  gap: var(--spacing-md);
  max-width: 800px;
  margin: var(--spacing-xl) auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

@media (min-width: 768px) {
  .check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Odd count: the last item spans the row, centered, instead of hanging left. */
  .check-list li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.check-list .ti {
  flex-shrink: 0;
  font-size: 22px;
  line-height: var(--lh-body);
  color: var(--color-primary);
}

/* ============================================================================
   Service cards - areas of care / the two Vitaly experiences
   ============================================================================ */

.services-section {
  background-color: var(--color-light);
  padding: var(--spacing-2xl) 0;
}

@media (min-width: 768px) {
  .services-section {
    padding: var(--spacing-3xl) 0;
  }
}

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .services-grid:not(.services-grid--two) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Four across leaves ~240px per card: trade padding for line length. */
  .services-grid:not(.services-grid--two) .service-card {
    padding: var(--spacing-lg);
  }

  .services-grid--two {
    gap: var(--spacing-xl);
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  background-color: var(--color-light);
  border: 1px solid rgba(39, 62, 70, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.service-icon {
  display: block;
  margin-bottom: var(--spacing-md);
  font-size: 42px;
  line-height: 1;
  color: var(--color-primary);
}

.service-kicker {
  margin-bottom: var(--spacing-xs);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-taupe-text);
}

.service-card h3 {
  margin-bottom: var(--spacing-sm);
}

.service-card p {
  font-size: var(--fs-body-sm);
}

/* Bullets are the node motif (same dot as the hero route and footer hover),
   drawn in CSS so a CMS editor only types plain lines. */
.service-points {
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  list-style: none;
}

.service-points li {
  position: relative;
  padding: 4px 0 4px var(--spacing-lg);
  font-size: var(--fs-body-sm);
}

.service-points li::before {
  content: "";
  position: absolute;
  top: calc(4px + 0.8em - 4px);
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.service-action {
  margin-top: auto;
  padding-top: var(--spacing-md);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 48px;
  font-weight: var(--fw-demi-bold);
}

.service-link .ti {
  transition: transform var(--transition-fast);
}

@media (prefers-reduced-motion: no-preference) {
  .service-link:hover .ti {
    transform: translateX(4px);
  }
}

/* Not live yet: same footprint, quieter - dashed border, no shadow, no link. */
.service-card--soon {
  background-color: transparent !important;
  border-style: dashed;
  border-color: var(--color-taupe);
  box-shadow: none;
}

.service-card--soon .service-icon {
  color: var(--color-taupe-text);
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-tags li {
  padding: 4px 12px;
  background-color: var(--color-neutral-warm);
  border-radius: 999px;
  font-size: var(--fs-small);
}

.services-note {
  max-width: 30em;
  margin: var(--spacing-2xl) auto 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-style: italic;
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-heading);
  text-align: center;
  color: var(--color-neutral-dark);
}

/* ============================================================================
   Vitaly Network - additions
   ============================================================================ */

/* Role-based aliases, so a node's look does not depend on what it is called
   ("Mother", "You", "Patient"...). */
.network-node--primary {
  background-color: var(--color-primary);
  color: var(--color-light);
}

.network-node--dark {
  background-color: var(--color-neutral-dark);
  color: var(--color-light);
}

.network-node {
  text-align: center;
  line-height: 1.35;
}

.network-caption {
  max-width: 640px;
  margin: var(--spacing-2xl) auto 0;
  font-size: var(--fs-body);
}

.network-caption strong {
  display: block;
  margin-top: var(--spacing-xs);
  color: var(--color-primary);
}

/* Horizontal chain (home team -> coordinator -> local care). Stacks on mobile. */
.network-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--spacing-2xl) auto 0;
}

@media (min-width: 768px) {
  .network-chain {
    flex-direction: row;
    justify-content: center;
  }

  .network-chain .network-connector {
    width: var(--spacing-xl);
    height: 2px;
  }

  .network-chain .network-node {
    max-width: 14rem;
  }
}

/* ============================================================================
   Journey - "Pregnancy -> Birth -> Postpartum -> Motherhood"
   ============================================================================

   Same node-and-line motif as the hero stage route, on a light ground.
   Vertical on mobile/tablet (7 stops never fit a phone row), one line from 992px. */

.journey {
  display: grid;
  width: fit-content; /* the vertical list sits centered like the rest of the section */
  max-width: 100%;
  margin: var(--spacing-2xl) auto;
  padding: 0;
  list-style: none;
}

.journey-stop {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 10px 0;
}

.journey-stop:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  height: 100%;
  border-left: 2px solid var(--color-secondary);
}

.journey-node {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background-color: var(--color-light);
}

.journey-label {
  font-weight: var(--fw-medium);
  color: var(--color-neutral-dark);
}

@media (min-width: 992px) {
  .journey {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: auto;
    max-width: 1000px;
  }

  .journey-stop {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-xs);
    text-align: center;
  }

  .journey-stop:not(:last-child)::before {
    top: 9px;
    left: 50%;
    width: 100%;
    height: 0;
    border-left: 0;
    border-top: 2px solid var(--color-secondary);
  }
}

/* ============================================================================
   Service levels - three ways to use Maternity Concierge (no prices yet)
   ============================================================================ */

.tiers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

@media (min-width: 992px) {
  .tiers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tier-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  background-color: var(--color-light);
  border: 1px solid rgba(39, 62, 70, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.tier-card h3 {
  margin-bottom: var(--spacing-xs);
}

.tier-tagline {
  margin-bottom: var(--spacing-md);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

.tier-card p {
  font-size: var(--fs-body-sm);
}

.tier-includes {
  margin-bottom: var(--spacing-xs);
  font-size: var(--fs-small);
  font-weight: var(--fw-demi-bold);
}

.tier-summary {
  margin-top: auto;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(39, 62, 70, 0.1);
  font-weight: var(--fw-demi-bold);
  color: var(--color-primary);
}

.tier-card .vitaly-btn-primary {
  display: flex;
  width: 100%;
  margin-top: var(--spacing-md);
  padding-inline: var(--spacing-md); /* keeps "Talk to a Care Coordinator" on one line in a 3-up card */
}

.tiers-note {
  max-width: 40em;
  margin: var(--spacing-2xl) auto 0;
  font-size: var(--fs-small);
  text-align: center;
  color: var(--color-taupe-text);
}

/* ============================================================================
   Statement - one idea, set large ("Medical care. Human connection...")
   ============================================================================

   Verde Calma ground: DESIGN.md reserves it for sections needing visual rest.
   Azul Sereno on Calma is 5.8:1, Verde Vitaly on Calma 5.0:1 (both AA). */

.statement-section {
  background-color: var(--color-secondary);
  padding: var(--spacing-3xl) 0;
  text-align: center;
}

@media (min-width: 768px) {
  .statement-section {
    padding: var(--spacing-4xl) 0;
  }
}

.statement-title {
  max-width: 18em;
  margin: 0 auto var(--spacing-lg);
  font-size: var(--fs-h2);
  text-wrap: balance;
}

.statement-text {
  max-width: 760px;
  margin: 0 auto var(--spacing-md);
  font-size: var(--fs-lead);
}

.statement-sign {
  margin: var(--spacing-xl) auto 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-style: italic;
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}

/* ============================================================================
   Disclaimer / scope - additions
   ============================================================================ */

.scope-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs);
  max-width: 800px;
  margin: var(--spacing-md) auto var(--spacing-lg);
  padding: 0;
  list-style: none;
}

.scope-list li {
  padding: 6px 14px;
  background-color: var(--color-light);
  border: 1px solid rgba(39, 62, 70, 0.15);
  border-radius: 999px;
  font-size: var(--fs-body-sm);
}

.scope-label {
  margin: var(--spacing-xl) 0 0;
  font-weight: var(--fw-demi-bold);
}

.scope-emergency {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-sm);
  max-width: 800px;
  margin: 0 auto;
  font-weight: var(--fw-demi-bold);
  text-align: left;
}

.scope-emergency .ti {
  flex-shrink: 0;
  font-size: 22px;
  line-height: var(--lh-body);
  color: var(--color-primary);
}

/* ============================================================================
   Founder card without a quote + section action
   ============================================================================ */

.founder-bio {
  margin-bottom: 0;
  font-size: var(--fs-body-sm);
}

.section-action {
  margin-top: var(--spacing-lg);
  text-align: center;
}

/* ============================================================================
   Steps - six-step variant
   ============================================================================

   styles.css tunes .process-steps for exactly five (3+2, then 5 across). Six
   steps read best as 3+3 from 1024px; 6 across would squeeze the titles. */

@media (min-width: 1024px) {
  .process-steps--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-steps--six .step-item,
  .process-steps--six .step-item:nth-child(4),
  .process-steps--six .step-item:nth-child(5) {
    grid-column: auto;
  }
}

@media (min-width: 1200px) {
  .process-steps--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-steps--six .step-item {
    padding: var(--spacing-lg);
  }

  .process-steps--six .step-item h3 {
    font-size: var(--fs-h3);
  }
}

/* ============================================================================
   Footer - additions
   ============================================================================ */

.footer-soon {
  display: inline-block;
  padding: 6px 0;
  font-size: var(--fs-body-sm);
  color: rgba(247, 247, 245, 0.7);
}

.footer-section p + p {
  margin-top: var(--spacing-sm);
}

.footer-disclaimer {
  max-width: 800px;
  margin: 0 auto var(--spacing-md);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
}