/* ==========================================================================
   GUIDE PAGES  -  the nine secondary "content" pages
   ==========================================================================

   /plan-your-visit, /inpatient-guide, /visiting-hours, /careers, /health-packages
   and the rest all render through `GenericPageLayout`. The approved design ships
   no HTML for any of them, so this sheet is what that layout is built to - the
   same arrangement the directory pages get from `directory.css`.

   Nothing here invents a new visual language. The colours, the radii, the card
   shadow and the eyebrow are the ones `base.css` and `obgyn.css` already
   define, and the checkmark list a chapter uses is the design's own
   `.premium-list`. What is new is only the arrangement these pages need and the
   design never drew: a sticky contents rail, chapters, and a card that has an
   icon instead of a bare heading.

   Why it exists at all: the layout carried its whole appearance in inline
   `style={{...}}` objects. That meant no hover state, no media query and no
   right-to-left handling were possible - an inline style cannot express any of
   them - so the cards sat in a ragged `auto-fit` grid that stranded the third
   one on its own row, and the Arabic pages inherited hard-coded left padding.

   Scoped to `.mph-page-guide`, which the layout sets alongside
   `.mph-page-obgyn`; the hero, the buttons and the closing band are that
   sheet's and are left to it.
   ========================================================================== */

:where(.mph-page-guide) {
  --guide-navy: #004e75;
  --guide-blue: #1c97d4;
  --guide-ink: #000000; /* black, as the home page (2026-09-30) */
  --guide-line: #e2e8f0;
  --guide-tint: rgba(28, 151, 212, 0.08);
}

/* ─── The band under the hero ─────────────────────────────────────────── */

:where(.mph-page-guide) .guide-body {
  background: #ffffff;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
}

/* The closing band brings its own space above it. */
:where(.mph-page-guide) .guide-body:has(+ * .lead-magnet) {
  padding-bottom: 0;
}

/*
 * Contents rail beside the chapters.
 *
 * `align-self: start` plus `position: sticky` on the rail itself is what keeps
 * it in view while the chapters scroll; a sticky child of a stretched grid item
 * never moves, because the item is already as tall as the row.
 */
:where(.mph-page-guide) .guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 3.5vw, 3rem);
  align-items: start;
}

:where(.mph-page-guide) .guide-grid.has-nav {
  grid-template-columns: 240px minmax(0, 1fr);
}

:where(.mph-page-guide) .guide-grid.has-sidebar {
  grid-template-columns: minmax(0, 1fr) 330px;
}

:where(.mph-page-guide) .guide-grid.has-nav.has-sidebar {
  grid-template-columns: 230px minmax(0, 1fr) 330px;
}

@media (max-width: 1280px) {
  :where(.mph-page-guide) .guide-grid.has-nav.has-sidebar {
    grid-template-columns: 200px minmax(0, 1fr) 300px;
    gap: 1.5rem;
  }
}

@media (max-width: 1080px) {
  :where(.mph-page-guide) .guide-grid.has-nav.has-sidebar {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  :where(.mph-page-guide) .guide-nav {
    grid-column: 1 / -1;
    position: static;
    border-inline-start: none;
    border-block-end: 2px solid var(--guide-line);
    padding-inline-start: 0;
    padding-block-end: 1rem;
    margin-bottom: 1rem;
  }

  :where(.mph-page-guide) .guide-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
}

@media (max-width: 860px) {
  :where(.mph-page-guide) .guide-grid.has-sidebar,
  :where(.mph-page-guide) .guide-grid.has-nav.has-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.mph-page-guide) .guide-sidebar {
    order: 2;
  }
}

/* ─── Right Sticky Sidebar CTA ───────────────────────────────────────── */

:where(.mph-page-guide) .guide-sidebar {
  align-self: start;
}

:where(.mph-page-guide) .guide-sidebar-sticky {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

:where(.mph-page-guide) .guide-sb-card {
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.12);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 12px 32px rgba(4, 20, 33, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:where(.mph-page-guide) .guide-sb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(4, 20, 33, 0.1);
}

:where(.mph-page-guide) .guide-sb-card--emergency {
  background: linear-gradient(135deg, #041f33 0%, #004e75 100%);
  border-color: rgba(28, 151, 212, 0.3);
  color: #ffffff;
}

:where(.mph-page-guide) .guide-sb-card--emergency .guide-sb-title {
  color: #ffffff;
}

:where(.mph-page-guide) .guide-sb-card--emergency .guide-sb-desc {
  color: rgba(255, 255, 255, 0.82);
}

:where(.mph-page-guide) .guide-sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.15);
  border: 1px solid rgba(255, 77, 77, 0.3);
  border-radius: 99px;
  padding: 4px 12px;
  margin-bottom: 0.85rem;
}

:where(.mph-page-guide) .guide-sb-pulse {
  width: 8px;
  height: 8px;
  background-color: #ff4d4d;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
  animation: pulse-red 1.8s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(255, 77, 77, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
  }
}

:where(.mph-page-guide) .guide-sb-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--guide-tint);
  color: var(--guide-blue);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
}

:where(.mph-page-guide) .guide-sb-title {
  font-family: 'Araboto', system-ui, -apple-system, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--guide-navy);
  margin: 0 0 0.4rem;
}

:where(.mph-page-guide) .guide-sb-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--guide-ink);
  margin: 0 0 1.1rem;
}

:where(.mph-page-guide) .guide-sb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

:where(.mph-page-guide) .guide-sb-btn + .guide-sb-btn {
  margin-top: 0.6rem;
}

:where(.mph-page-guide) .guide-sb-btn--emergency {
  background: #ff3b30;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(255, 59, 48, 0.3);
}

:where(.mph-page-guide) .guide-sb-btn--emergency:hover {
  background: #e03126;
  transform: translateY(-1px);
}

:where(.mph-page-guide) .guide-sb-btn--primary {
  background: linear-gradient(135deg, var(--guide-navy), var(--guide-blue));
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 78, 117, 0.25);
}

:where(.mph-page-guide) .guide-sb-btn--primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

:where(.mph-page-guide) .guide-sb-btn--whatsapp {
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.25);
}

:where(.mph-page-guide) .guide-sb-btn--whatsapp:hover {
  background: #20bd5a;
  transform: translateY(-1px);
}

