/* ==========================================================================
   DIRECTORY PAGES  -  /doctors and /specialties
   ==========================================================================

   The approved stylesheet already describes both of these pages: the
   `.search-hero-section` / `.filter-bar-wrapper` / `.doctor-listing-layout`
   block and the `.departments-directory-section` / `.departments-grid` block
   were written for them, and are what these routes are built to. Nothing here
   restyles any of that.

   What is here is only what markup the design never wrote needs:

     1. The specialty filters and the "clear the search" control are buttons,
        not links. They have to be, because they filter a list in place rather
        than navigating anywhere - and a link that does not navigate is a
        problem for anyone using a keyboard or a screen reader. So the button's
        own chrome is removed and it is left looking exactly like the link the
        design drew.
     2. `--radius-pill` is used by `.status-badge` in the design but never
        defined, so that rule is dropped by the browser. Aliased here to the
        `--radius-full` the same block defines.
     3. Two joins the design could not have anticipated, because it has no
        markup for these pages: the filter bar sitting inside the hero, and the
        results grid needing a minimum column width so a three-column card grid
        does not squeeze at tablet sizes.

   Hand-authored, unlike the other page sheets, which are extracted from the
   design's own files. `npm run sync:design` copies it to public/ and hashes it
   with the rest - see AUTHORED_SHEETS in scripts/sync-design.mjs.
   ========================================================================== */

:root {
    /* Used by .status-badge in the design; never defined there. */
    --radius-pill: var(--radius-full, 9999px);
}

/* --------------------------------------------------------------------------
   Section spacing — hero → listing, listing → CTA
   --------------------------------------------------------------------------

   Both directory pages share the same structure:
     <DirectorySearchHero>   (hero banner)
     <section.doctor-listing-section | .departments-directory-section>
     <CtaSection>

   The approved stylesheet has no padding between them, so the listing starts
   flush with the hero image bottom edge, and the specialties grid runs
   straight into the CTA band. The values below introduce the breathing room
   the screenshots showed was missing.
   -------------------------------------------------------------------------- */

.doctor-listing-section {
    padding-top: 48px;
}

.departments-directory-section {
    padding-top: 48px;
    /* Extra clearance before the CTA band on the specialties page. */
    padding-bottom: 64px;
}

/* --------------------------------------------------------------------------
   Filters that are buttons
   -------------------------------------------------------------------------- */

.doctor-sidebar .specialty-filter-list {
    list-style: none !important;
    padding: 6px 0 !important;
    margin: 0 !important;
}

