/* ============================================================
   MXPracto SEO Landings — Doccure V2 treatment (Agent 9)
   Loaded AFTER listing_mx.css; upgrades hero to 42px title,
   cards to 10px radius + diffuse shadow, pill gradient CTAs.
   Uses only --mx-* tokens from tokens.css.
   ============================================================ */

/* --- Hero: subtle wash (no gradient), 42px Doccure title --- */
.mx-seo-hero {
  background:
    color-mix(in srgb, var(--mx-primary) 6%, var(--mx-surface-alt));
  padding: 64px 0 52px;
}
.mx-seo-hero h1 {
  font-family: var(--mx-font);
  font-size: var(--mx-title-xl, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--mx-ink-deep);
}
.mx-seo-hero p { font-size: 16px; color: var(--mx-ink-muted); }
.mx-seo-hero--city { box-shadow: var(--mx-shadow-soft); }

/* --- Doctor landing profile card --- */
.mx-seo-profile-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-md, 10px);
  box-shadow: var(--mx-shadow-soft);
  padding: 32px 28px;
  text-align: center;
}
.mx-seo-profile-avatar {
  width: 160px; height: 160px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--mx-primary-surface); margin-bottom: 16px;
}
.mx-seo-profile-card h3 {
  font-family: var(--mx-font); font-size: 22px; font-weight: 700;
  color: var(--mx-ink); margin: 0 0 6px;
}
.mx-seo-profile-spec { font-size: 15px; font-weight: 600; color: var(--mx-primary-dark); margin: 0 0 4px; }
.mx-seo-profile-meta { font-size: 14px; color: var(--mx-gray-400); margin: 0 0 12px; }
.mx-seo-profile-fee { font-size: 14px; color: var(--mx-gray-500); margin: 0 0 20px; }
.mx-seo-profile-fee strong { color: var(--mx-ink); }
.mx-seo-profile-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 32px;
  border-radius: var(--mx-radius-btn, 9999px);
  background: var(--mx-primary); /* solid AA fallback */
  background-image: var(--mx-gradient);
  color: var(--mx-white);
  font-family: var(--mx-font); font-size: var(--mx-text-sm); font-weight: 600;
  text-decoration: none; transition: var(--mx-transition);
  box-shadow: var(--mx-shadow-primary);
}
.mx-seo-profile-btn:hover {
  background: var(--mx-gradient-hover);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-primary-lg);
  transform: translateY(-1px);
}

/* --- About card --- */
.mx-seo-about-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-md, 10px);
  box-shadow: var(--mx-shadow-soft);
  padding: 32px 32px;
}
.mx-seo-about-card h4 {
  font-family: var(--mx-font); font-size: 18px; font-weight: 700;
  color: var(--mx-ink); margin: 0 0 10px;
}
.mx-seo-about-card h4:not(:first-child) { margin-top: 24px; }
.mx-seo-about-card p { font-size: 15px; line-height: 1.65; color: var(--mx-gray-600); margin: 0; }

/* --- Grid cards: 10px radius + diffuse Doccure shadow --- */
.mx-seo-card {
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-md, 10px);
  box-shadow: var(--mx-shadow-soft);
  background: var(--mx-surface);
  padding: 20px;
  transition: var(--mx-transition);
}
.mx-seo-card:hover {
  box-shadow: var(--mx-shadow-md);
  border-color: var(--mx-primary-light);
  transform: translateY(-2px);
}
.mx-seo-card img { width: 64px; height: 64px; }
.mx-seo-card h5 { font-size: 17px; font-weight: 700; }

/* --- Card pill CTA (gradient, AA fallback inline) --- */
.mx-seo-card a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px;
  border-radius: var(--mx-radius-btn, 9999px);
  background: var(--mx-primary);
  background-image: var(--mx-gradient);
  color: var(--mx-white);
  font-family: var(--mx-font); font-size: var(--mx-text-sm); font-weight: 600;
  text-decoration: none; transition: var(--mx-transition);
}
.mx-seo-card a:hover {
  background: var(--mx-gradient-hover);
  color: var(--mx-white);
}

/* --- Chips: pill treatment --- */
.mx-seo-chip {
  border-radius: var(--mx-radius-pill, 9999px);
  padding: 8px 18px;
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .mx-seo-hero { padding: 44px 20px 36px; }
  .mx-seo-hero h1 { font-size: 32px; }
  .mx-seo-card { padding: 16px; }
}
/* --- Print --- */
@media print {
  .mx-seo-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #d0d0d0;
  }
  .mx-seo-card + .mx-seo-card { page-break-before: auto; }
  .mx-seo-hero { background: #fff !important; color: #111 !important; }
  .mx-seo-hero h1 { color: #111 !important; }
  a { text-decoration: underline; }
}