:where(.mph-page-guide) .guide-sb-card--info {
  background: #f8fbfd;
  border-style: dashed;
}

:where(.mph-page-guide) .guide-sb-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--guide-ink);
}

:where(.mph-page-guide) .guide-sb-info-row i {
  color: var(--guide-blue);
  margin-top: 3px;
}

:where(.mph-page-guide) .guide-sb-info-row strong {
  display: block;
  color: var(--guide-navy);
}

:where(.mph-page-guide) .guide-sb-info-row span {
  display: block;
  color: #64748b;
  font-size: 0.8rem;
}

:where(.mph-page-guide) .guide-sb-map-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--guide-blue);
  text-decoration: none;
}

:where(.mph-page-guide) .guide-sb-map-link:hover {
  text-decoration: underline;
}

/* Page-specific Sidebar Badge & Card Variants */
:where(.mph-page-guide) .guide-sb-badge--teal {
  color: #007a87;
  background: rgba(0, 163, 196, 0.12);
  border: 1px solid rgba(0, 163, 196, 0.25);
}

:where(.mph-page-guide) .guide-sb-badge--blue {
  color: var(--guide-blue);
  background: var(--guide-tint);
  border: 1px solid rgba(28, 151, 212, 0.25);
}

:where(.mph-page-guide) .guide-sb-badge--gold {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

:where(.mph-page-guide) .guide-sb-card--inpatient {
  border-inline-start: 4px solid #00a3c4;
}

:where(.mph-page-guide) .guide-sb-card--visit {
  border-inline-start: 4px solid var(--guide-blue);
}

:where(.mph-page-guide) .guide-sb-card--finance {
  border-inline-start: 4px solid #f59e0b;
}

:where(.mph-page-guide) .guide-sb-card--records {
  border-inline-start: 4px solid #0284c7;
}

:where(.mph-page-guide) .guide-sb-card--advocacy {
  border-inline-start: 4px solid #0d9488;
}

:where(.mph-page-guide) .guide-sb-hours-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  background: #f8fbfd;
  border-radius: 12px;
  border: 1px solid rgba(0, 78, 117, 0.08);
}

:where(.mph-page-guide) .guide-sb-hr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  gap: 0.5rem;
}

:where(.mph-page-guide) .guide-sb-hr-row span {
  color: var(--guide-ink);
  font-weight: 500;
}

:where(.mph-page-guide) .guide-sb-hr-row strong {
  color: var(--guide-navy);
  font-weight: 700;
}

/* ─── Page-Specific Layout Distinctives ──────────────────────────────── */

/* Admission & Discharge: Step connector indicators */
.guide-admission-discharge .guide-card--admission-discharge {
  border-block-start: 3px solid var(--guide-blue);
}

.guide-admission-discharge .guide-card--admission-discharge:nth-child(2) {
  border-block-start-color: #00a3c4;
}

.guide-admission-discharge .guide-card--admission-discharge:nth-child(3) {
  border-block-start-color: #004e75;
}

/* Emergency Care: Alert theme accents */
.guide-emergency-care .guide-eyebrow {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.guide-emergency-care .guide-card--emergency-care {
  border-inline-start: 3px solid #ef4444;
}

/* Visiting Hours: Schedule cards tinting */
.guide-visiting-hours .guide-card--visiting-hours {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  border-color: rgba(28, 151, 212, 0.2);
}

/* Insurance & Billing: Partner card accents */
.guide-insurance-billing .guide-card--insurance-billing {
  box-shadow: 0 8px 24px rgba(0, 78, 117, 0.06);
}

/* Patient Rights: Comparative charter cards */
.guide-patient-rights .guide-card--patient-rights:nth-child(odd) {
  border-inline-start: 4px solid var(--guide-navy);
}

.guide-patient-rights .guide-card--patient-rights:nth-child(even) {
  border-inline-start: 4px solid var(--guide-blue);
}

:where(.mph-page-guide) .guide-nav {
  position: sticky;
  top: 110px;
  align-self: start;
  border-inline-start: 2px solid var(--guide-line);
  padding-inline-start: 1.25rem;
}

:where(.mph-page-guide) .guide-nav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--guide-blue);
  margin-bottom: 1rem;
}

:where(.mph-page-guide) .guide-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

:where(.mph-page-guide) .guide-nav-list a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--guide-ink);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

:where(.mph-page-guide) .guide-nav-list a:hover,
:where(.mph-page-guide) .guide-nav-list a:focus-visible {
  color: var(--guide-navy);
  transform: translateX(3px);
}

/* Mirrored, so the Arabic rail nudges the way its text runs. */
[dir='rtl'] :where(.mph-page-guide) .guide-nav-list a:hover,
[dir='rtl'] :where(.mph-page-guide) .guide-nav-list a:focus-visible {
  transform: translateX(-3px);
}

/* ─── The opening band of prose ───────────────────────────────────────── */

:where(.mph-page-guide) .guide-intro {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

:where(.mph-page-guide) .guide-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--guide-blue);
  background: var(--guide-tint);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 14px;
}

:where(.mph-page-guide) .guide-intro h2 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--guide-navy);
  margin: 0 0 1rem;
}

:where(.mph-page-guide) .guide-intro p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--guide-ink);
  margin: 0 0 1rem;
  max-width: 68ch;
}

/* ─── The summary cards ───────────────────────────────────────────────── */

/*
 * A fixed three-up grid rather than `auto-fit, minmax(300px, 1fr)`.
 *
 * `auto-fit` fits as many columns as the container allows and then stretches
 * them, so three cards in a container wide enough for two became a 2 + 1 with
 * one card stranded at double width - which is exactly what the inpatient page
 * shipped. Three columns that collapse to two and then one at declared
 * breakpoints give the same responsiveness and a row that always balances.
 */
:where(.mph-page-guide) .guide-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/*
 * A page that is only a banner and a few cards - which most of these still are -
 * used to end with the cards' bottom margin, the band's own padding and the
 * closing section's padding stacked into an empty half-screen. The margin is
 * there to separate the cards from the chapters, so it goes when there are no
 * chapters under them.
 */
:where(.mph-page-guide) .guide-cards:last-child {
  margin-bottom: 0;
}

:where(.mph-page-guide) .guide-cards[data-count='1'] {
  grid-template-columns: minmax(0, 1fr);
}