.doctor-sidebar .specialty-filter-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.specialty-filter-list button.specialty-filter-link {
    width: 100%;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 20px;
    color: #4a5f72;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.specialty-filter-list button.specialty-filter-link::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b0c4de;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.specialty-filter-list button.specialty-filter-link:hover {
    background: rgba(0, 78, 117, 0.05);
    color: var(--primary-navy, #004e75);
    border-left-color: rgba(0, 78, 117, 0.3);
}

.specialty-filter-list button.specialty-filter-link:hover::before {
    background: var(--primary-navy, #004e75);
    transform: scale(1.2);
}

.specialty-filter-list button.specialty-filter-link.active {
    background: rgba(0, 78, 117, 0.08);
    color: var(--primary-navy, #004e75);
    border-left-color: var(--accent-teal, #1c97d4);
    font-weight: 700;
}

.specialty-filter-list button.specialty-filter-link.active::before {
    background: var(--accent-teal, #1c97d4);
    box-shadow: 0 0 0 3px rgba(28, 151, 212, 0.2);
    transform: scale(1.2);
}

.specialty-filter-list button.specialty-filter-link:focus-visible {
    outline: 2px solid var(--secondary-color, #1c97d4);
    outline-offset: -2px;
}

/* Sidebar header contrast fix */
.doctor-sidebar .sidebar-header {
    background: linear-gradient(135deg, var(--primary-navy, #004e75), #0a3854);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doctor-sidebar .sidebar-title {
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0;
}

.doctor-sidebar .sidebar-count {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Sidebar specialty search
   -------------------------------------------------------------------------- */

.sidebar-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 78, 117, 0.1);
    background: #f4f8fb;
}

.sidebar-search-icon {
    flex-shrink: 0;
    color: #7a9ab5;
}

.sidebar-search-input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8rem;
    color: #1a3347;
    min-width: 0;
}

.sidebar-search-input::placeholder {
    color: #9db5c8;
}

/* Remove the browser-native clear button from the sidebar search. */
.sidebar-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

/* --------------------------------------------------------------------------
   The filter bar, inside the hero
   -------------------------------------------------------------------------- */

.search-hero-section .filter-bar-wrapper {
    max-width: 900px;
}

/*
 * The eyebrow over the hero heading.
 *
 * `background` and `padding` carry `!important` because base.css's own
 * `.section-badge` rule does: it paints the pill `#EBF8FF` with bright blue
 * text, which is right over white and unreadable over this section's
 * photograph. Only the colour here was marked, so the pill stayed pale while
 * the text turned white - "OUR SPECIALTIES" in white on near-white.
 */
.search-hero-section .search-hero-content .section-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px !important;
    color: #ffffff !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.search-hero-section .search-hero-content .section-title {
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.search-hero-section .search-hero-content .section-desc {
    color: #ffffff !important;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 64ch;
    margin: 0 auto 32px auto;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    opacity: 0.95;
}

/* The submit control is a pill button inside a bar of bare inputs, so it keeps
   the pill's shape without the block margin the pill carries elsewhere. */
.doctor-filter-form .filter-submit-btn {
    margin: 0;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Searchable select — filter bar dropdown
   --------------------------------------------------------------------------

   Replaces the native <select> in the filter bar with a fully styleable,
   searchable custom control. The trigger mimics the existing bar layout;
   the floating panel drops below it with an inline search and a scrollable
   option list.
   -------------------------------------------------------------------------- */

/* The outermost wrapper gives us the stacking context for the panel. */
.filter-input-group.select-input {
    position: relative;
}

.searchable-select {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Trigger ------------------------------------------------------------------ */

.searchable-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a3347;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    transition: color 0.15s;
}

.searchable-select-trigger:focus-visible {
    outline: 2px solid var(--accent-teal, #1c97d4);
    outline-offset: 2px;
    border-radius: 4px;
}

.searchable-select-value {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-chevron {
    flex-shrink: 0;
    color: #7a9ab5;
    transition: transform 0.2s ease;
}

.searchable-select.is-open .searchable-select-chevron {
    transform: rotate(180deg);
}

/* Panel -------------------------------------------------------------------- */

.searchable-select-panel {
    position: absolute;
    /* Align to the left edge of the filter-input-group wrapper */
    top: calc(100% + 10px);
    left: -16px;
    z-index: 200;
    min-width: 260px;
    max-width: 340px;
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.12);
    border-radius: 12px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.08),
        0 10px 30px -4px rgba(0, 78, 117, 0.18);
    overflow: hidden;
    animation: searchableSelectIn 0.15s ease;
}

@keyframes searchableSelectIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel search input ------------------------------------------------------- */

.searchable-select-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 78, 117, 0.08);
    background: #f6f9fc;
}

.searchable-select-search-icon {
    flex-shrink: 0;
    color: #9db5c8;
}

.searchable-select-search-input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 0.825rem;
    color: #1a3347;
    min-width: 0;
}

.searchable-select-search-input::placeholder {
    color: #b0c4d8;
}

.searchable-select-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

/* Option list -------------------------------------------------------------- */

.searchable-select-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 78, 117, 0.2) transparent;
}

.searchable-select-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 36px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #3d5a72;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    user-select: none;

    /*
     * The label is left-aligned even when it wraps.
     *
     * This list sits inside the directory hero, which centres its text, and the
     * option's label is a bare text node - an anonymous flex item. A short label
     * sizes that item to the text, so the inherited centring has nothing to do
     * and the row looks left-aligned. A label long enough to wrap fills the
     * width instead, and then it centres: the list read as a mix of
     * left-aligned and centred rows depending on the length of each specialty.
     */
    text-align: left;
    justify-content: flex-start;
}

[dir='rtl'] .searchable-select-option {
    text-align: right;
}

/* The label takes the row, so both of its lines start at the same edge. */
.searchable-select-option > :not(.searchable-select-tick) {
    flex: 1 1 auto;
    min-width: 0;
}

.searchable-select-option:hover,
.searchable-select-option.is-highlighted {
    background: rgba(0, 78, 117, 0.06);
    color: var(--primary-navy, #004e75);
}

.searchable-select-option.is-selected {
    font-weight: 700;
    color: var(--primary-navy, #004e75);
    background: rgba(28, 151, 212, 0.07);
}

.searchable-select-tick {
    position: absolute;
    left: 14px;
    font-size: 0.75rem;
    color: var(--accent-teal, #1c97d4);
    line-height: 1;
}

.searchable-select-empty {
    padding: 14px 16px;
    font-size: 0.825rem;
    color: #9db5c8;
    text-align: center;
    list-style: none;
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */

.doctor-listing-grid {
    /* Three columns is the design's intent at desktop width, but the sidebar
       takes 280px of it - so the columns are allowed to drop to two before the
       1024px breakpoint rather than crushing three cards into the remainder. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* A specialty with no page of its own is not a link, so it must not pretend to
   be one - the hover lift and the pointer both belong to the clickable card. */
.departments-grid div.dept-card {
    cursor: default;
}

.departments-grid div.dept-card:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
    border-color: rgba(6, 29, 51, 0.02);
}

.departments-grid a.dept-card {
    text-decoration: none;
}

/* The icon chip falls back to the specialty's initial when no artwork has been
   uploaded, which keeps an empty chip from reading as a broken image. */
.dept-icon-box strong {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   The end of the grid
   --------------------------------------------------------------------------

   The cards are revealed a page at a time as the reader reaches this block,
   and its button does the same thing on click. It is centred and given room so
   that arriving at it reads as the end of the list rather than as the page
   having stopped loading.
   -------------------------------------------------------------------------- */

.listing-more {
    display: flex;
    justify-content: center;
    margin: 36px 0 0;
    /* Enough height that the sentinel is a target the observer can see even
       when the last row happens to end flush with the viewport. */
    min-height: 48px;
}

/* Two pill buttons the design never drew as buttons: the empty state's reset
   and the one at the end of the grid. `.btn-pill-navy` was written for an <a>,
   so the button's own chrome is removed and the type inherited. */
.no-results-msg button.btn-pill-navy,
.doctor-listing-layout button.btn-pill-navy {
    display: inline-flex;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

/* ------------------------------------------------------------- skip link */

/*
 * The keyboard skip link, off-screen until focused.
 *
 * The directory pages pass the About page's `.ab-skip` class, but that rule is
 * scoped `:where(.mph-page-about)` in the generated about.css - so on
 * `.mph-page-directory` it matched nothing and the link rendered as ordinary
 * body text, printing "Skip to main content" above the header on both the
 * doctors and specialties pages.
 *
 * Styled here rather than by widening the About rule, because about.css is
 * generated from the design file by `npm run sync:design` and editing it would
 * be overwritten. Same colours and the same behaviour for a keyboard user as
 * the design's own.
 *
 * Parked *above* the page rather than to the left of it, which is where the
 * design's `left: -9999px` puts it. That works in English and does not in
 * Arabic: in an RTL document the overflow runs the other way, so the page
 * measured 11,399px wide. `html[dir="rtl"]` clips it, so nobody saw a
 * scrollbar, but the document was still that shape. Moving it off the top has
 * no such side, in either direction.
 */
.mph-page-directory .ab-skip {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    transform: translateY(-250%);
    z-index: 10000;
    background: var(--primary-navy, #004e75);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 0 0 6px 0;
    text-decoration: none;
}

.mph-page-directory .ab-skip:focus {
    transform: none;
}

/* ==========================================================================
   Doctor listing cards  -  /doctors
   --------------------------------------------------------------------------
   Their own box, not the approved `.doctor-card`.

   That card is the home rail's, sized as a flex item with `flex: 0 0 calc(...)`
   and a matching `width`, both `!important`. Dropped into this grid those beat
   the columns: the portrait tile ended up a different height on every card and
   the white panel landed at eight different offsets across one screen, between
   140px and 267px. Patching it meant `!important` on top of `!important`, so
   the directory now owns its card outright and the rail keeps the approved one
   untouched.

   Every measurement below exists to hold a row level while the data underneath
   varies: most consultants have no portrait, roles run from one word to six,
   and expertise chips are free text.
   ========================================================================== */

.mph-page-directory .doctor-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.mph-dr {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.12);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px -8px rgba(0, 78, 117, 0.08);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.mph-dr:hover {
    transform: translateY(-5px);
    border-color: rgba(28, 151, 212, 0.45);
    box-shadow: 0 20px 40px -18px rgba(0, 78, 117, 0.28);
}

.mph-dr__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(11, 30, 54, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

html[dir="rtl"] .mph-dr__badge {
    right: auto;
    left: 12px;
}

.mph-dr__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

/* Portrait ---------------------------------------------------------------- */

.mph-dr__frame {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(145deg, #eaf4fb 0%, #f6fbfe 100%);
    overflow: hidden;
}

.mph-dr__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
}

.mph-dr:hover .mph-dr__photo {
    transform: scale(1.03);
}

.mph-dr__monogram {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.2rem, 3.6vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, #004e75 0%, #1c97d4 100%);
    color: #ffffff;
    user-select: none;
}

/* Body -------------------------------------------------------------------- */

.mph-dr__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    padding: 20px 20px 22px;
}

.mph-dr__name {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--heading-color, #004e75);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.3em);
}

.mph-dr__role {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #1c97d4;
}

.mph-dr__specialty {
    margin: 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.35;
    color: #475569;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
}

/* Chips ------------------------------------------------------------------- */

.mph-dr__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.mph-dr__chip {
    flex: 0 1 auto;
    min-width: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f0f7fc;
    border: 1px solid rgba(28, 151, 212, 0.2);
    color: #00466a;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mph-dr__chip--more {
    flex: 0 0 auto;
    background: rgba(0, 78, 117, 0.08);
    border-color: transparent;
    color: #004e75;
    font-weight: 600;
}

/* Actions ----------------------------------------------------------------- */

.mph-dr__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.mph-dr__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.mph-dr__btn--primary,
a.mph-dr__btn--primary,
.doctor-btn-profile,
a.doctor-btn-profile {
    background: linear-gradient(135deg, #004e75 0%, #0b1e36 100%) !important;
    color: #ffffff !important;
    border: 1px solid #004e75 !important;
    box-shadow: 0 4px 12px rgba(0, 78, 117, 0.2);
}

.mph-dr__btn--primary:hover,
a.mph-dr__btn--primary:hover,
.doctor-btn-profile:hover,
a.doctor-btn-profile:hover {
    background: linear-gradient(135deg, #1c97d4 0%, #004e75 100%) !important;
    border-color: #1c97d4 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(28, 151, 212, 0.35);
}

.mph-dr__btn--ghost {
    background: #f8fafc;
    color: #004e75;
    border: 1px solid rgba(0, 78, 117, 0.18);
}

.mph-dr__btn--ghost:hover {
    background: #eaf4fb;
    border-color: rgba(28, 151, 212, 0.45);
    color: #00466a;
}

.mph-dr__btn:focus-visible {
    outline: 2px solid #1c97d4;
    outline-offset: 2px;
}

/* Category Filter Tabs ---------------------------------------------------- */

.mph-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.mph-category-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 78, 117, 0.14);
    background: #ffffff;
    color: #004e75;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mph-category-tab:hover,
.mph-category-tab.active {
    background: linear-gradient(135deg, #004e75 0%, #0b1e36 100%);
    color: #ffffff;
    border-color: #004e75;
    box-shadow: 0 4px 14px rgba(0, 78, 117, 0.25);
}

/* ==========================================================================
   Specialty listing cards  -  /specialties
   ==========================================================================

   The approved stylesheet has two department cards: the vertical one in the
   home page rail and the horizontal `.dept-card` written inside `.subpage`
   for a directory. Neither is used verbatim, and the reason is the data. Both
   hold a name and a caption; the hospital's departments also have a list of
   conditions and a page of services, and those are what turn thirty-one names
   into something a visitor can scan for their own symptom.

   What *is* taken from the design, exactly, is its visual language for a
   specialty: the full-colour illustration on a white disc, centred, with the
   name uppercase in navy beneath it - `.dept-card` / `.dept-icon` at line
   5110 of base.css, and the `.dept-grid` overrides at 16335. The artwork is
   256px of colour per department and it is the only colour the data carries;
   the first version of this grid put it in a 48px grey tile at 30px and the
   whole page went grey with it.

   Colours, radii and shadows below are the approved sheet's own: navy
   #004e75, bright blue #1c97d4, and the same lift on hover the rail uses.
   ========================================================================== */

/*
 * Depth behind the grid.
 *
 * The design gives the home page's specialty rail a photograph to sit on.
 * Thirty-one cards is too many to float over one, so the band gets the same
 * separation from two very soft brand-tinted washes instead - enough for the
 * white cards to read as lifted off it rather than printed on it, which a
 * single flat `#f4f8fc` never did.
 */
.mph-page-directory .departments-directory-section {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, #e9f2fa 0%, #f5f9fc 34%, #f7fbfd 100%);
    overflow: hidden;
}

.mph-page-directory .departments-directory-section::before,
.mph-page-directory .departments-directory-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.mph-page-directory .departments-directory-section::before {
    inset-inline-start: -160px;
    top: -120px;
    width: 520px;
    height: 520px;
    background: rgba(28, 151, 212, 0.16);
}

.mph-page-directory .departments-directory-section::after {
    inset-inline-end: -200px;
    top: 38%;
    width: 620px;
    height: 620px;
    background: rgba(0, 78, 117, 0.09);
}

.mph-page-directory .departments-grid {
    display: grid;
    /*
     * 260px, not the 4 fixed columns of the design's `.departments-grid`. The
     * track has to hold "Diabetes (Type 1, Type 2, Gestational)" without
     * hyphenating, and `auto-fill` steps down to three and then two columns on
     * the way to a phone rather than squeezing four the whole way.
     */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
    align-items: stretch;
}

.mph-sp {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 28px 22px 18px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow: 0 8px 26px rgba(6, 29, 51, 0.07);
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease;
}

/*
 * The hairline of brand colour along the top edge, drawn rather than given a
 * border so it cannot add to the card's height and pull the grid out of
 * alignment. Revealed on hover.
 */
.mph-sp::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, #1c97d4 0%, #004e75 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html[dir="rtl"] .mph-sp::before {
    transform-origin: right center;
}

.mph-sp:hover::before,
.mph-sp:focus-within::before {
    transform: scaleX(1);
}

.mph-sp:hover,
.mph-sp:focus-within {
    transform: translateY(-6px);
    border-color: rgba(0, 78, 117, 0.16);
    box-shadow: 0 22px 44px rgba(6, 29, 51, 0.16);
}

/* A specialty with no landing page: same card, quieter, and not clickable. */
.mph-sp--static {
    background: #fbfdfe;
    border-color: rgba(0, 78, 117, 0.12);
    border-style: dashed;
}

.mph-sp--static:hover {
    transform: none;
    box-shadow: 0 8px 26px rgba(6, 29, 51, 0.07);
}

/*
 * The illustration, on the design's white disc.
 *
 * The disc is there for the same reason `.dept-icon` has one: some of the
 * PNGs are transparent and some ship a white ground, and only a white circle
 * behind both makes the set look like a set. The image is drawn larger than
 * the disc and clipped by it, which is the design's own trick for cropping
 * the generous padding the artwork was exported with.
 */
.mph-sp__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(7, 22, 44, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mph-sp:hover .mph-sp__icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 26px rgba(7, 22, 44, 0.18);
}

.mph-sp__icon img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    display: block;
}

/* Laboratory Medicine and Rheumatology have no artwork; the monogram has to
   carry the same weight on the same disc rather than look like a failure. */
.mph-sp__icon--monogram {
    background: linear-gradient(135deg, #e8f4fb 0%, #d5e8f4 100%);
}

.mph-sp__icon--monogram strong {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #004e75;
}

.mph-sp__name {
    /*
     * A heading, so the margins the browser gives one have to go - and stated
     * here rather than left to the `.subpage` reset, because that reset is no
     * longer over the whole document.
     */
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #004e75;
    overflow-wrap: break-word;
}

/*
 * The link covers the card.
 *
 * The whole card is clickable, but only the department's name is the link, so
 * a screen reader announces "Cardiology & Heart Care, link" rather than
 * reading the conditions and the service count as part of the link's name.
 */
.mph-sp__link {
    color: inherit;
    text-decoration: none;
}

.mph-sp__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
}

.mph-sp__link:focus-visible::after {
    outline: 2px solid #1c97d4;
    outline-offset: -3px;
}

.mph-sp__sub {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #24384a;
}

/*
 * The fallback line - the opening sentence of the department's own
 * introduction, where no editor has written a sub-line.
 *
 * Those sentences run from 100 to 280 characters, so they are clamped rather
 * than cut in PHP: the whole sentence stays in the markup for a crawler and
 * for anyone reading with styles off, and the card shows as much of it as
 * three lines hold. Clamping also keeps the cards' heights close, which
 * trimming to a character count would not - "Oncology is a branch of medicine
 * that deals with the prevention, diagnosis, and treatment of cancer." is a
 * third the length of Dentistry's.
 */
.mph-sp__sub--long {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: 13.5px;
    color: #48607a;
}

.mph-sp__treats {
    width: 100%;
    padding-top: 4px;
}

.mph-sp__treats-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8496a8;
}

.mph-sp__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mph-sp__chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f7fb;
    border: 1px solid rgba(0, 78, 117, 0.08);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    color: #40566b;
}

/*
 * The footer, and only the footer, takes the card's slack.
 *
 * Every card in a row is as tall as the tallest, and what varies is how much
 * each one has to say. Pinning the footer to the bottom lines up the rules and
 * the "Read more" links across a row while the text above stays where it
 * belongs, under the heading. Pushing the conditions down instead - the other
 * way to align the footers - opened a hole between the name and the chips on
 * exactly those cards that had the least to show.
 */
.mph-sp__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 78, 117, 0.08);
}

/* With nothing to its left, the link sits on its own at the end of the row. */
.mph-sp__foot > .mph-sp__cta:only-child {
    margin-inline-start: auto;
}

.mph-sp__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7c8f;
}

.mph-sp__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1c97d4;
}

.mph-sp__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #1c97d4;
    background: rgba(28, 151, 212, 0.1);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.mph-sp:hover .mph-sp__arrow {
    background: #1c97d4;
    color: #ffffff;
    transform: translateX(3px);
}

html[dir="rtl"] .mph-sp:hover .mph-sp__arrow {
    transform: translateX(-3px);
}

html[dir="rtl"] .mph-sp__arrow svg {
    transform: scaleX(-1);
}

/* ------------------------------------------------- clearing the search */

/*
 * A button, not a link: it filters the list in place rather than navigating.
 * Same treatment as the sidebar's reset on the consultants page - the button's
 * own chrome removed, left looking like the design's text link.
 */
.mph-sp-clear {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1c97d4;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mph-sp-clear:hover {
    color: #004e75;
}

.mph-sp-clear:focus-visible {
    outline: 2px solid #1c97d4;
    outline-offset: 3px;
    border-radius: 4px;
}

/* The empty state is a grid item, and has to span the whole grid rather than
   sit in the first column with seven empty tracks beside it. */
.mph-page-directory .departments-grid .no-results-msg {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .mph-page-directory .doctor-listing-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }

    .mph-dr__actions {
        grid-template-columns: 1fr;
    }
}

/* ─── The directory layout, per the client's reference ────────────────── */

/*
 * The filter bar, lifted out of the hero.
 *
 * It used to sit over the photograph inside the band. The reference layout
 * gives it a white card that straddles the edge of the hero, which is what
 * makes four controls legible where two were the practical limit over an
 * image - and reads as a toolbar rather than as part of the picture.
 */
:where(.mph-page-directory) .mph-filter-band {
  position: relative;
  z-index: 2;
  margin-top: -2.75rem;
  margin-bottom: 2.5rem;
}

:where(.mph-page-directory) .mph-filter-band .filter-bar-wrapper {
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(4, 20, 33, 0.12);
  padding: 0.6rem 0.75rem;
}

@media (max-width: 900px) {
  :where(.mph-page-directory) .mph-filter-band {
    margin-top: -1.5rem;
  }
}

/*
 * The reassurances under the opening paragraph.
 *
 * A row on a wide screen and a column on a phone, because three of these
 * squeezed side by side at 380px is three columns of wrapped fragments.
 */
:where(.mph-page-directory) .mph-hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.25rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

:where(.mph-page-directory) .mph-hero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #ffffff;
}

:where(.mph-page-directory) .mph-hero-trust-item i {
  font-size: 1.25rem;
  color: var(--accent-blue-bright, #4fc3f7);
  flex-shrink: 0;
}

:where(.mph-page-directory) .mph-hero-trust-item strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

:where(.mph-page-directory) .mph-hero-trust-item em {
  display: block;
  font-size: 0.85rem;
  font-style: normal;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.35;
}

/* The quoted line floated over the side of the photograph the copy leaves. */
:where(.mph-page-directory) .mph-hero-quote {
  display: none;
  margin: 0;
}

@media (min-width: 1100px) {
  :where(.mph-page-directory) .search-hero-section .container {
    position: relative;
  }

  :where(.mph-page-directory) .mph-hero-quote {
    display: block;
    position: absolute;
    right: 0;
    bottom: 1rem;
    max-width: 17rem;
    padding: 1.15rem 1.3rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  }

  :where(.mph-page-directory) .mph-hero-quote blockquote {
    margin: 0;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: #ffffff;
  }

  :where(.mph-page-directory) .mph-hero-quote figcaption {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
  }

  /* The quote is decoration; it must never sit on top of the reading column. */
  html[dir='rtl'] :where(.mph-page-directory) .mph-hero-quote {
    right: auto;
    left: 0;
  }
}

/*
 * The band of claims under the list.
 *
 * One row that wraps, rather than a fixed four columns: the reference layout
 * has four on Find a Doctor and the hospital may write three or five.
 */
:where(.mph-page-directory) .mph-value-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 2rem 2.25rem;
  border: 1px solid rgba(0, 78, 117, 0.08);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(4, 20, 33, 0.05);
}

:where(.mph-page-directory) .mph-value-band__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 14rem;
}

