/* =============================================================================
   SUVA — Doctors page components (loaded only on /doctors)
   Uses design tokens from styles.css.
   ========================================================================== */

/* Breadcrumb (shared pattern) ---------------------------------------------- */
.breadcrumb { font-size: calc(.875rem + 1px); color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--teal-ink); }
.breadcrumb [aria-current="page"] { color: var(--pink-ink); font-weight: 600; }
.breadcrumb svg { width: .85rem; height: .85rem; color: #cbd5e1; }

/* Doctors hero -------------------------------------------------------------- */
.doctors-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, var(--bg-alt)); }
.doctors-hero::before {
    content: ""; position: absolute; left: -8%; top: -40%; width: 40%; height: 150%;
    background: radial-gradient(closest-side, rgba(255,92,168,.10), transparent 70%); pointer-events: none;
}
.doctors-hero-inner {
    position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* No image card — hero copy centered as a single column. */
.doctors-hero-inner--centered {
    grid-template-columns: 1fr; text-align: center; max-width: 44rem; margin-inline: auto;
}
.doctors-hero-inner--centered .breadcrumb ol { justify-content: center; }
.doctors-hero-inner--centered .hero-cta { justify-content: center; }
.doctors-hero-inner--centered .doctors-hero__lead { margin-inline: auto; }
.doctors-hero h1 { margin: 1rem 0 0; }
.doctors-hero h1 .accent-teal { color: var(--teal-ink); }
.doctors-hero__lead { margin-top: 1rem; font-size: calc(1.1rem + 1px); color: var(--text); max-width: 34rem; }

/* Section heading with lotus accent ---------------------------------------- */
.head-lotus { width: 1.6rem; margin: .6rem auto 0; }

/* Horizontal doctor profile cards ------------------------------------------ */
.dpc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.dpc {
    display: grid; grid-template-columns: 40% 1fr; background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dpc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d7e0ea; }
.dpc__media { position: relative; background: var(--bg-alt); }
.dpc__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dpc__accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.dpc--pink .dpc__accent { background: var(--pink); }
.dpc--teal .dpc__accent { background: var(--teal); }
.dpc__body { padding: 1.5rem; display: flex; flex-direction: column; }
.dpc__name { font-size: calc(1.35rem + 1px); margin-bottom: .3rem; }
.dpc--pink .dpc__name { color: var(--pink-ink); }
.dpc--teal .dpc__name { color: var(--teal-ink); }
.dpc__qual { font-size: calc(.92rem + 1px); font-weight: 600; color: var(--ink); margin-bottom: 1rem; }
.dpc__roles { display: grid; gap: .55rem; margin-bottom: 1rem; }
.dpc__roles li { display: flex; align-items: center; gap: .6rem; font-size: calc(.92rem + 1px); color: var(--text); }
.dpc__roles .rc { width: 1.35rem; height: 1.35rem; flex: none; }
.dpc--pink .dpc__roles .rc { color: var(--pink-ink); }
.dpc--teal .dpc__roles .rc { color: var(--teal-ink); }
.dpc__exp {
    display: flex; align-items: center; gap: .75rem; padding: .8rem 0; margin-bottom: .9rem;
    border-top: 1px solid var(--border-soft);
}
.dpc__exp .ic { width: 2.5rem; height: 2.5rem; border-radius: 10px; display: grid; place-items: center; flex: none; }
.dpc__exp b { display: block; font-size: calc(.92rem + 1px); color: var(--ink); line-height: 1.35; }
.dpc__exp small { color: var(--muted); font-size: calc(.82rem + 1px); }
.dpc__desc { font-size: calc(.93rem + 1px); color: var(--text); margin-bottom: 1.3rem; }
.dpc__actions { margin-top: auto; display: flex; gap: .6rem; flex-wrap: wrap; }
.dpc__actions .btn { flex: 1 1 auto; }

/* Why Our Doctors ----------------------------------------------------------- */
.whyd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.whyd-item { text-align: center; padding: 1.25rem .75rem; border-radius: var(--r-card); position: relative; }
.whyd-item:not(:last-child)::after {
    content: ""; position: absolute; right: -.625rem; top: 20%; bottom: 20%; width: 1px; background: var(--border);
}
.whyd-item .ic { width: 3.2rem; height: 3.2rem; border-radius: 16px; display: grid; place-items: center; margin: 0 auto .85rem; }
.whyd-item .ic svg { width: 1.5rem; height: 1.5rem; }
.whyd-item b { display: block; color: var(--ink); font-size: calc(.98rem + 1px); line-height: 1.3; margin-bottom: .35rem; }
.whyd-item span { display: block; font-size: calc(.85rem + 1px); color: var(--muted); }

/* Split CTA ----------------------------------------------------------------- */
.cta-split {
    position: relative; overflow: hidden; border-radius: var(--r-panel); background: var(--soft-teal);
    border: 1px solid var(--border); padding: clamp(1.75rem, 4vw, 2.75rem);
    display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.cta-split__lotus { position: absolute; left: -1.5rem; bottom: -2rem; width: 11rem; opacity: .4; pointer-events: none; }
.cta-split__text { position: relative; z-index: 1; }
.cta-split__text h2 { margin-bottom: .35rem; }
.cta-split__text p { color: var(--text); margin: 0; }
.cta-split__actions { position: relative; z-index: 1; display: flex; gap: .7rem; flex-wrap: wrap; }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .whyd-grid { grid-template-columns: repeat(3, 1fr); }
    .whyd-item:not(:last-child)::after { display: none; }
}
@media (max-width: 900px) {
    .doctors-hero-inner { grid-template-columns: 1fr; }
    .dpc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    /* Stack card: image on top, content below, full-width buttons */
    .dpc { grid-template-columns: 1fr; }
    .dpc__media { aspect-ratio: 4/3; }
    .dpc__actions .btn { flex: 1 1 100%; }
    .whyd-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-split { flex-direction: column; align-items: flex-start; }
    .cta-split__actions .btn { flex: 1 1 auto; }
}