/* ==========================================================================
   SITE FIXES  -  bugs in the approved stylesheet, corrected
   ==========================================================================

   base.css is generated from the design and never edited by hand, so the
   handful of places where it contradicts itself are corrected here instead.
   Each one is a defect with a visible consequence, and each is listed in
   DESIGN-NOTES.md under "Bugs in the design that are fixed here".

   Nothing in this file changes a design decision. Every rule either completes
   an intent the design states and then defeats, or supplies a token it uses
   and never defines.

   Loaded last, after every design sheet, so these win on equal specificity.
   Copied to public/ and hashed by `npm run sync:design` - see AUTHORED_SHEETS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The header scrolls sideways on a phone
   --------------------------------------------------------------------------

   At 640px and below the design sets

       .btn-pill-navy { flex: 1 1 100%; justify-content: center; }

   which only makes sense if the button is meant to wrap onto a row of its own
   beneath the logo - a `flex-basis` of 100% has no other purpose. But `.navbar`
   is `flex-wrap: nowrap` and nothing overrides it, so the button cannot wrap.
   It sits on the one row instead, and at 390px the logo (180px), the button
   (209px), the hamburger (22px) and two 10px gaps come to 431px inside a 390px
   viewport: every page scrolls 56px sideways, on every phone.

   Letting the row wrap is what the design's own declaration was written for.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .navbar {
        flex-wrap: wrap;
        /* The brand and the hamburger share the first row; the button takes the
           second. Without an explicit row gap the two rows touch. */
        row-gap: 12px;
    }
}

/* --------------------------------------------------------------------------
   `--radius-pill` is used but never defined
   --------------------------------------------------------------------------

   `.status-badge` sets `border-radius: var(--radius-pill)`. The variable does
   not exist, so the whole declaration is invalid and the browser drops it,
   leaving square corners on something drawn as a pill. `--radius-full` is
   defined in the same block and is plainly what was meant.
   -------------------------------------------------------------------------- */

:root {
    --radius-pill: var(--radius-full, 9999px);
}

/* --------------------------------------------------------------------------
   Consultant cards have to survive the hospital's real data
   --------------------------------------------------------------------------

   The design's cards were drawn against four consultants with a portrait each,
   a two-word specialty and chips like "CT angiography". The hospital's actual
   directory has 47, most of them with no portrait yet and role lines like
   "Senior Consultant, Paediatric Respiratory Medicine & Allergy". Two rules
   only worked for the shorter copy:

     * `.doctor-tag` sets `white-space: nowrap`, so a chip longer than the card
       runs out through its side rather than wrapping inside it.
     * `.doctor-img-wrapper` reserves 350px and expects an `<img>`. A consultant
       with no photograph yet leaves the area to collapse, and cards in the same
       row then sit at different heights.
   -------------------------------------------------------------------------- */

.doctor-tag {
    /* Wrap instead of overflowing. A two-line chip is not what the design
       drew, but it is inside the card and it can be read. */
    white-space: normal;
    max-width: 100%;
    /* Long clinical words - "Electroencephalography" - have nowhere to break
       otherwise. */
    overflow-wrap: anywhere;
}

.doctor-spec,
.doctor-name {
    overflow-wrap: anywhere;
}

/* The stand-in while a consultant has no portrait: their initials, on the
   same tint the chips use, filling exactly the space a photograph would. */
.doctor-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, rgba(28, 151, 212, 0.10), rgba(1, 61, 98, 0.06));
    color: #12719F;
    font-family: inherit;
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    user-select: none;
}

/* The same stand-in on the consultant's own page, where the portrait is the
   full height of the hero rather than a card thumbnail. */
.dr-portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 320px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(28, 151, 212, 0.12), rgba(1, 61, 98, 0.07));
    color: #12719F;
    font-size: clamp(3rem, 9vw, 5rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    user-select: none;
}

/* ==========================================================================
   Home page - About section media column
   --------------------------------------------------------------------------
   The photographs sat at fixed heights (`480px`, and `400px` further down),
   so the media column stopped short of the copy beside it and left a band of
   white below the picture. base.css already stretches the grid and gives the
   wrapper `height: 100%`; what was missing was letting the boxes inside it use
   that height.

   base.css is generated from the approved design, so the override lives here -
   site-fixes.css is loaded last precisely for this.
   ========================================================================== */