:where(.mph-page-directory) .mph-value-band__item i {
  font-size: 1.5rem;
  color: var(--accent-blue-bright, #1c97d4);
  flex-shrink: 0;
}

:where(.mph-page-directory) .mph-value-band__item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading-color, #004e75);
  line-height: 1.3;
}

:where(.mph-page-directory) .mph-value-band__item em {
  display: block;
  font-size: 0.86rem;
  font-style: normal;
  color: #64748b;
  line-height: 1.4;
}

/* ─── Specialities: the grid with a panel beside it ───────────────────── */

/*
 * The grid gives up a column to the panel, rather than the panel floating
 * over it. Below 1100px the panel drops under the grid, because a 300px
 * column beside a 300px grid is two narrow columns and no reading order.
 */
:where(.mph-page-directory) .mph-sp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 1100px) {
  :where(.mph-page-directory) .mph-sp-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

:where(.mph-page-directory) .mph-sp-aside {
  position: sticky;
  top: 108px;
  padding: 1.5rem;
  border: 1px solid rgba(0, 78, 117, 0.08);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(4, 20, 33, 0.07);
}

:where(.mph-page-directory) .mph-sp-aside__media {
  display: block;
  margin-bottom: 1.15rem;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #eef4f8;
}

:where(.mph-page-directory) .mph-sp-aside__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

:where(.mph-page-directory) .mph-sp-aside__title {
  margin: 0 0 0.6rem;
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--heading-color, #004e75);
}

:where(.mph-page-directory) .mph-sp-aside__body {
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
}

:where(.mph-page-directory) .mph-sp-aside__cta {
  width: 100%;
  justify-content: center;
}

:where(.mph-page-directory) .mph-sp-aside__points {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

:where(.mph-page-directory) .mph-sp-aside__points li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #334155;
}

/* A tick drawn in CSS rather than an icon font, so the list needs no markup. */
:where(.mph-page-directory) .mph-sp-aside__points li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.35em;
  width: 0.55rem;
  height: 0.3rem;
  border-inline-start: 2px solid var(--accent-blue-bright, #1c97d4);
  border-block-end: 2px solid var(--accent-blue-bright, #1c97d4);
  transform: rotate(-45deg);
}

/* ─── The suggested searches under the box ────────────────────────────── */

:where(.mph-page-directory) .mph-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  margin-top: 1rem;
  padding-inline: 0.4rem;
}

:where(.mph-page-directory) .mph-popular__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
}