:where(.mph-page-guide) .guide-cards[data-count='2'],
:where(.mph-page-guide) .guide-cards[data-count='4'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.mph-page-guide) .guide-grid.has-sidebar .guide-cards {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

:where(.mph-page-guide) .guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: #ffffff;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  padding: 1.75rem 1.6rem;
  box-shadow: 0 10px 28px rgba(4, 20, 33, 0.05);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* The accent that tells these apart from a plain box, drawn on hover only. */
:where(.mph-page-guide) .guide-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--guide-navy), var(--guide-blue));
  transform: scaleX(0);
  /* `transform-origin` takes no logical keyword, so the mirror is explicit. */
  transform-origin: left;
  transition: transform 0.3s ease;
}

[dir='rtl'] :where(.mph-page-guide) .guide-card::before {
  transform-origin: right;
}

:where(.mph-page-guide) .guide-card:hover {
  transform: translateY(-4px);
  border-color: rgba(28, 151, 212, 0.35);
  box-shadow: 0 18px 44px rgba(4, 20, 33, 0.1);
}

:where(.mph-page-guide) .guide-card:hover::before {
  transform: scaleX(1);
}

:where(.mph-page-guide) .guide-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: var(--guide-blue);
  background: var(--guide-tint);
  border: 1px solid rgba(28, 151, 212, 0.18);
  margin-bottom: 0.35rem;
}

/*
 * The numbered mark, for a card whose title carried its own number.
 *
 * Same tile as the icon so a page mixing the two - a numbered checklist and
 * an illustrated card - reads as one set, and the same navy-on-tint as the
 * chapter marks further down the page.
 */
:where(.mph-page-guide) .guide-card-icon--num {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--guide-navy);
  background: linear-gradient(135deg, rgba(28, 151, 212, 0.16), rgba(0, 78, 117, 0.08));
}

:where(.mph-page-guide) .guide-card-badge {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00647f;
  background: rgba(0, 163, 196, 0.12);
  border-radius: 99px;
  padding: 4px 11px;
}

:where(.mph-page-guide) .guide-card h3 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--guide-navy);
  margin: 0;
}

:where(.mph-page-guide) .guide-card p {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--guide-ink);
  margin: 0;
}

:where(.mph-page-guide) .guide-card-link {
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--guide-blue);
  text-decoration: none;
}

:where(.mph-page-guide) .guide-card-link:hover {
  text-decoration: underline;
}

/* ─── The practical details band ──────────────────────────────────────── */

/*
 * Address, hours and numbers, on the pages that switch them on.
 *
 * A tinted panel rather than more white cards on white: the band is a change
 * of subject - the page stops explaining and starts answering "where, when,
 * what number" - and giving it its own ground is what says so without a
 * divider or an extra heading level.
 */
:where(.mph-page-guide) .guide-essentials {
  position: relative;
  margin-block: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid rgba(0, 78, 117, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(28, 151, 212, 0.1), transparent 55%),
    linear-gradient(180deg, #f3f9fd 0%, #fbfdfe 100%);
}

:where(.mph-page-guide) .guide-essentials > h2 {
  /*
   * A band label, not a page heading.
   *
   * With no heading of its own set on the page, this falls back to the
   * footer's "CONTACT INFORMATION", which the hospital has stored in capitals
   * - and 1.75rem of capitals reads as shouting. Set at the size and weight
   * the hours panel's own heading uses, capitals look deliberate either way,
   * and the band stops competing with the page's real `h2` above it.
   */
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--guide-navy);
  margin: 0 0 1.25rem;
}

/*
 * Hours on the left, everything else on the right.
 *
 * `auto-fit` would collapse to one column the moment the timetable got long,
 * which is the wrong trigger - the reason to stack is a narrow screen, not a
 * hospital that publishes its Ramadan hours. So the split is declared and the
 * breakpoint below undoes it.
 */
:where(.mph-page-guide) .ge-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  /*
   * Stretched, not `start`. The timetable is always the shorter of the two,
   * and left to its own height it sat as a small box beside a tall one with
   * a third of the band empty underneath it.
   */
  align-items: stretch;
}

:where(.mph-page-guide) .ge-panel {
  margin: 0;
  padding: 1.25rem 1.35rem;
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(4, 20, 33, 0.05);
}

:where(.mph-page-guide) .ge-panel--hours h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 0.9rem;
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--guide-navy);
}

:where(.mph-page-guide) .ge-panel-icon,
:where(.mph-page-guide) .ge-fact-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--guide-blue);
  background: var(--guide-tint);
}

:where(.mph-page-guide) .ge-hours {
  margin: 0;
}

:where(.mph-page-guide) .ge-hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-block-end: 1px dashed rgba(0, 78, 117, 0.12);
}

:where(.mph-page-guide) .ge-hours-row:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

:where(.mph-page-guide) .ge-hours-row dt {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--guide-navy);
}

:where(.mph-page-guide) .ge-hours-row dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--guide-ink);
  text-align: end;
}

/* A day the hospital is shut reads as shut, not as an odd set of times. */
:where(.mph-page-guide) .ge-hours-row.is-closed dt,
:where(.mph-page-guide) .ge-hours-row.is-closed dd {
  color: #94a3b8;
}

:where(.mph-page-guide) .ge-panel--facts {
  display: grid;
  /* An explicit shrinkable track. The implicit one is `auto`, which grows to
     the longest unbreakable value - an e-mail address - and pushed the panel
     22px past a 320px screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}

:where(.mph-page-guide) .ge-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

:where(.mph-page-guide) .ge-fact-body {
  min-width: 0;
}

:where(.mph-page-guide) .ge-fact-label {
  margin: 0 0 3px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8496a8;
}

:where(.mph-page-guide) .ge-fact-value {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--guide-navy);
  /* E-mail addresses and URLs are one word; let them break rather than run
     out of the panel, which they did at 320px and again at 900px. */
  overflow-wrap: anywhere;
}

:where(.mph-page-guide) .ge-fact-value a {
  color: inherit;
  text-decoration: none;
}

:where(.mph-page-guide) .ge-fact-value a:hover {
  color: var(--guide-blue);
  text-decoration: underline;
}

:where(.mph-page-guide) .ge-address {
  display: block;
  font-weight: 500;
  color: var(--guide-ink);
}

