/* ==========================================================================
   ACCESS PAGES  -  /book-an-appointment, /awards, /insurance-partners, /our-journey
   ==========================================================================

   Four footer links that used to go to an anchor, a `#`, or a page with no
   body. Each now has a page, built on the guide layout and its tokens, with
   one band the layout does not draw: the appointment form, the award cards,
   the insurer grid, and the journey timeline lifted from About.

   The form reuses the careers form's field classes (`.job-field`, `.job-submit`
   and friends) rather than restating them: two forms on one site that look
   different would say they are different, and they are not.

   Scoped to `.mph-page-guide`, like `guide.css`, whose tokens it uses.
   ========================================================================== */

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

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

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

:where(.mph-page-guide) .appt-card 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 0.75rem;
}

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

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

/* Date and time share one cell, because they are one question. */
:where(.mph-page-guide) .appt-when {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

:where(.mph-page-guide) .appt-when > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

:where(.mph-page-guide) .appt-small {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
}

/* ─── The awards ──────────────────────────────────────────────────────── */

:where(.mph-page-guide) .acc-grid {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

:where(.mph-page-guide) .acc-card {
  display: flex;
  gap: 1.35rem;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  padding: 1.6rem;
  box-shadow: 0 10px 28px rgba(4, 20, 33, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

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

/*
 * The award marks are different shapes - a seal, a wordmark, a shield - so
 * each sits centred in the same square rather than stretched to it.
 */
:where(.mph-page-guide) .acc-mark {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid var(--guide-line);
  display: grid;
  place-items: center;
  padding: 12px;
}

:where(.mph-page-guide) .acc-mark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

:where(.mph-page-guide) .acc-year {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--guide-blue);
  background: var(--guide-tint);
  border-radius: 99px;
  padding: 4px 11px;
  margin-bottom: 0.6rem;
}

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

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

/* ─── The insurers ────────────────────────────────────────────────────── */

:where(.mph-page-guide) .ins-grid {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

:where(.mph-page-guide) .ins-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  background: #ffffff;
  border: 1px solid var(--guide-line);
  border-radius: 16px;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

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

/* Every logo in the same box, whatever its native proportions. */
:where(.mph-page-guide) .ins-card img {
  height: 56px;
  width: 100%;
  object-fit: contain;
}

:where(.mph-page-guide) .ins-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--guide-ink);
}

/* ─── Our Journey: the opening band ───────────────────────────────────── */

/*
 * Heading left, opening paragraph right.
 *
 * The guide layout stacks an eyebrow, a heading and its paragraphs down the
 * left of a 1260px band. On a page whose opening is a heading and one
 * paragraph that leaves the right half of the screen empty, which is how
 * `/our-journey` opened. This is About's own arrangement for the same
 * problem - `.ab-story-head` - applied to the one guide page shaped like it.
 *
 * Scoped by `guide-our-journey`, the per-page hook `GenericPageLayout`
 * derives from the route, rather than by the band's anchor, which an editor
 * can rename.
 */
@media (min-width: 900px) {
  :where(.guide-our-journey) .guide-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }

  :where(.guide-our-journey) .guide-intro > .guide-eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  :where(.guide-our-journey) .guide-intro > h2 {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }

  /*
   * The opening paragraph spans both of the left column's rows.
   *
   * Without the span it sits in row one, row one is then as tall as the
   * paragraph, and the heading - which is row two - is pushed halfway down
   * the band with the eyebrow stranded above it. Spanning lets the rows be
   * sized by the heading, which is what they are for.
   *
   * A second paragraph is placed automatically, and auto-placement skips
   * occupied cells, so it lands in a new row beneath rather than on top.
   */
  :where(.guide-our-journey) .guide-intro > p {
    grid-column: 2;
  }

  :where(.guide-our-journey) .guide-intro > p:first-of-type {
    grid-row: 1 / span 2;
    align-self: start;
  }
}

/* ─── Recent articles ─────────────────────────────────────────────────── */

:where(.mph-page-guide) .mph-recent {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

:where(.mph-page-guide) .mph-recent__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

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

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

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

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

/*
 * Three columns, declared rather than fitted.
 *
 * `auto-fill` leaves an empty track when the rail shows three cards in a band
 * wide enough for four, and `auto-fit` fixes that only until somebody sets
 * the count to five and one card is stranded at full width - the same trap
 * `guide-cards` documents. Three steps down to two and then one, and the
 * field that sets the count says three or six.
 */
:where(.mph-page-guide) .mph-recent__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

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

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

/* ─── The hospital's figures ──────────────────────────────────────────── */

/*
 * Between the story and the timeline on `/our-journey`.
 *
 * The page opened with one paragraph in the left half and nothing in the
 * right, then a dark band whose own left half was empty too. These are the
 * figures behind the paragraph - four million patients, 350,000 admissions -
 * from the home page's own Key figures, and they give the top of the page
 * something to be.
 */
:where(.mph-page-guide) .jf {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

:where(.mph-page-guide) .jf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  /*
   * The hairlines are the grid's own background showing through a 1px gap,
   * so the cells cannot disagree about which of them owns the rule between
   * them - and the block reads as one table of figures rather than eight
   * boxes.
   */
  background: rgba(0, 78, 117, 0.1);
  border: 1px solid rgba(0, 78, 117, 0.1);
  border-radius: 18px;
  overflow: hidden;
}

:where(.mph-page-guide) .jf-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 1.35rem 1.25rem;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(28, 151, 212, 0.07), transparent 60%),
    #ffffff;
}