:where(.mph-page-directory) .mph-popular__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(.mph-page-directory) .mph-popular__chip {
  border: 1px solid rgba(0, 78, 117, 0.16);
  background: #ffffff;
  color: var(--heading-color, #004e75);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

:where(.mph-page-directory) .mph-popular__chip:hover,
:where(.mph-page-directory) .mph-popular__chip:focus-visible {
  background: #eef7fc;
  border-color: rgba(28, 151, 212, 0.5);
}

/* ==========================================================================
   MODERN SPECIALTIES DIRECTORY REDESIGN
   ========================================================================== */

.mph-sp-page {
  background-color: #f8fafc;
  min-height: 100vh;
}

/* ─── 1. Modern Light Hero Section ────────────────────────────────────────── */

.mph-sp-hero {
  position: relative;
  background: url('/hero_specialties_mph_banner.jpg') no-repeat right center / cover;
  padding: 10.5rem 0 5.5rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 78, 117, 0.12);
}

[dir="rtl"] .mph-sp-hero {
  background-position: left center;
}

.mph-sp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none !important;
  display: none !important;
  pointer-events: none;
  z-index: 0;
}

[dir="rtl"] .mph-sp-hero::before {
  background: none !important;
  display: none !important;
}

.mph-sp-hero__bg-glow,
.mph-sp-hero__bg-wave {
  display: none;
}