:where(.mph-page-guide) .ge-address span {
  display: block;
}

:where(.mph-page-guide) .ge-link {
  display: inline-block;
  margin-block-start: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--guide-blue) !important;
  text-decoration: none;
}

:where(.mph-page-guide) .ge-link:hover {
  text-decoration: underline;
}

:where(.mph-page-guide) .ge-fact-note {
  display: block;
  margin-block-start: 2px;
  font-size: 0.8rem;
  font-weight: 400;
  color: #7b8b9c;
}

/* ─── The press archive ───────────────────────────────────────────────── */

/*
 * Thirty articles going back to 2018, on `/news-events`.
 *
 * Photograph-led, because that is what the archive is: a hospital's news is
 * an award being handed over, a theatre, a signing. Five of the thirty have
 * no photograph and get a tinted panel instead, so a row keeps its rhythm
 * rather than collapsing to a text card beside three picture ones.
 */
:where(.mph-page-guide) .mph-news {
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

:where(.mph-page-guide) .mph-news__head {
  margin-block-end: clamp(1.5rem, 3vw, 2rem);
}

:where(.mph-page-guide) .mph-news__head h2 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--guide-navy);
  margin: 0 0 0.6rem;
}

:where(.mph-page-guide) .mph-news__head p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--guide-ink);
  margin: 0;
  max-width: 68ch;
}

:where(.mph-page-guide) .mph-news__empty {
  padding: 2rem;
  border: 1px dashed rgba(0, 78, 117, 0.2);
  border-radius: 16px;
  background: #f8fbfd;
  color: var(--guide-ink);
  text-align: center;
  margin: 0;
}

:where(.mph-page-guide) .mph-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

:where(.mph-page-guide) .mph-na {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 78, 117, 0.09);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(4, 20, 33, 0.06);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

:where(.mph-page-guide) .mph-na:hover,
:where(.mph-page-guide) .mph-na:focus-within {
  transform: translateY(-5px);
  border-color: rgba(28, 151, 212, 0.35);
  box-shadow: 0 22px 44px rgba(4, 20, 33, 0.14);
}

:where(.mph-page-guide) .mph-na__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #eaf3f9;
  overflow: hidden;
}

:where(.mph-page-guide) .mph-na__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(.mph-page-guide) .mph-na:hover .mph-na__media img {
  transform: scale(1.05);
}

/* The five articles published without a photograph. */
:where(.mph-page-guide) .mph-na__media--empty {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(28, 151, 212, 0.22), transparent 60%),
    linear-gradient(135deg, #0b3a56 0%, #004e75 100%);
}

:where(.mph-page-guide) .mph-na__tag {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--guide-navy);
}

:where(.mph-page-guide) .mph-na__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1.35rem 1.4rem;
  flex: 1 1 auto;
}

:where(.mph-page-guide) .mph-na__date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7b8b9c;
}

:where(.mph-page-guide) .mph-na__title {
  margin: 0;
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.38;
  color: var(--guide-navy);
}

/*
 * The whole card is clickable, but only the headline is the link - so a
 * screen reader announces the headline, not the headline plus the date plus
 * the standfirst. Same construction as the specialty cards.
 */
:where(.mph-page-guide) .mph-na__link {
  color: inherit;
  text-decoration: none;
}

:where(.mph-page-guide) .mph-na__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

:where(.mph-page-guide) .mph-na__link:focus-visible::after {
  outline: 2px solid var(--guide-blue);
  outline-offset: -3px;
  border-radius: 18px;
}

:where(.mph-page-guide) .mph-na__excerpt {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--guide-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

:where(.mph-page-guide) .mph-na__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block-start: auto;
  padding-block-start: 0.7rem;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--guide-blue);
}

:where(.mph-page-guide) .mph-na:hover .mph-na__more svg {
  transform: translateX(3px);
}

[dir='rtl'] :where(.mph-page-guide) .mph-na:hover .mph-na__more svg {
  transform: translateX(-3px);
}

[dir='rtl'] :where(.mph-page-guide) .mph-na__more svg {
  transform: scaleX(-1);
}

:where(.mph-page-guide) .mph-na__more svg {
  transition: transform 0.25s ease;
}

/* ─── One article ─────────────────────────────────────────────────────── */

:where(.mph-page-guide) .mph-article {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  background: #ffffff;
}

:where(.mph-page-guide) .mph-article__head .container,
:where(.mph-page-guide) .mph-article__body,
:where(.mph-page-guide) .mph-article__foot {
  /*
   * A measure, not the full container.
   *
   * These are 200 to 800 words of prose, and prose set across 1260px is
   * unreadable - the eye loses the line it is on. The photographs keep the
   * same measure so the column reads as one thing.
   */
  max-width: 78ch;
  margin-inline: auto;
}

:where(.mph-page-guide) .mph-article__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--guide-blue);
  text-decoration: none;
}

:where(.mph-page-guide) .mph-article__back:hover {
  text-decoration: underline;
}

[dir='rtl'] :where(.mph-page-guide) .mph-article__back svg {
  transform: scaleX(-1);
}

:where(.mph-page-guide) .mph-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block: 1.5rem 0.9rem;
}

:where(.mph-page-guide) .mph-article__tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--guide-tint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--guide-blue);
}

:where(.mph-page-guide) .mph-article__date {
  font-size: 0.85rem;
  font-weight: 600;
  color: #7b8b9c;
}

:where(.mph-page-guide) .mph-article h1 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--guide-navy);
  margin: 0;
}

:where(.mph-page-guide) .mph-article__lead {
  max-width: 78ch;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(4, 20, 33, 0.14);
}

:where(.mph-page-guide) .mph-article__lead img,
:where(.mph-page-guide) .mph-article__figure img {
  width: 100%;
  height: auto;
  display: block;
}

:where(.mph-page-guide) .mph-article__body {
  margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem);
  /* Imported articles carry run-together text such as
     "24583600www.muscatprivatehospital.com" - one 300px word on a phone. */
  overflow-wrap: break-word;
}

:where(.mph-page-guide) .mph-article__body p {
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--guide-ink);
  margin: 0 0 1.25rem;
}

:where(.mph-page-guide) .mph-article__body h2 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--guide-navy);
  margin: 2rem 0 0.9rem;
}

:where(.mph-page-guide) .mph-article__figure {
  margin: 1.75rem 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(4, 20, 33, 0.1);
}