:where(.mph-page-guide) .jf-value {
  font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--guide-navy);
}

:where(.mph-page-guide) .jf-label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: #6b7c8f;
}

/* ─── The journey band, lifted from About ─────────────────────────────── */

/* The layout's white band has side padding the dark band should run through. */
:where(.mph-page-guide) .journey-band {
  margin: clamp(2rem, 4vw, 3rem) calc(50% - 50vw) 0;
}

/*
 * The chapters, without the heading column.
 *
 * About's `.ab-split` is two columns: a sticky heading on the left and the
 * timeline on the right. This page's banner already carries that heading -
 * both read the same `journey` fields - so the band drops it, and without
 * this the timeline stayed in the right-hand track with half the dark band
 * empty beside it.
 *
 * Centred, and only as wide as the chapters actually set. About caps
 * `.ab-node p` at 58ch, so a wider track does not widen the text - it just
 * moves the column off centre, which is what a first attempt at 82ch did.
 * 68ch is that measure plus the gutter the timeline's dots sit in.
 */
:where(.mph-page-guide) .journey-band .ab-split--spine {
  display: block;
}

:where(.mph-page-guide) .journey-band .ab-split--spine .ab-spine {
  max-width: 68ch;
  margin-inline: auto;
}

/*
 * The band's own height.
 *
 * About gives it the padding of a band carrying a heading, a lede and the
 * timeline. Here it carries the timeline alone, and the same padding left a
 * screen of empty navy above and below four short chapters.
 */
:where(.mph-page-guide) .journey-band .ab-dark--journey {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

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

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

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

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

  :where(.mph-page-guide) .acc-card {
    flex-direction: column;
  }
}

/* ==========================================================================
   Our Journey, as the hospital's second reference design (2026-10-02).
   ========================================================================== */

/* The intro: badge and heading on the left, the story on the right. */
:where(.mph-page-guide) .lay-split-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  text-align: start;
}

:where(.mph-page-guide) .lay-split-intro > .guide-eyebrow {
  grid-column: 1;
  justify-self: start;
}

:where(.mph-page-guide) .lay-split-intro > h2 {
  grid-column: 1;
  margin: 0.75rem 0 0;
  font-size: clamp(2rem, 4vw, 45px);
  line-height: 1.15;
}

:where(.mph-page-guide) .lay-split-intro > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: #000;
}

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

  :where(.mph-page-guide) .lay-split-intro > p {
    grid-column: 1;
    grid-row: auto;
    margin-top: 1rem;
  }
}

/* The figures: an icon disc beside each, in one white card. */
:where(.mph-page-guide) .jf-cell {
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  background: #fff;
}

:where(.mph-page-guide) .jf-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eef6fc;
  color: #004e75;
  font-size: 1.25rem;
}

:where(.mph-page-guide) .jf-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* The band with its own heading: heading, text and photograph on the left. */
:where(.mph-page-guide) .journey-band .ab-split:not(.ab-split--spine) {
  align-items: start;
}

:where(.mph-page-guide) .journey-band .ab-journey-photo {
  overflow: hidden;
  margin-top: 1.75rem;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
}

:where(.mph-page-guide) .journey-band .ab-journey-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

/* The help cards under the news: red emergency card, white cards beside. */
:where(.mph-page-guide.guide-our-journey) .lay-sb-band .guide-sb-card--emergency {
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
  border-color: transparent !important;
}

:where(.mph-page-guide.guide-our-journey) .lay-sb-band .guide-sb-card--emergency .guide-sb-btn {
  background: #ef4444 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
}

/* Six figures: three across, two rows, no empty cells. */
@media (min-width: 1081px) {
  :where(.mph-page-guide.guide-our-journey) .jf-grid:has(> .jf-cell:nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}