/* ==========================================================================
   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;
    }
}