:where(.mph-page-guide) .mph-article__foot {
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--guide-line);
}

/* ─── The chapters ────────────────────────────────────────────────────── */

:where(.mph-page-guide) .guide-chapters {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

/*
 * `scroll-margin-top` is what makes the contents rail usable: without it the
 * fixed header lands on top of the heading the reader just jumped to.
 */
:where(.mph-page-guide) .guide-chapter {
  scroll-margin-top: 120px;
}

:where(.mph-page-guide) .guide-chapter-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

:where(.mph-page-guide) .guide-chapter-mark {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--guide-navy), var(--guide-blue));
  box-shadow: 0 8px 20px rgba(0, 78, 117, 0.22);
}

:where(.mph-page-guide) .guide-chapter h2 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--guide-navy);
  margin: 0;
}

:where(.mph-page-guide) .guide-chapter-intro {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--guide-ink);
  font-weight: 500;
  margin: 0 0 1rem;
}

:where(.mph-page-guide) .guide-chapter p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--guide-ink);
  margin: 0 0 1rem;
  max-width: 72ch;
}

/* The design's checkmark list, tightened for a page that is mostly lists. */
:where(.mph-page-guide) .guide-chapter .premium-list {
  margin: 0 0 1rem;
}

:where(.mph-page-guide) .guide-chapter .premium-list li {
  margin-bottom: 0.7rem;
  padding-left: 0;
  padding-inline-start: 1.9rem;
  color: var(--guide-ink);
}

:where(.mph-page-guide) .guide-chapter .premium-list li::before {
  left: auto;
  inset-inline-start: 0;
}

:where(.mph-page-guide) .guide-chapter > :last-child {
  margin-bottom: 0;
}

/* ─── Policy clauses (the five legal pages) ───────────────────────────── */

:where(.mph-page-guide) .guide-stamp {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--guide-blue);
  background: var(--guide-tint);
  padding: 8px 18px;
  border-radius: 99px;
  margin-bottom: 1.75rem;
}

:where(.mph-page-guide) .guide-clauses {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  counter-reset: clause;
}

:where(.mph-page-guide) .guide-clause {
  background: #ffffff;
  border: 1px solid var(--guide-line);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 8px 30px rgba(4, 20, 33, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

:where(.mph-page-guide) .guide-clause:hover {
  border-color: rgba(28, 151, 212, 0.3);
  box-shadow: 0 14px 36px rgba(4, 20, 33, 0.07);
}

:where(.mph-page-guide) .guide-clause h3 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--guide-navy);
  margin: 0 0 0.75rem;
  counter-increment: clause;
}

/*
 * The clause number is generated rather than typed, so the five legal pages
 * stay numbered correctly when a clause is inserted or removed in wp-admin.
 */
:where(.mph-page-guide) .guide-clause h3::before {
  content: counter(clause) '. ';
  color: var(--guide-blue);
}

:where(.mph-page-guide) .guide-clause p {
  font-size: 1.01rem;
  line-height: 1.8;
  color: var(--guide-ink);
  margin: 0;
}

/* ─── Questions ───────────────────────────────────────────────────────── */

:where(.mph-page-guide) .guide-faq {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  scroll-margin-top: 120px;
}

:where(.mph-page-guide) .guide-faq h2 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--guide-navy);
  margin: 0 0 1.5rem;
}

/* The accordion header is a button, so it needs the page's text direction. */
[dir='rtl'] :where(.mph-page-guide) .guide-faq .faq-btn {
  text-align: right;
}

/* ─── Narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  :where(.mph-page-guide) .guide-grid.has-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * The rail stops being a rail and becomes a bordered box above the text.
   * It stays in the DOM because on a phone a ten-chapter guide is exactly
   * where a contents list earns its place.
   */
  :where(.mph-page-guide) .guide-nav {
    position: static;
    border-inline-start: none;
    padding-inline-start: 0;
    border: 1px solid var(--guide-line);
    border-radius: 16px;
    padding: 1.25rem 1.4rem;
    background: #f8fafc;
  }

  :where(.mph-page-guide) .guide-nav-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 1.5rem;
  }

  :where(.mph-page-guide) .guide-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  :where(.mph-page-guide) .guide-cards,
  :where(.mph-page-guide) .guide-cards[data-count='2'],
  :where(.mph-page-guide) .guide-cards[data-count='4'] {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.mph-page-guide) .guide-chapter-head {
    gap: 0.7rem;
  }

  :where(.mph-page-guide) .guide-clause {
    padding: 1.35rem;
  }
}

/* ==========================================================================
   THE PICTURE GALLERY
   ==========================================================================

   Only /picture-gallery renders this, and only once it has photographs. It
   lives in this sheet rather than its own because it is one band inside a
   guide page, above the chapters, and shares the page's tokens.
   ========================================================================== */

:where(.mph-page-guide) .gal {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ─── Category chips ──────────────────────────────────────────────────── */

:where(.mph-page-guide) .gal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

:where(.mph-page-guide) .gal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--guide-navy);
  background: #ffffff;
  border: 1px solid var(--guide-line);
  border-radius: 99px;
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(.mph-page-guide) .gal-chip:hover {
  border-color: rgba(28, 151, 212, 0.45);
  box-shadow: 0 6px 18px rgba(4, 20, 33, 0.07);
}

:where(.mph-page-guide) .gal-chip.is-on {
  color: #ffffff;
  background: linear-gradient(135deg, var(--guide-navy), var(--guide-blue));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0, 78, 117, 0.25);
}

/* The tally beside a chip's name, so a visitor can see how much is behind it. */
:where(.mph-page-guide) .gal-chip-count {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 99px;
  color: var(--guide-blue);
  background: var(--guide-tint);
}

:where(.mph-page-guide) .gal-chip.is-on .gal-chip-count {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
}

/* ─── The grid ────────────────────────────────────────────────────────── */

/*
 * Rows of a fixed height rather than a masonry layout.
 *
 * These photographs arrive at whatever aspect ratio they were shot at, and a
 * gallery of mixed ratios laid out at their natural size reads as a mistake.
 * A fixed row height with `object-fit: cover` gives an even grid, and the
 * viewer shows the whole photograph uncropped - which is where a visitor who
 * cares about the composition is looking anyway.
 */