.about-section .about-grid {
    align-items: stretch;
}

.about-section .new-about-media-wrapper {
    height: 100%;
    min-height: 0;
}

.about-section .new-about-main-img-box,
.about-section .new-about-overlay-img-box {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.about-section .new-about-main-img-box img,
.about-section .new-about-overlay-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * With only one photograph set, it takes both rows rather than leaving the
 * second one empty - which is the shape this section has when an editor has
 * filled in the main image and left the second blank.
 */
.about-section .new-about-media-wrapper:not(:has(.new-about-overlay-img-box img[src]:not([src='']))) .new-about-main-img-box {
    grid-row: 1 / -1;
}

/* Stacked layouts get their height back from the content, not the column. */
@media screen and (max-width: 992px) {
    .about-section .new-about-media-wrapper,
    .about-section .new-about-main-img-box,
    .about-section .new-about-overlay-img-box {
        height: auto;
    }

    .about-section .new-about-main-img-box img,
    .about-section .new-about-overlay-img-box img {
        height: auto;
    }
}

/* The contact form's tile choices and tick-boxes ------------------------- */

/* The approved design draws "I am contacting you as" and "Preferred way to
   reply" as three bordered panels rather than as radio buttons. They are radio
   buttons underneath - the keyboard, the screen reader and the browser's own
   validation all behave - so everything here is appearance. */

.mph-form-legend {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #004e75;
}

.mph-form-legend > span {
    color: #ed1c24;
}

.mph-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.mph-tile {
    position: relative;
    display: block;
    cursor: pointer;
}

.mph-tile input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mph-tile-body {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 15px;
    border: 1px solid rgba(0, 78, 117, 0.14);
    border-radius: 10px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: #22364a;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.mph-tile-body i {
    font-size: 18px;
    color: #1c97d4;
}

.mph-tile input:hover + .mph-tile-body {
    border-color: rgba(28, 151, 212, 0.5);
}

/* The chosen tile, and the keyboard focus ring on it. */
.mph-tile input:checked + .mph-tile-body {
    border-color: #1c97d4;
    background: #f1f7fc;
    box-shadow: inset 0 0 0 1px #1c97d4;
}

.mph-tile input:focus-visible + .mph-tile-body {
    outline: 2px solid #1c97d4;
    outline-offset: 2px;
}

.mph-form-consent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.mph-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.55;
    cursor: pointer;
}

.mph-check input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #1c97d4;
    flex-shrink: 0;
}

/* The acknowledgement that replaces the form once it has sent. */
.mph-form-card--sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 3rem 2rem;
    text-align: center;
}

.mph-form-sent-icon i {
    font-size: 46px;
    color: #16a34a;
}

/* The enquiry form's labels read in sentence case, as the approved design has
   them ("First Name *"). base.css uppercases `.mph-form-group label`, a rule
   written for an earlier revision of this form; the current design labels its
   fields with Tailwind classes and no transform. Scoped to the contact page so
   the call-back dialog, which does use the older styling, is untouched. */
.mph-contact .mph-form-group label,
.mph-contact .mph-form-legend {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   The BOOK AN APPOINTMENT arrow disappears on the two directory pages
   --------------------------------------------------------------------------

   `.subpage` - the design's legacy subpage reset - whitens the header CTA's
   text with:

       .subpage .btn-pill-navy span,
       .subpage #nav-cta-btn span { color: #ffffff !important; }

   The pill contains two spans: the label and `.icon-circle`, the white bubble
   holding the north-east arrow. The arrow is drawn with `currentColor`, so
   whitening every span paints a white arrow inside a white bubble and the
   badge reads as an empty circle. `.icon-circle` sets `color: #004e75
   !important` for exactly this reason, but `#nav-cta-btn span` carries an id
   and wins the cascade.

   No design page hits this: `.subpage` is only reached through the doctors and
   specialties directories, which the approved design does not include - its
   own subpages (contact.html and the rest) carry `mph-contact` and friends
   instead, so there the arrow stays navy. The two directories opt into
   `.subpage` because the approved stylesheet writes their rules inside it,
   which is what brings the two rules into contact for the first time.

   Restated at a specificity that wins, rather than by narrowing the design's
   rule to `span:not(.icon-circle)` - base.css is generated and would lose the
   edit on the next `npm run sync:design`.
   -------------------------------------------------------------------------- */
.subpage .btn-pill-navy .icon-circle,
.subpage #nav-cta-btn .icon-circle {
    color: #004e75 !important;
}