.mph-sp-hero__grid {
  display: block;
  max-width: 660px;
  position: relative;
  z-index: 1;
}

.mph-sp-hero__title {
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: clamp(2.3rem, 4vw, 3.5rem);
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.15;
  margin: 0 0 1.35rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.mph-sp-hero__intro {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 0 2.25rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.mph-sp-hero__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.75rem;
}

.mph-sp-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.mph-sp-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.mph-sp-hero__trust-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: #004e75;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 20, 40, 0.22);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mph-sp-hero__trust-icon svg {
  color: #004e75;
  width: 24px;
  height: 24px;
}

.mph-sp-hero__trust-item:hover .mph-sp-hero__trust-icon {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.mph-sp-hero__trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mph-sp-hero__trust-text strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mph-sp-hero__trust-text span {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ─── 2. Floating Search Band ─────────────────────────────────────────────── */

.mph-sp-search-band {
  position: relative;
  z-index: 10;
  margin-top: -3.25rem;
  margin-bottom: 2.5rem;
}

.mph-sp-search-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(0, 78, 117, 0.08);
  box-shadow: 0 20px 50px rgba(4, 20, 33, 0.09);
  padding: 1.25rem 1.5rem;
}

.mph-sp-search-form {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f8fafc;
  border: 1px solid rgba(0, 78, 117, 0.1);
  border-radius: 999px;
  padding: 0.4rem 0.5rem 0.4rem 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.mph-sp-search-form:focus-within {
  border-color: #1c97d4;
  box-shadow: 0 0 0 3px rgba(28, 151, 212, 0.15);
  background: #ffffff;
}

.mph-sp-search-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  color: #7a9ab5;
}

.mph-sp-search-field input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.95rem;
  color: #003857;
}

.mph-sp-search-field input::placeholder {
  color: #8da4b8;
}

.mph-sp-search-divider {
  width: 1px;
  height: 28px;
  background: rgba(0, 78, 117, 0.12);
  flex-shrink: 0;
}

.mph-sp-location-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 210px;
  color: #7a9ab5;
}

.mph-sp-location-field select {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.88rem;
  color: #003857;
  font-weight: 500;
  cursor: pointer;
}

.mph-sp-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: #004e75;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.mph-sp-search-btn:hover {
  background: #003b59;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 78, 117, 0.25);
}

.mph-sp-search-subrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0 0.5rem;
}

.mph-sp-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.mph-sp-popular__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
}

.mph-sp-popular__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mph-sp-popular__chip {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.14);
  color: #004e75;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.mph-sp-popular__chip:hover {
  background: #eef7fc;
  border-color: #1c97d4;
  color: #0284c7;
}

.mph-sp-checker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: #64748b;
}

.mph-sp-checker__icon {
  color: #1c97d4;
  display: flex;
  align-items: center;
}

.mph-sp-checker__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #1c97d4;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.18s;
}

.mph-sp-checker__link:hover {
  color: #004e75;
  text-decoration: underline;
}

/* ─── 3. Browse Section & Category Tabs ───────────────────────────────────── */

.mph-sp-browse-section {
  padding: 1.5rem 0 4rem;
}

.mph-sp-browse-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.mph-sp-browse-tag {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1c97d4;
  margin-bottom: 0.4rem;
}

.mph-sp-browse-title {
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  font-weight: 800;
  color: #003857;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.mph-sp-browse-title__accent {
  color: #1c97d4;
}

.mph-sp-browse-sub {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
}

.mph-sp-stat-badge {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem 1.4rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.08);
  box-shadow: 0 8px 24px rgba(4, 20, 33, 0.04);
}

.mph-sp-stat-badge__number {
  display: flex;
  flex-direction: column;
}

.mph-sp-stat-badge__number strong {
  font-size: 1.8rem;
  font-weight: 800;
  color: #004e75;
  line-height: 1;
}

.mph-sp-stat-badge__number span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mph-sp-stat-badge__divider {
  width: 1px;
  height: 36px;
  background: rgba(0, 78, 117, 0.1);
}

.mph-sp-stat-badge__text {
  font-size: 0.84rem;
  font-weight: 600;
  color: #475569;
  max-width: 160px;
  line-height: 1.35;
}

/* Category Filter Tabs */
.mph-sp-tabs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.25rem;
  padding-bottom: 0.5rem;
}

.mph-sp-tab-pill {
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.12);
  color: #475569;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mph-sp-tab-pill:hover {
  background: #eef7fc;
  color: #004e75;
  border-color: rgba(28, 151, 212, 0.4);
}

.mph-sp-tab-pill--active {
  background: #004e75 !important;
  color: #ffffff !important;
  border-color: #004e75 !important;
  box-shadow: 0 4px 14px rgba(0, 78, 117, 0.25);
}

/* Filter Status line */
.mph-sp-filter-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: 0 0.25rem;
}

.mph-sp-filter-status__count {
  font-size: 0.88rem;
  font-weight: 700;
  color: #004e75;
  margin: 0;
}

.mph-sp-filter-status__reset {
  background: none;
  border: none;
  color: #1c97d4;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.mph-sp-filter-status__reset:hover {
  color: #003857;
}

/* ─── 4. Main Layout & Department Cards ───────────────────────────────────── */

.mph-sp-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .mph-sp-main-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mph-sp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem;
}