:where(.mph-page-guide) .gal-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

:where(.mph-page-guide) .gal-cell[hidden] {
  display: none;
}

/* Every third photograph is given two rows, so the grid has a rhythm rather
   than reading as a contact sheet. */
:where(.mph-page-guide) .gal-cell:nth-child(6n + 1) {
  grid-row: span 2;
}

:where(.mph-page-guide) .gal-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  background: #eef4f8;
  box-shadow: 0 10px 28px rgba(4, 20, 33, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

:where(.mph-page-guide) .gal-cell:nth-child(6n + 1) .gal-tile {
  min-height: 416px;
}

:where(.mph-page-guide) .gal-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

:where(.mph-page-guide) .gal-tile:hover {
  box-shadow: 0 22px 50px rgba(4, 20, 33, 0.16);
}

:where(.mph-page-guide) .gal-tile:hover img {
  transform: scale(1.06);
}

:where(.mph-page-guide) .gal-tile:focus-visible {
  outline: 3px solid var(--guide-blue);
  outline-offset: 3px;
}

/* The caption sits on a scrim that only covers the bottom of the photograph,
   so the picture is never dimmed as a whole. */
:where(.mph-page-guide) .gal-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 2.5rem 1.1rem 1rem;
  text-align: start;
  background: linear-gradient(to top, rgba(4, 20, 33, 0.85), rgba(4, 20, 33, 0));
}

:where(.mph-page-guide) .gal-caption-text {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
}

:where(.mph-page-guide) .gal-zoom {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

:where(.mph-page-guide) .gal-tile:hover .gal-zoom,
:where(.mph-page-guide) .gal-tile:focus-visible .gal-zoom {
  opacity: 1;
  transform: translateY(0);
}

/* ─── The viewer ──────────────────────────────────────────────────────── */

/*
 * A real `<dialog>`, so the focus trap, Escape and the inert background are
 * the browser's job. Only the appearance is here.
 */
:where(.mph-page-guide) .gal-viewer {
  width: min(1180px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;

  /*
   * A modal `<dialog>` is centred by `margin: auto` in the browser's own
   * stylesheet, and Tailwind's preflight resets the margin on every element to
   * zero - `dialog` included. So the photograph opened pinned to the top-left
   * corner of the window with the rest of the screen dimmed beside it.
   *
   * Setting it back is enough for both axes: `auto` on all four sides is what
   * centres a modal dialog against its containing block, which for a dialog in
   * the top layer is the viewport.
   */
  margin: auto;
}

:where(.mph-page-guide) .gal-viewer::backdrop {
  background: rgba(2, 12, 22, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

:where(.mph-page-guide) .gal-viewer-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gal-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes gal-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.mph-page-guide) .gal-viewer-inner {
    animation: none;
  }

  :where(.mph-page-guide) .gal-tile img,
  :where(.mph-page-guide) .gal-tile {
    transition: none;
  }
}

:where(.mph-page-guide) .gal-figure {
  margin: 0;
  max-width: 100%;
}

:where(.mph-page-guide) .gal-figure img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

:where(.mph-page-guide) .gal-figure figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

:where(.mph-page-guide) .gal-count {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
}

:where(.mph-page-guide) .gal-close,
:where(.mph-page-guide) .gal-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

:where(.mph-page-guide) .gal-close:hover,
:where(.mph-page-guide) .gal-nav:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.06);
}

:where(.mph-page-guide) .gal-close {
  inset-block-start: -58px;
  inset-inline-end: 0;
}

:where(.mph-page-guide) .gal-prev {
  inset-inline-start: -62px;
}

:where(.mph-page-guide) .gal-next {
  inset-inline-end: -62px;
}

/* The chevrons point the way the language runs. */
[dir='rtl'] :where(.mph-page-guide) .gal-prev i,
[dir='rtl'] :where(.mph-page-guide) .gal-next i {
  transform: scaleX(-1);
}

@media (max-width: 1080px) {
  :where(.mph-page-guide) .gal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The arrows come inside the frame once there is no room beside it. */
  :where(.mph-page-guide) .gal-prev {
    inset-inline-start: 8px;
  }

  :where(.mph-page-guide) .gal-next {
    inset-inline-end: 8px;
  }
}

@media (max-width: 680px) {
  :where(.mph-page-guide) .gal-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.mph-page-guide) .gal-cell:nth-child(6n + 1) {
    grid-row: auto;
  }

  :where(.mph-page-guide) .gal-cell:nth-child(6n + 1) .gal-tile,
  :where(.mph-page-guide) .gal-tile {
    min-height: 230px;
  }
}

/* ==========================================================================
   THE VACANCY BOARD AND THE APPLICATION FORM
   ==========================================================================

   Only /careers renders these. They reuse the gallery's filter chips for the
   department filter, because they are the same control doing the same job and
   two chips that look different on one site would be a mistake, not a choice.
   ========================================================================== */

:where(.mph-page-guide) .job {
  margin-top: clamp(2rem, 4vw, 3rem);
}

:where(.mph-page-guide) .job h2 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--guide-navy);
  margin: 0 0 1.25rem;
}

:where(.mph-page-guide) .job-openings {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  scroll-margin-top: 120px;
}

:where(.mph-page-guide) .job-empty {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--guide-ink);
  background: #f8fafc;
  border: 1px solid var(--guide-line);
  border-inline-start: 3px solid var(--guide-blue);
  border-radius: 14px;
  padding: 1.35rem 1.5rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

/* ─── One vacancy ─────────────────────────────────────────────────────── */

:where(.mph-page-guide) .job-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

:where(.mph-page-guide) .job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: #ffffff;
  border: 1px solid var(--guide-line);
  border-radius: 16px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 8px 24px rgba(4, 20, 33, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

:where(.mph-page-guide) .job-row:hover {
  border-color: rgba(28, 151, 212, 0.35);
  box-shadow: 0 16px 40px rgba(4, 20, 33, 0.09);
  transform: translateY(-2px);
}

:where(.mph-page-guide) .job-row-main {
  min-width: 0;
}

:where(.mph-page-guide) .job-row h3 {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--guide-navy);
  margin: 0 0 0.4rem;
}