/* --------------------------------------------------------------------------
   A third list in the department page's list band
   --------------------------------------------------------------------------

   `.dept-duo-grid` is two columns, drawn for "Conditions Treated" and
   "Facilities & Equipment". Four of the client's department documents close
   with a "Why Choose Us" list, which the approved design has no band for, so
   it renders as a third panel here - the treatment the design already gives a
   titled list on this page.

   A third panel wraps to the second row and fills one column, leaving the
   other empty beside it, which reads as a panel that failed to load rather
   than as a closing list. Spanning the row makes it read as the band's last
   word, which is what it is.

   Only when there are exactly three, so a department with one list or two is
   laid out exactly as the design draws it.
   -------------------------------------------------------------------------- */
.dept-duo-grid > .dept-duo-panel:nth-child(3):last-child {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Arabic pages carrying untranslated English
   --------------------------------------------------------------------------

   Most of the Arabic site is still English fallback - the CMS holds Arabic for
   19 fields on About and nothing else - and English inside an RTL paragraph
   renders wrongly: ".More Than Two Decades" instead of "More Than Two Decades."

   Nothing is corrupt. `.` `,` `:` and `()` are bidi-*neutral*, so the Unicode
   Bidirectional Algorithm gives them the paragraph's direction rather than the
   direction of the words beside them. The paragraph is RTL (rtl.css sets
   `direction: rtl` on the body), so a sentence-final full stop is placed at the
   paragraph's trailing edge - which in RTL is the left. The Latin words still
   run left-to-right, which is why only the punctuation looks displaced.

   `unicode-bidi: plaintext` resolves each block's direction from its own first
   strong character instead: Arabic copy stays RTL exactly as now, and an
   untranslated English block renders LTR with its punctuation back where it
   belongs. `AssistantWidget` already does this per-element with `dir="auto"`;
   this is the same rule applied to the copy the CMS fills.

   Deliberately no `text-align` here. The body sets `text-align: right` and a
   great many headings are centred by the design; forcing `start` would drag
   every one of those to an edge. Direction is the bug, alignment is not.

   This is a safety net for partially-translated pages, not a substitute for
   the translations - see the Arabic content notes.
   -------------------------------------------------------------------------- */
html[dir="rtl"] {
    font-family: 'Araboto', 'Cairo', 'Tajawal', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif !important;
    line-height: 1.6;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .section-title,
html[dir="rtl"] .dr-h2,
html[dir="rtl"] .sidebar-title,
html[dir="rtl"] .doctor-name,
html[dir="rtl"] .mph-dr__name {
    font-family: 'Araboto', 'Cairo', 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
    letter-spacing: 0 !important;
}

html[dir="rtl"] p,
html[dir="rtl"] .section-desc {
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Doctor Card Primary Action Buttons — Force Crisp White Text
   -------------------------------------------------------------------------- */
.mph-dr__btn--primary,
a.mph-dr__btn--primary,
button.mph-dr__btn--primary,
.mph-dr__actions .mph-dr__btn--primary,
.mph-dr__actions a.mph-dr__btn--primary,
.doctor-btn-profile,
a.doctor-btn-profile,
button.doctor-btn-profile,
.doctor-card-actions .doctor-btn-profile,
.doctor-card-actions a.doctor-btn-profile {
    color: #ffffff !important;
    background: linear-gradient(135deg, #004e75 0%, #0b1e36 100%) !important;
    border-color: #004e75 !important;
}

.mph-dr__btn--primary *,
a.mph-dr__btn--primary *,
.doctor-btn-profile *,
a.doctor-btn-profile * {
    color: #ffffff !important;
}

.mph-dr__btn--primary:hover,
a.mph-dr__btn--primary:hover,
button.mph-dr__btn--primary:hover,
.mph-dr__actions .mph-dr__btn--primary:hover,
.mph-dr__actions a.mph-dr__btn--primary:hover,
.doctor-btn-profile:hover,
a.doctor-btn-profile:hover,
button.doctor-btn-profile:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1c97d4 0%, #004e75 100%) !important;
    border-color: #1c97d4 !important;
}

/* --------------------------------------------------------------------------
   Doctor Directory Grid
   -------------------------------------------------------------------------- */
.doctor-listing-grid {
    display: grid !important;
    gap: 28px !important;
    align-items: stretch !important;
}

/* --------------------------------------------------------------------------
   Departments Section Background Image
   -------------------------------------------------------------------------- */
.departments-section {
    background: linear-gradient(rgba(11, 30, 54, 0.55), rgba(11, 30, 54, 0.25)), url('/assets/images/4-department.jpeg') no-repeat center center / cover !important;
    background-attachment: scroll !important;
}


/* --------------------------------------------------------------------------
   The directory's consultant cards, matched to the home page's rail
   --------------------------------------------------------------------------

   Both pages render the same `DoctorCard` component, but the run of
   refinements that makes the home page's cards line up is scoped to
   `.doctors-track` / `.doctors-slides` - the carousel. The directory lays the
   same cards out in a grid, so it got none of it, and the difference was not
   subtle:

     * The photograph area was 350px against the rail's 452px, so the portrait
       was a cropped head rather than the head-and-shoulders the design draws.
     * The info panel is absolutely positioned against the bottom of the card,
       and nothing fixed its height. A name that wrapped to three lines - and
       at 272px wide, "Dr. Ahmad Mohammad Nasir Al Ani" does - grew the panel
       upward over the portrait. Measured across one row: panels of 266, 289,
       300 and 311px, each starting at a different height. That is what made
       the grid look ragged while the rail looked clean.

   The one thing not copied from the rail is the name treatment. There it is a
   single line with an ellipsis, which is fine for four hand-picked consultants
   with short names and wrong for a directory of sixty-odd where truncating
   would hide which Dr Al Wahaibi this is. Two lines are reserved instead, so
   the panels still align and the names still read.
   -------------------------------------------------------------------------- */

/* The specialty sidebar is gone, so the grid has the whole row.
   It listed about forty specialties for sixty-two consultants, most of them
   naming one person; the filter pills above the grid do the same job without
   spending a third of the page on it. */
.doctor-listing-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

.doctor-listing-grid {
    /* Four across at full width, which is what the home page's rail shows.
       270 rather than 280: the row is 1192px and four 280s plus three 28px
       gaps is 1204, so 280 quietly fell back to three columns of 379px - wider
       than the card was drawn for. At 270 it fits four at ~277px, within a
       hair of the rail's 297. */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
}

.doctor-listing-grid .doctor-card {
    /* The home page's rail exactly, plus the one extra name line this page
       reserves - 552 + 23. */
    min-height: 575px !important;
}

.doctor-listing-grid .doctor-img-wrapper {
    height: 452px !important;
}

.doctor-listing-grid .doctor-info-box {
    /* The rail's 200px, plus the one extra name line. */
    min-height: 223px !important;
    justify-content: flex-start !important;
}

/* Two lines reserved for the name, whether or not it needs them.
   Two rather than the rail's one: the longest names the hospital has -
   "Dr. Ali Abdulmunaem Ajel Alsabbagh", "Dr. Ahmad Mohammad Nasir Al Ani" -
   take two lines at this width, and a directory that truncates the thing you
   came to read is worse than one with a little space under the short names.
   It was three while the sidebar squeezed the cards to 272px; at 379px that
   third line was 23px of empty space on every card. */
.doctor-listing-grid .doctor-name {
    min-height: 46px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Designation and specialty always occupy three lines, and never more.
   "Senior Consultant / General, Laparoscopic and Bariatric Surgery" needs all
   three in this column; without the clamp a fourth line pushed the panel up
   again and put the row back out of line. */
.doctor-listing-grid .doctor-spec {
    min-height: 57px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* One chip row, as on the home page's rail.
   Seventeen of the twenty-four cards fit both chips on one row at this width;
   on the other seven the second chip wraps and is hidden whole. That is the
   point of wrapping rather than `nowrap`: `nowrap` with `overflow: hidden`
   slices a chip down the middle, and an earlier attempt at ellipsis gave
   "Osteoporo…", which tells a patient nothing. A chip either reads or it is
   not there. */
.doctor-listing-grid .doctor-tags {
    flex-wrap: wrap;
    overflow: hidden;
    min-height: 25px;
    max-height: 25px;
    align-items: flex-start;
}

.doctor-listing-grid .doctor-tag {
    font-size: 10px;
    padding: 3.5px 9px;
}

/* Buttons pinned to the bottom of the panel on every card. */
.doctor-listing-grid .doctor-card-actions {
    margin-top: auto !important;
}

@media (max-width: 640px) {
    .doctor-listing-grid .doctor-img-wrapper {
        height: 356px !important;
    }

    .doctor-listing-grid .doctor-card {
        min-height: 479px !important;
    }

    .doctor-listing-grid .doctor-info-box {
        min-height: 213px !important;
    }
}


/* --------------------------------------------------------------------------
   The Specialties mega menu wraps its card text
   --------------------------------------------------------------------------

   `a.megamenu-card` inherits `white-space: nowrap` from the navigation's link
   styling - sensible for a menu item that must stay on one line, wrong for a
   card with a sentence in it. The card's description was laid out as a single
   17px line inside a 129px card and simply ran out sideways, over the card next
   to it, so the panel read as two overlapping paragraphs.

   It never showed while the panel was empty, and the approved design's own
   descriptions are short enough to fit on one line at the widths it was drawn
   at, which is why it arrived with the copy rather than with the markup.
   -------------------------------------------------------------------------- */
.megamenu-card,
.megamenu-card .card-desc,
.megamenu-card .card-title-wrap h4,
.megamenu-card .card-tags span {
    white-space: normal;
}

/*
 * Accreditations rail - one height for every year card.
 *
 * Each award is its own three-row grid (badge, node on the rail, card) and the
 * card row is `auto` with `align-self: start`, so a card is exactly as tall as
 * its text. JCI carries four years where the others carry one, "2012, 2018,
 * 2021, 2023" wraps onto a second line, and its card hangs below the row of
 * three beside it.
 *
 * The items already stretch to the tallest of them, so the fix is to let the
 * card have that height instead of leaving it at the top: the card row takes
 * what is left over, and the card fills it with its content centred, so a one
 * line card and a two line card end up the same size.
 */
.awards-timeline .award-item {
  grid-template-rows: var(--award-badge-size) var(--award-node-row) 1fr;
}

.awards-timeline .award-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*
 * Accreditation badges - smaller.
 *
 * The rail sizes them from one variable, `--award-badge-size`, at 186px. Four
 * of those fill most of the band's width and leave the logo inside each circle
 * bigger than the hospital's own logo in the header, which reads as shouting
 * rather than as a quiet row of credentials.
 *
 * Changing the variable is enough: the rail's hairline is positioned off it
 * (`top: calc(var(--award-badge-size) + …)`) and so is each item's first grid
 * row, so the nodes and the year cards follow the badges down without any
 * other rule needing to know.
 */
.awards-section {
  --award-badge-size: 132px;
}

@media (max-width: 900px) {
  .awards-section {
    --award-badge-size: 112px;
  }
}

/*
 * Room between "View all insurance partners" and the logo strip.
 *
 * The button's own `margin-top` separates it from the heading above, and
 * nothing separated it from the strip below - so the two sat almost touching
 * while the heading had room to breathe.
 */
.insurance-partners-cta {
  margin-bottom: 26px;
}

/*
 * Department card headings - break where the name does.
 *
 * "Cardiology & Heart Care" wrapped as "CARDIOLOGY & HEART / CARE", splitting
 * "Heart Care" down the middle and leaving one word on the second line, while
 * "Obstetrics & Gynaecology" beside it broke cleanly at its "&".
 *
 * `balance` asks the browser to even the lines out rather than filling the
 * first one and letting the remainder fall over, which puts the break at the
 * "&" on every card in the rail. `pretty` is the fallback for browsers that
 * have it but not `balance`; both degrade to ordinary wrapping.
 */
.dept-card .dept-name {
  text-wrap: pretty;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The values grid's text runs into the rules between its columns
   --------------------------------------------------------------------------

   "Three Words We Are Measured Against" is a three-column grid with a hairline
   between the columns, and the design pads each cell on one side only:

       .ab-value { padding: 2.5rem clamp(1.25rem, 2.5vw, 2.25rem) 0 0;
                   border-right: 1px solid var(--ab-rule-soft); }

   That keeps the *first* column's text away from the rule it draws on its own
   right edge, and leaves every column after it starting hard against the rule
   the column before drew - "Respect and Compassion" and "Customer Driven" both
   touch the line to their left. A gutter is two-sided or it is not a gutter.

   Two more consequences of padding by position rather than by column: only
   `:last-child` drops its right border, so the third cell of a row that is not
   the last row draws a rule down the outside of the grid; and the fourth item
   starts a new row in column one, where it should be flush left and is not.
   Both are fixed by keying off the column - `3n+1` is column one, `3n` is
   column three - rather than off the position in the list.
   -------------------------------------------------------------------------- */

:where(.mph-page-about) .ab-value {
    padding-block: 2.5rem 0;
    padding-inline: clamp(1.25rem, 2.5vw, 2.25rem);
    /* Logical, so the Arabic grid mirrors with it. */
    border-right: 0;
    border-inline-end: 1px solid var(--ab-rule-soft);
}

/* Column one sits on the container's edge; it needs no gutter outside it. */
:where(.mph-page-about) .ab-value:nth-child(3n + 1) {
    padding-inline-start: 0;
}

/* Column three likewise, and it draws no rule down the outside of the grid. */
:where(.mph-page-about) .ab-value:nth-child(3n) {
    padding-inline-end: 0;
    border-inline-end: 0;
}

/* Stacked, there are no columns to divide - so no side padding either, and
   the single-column rules the design already writes take over. */
@media (max-width: 860px) {
    :where(.mph-page-about) .ab-value,
    :where(.mph-page-about) .ab-value:nth-child(3n + 1),
    :where(.mph-page-about) .ab-value:nth-child(3n) {
        padding-inline: 0;
        border-inline-end: 0;
    }
}

/*
 * Hero figures - one height for all of them.
 *
 * The column is a flex stack, so each box is exactly as tall as its own text.
 * On Paediatrics the middle figure reads "Level 3" with "NICU" raised after it,
 * which is far wider than "24/7" or "15+" beside it; the wide number squeezed
 * the text column, the heading wrapped onto two lines and the description onto
 * five, and that one box stood a third taller than the two around it.
 *
 * A grid with `1fr` rows makes every box the height of the tallest, which is
 * what the eye expects of a stack of cards. The gap carries over from the flex
 * rule underneath, so nothing else changes.
 */
.hero-trust {
  /*
   * `!important` because the department pages' own sheet carries
   * `:where(.mph-page-obgyn) .hero-trust { display: flex !important }`, which
   * no amount of ordinary specificity beats. site-fixes.css is loaded last
   * precisely so a matching `!important` here settles it.
   */
  display: grid !important;
  grid-auto-rows: 1fr;
  align-content: center;
}

/*
 * And stop a long value from starving the words beside it.
 *
 * `.trust-num` is 3.5rem with no upper bound, so "Level 3" took nearly half the
 * box. Capping the column and letting the type shrink to fit keeps the number
 * the loudest thing in the box without leaving the description in a gutter.
 */
.hero-trust .trust-num {
  max-width: 48%;
  font-size: clamp(1.9rem, 2.6vw, 3.5rem);
  white-space: nowrap;
}

.hero-trust .trust-content {
  min-width: 0;
}

/*
 * The figure's value, at a size that fits it.
 *
 * `.trust-num` is 3.5rem, which is right for "24/7" and "15+" and wrong for
 * everything longer. Contact's figures carry a telephone number and an email
 * address, and Paediatrics carries "Level 3" with "NICU" raised after it; at
 * full size the email left the box entirely and the raised text landed on the
 * heading next to it.
 *
 * `HeroBanner` measures the value and asks for one of three steps.
 */
.hero-trust .trust-num[data-size='lg'] {
  font-size: clamp(2rem, 2.6vw, 3.5rem);
  white-space: nowrap;
}

.hero-trust .trust-num[data-size='md'] {
  font-size: clamp(1.25rem, 1.7vw, 1.9rem);
  line-height: 1.2;
  /* Wrapping, not nowrap: "Level 3" with "NICU" raised after it is eleven
     characters and still ran past the edge of the box when held on one line. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.hero-trust .trust-num[data-size='sm'] {
  font-size: clamp(0.95rem, 1.15vw, 1.2rem);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

/* A raised suffix should not out-shout, or overlap, the value it follows. */
.hero-trust .trust-num sup {
  font-size: 0.45em;
  margin-inline-start: 2px;
  vertical-align: super;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   The key figures band holds eight figures, not six
   --------------------------------------------------------------------------

   The design drew `.new-about-stats` as one row of six. The hospital's own
   "MPH by the numbers" - what Home Page → Key figures transcribes - has eight,
   and eight in a six-column grid is a full row and two orphans. With seven or
   more tiles the band becomes two rows of four; at six or fewer the design's
   own row stands. The phone layout (three columns, below 992px) is unchanged.
   -------------------------------------------------------------------------- */

@media (min-width: 993px) {
    .new-about-stats:has(> :nth-child(7)) {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 40px;
    }
}

/*
 * White text on the red emergency cards.
 *
 * `base.css` carries `.mph-contact section p { color: #000 }` - the contact
 * page's body copy in the site's own colour rather than Tailwind's greys. It is
 * unscoped, so it also painted the paragraphs inside the red emergency card and
 * the red band black on red: "Immediate medical assistance" sat under a white
 * heading in black type.
 *
 * The markup already asks for white (`text-white/90`), but Tailwind's utilities
 * are emitted inside `:where(...)`, which carries no specificity at all, so a
 * two-class selector beats them every time. This restores what the markup
 * asked for, at a weight that holds.
 */
.mph-contact section .bg-brand-red p,
.mph-contact .bg-brand-red p {
  color: rgba(255, 255, 255, 0.9);
}

.mph-contact section .bg-brand-red h2,
.mph-contact section .bg-brand-red h3,
.mph-contact .bg-brand-red h3 {
  color: #ffffff;
}

/*
 * Approximate driving times - two larger tiles per row.
 *
 * Four across in a half-width panel left each tile about 110px wide, so the
 * number was small and the place under it ("Muscat Airport") wrapped onto two
 * lines. Two across gives each one room to be read at a glance, which is the
 * only reason the panel exists.
 */
.mph-drive-times > div {
  padding-block: 1.6rem;
}

.mph-drive-times .block:first-child {
  font-size: 2rem;
  line-height: 1.1;
}

.mph-drive-times .block:last-child {
  font-size: 13px;
  margin-top: 0.4rem;
}

/*
 * The enquiry form's send button.
 *
 * `.mph-form-foot` is a flex row built for a paragraph of small print beside
 * the button, and with that line removed the button was left stretched and its
 * label wrapping onto two lines. It sizes to its own content now, and sits
 * where the paragraph used to leave it - at the end of the row.
 */
.mph-form-foot {
  justify-content: flex-end;
}

.mph-form-foot .btn-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

/*
 * The "plan your visit" card beside the map.
 *
 * Its own rules in `base.css` set white text on the dark gradient, but the
 * contact page's blanket body rules - `.mph-contact section p { color: #000 }`
 * and the matching heading rule - are more specific and won: the heading came
 * out brand navy on near-black and the address below it black on near-black.
 * Nearly the whole card was unreadable.
 *
 * Everything inside it inherits the card's own white again.
 */
.mph-contact section .mph-visit-card h3,
.mph-contact section .mph-visit-card h4 {
  /* `!important` to match `.mph-contact section h3 { color: var(--heading-color)
     !important }` in base.css, which no ordinary specificity beats. */
  color: #ffffff !important;
}

.mph-contact section .mph-visit-card p,
.mph-contact section .mph-visit-card li,
.mph-contact section .mph-visit-card address,
.mph-contact section .mph-visit-card span:not(.mph-visit-eyebrow) {
  color: rgba(255, 255, 255, 0.88);
}

/* The little all-caps labels stay the accent the card was drawn with. */
.mph-contact section .mph-visit-card .mph-visit-eyebrow {
  color: var(--card-link-color-on-dark, #6fc4f0);
}

/*
 * Map and card, the same width.
 *
 * The design gives the map the larger share (1.35fr to 0.65fr), which left the
 * card narrow enough that every line of the address wrapped.
 */
.mph-location-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

/*
 * The telephone number on the Contact page's closing card.
 *
 * Contact ends on the same card as About now, and the number is the one thing
 * it carries that About's does not, so it needs a size of its own rather than
 * reading as another line of body copy.
 */
.ab-cta-phone {
  display: inline-block;
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 0.2rem;
}

.ab-cta-phone:hover,
.ab-cta-phone:focus-visible {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

/*
 * The shared hero and closing card, on pages that are not About or a department.
 *
 * `HeroBanner` and `ClosingCta` are used by About, Contact, the departments and
 * the doctor profiles, but two of the classes they rely on were only ever
 * styled inside a page scope: `.ab-wrap` under `:where(.mph-page-about)` and
 * `.dr-hero-cta` under `:where(.mph-page-obgyn)` and `:where(.mph-page-doctor)`.
 *
 * On Contact that meant the closing card stretched from edge to edge while
 * About's sat in the 1260px content column, and the hero's two buttons had no
 * flex row and so no gap - they sat against each other with only the whitespace
 * between the tags holding them apart.
 *
 * These are the same declarations the scoped copies make, without the scope, so
 * a component works wherever it is used. A page that scopes its own still wins.
 */
.ab-wrap {
  width: min(1260px, 92%);
  margin-inline: auto;
  padding-inline: 0;
}

.dr-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2rem;
}

/*
 * Hero figures: one width, one left edge, no drift.
 *
 * `base.css` staggers the three boxes - `margin-left: -35px`, `35px`, `-10px` -
 * and floats each one on its own six-second animation. That is a decorative
 * effect from the original home page mockup, where the boxes sat over open
 * photograph; the home page does not render them at all any more, and on a
 * real banner it just makes three cards of different widths whose edges never
 * line up, drifting as you read them.
 *
 * The department pages already turned it off in their own sheet. This does the
 * same wherever the shared banner is used, which is the remaining three.
 *
 * With the margins gone the boxes stretch to the grid column, so they end up
 * the same width as each other without one being named - `width: auto` undoes
 * the fixed 350px the department sheet sets for the same reason.
 */
.hero-trust .trust-box {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  animation: none !important;
}

/* The hover lift stays - that one responds to the reader. */

/*
 * The outline button, on a banner.
 *
 * `.dr-btn-ghost` is navy type inside a navy hairline - right on a white
 * section, unreadable on a photograph. The design already knew this and wrote
 * `.hero--contact .dr-hero-cta .dr-btn-ghost` to turn it into a white pill, but
 * that fix named one page, so the About banner - which now uses the same shared
 * hero - had "Book an appointment" in dark navy on a dark picture.
 *
 * The same treatment for any banner, since every `.hero` has a dark scrim over
 * a photograph. The declarations are the ones the contact rule already makes.
 */
.hero .dr-hero-cta .dr-btn-ghost {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: var(--heading-color) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hero .dr-hero-cta .dr-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #ffffff !important;
  color: #00395a !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26);
}

/*
 * The banner's scrim, in one place so it can be flipped.
 *
 * `.hero` in base.css puts a navy gradient over the photograph, running dark
 * on the left to nearly clear on the right - which is where the headline is,
 * in English. `HeroBanner` has to set the photograph inline (the stylesheet
 * hard-codes one), and setting `background-image` replaces the whole list, so
 * it names this property rather than repeating the gradient.
 *
 * Arabic reads the other way, and the headline was landing on the pale end.
 */
:root {
  --hero-scrim: linear-gradient(
    90deg,
    rgba(7, 23, 44, 0.92),
    rgba(7, 23, 44, 0.82),
    rgba(7, 23, 44, 0.25)
  );
}

html[dir='rtl'] {
  --hero-scrim: linear-gradient(
    270deg,
    rgba(7, 23, 44, 0.92),
    rgba(7, 23, 44, 0.82),
    rgba(7, 23, 44, 0.25)
  );
}