@media (max-width: 860px) {
  .mph-sp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` track cannot shrink below its
   content, and `.mph-sp-card__desc` is one `nowrap` line, so the longest
   description set the column to ~1000px and every phone scrolled sideways. */
@media (max-width: 540px) {
  .mph-sp-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.mph-sp-grid__empty {
  grid-column: 1 / -1;
}

/* Specialty Card */
.mph-sp-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.08);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 40, 80, 0.03);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  min-height: 78px;
}

.mph-sp-card--linked:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 78, 117, 0.09);
  border-color: rgba(28, 151, 212, 0.35);
}

.mph-sp-card__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #ffffff !important;
  border: 1px solid rgba(0, 78, 117, 0.08);
  box-shadow: 0 2px 8px rgba(0, 40, 80, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}

.mph-sp-card--linked:hover .mph-sp-card__icon-wrap {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(0, 78, 117, 0.1);
}

.mph-sp-card__icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.mph-sp-card__monogram {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.mph-sp-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.mph-sp-card__name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #003857;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.mph-sp-card__link {
  color: inherit;
  text-decoration: none;
}

.mph-sp-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
}

.mph-sp-card__desc {
  margin: 0.2rem 0 0;
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mph-sp-card__action {
  flex-shrink: 0;
}

.mph-sp-card__arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #004e75;
  border: 1px solid rgba(0, 78, 117, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 40, 80, 0.04);
  transition: all 0.25s ease;
}

.mph-sp-card--linked:hover .mph-sp-card__arrow {
  background: #004e75;
  color: #ffffff;
  border-color: #004e75;
  transform: scale(1.08) translate(1px, -1px);
  box-shadow: 0 4px 12px rgba(0, 78, 117, 0.25);
}

[dir="rtl"] .mph-sp-card--linked:hover .mph-sp-card__arrow {
  transform: scale(1.08) translate(-1px, -1px);
}

/* ─── 5. Sticky Side Promo Card ───────────────────────────────────────────── */

.mph-sp-sidebar {
  position: sticky;
  top: 100px;
}

.mph-sp-promo-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(0, 78, 117, 0.08);
  box-shadow: 0 16px 40px rgba(4, 20, 33, 0.07);
  overflow: hidden;
}

.mph-sp-promo-card__header {
  position: relative;
  height: 180px;
  background: #004e75;
  overflow: hidden;
}

.mph-sp-promo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mph-sp-promo-card__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 28px;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
}

.mph-sp-promo-card__content {
  padding: 1.25rem 1.4rem 1.75rem;
  position: relative;
}

.mph-sp-promo-card__title {
  margin: 0 0 0.5rem;
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #003857;
  line-height: 1.25;
}

.mph-sp-promo-card__body {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.45;
}

.mph-sp-promo-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: #004e75;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: background-color 0.2s, transform 0.2s;
}

.mph-sp-promo-card__btn:hover {
  background: #003857;
  transform: translateY(-1px);
}

.mph-sp-promo-card__features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mph-sp-promo-card__feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mph-sp-promo-card__feature-icon {
  color: #1c97d4;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mph-sp-promo-card__feature-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
}

.mph-sp-promo-card__script {
  text-align: right;
  font-family: 'Brush Script MT', 'Caveat', cursive, sans-serif;
  font-size: 1.6rem;
  color: #1c97d4;
  transform: rotate(-4deg);
  margin-top: 0.5rem;
}

/* ─── 6. Why Choose Section Strip ─────────────────────────────────────────── */

.mph-sp-why {
  margin: 3.5rem 0 2rem;
}

.mph-sp-why__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: 1.75rem 2.25rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.08);
  box-shadow: 0 10px 30px rgba(4, 20, 33, 0.04);
}

.mph-sp-why__lead {
  flex: 1 1 240px;
}

.mph-sp-why__title {
  margin: 0 0 0.35rem;
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #003857;
}

.mph-sp-why__sub {
  margin: 0;
  font-size: 0.84rem;
  color: #64748b;
}

.mph-sp-why__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  flex: 2 1 400px;
}

.mph-sp-why__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.mph-sp-why__icon {
  color: #1c97d4;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}

.mph-sp-why__label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #003857;
}

.mph-sp-why__cta-wrap {
  flex-shrink: 0;
}

.mph-sp-why__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: #004e75;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}

.mph-sp-why__btn:hover {
  background: #003857;
  transform: translateY(-1px);
}

/* The solid button is a link, and a site-wide link colour turned its label
   navy on navy. */
.mph-sp-why a.mph-sp-why__btn,
.mph-sp-why a.mph-sp-why__btn:hover {
  color: #ffffff;
}

/* Watch Our Story sits beside Book an Appointment (it used to have a band of
   its own). An outlined twin of the solid button. */
.mph-sp-why__cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mph-sp-why__btn--watch {
  border: 1.5px solid #004e75;
  background: transparent;
  color: #004e75;
  cursor: pointer;
  font-family: inherit;
}

.mph-sp-why__btn--watch:hover {
  background: #004e75;
  color: #ffffff;
}

/* ─── 7. Video / Story Banner ─────────────────────────────────────────────── */

.mph-sp-story {
  margin-bottom: 4rem;
}

.mph-sp-story__card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 3.5rem;
  border-radius: 26px;
  background: linear-gradient(135deg, #002b42 0%, #004e75 60%, #0369a1 100%);
  overflow: hidden;
  box-shadow: 0 20px 46px rgba(0, 43, 66, 0.25);
  color: #ffffff;
}

.mph-sp-story__bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
}

.mph-sp-story__bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mph-sp-story__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 43, 66, 0.92) 0%, rgba(0, 78, 117, 0.75) 50%, rgba(3, 105, 161, 0.5) 100%);
}

.mph-sp-story__content {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.mph-sp-story__tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin-bottom: 0.5rem;
}

.mph-sp-story__title {
  margin: 0 0 0.75rem;
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}

.mph-sp-story__sub {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.mph-sp-story__action {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.mph-sp-story__play-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
}

.mph-sp-story__play-btn:hover {
  background: #ffffff;
  color: #004e75;
  transform: scale(1.04);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.mph-sp-story__play-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: #004e75;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}

.mph-sp-story__play-btn:hover .mph-sp-story__play-icon {
  background: #004e75;
  color: #ffffff;
}

/* Modal for video */
.mph-sp-story__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.mph-sp-story__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
}

.mph-sp-story__modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  background: #000000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.mph-sp-story__modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.mph-sp-story__video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.mph-sp-story__video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── RTL Support ─────────────────────────────────────────────────────────── */

html[dir="rtl"] .mph-sp-hero__grid {
  direction: rtl;
}

html[dir="rtl"] .mph-sp-hero__quote-card {
  right: auto;
  left: -10px;
}

html[dir="rtl"] .mph-sp-hero__script-badge {
  right: auto;
  left: 10px;
  transform: rotate(8deg);
}

html[dir="rtl"] .mph-sp-promo-card__script {
  text-align: left;
  transform: rotate(4deg);
}

html[dir="rtl"] .mph-sp-card--linked:hover .mph-sp-card__arrow {
  transform: scale(1.08) scaleX(-1);
}

html[dir="rtl"] .mph-sp-card__arrow svg {
  transform: scaleX(-1);
}

/* ─── Responsive Breakpoints ──────────────────────────────────────────────── */

@media (max-width: 900px) {
  .mph-sp-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mph-sp-hero__badge {
    margin-inline: auto;
  }

  .mph-sp-hero__intro {
    margin-inline: auto;
  }

  .mph-sp-hero__trust {
    justify-items: center;
  }

  .mph-sp-hero__visual {
    margin-top: 1.5rem;
  }

  .mph-sp-hero__quote-card {
    position: static;
    margin: 1rem auto 0;
    max-width: 320px;
  }

  .mph-sp-search-form {
    flex-direction: column;
    border-radius: 18px;
    padding: 0.75rem;
  }

  .mph-sp-search-divider {
    display: none;
  }

  .mph-sp-location-field {
    width: 100%;
    flex: 1 1 auto;
    border-top: 1px solid rgba(0, 78, 117, 0.08);
    padding-top: 0.5rem;
  }

  .mph-sp-search-btn {
    width: 100%;
    justify-content: center;
  }

  .mph-sp-search-subrow {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   MODERN DOCTORS DIRECTORY REDESIGN
   ========================================================================== */

.mph-dr-page {
  background-color: #f8fafc;
  min-height: 100vh;
}

/* ─── 1. Doctors Hero Section ─────────────────────────────────────────────── */

.mph-dr-hero {
  position: relative;
  background: url('/assets/images/hero_doctors_mph_banner.jpg') no-repeat right center / cover;
  padding: 10.5rem 0 5.5rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 78, 117, 0.12);
}

[dir="rtl"] .mph-dr-hero {
  background-position: left center;
}

.mph-dr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none !important;
  display: none !important;
  pointer-events: none;
  z-index: 0;
}

[dir="rtl"] .mph-dr-hero::before {
  background: none !important;
  display: none !important;
}

.mph-dr-hero__bg-glow,
.mph-dr-hero__bg-wave {
  display: none;
}

.mph-dr-hero__grid {
  display: block;
  /* 650px at the client's request (2026-09-24). */
  max-width: 650px;
  position: relative;
  z-index: 1;
}

.mph-dr-hero__title {
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: clamp(2.3rem, 4vw, 3.5rem);
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.15;
  margin: 0 0 1.35rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.mph-dr-hero__highlight {
  color: #ffffff;
}

.mph-dr-hero__intro {
  font-size: 1.08rem;
  /* !important like the title: the Contact page's own sheet set its hero
     paragraph to black, which read as dark text on the blue banner. */
  color: rgba(255, 255, 255, 0.94) !important;
  line-height: 1.65;
  max-width: 760px;
  margin: 0 0 2.25rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.mph-dr-hero__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.75rem;
}

/* Three pillars cannot share a phone's width: at 390px each got ~110px, the
   headings broke a word per line and the third ran off the screen. One
   column, centred as a block under the centred hero copy, each row reading
   icon-then-text. */
@media (max-width: 640px) {
  .mph-dr-hero__trust {
    /* Shrink-wrapped so the column can centre, but never wider than the
       hero: department pillars carry a whole sentence each, and a bare
       `max-content` made the column that sentence's length and the hero's
       `overflow: hidden` cut it off at both edges. */
    grid-template-columns: fit-content(100%);
    justify-content: center;
    justify-items: start !important;
    gap: 0.9rem;
  }

  .mph-dr-hero__trust-text {
    text-align: start;
  }
}

.mph-dr-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.mph-dr-hero__trust-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: #004e75;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 20, 40, 0.22);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mph-dr-hero__trust-icon svg {
  color: #004e75;
  width: 24px;
  height: 24px;
}

.mph-dr-hero__trust-item:hover .mph-dr-hero__trust-icon {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.mph-dr-hero__trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mph-dr-hero__trust-text strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mph-dr-hero__trust-text span {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ─── Modern Department Details Hero ────────────────────────────────────────── */

.mph-sp-hero-new {
  position: relative;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  padding: 10.5rem 0 5.5rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 78, 117, 0.12);
}

[dir="rtl"] .mph-sp-hero-new {
  background-position: left center;
}

.mph-sp-hero-new::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mph-sp-hero-new__content {
  max-width: 680px;
  position: relative;
  z-index: 1;
}

.mph-sp-hero-new__title {
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.18;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.mph-sp-hero-new__intro {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 0 1.75rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* The buttons close the banner, under the three trust pillars. */
.mph-sp-hero-new__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.35rem;
}

.mph-sp-hero-new__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.75rem;
}

.mph-sp-hero-new__trust-item {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.mph-sp-hero-new__trust-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: #004e75;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 20, 40, 0.22);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mph-sp-hero-new__trust-icon svg {
  color: #004e75;
  width: 24px;
  height: 24px;
}

.mph-sp-hero-new__trust-item:hover .mph-sp-hero-new__trust-icon {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.mph-sp-hero-new__trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mph-sp-hero-new__trust-text strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mph-sp-hero-new__trust-text span {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .mph-sp-hero-new__trust {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ─── 2. Unified 3-Column Filter Toolbar ──────────────────────────────────── */

.mph-dr-filter-band {
  position: relative;
  z-index: 10;
  margin-top: -3.25rem;
  margin-bottom: 2.5rem;
}

.mph-dr-filter-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(0, 78, 117, 0.08);
  box-shadow: 0 20px 50px rgba(4, 20, 33, 0.09);
  padding: 1.5rem 1.75rem;
}

.mph-dr-filter-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.25rem;
  align-items: end;
}

.mph-dr-filter-field {
  display: flex;
  flex-direction: column;
}

.mph-dr-filter-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #003857;
  margin-bottom: 0.45rem;
}

.mph-dr-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #f8fafc;
  border: 1px solid rgba(0, 78, 117, 0.12);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  color: #7a9ab5;
  transition: all 0.2s ease;
}

.mph-dr-input-wrapper:focus-within {
  border-color: #1c97d4;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(28, 151, 212, 0.15);
}

.mph-dr-input-wrapper input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: #003857;
}

.mph-dr-input-wrapper input::placeholder {
  color: #94a3b8;
}

.mph-dr-select-wrapper {
  background: #f8fafc;
  border: 1px solid rgba(0, 78, 117, 0.12);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  transition: all 0.2s ease;
}

.mph-dr-select-wrapper:focus-within {
  border-color: #1c97d4;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(28, 151, 212, 0.15);
}

.mph-dr-select-wrapper select {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: #003857;
  font-weight: 500;
  cursor: pointer;
}

/* ─── 3. Doctors Listing Grid ─────────────────────────────────────────────── */

.mph-dr-listing-section {
  padding-bottom: 3.5rem;
}

.mph-dr-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.mph-dr-results-count {
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #003857;
  margin: 0;
}

.mph-dr-reset-btn {
  background: none;
  border: none;
  color: #1c97d4;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.mph-dr-reset-btn:hover {
  color: #003857;
}

.mph-dr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

.mph-dr-grid__empty {
  grid-column: 1 / -1;
}

/* Doctor Card */
/*
 * A portrait standing in the card, not a headshot in a disc.
 *
 * The consultants' photographs are half-body cut-outs on a transparent
 * background, which a circular avatar throws most of away. The card gives the
 * portrait a column of its own down the leading edge, at the card's full
 * height, and the card's rounded clip cuts it off at the waist - so the
 * doctor stands in the card the way the design does it.
 *
 * The images are the `-card.webp` crops from tools/build_doctor_avatars.py:
 * cut per portrait, because the faces sit anywhere from 40% to 60% across the
 * source frames and no single `object-position` suits all of them.
 */
.mph-dr-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.9rem;
  min-height: 196px;
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.09);
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(0, 40, 80, 0.04);
  /* No block padding: the portrait reaches both the top and the bottom edge.
     Logical, so the portrait column moves to the right in Arabic. */
  padding-block: 0;
  padding-inline: 0.6rem 0.95rem;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.mph-dr-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 78, 117, 0.11);
  border-color: rgba(28, 151, 212, 0.45);
}

/*
 * The column is a frame the portrait fills, not a box it sits in.
 *
 * `height: 100%` on the image resolves against nothing here - the column's own
 * height comes from being stretched, which is not a definite height a
 * percentage can be measured against - so the image fell back to its intrinsic
 * size and left a band of white above it. Taking it out of flow measures it
 * against the column instead, whatever the tallest card in the row makes that.
 */
.mph-dr-card__portrait {
  flex: 0 0 150px;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}

/*
 * `font-size: 0` keeps a portrait that 404s from spelling the doctor's name
 * down the column before the script can swap in their initials.
 */
.mph-dr-card__portrait-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  font-size: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mph-dr-card:hover .mph-dr-card__portrait-img {
  transform: scale(1.04);
}

/* Consultants are added to the CMS long before their portrait is taken. */
.mph-dr-card__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #eef7fc 0%, #dceef9 100%);
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0a5c86;
}

.mph-dr-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.1rem 0;
}

.mph-dr-card__info {
  min-width: 0;
}

.mph-dr-card__specialty {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0082c3;
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
  line-height: 1.25;
}

.mph-dr-card__name {
  margin: 0 0 0.25rem;
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #003857;
  line-height: 1.25;
}

/*
 * The name is a link, the card is not.
 *
 * It used to carry a `::after` stretched over the whole card, so anywhere in it
 * opened the profile. With two buttons in the card that overlay sits on top of
 * them and swallows their clicks - and a card that is one big link plus two
 * buttons has three hit areas doing two things.
 */
.mph-dr-card__link {
  color: inherit;
  text-decoration: none;
}

.mph-dr-card__link:hover {
  color: #0082c3;
}

.mph-dr-card__role {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  /* Black, not the slate the rest of the card's secondary copy uses. */
  color: #000000;
  line-height: 1.35;
}

/*
 * The two actions, in the hierarchy the design's own doctor card uses: the
 * profile filled, the booking quiet beside it.
 */
.mph-dr-card__actions {
  display: flex;
  /* One row, always (2026-10-12): the labels are kept short enough. */
  flex-wrap: nowrap;
  gap: 0.5rem;
  border-top: 1px solid rgba(0, 78, 117, 0.06);
  padding-top: 0.85rem;
  margin-top: 0.9rem;
}

.mph-dr-card__btn {
  flex: 1 1 0;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/*
 * The label colours carry `!important`.
 *
 * Something on the rendered page overrides a plain `color` on these anchors -
 * the fill and the border from this same rule land, the colour does not, and
 * the label falls back to the body's near-black. The declaration is not in any
 * of the seventeen stylesheets the page links (the same markup and the same
 * sheets render it correctly in isolation), so rather than leave a label at
 * 1.6:1 on a navy pill while that is chased down, the two colours are pinned.
 */
.mph-dr-card__btn--profile {
  background: #004e75;
  border: 1px solid #004e75;
  color: #ffffff !important;
}

.mph-dr-card__btn--profile:hover {
  background: #1c97d4;
  border-color: #1c97d4;
  color: #ffffff;
}

.mph-dr-card__btn--book {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569 !important;
}

.mph-dr-card__btn--book:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #003857;
}

/* A narrow phone cannot spare 132px for a portrait and still fit a name. */
@media (max-width: 420px) {
  .mph-dr-card {
    min-height: 172px;
    gap: 0.85rem;
    padding-inline: 0.6rem 1.1rem;
  }

  .mph-dr-card__portrait {
    flex-basis: 112px;
  }

  .mph-dr-card__btn {
    font-size: 0.75rem;
    padding-inline: 0.5rem;
  }
}

.mph-dr-more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.mph-dr-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  background: #004e75;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mph-dr-more-btn:hover {
  background: #003857;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 78, 117, 0.2);
}

/* ─── 4. Doctors Value Proposition Band ────────────────────────────────────── */

.mph-dr-value-band {
  margin-bottom: 4rem;
}

.mph-dr-value-band__inner {
  padding: 1.75rem 2.5rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.08);
  box-shadow: 0 10px 30px rgba(4, 20, 33, 0.04);
}

.mph-dr-value-band__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 1.5rem 2rem;
  width: 100%;
}

.mph-dr-value-band__item {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.mph-dr-value-band__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eef7fc;
  color: #1c97d4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mph-dr-value-band__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mph-dr-value-band__text strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #003857;
  line-height: 1.25;
}

.mph-dr-value-band__text span {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.25;
}

.mph-dr-page .ab-cta-band {
  background: transparent;
  padding-block: 0 5rem;
}

/* ─── RTL Support ─────────────────────────────────────────────────────────── */

html[dir="rtl"] .mph-dr-hero__grid {
  direction: rtl;
}

html[dir="rtl"] .mph-dr-hero__quote-card {
  right: auto;
  left: -10px;
}

html[dir="rtl"] .mph-dr-hero__script-badge {
  right: auto;
  left: 15px;
  transform: rotate(8deg);
}

/* ─── Responsive Breakpoints ──────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .mph-dr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mph-dr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mph-dr-value-band__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .mph-dr-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .mph-dr-hero__badge {
    margin-inline: auto;
  }

  .mph-dr-hero__intro {
    margin-inline: auto;
  }

  .mph-dr-hero__trust {
    justify-items: center;
  }

  .mph-dr-hero__visual {
    margin-top: 1.5rem;
  }

  .mph-dr-hero__quote-card {
    position: static;
    margin: 1rem auto 0;
    max-width: 320px;
  }

  .mph-dr-grid {
    grid-template-columns: 1fr;
  }

  .mph-dr-filter-grid {
    grid-template-columns: 1fr;
  }

  .mph-dr-value-band__items {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}


/* ─── Side panel: the three booking buttons ─────────────────────────────
   Call for Appointment, Book on WhatsApp and Request a Call Back, drawn like
   the booking card on a department page. */
.mph-sp-promo-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 1.1rem 0 1.4rem;
}

.mph-sp-promo-card__actions .dr-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.2s, filter 0.2s;
}

.mph-sp-promo-card__actions .dr-book-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.mph-sp-promo-card__actions .dr-book-call {
  background: linear-gradient(135deg, #0b2f5b, #004e75);
}

.mph-sp-promo-card__actions .dr-book-wa {
  background: #25d366;
}

.mph-sp-promo-card__actions .dr-book-callback {
  background: #1c97d4;
}

/* Why Choose strip: the four points as an even 2 × 2 grid, so the second
   column's icons line up (they drifted with the first column's text width). */
.mph-sp-why__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center;
  gap: 1.1rem 2.75rem;
}

@media (max-width: 640px) {
  .mph-sp-why__items {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Specialty type-ahead (2026-10-04) ──────────────────────────────────── */

.mph-dr-select-wrapper:has(.mph-ss) {
  position: relative;
}

.mph-ss {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mph-ss-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #003857;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  outline: none;
}

.mph-ss-input:focus,
.mph-ss-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* The chevron, as the Language select draws it; opens and closes the list. */
.mph-ss-toggle {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: #003857;
  cursor: pointer;
}

.mph-ss-toggle::after {
  display: block;
  width: 7px;
  height: 7px;
  margin: 4px auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  content: '';
}

.mph-ss.is-open .mph-ss-toggle::after {
  margin-top: 9px;
  transform: rotate(-135deg);
}

.mph-ss-input::placeholder {
  color: #64748b;
  font-weight: 400;
}

.mph-ss-clear {
  flex: 0 0 auto;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  color: #64748b;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.mph-ss-panel {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: 50;
  max-height: 300px;
  margin: 0;
  padding: 0.4rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgba(0, 78, 117, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(11, 47, 91, 0.16);
}

.mph-ss-list li {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: #003857;
  font-size: 0.9rem;
  cursor: pointer;
}

.mph-ss-list li.is-active {
  background: #eef6fc;
}

.mph-ss-list li.is-selected {
  font-weight: 700;
}

.mph-ss-list .mph-ss-empty {
  color: #64748b;
  cursor: default;
}