:where(.mph-page-guide) .job-summary {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--guide-ink);
  margin: 0 0 0.7rem;
  /* Two lines of the role, then the reader opens it. The whole description on
     a list row would turn a board of ten jobs into ten screens. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 70ch;
}

:where(.mph-page-guide) .job-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

:where(.mph-page-guide) .job-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

:where(.mph-page-guide) .job-meta i {
  color: var(--guide-blue);
  font-size: 12px;
}

/* A closing date is the one piece of this that is time-critical. */
:where(.mph-page-guide) .job-meta .job-closes,
:where(.mph-page-guide) .job-meta .job-closes i {
  color: #b45309;
}

:where(.mph-page-guide) .job-apply {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--guide-navy), var(--guide-blue));
  border: none;
  border-radius: 99px;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 78, 117, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

:where(.mph-page-guide) .job-apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 78, 117, 0.3);
}

[dir='rtl'] :where(.mph-page-guide) .job-apply i {
  transform: scaleX(-1);
}

/* ─── The form ────────────────────────────────────────────────────────── */

:where(.mph-page-guide) .job-form-wrap {
  background: linear-gradient(160deg, #f8fbfd, #eef5fa);
  border: 1px solid var(--guide-line);
  border-radius: 22px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  scroll-margin-top: 110px;
}

:where(.mph-page-guide) .job-form-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--guide-ink);
  margin: -0.5rem 0 1.75rem;
  max-width: 62ch;
}

:where(.mph-page-guide) .job-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
}

:where(.mph-page-guide) .job-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

:where(.mph-page-guide) .job-field--wide {
  grid-column: 1 / -1;
}

:where(.mph-page-guide) .job-field label {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--guide-navy);
}

:where(.mph-page-guide) .job-field input,
:where(.mph-page-guide) .job-field select,
:where(.mph-page-guide) .job-field textarea {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid var(--guide-line);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(.mph-page-guide) .job-field textarea {
  resize: vertical;
  line-height: 1.6;
}

:where(.mph-page-guide) .job-field input:focus,
:where(.mph-page-guide) .job-field select:focus,
:where(.mph-page-guide) .job-field textarea:focus {
  outline: none;
  border-color: var(--guide-blue);
  box-shadow: 0 0 0 3px rgba(28, 151, 212, 0.16);
}

:where(.mph-page-guide) .job-field input[aria-invalid='true'] {
  border-color: #dc2626;
}

/*
 * The position list.
 *
 * `appearance: none` plus a drawn chevron, because the native control is a
 * different shape and weight in every browser and would be the one box in
 * this form that does not match the others. The arrow is an inline SVG in the
 * background rather than a pseudo-element, since a <select> cannot have one.
 */
:where(.mph-page-guide) .job-field select {
  appearance: none;
  cursor: pointer;
  padding-inline-end: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23004e75'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

[dir='rtl'] :where(.mph-page-guide) .job-field select {
  background-position: left 14px center;
}

/* The file input's own button, which browsers style very differently. */
:where(.mph-page-guide) .job-field input[type='file'] {
  padding: 9px 12px;
  cursor: pointer;
}

:where(.mph-page-guide) .job-field input[type='file']::file-selector-button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--guide-navy);
  background: var(--guide-tint);
  border: 1px solid rgba(28, 151, 212, 0.25);
  border-radius: 99px;
  padding: 7px 16px;
  margin-inline-end: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

:where(.mph-page-guide) .job-field input[type='file']::file-selector-button:hover {
  background: rgba(28, 151, 212, 0.18);
}

:where(.mph-page-guide) .job-help {
  font-size: 12.5px;
  color: #64748b;
}

:where(.mph-page-guide) .job-error {
  font-size: 12.5px;
  font-weight: 600;
  color: #dc2626;
}

:where(.mph-page-guide) .job-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

:where(.mph-page-guide) .job-submit {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--guide-navy), var(--guide-blue));
  border: none;
  border-radius: 99px;
  padding: 14px 32px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 78, 117, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

:where(.mph-page-guide) .job-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0, 78, 117, 0.32);
}

:where(.mph-page-guide) .job-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

:where(.mph-page-guide) .job-note {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

:where(.mph-page-guide) .job-note.is-ok {
  color: #047857;
}

:where(.mph-page-guide) .job-note.is-bad {
  color: #dc2626;
}

/*
 * The contact panel is the wider of the two, and its facts are short - an
 * address, three numbers. Stacked in one column they filled the left third of
 * it and left the rest white, with the panel stretched to the timetable's
 * height beside it. Above the stacking breakpoint the address takes the first
 * column and the numbers the second, so the panel reads as two columns of
 * facts rather than one column and a gap. Only when there is an address: with
 * three facts and nothing to pair them against, one column is right.
 */
@media (min-width: 861px) {
  :where(.mph-page-guide) .ge-panel--facts:has(.ge-address) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
    align-content: start;
  }

  :where(.mph-page-guide) .ge-panel--facts:has(.ge-address) .ge-fact:has(.ge-address) {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  :where(.mph-page-guide) .ge-panel--facts:has(.ge-address) .ge-fact:not(:has(.ge-address)) {
    grid-column: 2;
  }
}

/* The two panels stack before the text in them starts to crowd. */
@media (max-width: 860px) {
  :where(.mph-page-guide) .ge-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  :where(.mph-page-guide) .job-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
  }

  :where(.mph-page-guide) .job-apply {
    justify-content: center;
  }

  :where(.mph-page-guide) .job-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── One article: the reading column and the one beside it ───────────── */

/*
 * The article sat alone in a 78ch measure with a link back to the archive
 * under it, which is a dead end - the reader most likely to want another
 * article is the one who just finished this one. The piece now shares the page
 * with a column of related and recent stories.
 */
:where(.mph-page-guide) .mph-article__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}

/*
 * Inside the grid the column is the measure, so the prose no longer needs its
 * own cap - two caps would leave it floating in the middle of its own column.
 */
:where(.mph-page-guide) .mph-article__grid .mph-article__body,
:where(.mph-page-guide) .mph-article__grid .mph-article__foot {
  max-width: none;
  margin-inline: 0;
}

/* The headline and the lead photograph line up with the two columns. */
:where(.mph-page-guide) .mph-article__head .container,
:where(.mph-page-guide) .mph-article__lead {
  max-width: 1180px;
}

:where(.mph-page-guide) .mph-article__head h1 {
  /* The headline is the page. Let it be the size of one. */
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

/*
 * The opening paragraph, set larger.
 *
 * A standfirst is how a newspaper tells you the piece has begun, and it costs
 * one selector rather than a field somebody has to remember to fill in.
 */
:where(.mph-page-guide) .mph-article__body > p:first-child {
  font-size: 1.22rem;
  line-height: 1.7;
  color: var(--guide-navy);
}

:where(.mph-page-guide) .mph-article__lead {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 26px 60px rgba(4, 20, 33, 0.18);
}

@media (max-width: 1080px) {
  :where(.mph-page-guide) .mph-article__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On one column the prose takes its measure back. */
  :where(.mph-page-guide) .mph-article__grid .mph-article__body,
  :where(.mph-page-guide) .mph-article__grid .mph-article__foot {
    max-width: 78ch;
    margin-inline: auto;
  }
}

/* ─── The column ──────────────────────────────────────────────────────── */

:where(.mph-page-guide) .mph-article__aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Follows the reader down a long article rather than scrolling away at the
     first screen; `top` clears the sticky header. */
  position: sticky;
  top: 108px;
}

:where(.mph-page-guide) .mph-aside-card {
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(4, 20, 33, 0.06);
}

:where(.mph-page-guide) .mph-aside-card__title {
  margin: 0 0 1rem;
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--guide-navy);
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--guide-line);
}

:where(.mph-page-guide) .mph-aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

:where(.mph-page-guide) .mph-aside-item + .mph-aside-item {
  margin-block-start: 0.35rem;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid var(--guide-line);
}

:where(.mph-page-guide) .mph-aside-link {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  transition: color 0.18s ease;
}

:where(.mph-page-guide) .mph-aside-thumb {
  flex: 0 0 76px;
  height: 62px;
  border-radius: 10px;
  overflow: hidden;
  background: #eef4f8;
}

:where(.mph-page-guide) .mph-aside-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

:where(.mph-page-guide) .mph-aside-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

:where(.mph-page-guide) .mph-aside-date {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--guide-muted, #64748b);
}

:where(.mph-page-guide) .mph-aside-title {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--guide-navy);
  /* Three lines, so a long headline does not turn the column into a wall. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:where(.mph-page-guide) .mph-aside-link:hover .mph-aside-title,
:where(.mph-page-guide) .mph-aside-link:focus-visible .mph-aside-title {
  color: var(--guide-accent, #1c97d4);
}

:where(.mph-page-guide) .mph-aside-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--guide-accent, #1c97d4);
  text-decoration: none;
}

:where(.mph-page-guide) .mph-aside-all:hover {
  text-decoration: underline;
}

/* ─── The article's banner ────────────────────────────────────────────── */

/*
 * `.hero` is a full-height banner, which is right for a landing page and far
 * too much for an article - the headline is the point, and the reader wants the
 * first paragraph without scrolling a whole screen for it.
 */
:where(.mph-page-guide) .mph-article__hero {
  height: auto;
  min-height: min(52vh, 460px);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* One column: an article has no figures to set beside the headline. */
:where(.mph-page-guide) .mph-article__hero .hero-inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
}

:where(.mph-page-guide) .mph-article__hero h1 {
  color: #ffffff;
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  /* Wider than a landing page's heading: a headline is a sentence. */
  max-width: 26ch;
  margin: 0;
}

/* The category and date sit above the headline, on the photograph. */
:where(.mph-page-guide) .mph-article__hero .mph-article__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block-end: 1.1rem;
}

:where(.mph-page-guide) .mph-article__hero .mph-article__tag {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:where(.mph-page-guide) .mph-article__hero .mph-article__date {
  color: rgba(255, 255, 255, 0.85);
}

/* The back link is the only action, so it does not need to shout. */
:where(.mph-page-guide) .mph-article__hero .dr-hero-cta {
  margin-top: 1.75rem;
}

/* The prose starts straight after the banner now the lead photograph is gone. */
:where(.mph-page-guide) .mph-article__grid {
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

/* ─── Further reading, under the article ──────────────────────────────── */

:where(.mph-page-guide) .mph-article__rail {
  margin-block-start: clamp(3rem, 6vw, 4.5rem);
  padding-block: clamp(2.75rem, 5vw, 4rem);
  border-block-start: 1px solid var(--guide-line);
  background: var(--guide-wash, #f7fafc);
}

:where(.mph-page-guide) .mph-article__rail .container {
  max-width: 1180px;
}

:where(.mph-page-guide) .mph-article__rail-title {
  margin: 0 0 1.75rem;
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--guide-navy);
}

/*
 * The track is translated by `index * (cardWidth + gap)` measured from the live
 * layout, so the cards need a width the slider can read - a flex basis rather
 * than a grid, which is what the consultants rail does too.
 */
:where(.mph-page-guide) .mph-rail-viewport {
  overflow: hidden;
}

:where(.mph-page-guide) .mph-rail-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  align-items: stretch;
}

:where(.mph-page-guide) .mph-rail-track > * {
  flex: 0 0 calc((100% - 3rem) / 3);
  min-width: 0;
}

@media (max-width: 1000px) {
  :where(.mph-page-guide) .mph-rail-track > * {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}

@media (max-width: 640px) {
  :where(.mph-page-guide) .mph-rail-track > * {
    flex-basis: 100%;
  }
}

/* The arrows and dots the other rails use, centred under the cards. */
:where(.mph-page-guide) .mph-article__rail .slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-block-start: 1.75rem;
}

/*
 * One card size across the rail.
 *
 * The images already share a 16/10 ratio and the excerpt is clamped to three
 * lines, so the only thing left varying was the headline: two lines, then four,
 * then three - 481px, 528px and 504px of card. In a grid that would not matter
 * because the row equalises them, but a carousel lays its cards in a flex row
 * and they kept their own heights.
 *
 * The headline gets the same three-line box whatever it holds, which lines the
 * dates and the opening sentences up across the row as well as squaring off the
 * cards - and `align-self` makes the shorter ones fill the height rather than
 * leaving a gap under the last link.
 */
:where(.mph-page-guide) .mph-rail-track > * {
  align-self: stretch;
  height: auto;
}

:where(.mph-page-guide) .mph-article__rail .mph-na__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  /* Three lines whether the headline needs them or not. */
  min-height: calc(3em * 1.38);
}