/* ICRD (IQRAA Centre for Research and Development)
   ------------------------------------------------------------------
   Standalone stylesheet for the ICRD section. It is enqueued only on
   ICRD pages (see iqraa_icrd_assets() in functions.php), which also
   dequeue the main theme bundle -- ICRD has its own header, footer and
   design language and shares no markup with the rest of the site.

   Isolation rules, so the two palettes can never bleed into each other:
     - every token is named --icrd-* and declared on .icrd (the body
       class), never on :root;
     - every class is namespaced .icrd-*;
     - this file is plain CSS, not part of the Tailwind build, so
       nothing here can end up in assets/css/main.css.

   Fonts deliberately reuse the theme's self-hosted Roboto for now. The
   two faces are separate tokens so ICRD can be given its own display
   and body faces later by changing only --icrd-display and
   --icrd-sans, with no markup edits. Roboto's @font-face rules live in
   the Tailwind build, which is not loaded here, so they are repeated at
   the bottom of this file. */

/* The values below are the main theme's palette, but they stay declared here as
   independent --icrd-* tokens rather than reading the Tailwind ones. ICRD keeps
   its own set of settings -- it simply happens to be pointed at the house
   colours right now. Giving the section its own look later is a matter of
   changing these values, with no markup or template edits.

   Each token names the main-palette entry it mirrors, so the two can be kept in
   step by hand; they cannot be linked automatically because this file is
   deliberately outside the Tailwind build. */
.icrd {
  --icrd-cream: #ffffff;              /* page background */
  --icrd-cream-2: #e6fafa;            /* --color-primary-pale, tinted bands */
  --icrd-deep: #034ea3;               /* --color-brand */
  --icrd-deep-2: #023d82;             /* --color-brand-dark */
  --icrd-deep-3: #00244e;             /* --color-navy, footer */
  --icrd-gold: #03bbb9;               /* --color-primary, the accent */
  --icrd-gold-lt: #2ec4c3;            /* --color-primary-alt */
  --icrd-card: #ffffff;
  --icrd-text: #333333;               /* --color-heading */
  --icrd-text-soft: #535862;          /* --color-body */
  --icrd-line: #d5d7da;               /* --color-border */

  --icrd-mustard-tint: #fdfcea;       /* --color-cream */
  /* Deliberately NOT --color-primary-pale: that is the same #e6fafa the stats
     panel behind these tiles uses, so the Research Funding tile read as having
     no background at all. A step deeper, still mint. */
  --icrd-mint-tint: #cdf3f2;
  --icrd-lavender-tint: #e5ced9;      /* --color-accent-rose */
  --icrd-sky-tint: rgba(87, 150, 220, .2); /* the sky in --color-sky-a40 */

  /* Used by the scholar card, which mirrors the hospital site's doctor card. */
  --icrd-surface: #fafafa;            /* --color-surface */
  --icrd-line-mid: #cfcfcf;           /* --color-border-mid */
  --icrd-line-subtle: #e9eaeb;        /* --color-border-subtle, table dividers */
  --icrd-shadow-sm: 0 1px 2px 0 rgba(10, 13, 18, .05); /* --color-shadow */
  --icrd-sage: #c7d1b0;               /* --color-accent-sage, photo backdrop */
  --icrd-overlay-faint: rgba(0, 0, 0, .08); /* --color-overlay-faint */

  --icrd-foot-text: #f3f4f6;          /* --color-surface-alt */
  --icrd-foot-body: #d5d7da;          /* --color-border */
  --icrd-foot-muted: #a4a7ae;         /* --color-muted */
  --icrd-foot-line: rgba(255, 255, 255, .14);
  --icrd-foot-ring: rgba(255, 255, 255, .5);

  --icrd-display: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --icrd-sans: "Roboto", ui-sans-serif, system-ui, sans-serif;

  --icrd-shadow-drop: 0 16px 34px rgba(10, 13, 18, .12); /* --color-shadow-strong */
  --icrd-scrim: rgba(0, 36, 78, .82); /* --color-navy, over imagery */
  --icrd-max: 1280px;

  /* One side padding for the whole section. The page wrap, the banner copy and
     the mobile menu panel all read it, so they cannot drift apart at a
     breakpoint -- which is how the menu ended up flush to the edge while the
     header beside it was inset. */
  --icrd-gutter: 40px;

  /* Reading measure for page content. Body copy and the article image both use
     it, so the image cannot end up wider than the text beside it. */
  --icrd-measure: 72ch;
}

@media (max-width: 980px) {
  .icrd { --icrd-gutter: 32px; }
}
@media (max-width: 620px) {
  .icrd { --icrd-gutter: 22px; }
}

/* Dark palette is defined but applied only on an explicit opt-in
   (<html data-theme="dark">). It is deliberately NOT wired to
   prefers-color-scheme: the rest of the IQRAA site is light-only, so
   auto-darkening this section alone would leave ICRD inconsistent with
   every page a visitor arrives from. Turning it on later means adding a
   prefers-color-scheme block with these same tokens. */
:root[data-theme="dark"] .icrd,
.icrd[data-theme="dark"] {
  --icrd-cream: #081728;              /* --color-navy-deep */
  --icrd-cream-2: #00244e;            /* --color-navy */
  --icrd-card: #023a7a;               /* --color-brand-darker */
  --icrd-text: #f3f4f6;               /* --color-surface-alt */
  --icrd-text-soft: #a4a7ae;          /* --color-muted */
  --icrd-line: rgba(255, 255, 255, .16);
  --icrd-mustard-tint: #023d82;
  --icrd-mint-tint: #027271;          /* --color-primary-deeper */
  --icrd-lavender-tint: #023a7a;
  --icrd-sky-tint: #00244e;
}

/* ---------- Base ---------- */
.icrd *,
.icrd *::before,
.icrd *::after { box-sizing: border-box; }

html:has(.icrd) { scroll-behavior: smooth; }

body.icrd {
  margin: 0;
  background: var(--icrd-cream);
  -webkit-font-smoothing: antialiased;
}

/* Typography sits on .icrd rather than body.icrd so a nested .icrd wrapper
   inherits it too. That matters because every block renders inside one, which
   is what makes this stylesheet work unchanged as the editor preview style. */
.icrd {
  color: var(--icrd-text);
  font-family: var(--icrd-sans);
  font-size: 16.5px;
  line-height: 1.6;
}

.icrd img { max-width: 100%; }
.icrd a { color: inherit; }
.icrd button { font-family: inherit; }
.icrd :focus-visible {
  outline: 2.5px solid var(--icrd-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.icrd-wrap {
  max-width: var(--icrd-max);
  margin: 0 auto;
  padding: 0 var(--icrd-gutter);
}

.icrd-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.icrd-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .icrd-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Header / navigation ---------- */
.icrd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--icrd-cream);
  border-bottom: 1px solid var(--icrd-line);
}
/* This element also carries .icrd-wrap, so only the vertical padding may be
   set here. The `padding: 16px 0` shorthand this replaces reset left and right
   to zero and took the wrap's gutter with it, which is why the header sat
   flush to the screen edge. */
.icrd-nav-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.icrd-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.icrd-brand svg { flex: none; }

/* Two separate links: the IQRAA mark goes to the hospital home page, the ICRD
   lockup to the ICRD home page. */
.icrd-brand-iqraa,
.icrd-brand-icrd {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: none;
}
.icrd-brand-iqraa img {
  display: block;
  width: auto;
  height: 40px;
}
.icrd-brand-logo {
  flex: none;
  display: block;
  height: 64px;
  width: auto;
}
.icrd-brand-name {
  font-family: var(--icrd-display);
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--icrd-deep);
  letter-spacing: -.01em;
}
.icrd-brand-div {
  width: 1px;
  height: 34px;
  background: var(--icrd-line);
  margin: 0 2px;
}
.icrd-brand-full {
  font-family: var(--icrd-display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.22;
  color: var(--icrd-deep);
  letter-spacing: -.005em;
}

/* The lockup gained the IQRAA mark, so drop the spelled-out centre name before
   it can collide with the nav. Both logos stay, and the divider between them
   stays -- only the one inside the ICRD link goes. */
@media (max-width: 1180px) {
  .icrd-brand-icrd .icrd-brand-div,
  .icrd-brand-full { display: none; }
}

.icrd-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
/* Flex, because an item whose label links to a page holds two controls side by
   side: the link and the caret button that opens its panel. It stays nowrap
   here: on the desktop bar the panel is absolutely positioned, so the row only
   ever holds those two, and allowing a wrap would let the caret drop to a
   second line when the bar gets tight. The mobile block turns wrapping on,
   because there the panel is static and has to claim a line of its own. */
.icrd-nav-item { position: relative; display: flex; align-items: center; }
.icrd-nav-item > a,
.icrd-nav-item > .icrd-nav-trig {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 15px;
  text-decoration: none;
  font-size: .93rem;
  font-weight: 600;
  color: var(--icrd-text-soft);
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.icrd-nav-item > a:hover,
.icrd-nav-item > .icrd-nav-trig:hover { color: var(--icrd-deep); }
/* Only real links carry the active marker. The overflow trigger deliberately
   does not: the page inside it is marked within the panel instead. */
.icrd-nav-item > a[aria-current] { color: var(--icrd-deep); }
.icrd-nav-item > a[aria-current]::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 2px;
  height: 2px;
  background: var(--icrd-gold);
}

/* A linked parent: the label gives up its right padding so the caret button
   sits against it and the pair reads as one item rather than two. */
.icrd-nav-item > .icrd-nav-trig--linked { padding-right: 4px; }
.icrd-nav-caret {
  display: flex;
  align-items: center;
  padding: 10px 11px 10px 2px;
  background: none;
  border: 0;
  color: var(--icrd-text-soft);
  cursor: pointer;
  flex: none;
}
.icrd-nav-caret:hover { color: var(--icrd-deep); }
/* The underline tracks the label's own padding, which the linked variant
   shortened above. */
.icrd-nav-item > a.icrd-nav-trig--linked[aria-current]::after { right: 4px; }

.icrd-caret { transition: transform .18s; flex: none; }
.icrd-nav-item.is-open .icrd-caret,
.icrd-nav-item:hover .icrd-caret { transform: rotate(180deg); }

.icrd-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--icrd-card);
  border: 1px solid var(--icrd-line);
  border-radius: 10px;
  box-shadow: var(--icrd-shadow-drop);
  padding: 8px;
  margin-top: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
/* The overflow panel is excluded from the hover and focus openers: it is driven
   by its toggle alone. :focus-within in particular would trap it open -- the
   button still holds focus after a click, so removing .is-open flipped the icon
   back while this rule kept the panel visible. */
.icrd-nav-item:hover .icrd-dropdown:not(.icrd-more-panel),
.icrd-nav-item:focus-within .icrd-dropdown:not(.icrd-more-panel),
.icrd-nav-item.is-open .icrd-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.icrd-dropdown a {
  display: block;
  padding: 10px 13px;
  border-radius: 7px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--icrd-text-soft);
  text-decoration: none;
  white-space: nowrap;
}
.icrd-dropdown a:hover,
.icrd-dropdown a:focus-visible {
  background: var(--icrd-cream-2);
  color: var(--icrd-deep);
}

/* A dropdown entry that has pages of its own. Those pages expand underneath it
   rather than flying out to the side, which is the behaviour the mobile menu
   already had -- one pattern at every width, and nothing that depends on a
   hover a touch screen cannot produce. */
.icrd-has-sub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.icrd-drop-trig {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 10px 13px;
  border-radius: 7px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--icrd-text-soft);
  text-decoration: none;
}
.icrd-drop-trig:hover {
  background: var(--icrd-cream-2);
  color: var(--icrd-deep);
}
.icrd-drop-trig[aria-current] { color: var(--icrd-deep); font-weight: 600; }
/* The label navigates and this opens the list, so it needs a tap target of
   its own. Styled on its own class, not on .icrd-drop-toggle: that is the JS
   hook, and the non-linked variant puts it on the full-width trigger too. */
.icrd-drop-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  align-self: stretch;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--icrd-text-soft);
  cursor: pointer;
}
.icrd-drop-caret:hover,
.icrd-drop-caret:focus-visible {
  background: var(--icrd-cream-2);
  color: var(--icrd-deep);
}
.icrd-caret-r { transition: transform .18s; flex: none; }
.icrd-has-sub.is-open .icrd-caret-r { transform: rotate(180deg); }

/* Takes a full line of its own, so the pages list under the parent instead of
   beside it. Hidden rather than merely collapsed, so its links are not
   focusable while the group is shut. */
.icrd-subdrop {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  padding: 0 0 0 13px;
  transition: max-height .22s ease, padding .22s ease, visibility .22s;
}
.icrd-has-sub.is-open > .icrd-subdrop {
  max-height: 300px;
  visibility: visible;
  padding: 0 0 4px 13px;
}
.icrd-subdrop a {
  display: block;
  padding: 5px 13px;
  border-radius: 7px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--icrd-text-soft);
  text-decoration: none;
  white-space: nowrap;
}
.icrd-subdrop a:hover,
.icrd-subdrop a:focus-visible {
  background: var(--icrd-cream-2);
  color: var(--icrd-deep);
}

/* Desktop only: below 980px the group is flattened into the panel, and
   these rules would fight that. */
@media (min-width: 981px) {
  /* ---------- Overflow menu ----------
     The pill-and-panel control from the hospital site's header, for the items
     past the fourth. Same geometry: a bordered pill whose icon swaps to a close
     mark, and a 300px rounded panel hung from the right below it. */
  /* Matched on the parent as well as the button. `.icrd-nav-item > .icrd-nav-trig`
     sets display, padding, border and background at (0,2,0); a lone
     `.icrd-more-toggle` is (0,1,0) and loses to it, which left the pill with no
     shape at all and only its hover background getting through. */
  .icrd-nav-item--more > .icrd-nav-trig {
    display: grid;
    place-items: center;
    gap: 0;
    padding: 12px 16px;
    margin-left: 6px;
    border: 0;
    border-radius: 32px;
    /* Fixed fill, and the only treatment the button gets -- no border and no
       hover state. The icon turning on click is the feedback. */
    background: var(--icrd-cream-2);
    color: var(--icrd-deep);
  }
  /* A control, not a label: no active underline to draw. */
  .icrd-nav-item--more > .icrd-nav-trig::after { content: none; }

  /* Both icons sit in the same grid cell, so they cross-fade and turn in place
     rather than one being swapped out from under the other. */
  .icrd-more-icon {
    grid-area: 1 / 1;
    transition: opacity .18s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
  }
  .icrd-more-icon--open { opacity: 1; transform: rotate(0deg); }
  .icrd-more-icon--close { opacity: 0; transform: rotate(-90deg); }
  .icrd-nav-item--more.is-open .icrd-more-icon--open {
    opacity: 0;
    transform: rotate(90deg);
  }
  .icrd-nav-item--more.is-open .icrd-more-icon--close {
    opacity: 1;
    transform: rotate(0deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .icrd-more-icon { transition: none; }
  }

  .icrd-more-panel {
    left: auto;
    right: 0;
    min-width: 300px;
    margin-top: 12px;
    padding: 24px 32px;
    border: 0;
    border-radius: 32px;
    background: linear-gradient(157.82deg, var(--icrd-cream-2) 59.7%, #d7e6f6 99.97%);
    box-shadow: 0 8px 12px 6px var(--icrd-overlay-faint);
  }
  .icrd-more-panel > a,
  .icrd-more-panel > .icrd-has-sub > .icrd-drop-trig {
    padding: 0 0 4px;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--icrd-deep);
  }
  .icrd-more-panel > a + a { margin-top: 12px; }
  .icrd-more-panel > a:hover,
  .icrd-more-panel > a:focus-visible {
    background: none;
    color: var(--icrd-deep-2);
  }
  /* Marks the page being viewed, the way the hospital panel underlines it. */
  .icrd-more-panel > a[aria-current] {
    border-bottom: 2px solid var(--icrd-gold);
  }

  /* Nothing needed here any more: the :not(.icrd-more-panel) exclusions on the
     generic openers leave .is-open as the only thing that shows this panel. */
}

.icrd-burger {
  display: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 8px;
  color: var(--icrd-deep);
}

@media (max-width: 980px) {
  /* The panel is static below the breakpoint, so it becomes a flex item in
     this row. Without the wrap it lines up beside the label instead of under
     it, which collapses the menu into a row of three. */
  .icrd-nav-item { width: 100%; flex-wrap: wrap; }
  .icrd-nav-item > a,
  .icrd-nav-item > .icrd-nav-trig {
    width: 100%;
    justify-content: space-between;
    padding: 13px 4px;
  }
  /* The active marker underlines the label on the desktop bar, but these items
     are full-width rows, so it stretches the whole panel and reads as a divider
     rather than a marker. The colour change carries it here. */
  .icrd-nav-item > a[aria-current]::after { content: none; }

  /* Full-width rows here, so the label takes the space and the caret keeps to
     its own tap target at the end of the row. The width:100% above would push
     the caret off the row, hence the reset. */
  .icrd-nav-item > .icrd-nav-trig--linked {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 13px 4px;
  }
  /* On the desktop bar the panel also opens on hover, so the caret can be a
     small hint. Here the label navigates, which makes the caret the only way
     into the child pages -- so it gets a real tap target, a rule separating it
     from the label, and the accent colour to read as a control. */
  .icrd-nav-caret {
    align-self: stretch;
    padding: 13px 6px 13px 16px;
    margin-left: 10px;
    border-left: 1px solid var(--icrd-line);
    color: var(--icrd-deep);
  }
  .icrd-nav-caret .icrd-caret { width: 16px; height: 16px; }
  /* Touch leaves :hover stuck on the last thing tapped, which would spin the
     caret on a row that is still closed. Open state alone turns it here. */
  .icrd-nav-item:hover .icrd-caret { transform: none; }
  .icrd-nav-item.is-open .icrd-caret { transform: rotate(180deg); }

  /* The "More" group exists only to keep the desktop bar to four items. Here
     there is room for all of them, so the trigger goes and its contents sit
     open, styled as ordinary rows -- no nesting for the visitor to open. */
  .icrd-nav-item--more > .icrd-nav-trig { display: none; }
  .icrd-nav-item--more > .icrd-dropdown {
    width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .icrd-nav-item--more > .icrd-dropdown > a {
    padding: 13px 4px;
    border-radius: 0;
    font-size: .93rem;
    font-weight: 600;
  }
  .icrd-nav-item--more > .icrd-dropdown > a:hover { background: none; }

  /* A group inside the flattened panel is a top-level row here, exactly like
     the ones in the bar above it, so it gets the same treatment .icrd-nav-item
     gets: a full-width label link and a bordered caret with a real tap target.
     Without this it kept the compact dropdown styling it has on desktop and
     read as a stray, half-sized entry. */
  .icrd-nav-item--more > .icrd-dropdown > .icrd-has-sub { width: 100%; }
  .icrd-nav-item--more > .icrd-dropdown > .icrd-has-sub > .icrd-drop-trig {
    flex: 1;
    min-width: 0;
    padding: 13px 4px;
    border-radius: 0;
    font-size: .93rem;
    font-weight: 600;
    /* Matches its sibling rows. It must NOT be hardcoded to the brand blue:
       that is the active colour, and the row then read as the current page on
       every page. aria-current supplies it below. */
    color: var(--icrd-text-soft);
  }
  .icrd-nav-item--more > .icrd-dropdown > .icrd-has-sub > .icrd-drop-trig[aria-current] { color: var(--icrd-deep); }
  .icrd-nav-item--more > .icrd-dropdown > .icrd-has-sub > .icrd-drop-trig:hover { background: none; }
  .icrd-nav-item--more > .icrd-dropdown > .icrd-has-sub > .icrd-drop-caret {
    width: auto;
    align-self: stretch;
    margin-left: 10px;
    padding: 13px 6px 13px 16px;
    border-left: 1px solid var(--icrd-line);
    border-radius: 0;
    color: var(--icrd-deep);
  }
  .icrd-nav-item--more > .icrd-dropdown > .icrd-has-sub > .icrd-drop-caret:hover { background: none; }
  .icrd-nav-item--more > .icrd-dropdown > .icrd-has-sub > .icrd-drop-caret .icrd-caret-r {
    width: 16px;
    height: 16px;
  }
  /* The pages it opens are rows too, just indented to show the nesting. */
  .icrd-nav-item--more > .icrd-dropdown > .icrd-has-sub .icrd-subdrop a {
    padding: 11px 4px;
    border-radius: 0;
    font-size: .9rem;
  }
  .icrd-nav-item--more > .icrd-dropdown > .icrd-has-sub .icrd-subdrop a:hover { background: none; }
  .icrd-dropdown {
    /* Flyout geometry, wrong once these are full-width rows. A 240px floor and
       non-wrapping labels push the panel wider than a phone screen, and the
       whole menu then scrolls sideways under the finger. */
    min-width: 0;
    position: static;
    width: 100%;
    box-shadow: none;
    border: 0;
    background: var(--icrd-cream-2);
    margin: 0 0 6px;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 4px;
    transition: max-height .25s ease, padding .25s ease;
  }
  .icrd-nav-item.is-open .icrd-dropdown { max-height: 400px; padding: 6px 4px 10px; }
  /* An expanded sub-group needs more room than the collapsed cap allows, or
     its pages are clipped by the panel they sit in. */
  .icrd-nav-item.is-open .icrd-dropdown:has(.icrd-has-sub.is-open) { max-height: 700px; }
  /* The overflow group is exempt. Its panel is permanently open here (its
     trigger is display:none), but these guards are (0,3,0) and out-specify the
     max-height:none that opens it -- so a touch, which leaves :hover stuck on
     whatever was tapped, collapsed the whole group to nothing and took the row
     out from under the finger. Same :not() the desktop openers already use. */
  .icrd-nav-item:hover .icrd-dropdown:not(.icrd-more-panel) { max-height: 0; }
  .icrd-nav-item.is-open:hover .icrd-dropdown:not(.icrd-more-panel) { max-height: 400px; }
  .icrd-dropdown a,
  .icrd-subdrop a { white-space: normal; }

  /* The sub-group is an accordion at every width now (see .icrd-subdrop
     above), so this breakpoint only tints it to show the nesting. */
  /* Same tint the other expandable group gets from .icrd-dropdown, so the two
     read as one pattern rather than two. */
  .icrd-has-sub.is-open > .icrd-subdrop { background: var(--icrd-cream-2); }

  .icrd-burger { display: block; margin-left: auto; }

  /* The panel stays in the layout and animates open, rather than being toggled
     between display:none and display:flex -- display cannot be transitioned,
     so that version snapped. Same approach the hospital theme's mobile sidebar
     uses. visibility is included in the transition so it flips only after the
     collapse has finished. */
  .icrd-links {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 0 var(--icrd-gutter);
    background: var(--icrd-cream);
    border-bottom: 1px solid var(--icrd-line);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      max-height .3s ease,
      padding .3s ease,
      opacity .22s ease,
      transform .22s ease,
      visibility .3s;
  }
  .icrd-links.is-open {
    /* Capped and scrollable: with every dropdown expanded the menu can be
       taller than the screen. */
    max-height: min(78vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 8px var(--icrd-gutter) 16px;
  }

  /* Logos step down: 64px is a desktop size and leaves the mark filling the
     whole bar height here, with no air above or below it. */
  .icrd-brand-iqraa img { height: 36px; }
  .icrd-brand-logo { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .icrd-links { transition: none; }
}

/* ---------- Intro / mission / vision ---------- */
.icrd-intro {
  background: linear-gradient(100deg, var(--icrd-cream-2), var(--icrd-cream) 65%);
  padding: 56px 0;
  border-bottom: 1px solid var(--icrd-line);
}
.icrd-intro-row {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.icrd-intro-row > p {
  flex: 1 1 420px;
  margin: 0;
  font-size: 1.06rem;
  color: var(--icrd-text-soft);
  max-width: 56ch;
}
.icrd-divider-v {
  width: 1px;
  align-self: stretch;
  background: var(--icrd-line);
  flex: none;
}
.icrd-mv {
  display: flex;
  gap: 16px;
  flex: 1 1 240px;
  max-width: 300px;
}
.icrd-mv-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--icrd-gold);
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
}
.icrd-mv h3 {
  margin: 0 0 4px;
  font-family: var(--icrd-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--icrd-text);
}
.icrd-mv p {
  margin: 0;
  font-size: .92rem;
  color: var(--icrd-text-soft);
  line-height: 1.5;
}

/* ---------- Facilities carousel + stats ---------- */
.icrd-facilities { padding: 70px 0; }
.icrd-fac-grid {
  display: grid;
  /* Two columns since the thumbnail strip went: the stats panel takes the
     space it used to occupy. */
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.icrd-carousel {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 360px;
  background: var(--icrd-deep-2);
}
.icrd-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.icrd-slide.is-on { opacity: 1; }
.icrd-slide svg { width: 100%; height: 100%; display: block; }
/* Slides are uploads now, not inline art: crop to the frame so a portrait
   photograph does not letterbox the band. */
.icrd-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* One side of the band empty -- no facilities, or no statistics -- so the
   other takes the whole row rather than sitting in a half-width column. */
.icrd-fac-grid--single { grid-template-columns: 1fr; }
.icrd-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 24px 18px;
  background: linear-gradient(transparent, var(--icrd-scrim));
  color: #fff;
  font-size: 1.02rem;
  font-weight: 600;
}
.icrd-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--icrd-deep);
  z-index: 3;
  transition: background .18s;
}
.icrd-arrow:hover { background: #fff; }
.icrd-arrow-prev { left: 14px; }
.icrd-arrow-next { right: 14px; }
.icrd-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 3;
}
.icrd-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  padding: 0;
}
.icrd-dots button.is-on {
  background: #fff;
  width: 22px;
  border-radius: 5px;
  transition: width .2s;
}


.icrd-stats {
  background: var(--icrd-cream-2);
  border-radius: 10px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.icrd-stats h3 {
  font-family: var(--icrd-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 18px;
  color: var(--icrd-text);
}
.icrd-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
}
.icrd-stat {
  border-radius: 8px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.icrd-stat-ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.icrd-stat b {
  font-family: var(--icrd-display);
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--icrd-text);
  line-height: 1;
}
.icrd-stat span {
  font-size: .82rem;
  color: var(--icrd-text-soft);
  margin-top: 2px;
  display: block;
}
.icrd-stat--mustard { background: var(--icrd-mustard-tint); }
.icrd-stat--mustard .icrd-stat-ic { background: #f4f1c2; }
.icrd-stat--mint { background: var(--icrd-mint-tint); }
.icrd-stat--mint .icrd-stat-ic { background: #a6e7e6; }
.icrd-stat--lavender { background: var(--icrd-lavender-tint); }
.icrd-stat--lavender .icrd-stat-ic { background: #d4b3c4; }
.icrd-stat--sky { background: var(--icrd-sky-tint); }
.icrd-stat--sky .icrd-stat-ic { background: #99c9ff; }
/* The mark inside the disc takes the tile family colour; the icon markup uses
   currentColor so the choice of icon and the choice of tint stay independent. */
.icrd-stat--mustard .icrd-stat-ic { color: #996800; }
.icrd-stat--mint .icrd-stat-ic { color: #027c7b; }
.icrd-stat--lavender .icrd-stat-ic { color: #6941c6; }
.icrd-stat--sky .icrd-stat-ic { color: #034ea3; }

/* ---------- Collaborations ---------- */
.icrd-collab {
  background: var(--icrd-cream-2);
  padding: 74px 0;
  border-top: 1px solid var(--icrd-line);
  border-bottom: 1px solid var(--icrd-line);
}
.icrd-collab-grid {
  display: grid;
  grid-template-columns: .82fr 1.5fr .7fr;
  gap: 20px;
  align-items: center;
}
.icrd-collab h2 {
  font-family: var(--icrd-display);
  font-weight: 700;
  font-size: 2rem;
  margin: 0 0 14px;
  color: var(--icrd-text);
}
.icrd-collab p {
  margin: 0 0 22px;
  color: var(--icrd-text-soft);
  max-width: 36ch;
}
.icrd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--icrd-deep);
  color: #fff;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  border: 0;
  cursor: pointer;
  transition: background .18s;
}
.icrd-btn:hover { background: var(--icrd-deep-2); }
/* Beat the `.icrd a` / `.icrd-body a` link resets, which otherwise paint the
   label in the button's own background colour. */
.icrd a.icrd-btn,
.icrd a.icrd-btn:hover {
  color: #fff;
  text-decoration: none;
}

.icrd-map { position: relative; }
.icrd-map svg { width: 100%; height: auto; display: block; }
.icrd-landmass {
  fill: rgba(3, 78, 163, .08);
  stroke: rgba(3, 78, 163, .22);
  stroke-width: .8;
  stroke-linejoin: round;
}
.icrd-arc {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 4 4;
  opacity: .85;
}
.icrd-node { cursor: default; }
.icrd-node circle { stroke: #fff; stroke-width: 1.6; }
.icrd-node text {
  font-family: var(--icrd-sans);
  font-weight: 700;
  font-size: 10.5px;
  fill: var(--icrd-deep);
}
.icrd-node .icrd-node-sub {
  font-weight: 500;
  fill: var(--icrd-text-soft);
  font-size: 9.5px;
}
.icrd-hub {
  fill: var(--icrd-card);
  stroke: var(--icrd-gold);
  stroke-width: 2;
}

.icrd-collab-side {
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 1px solid var(--icrd-line);
  padding-left: 22px;
}
.icrd-collab-side-ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--icrd-deep);
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}
.icrd-collab-side p {
  margin: 0;
  font-family: var(--icrd-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--icrd-text);
  line-height: 1.35;
}

/* ---------- News and events ---------- */
.icrd-news { padding: 74px 0; }
.icrd-news-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.icrd-news-head h2 {
  font-family: var(--icrd-display);
  font-weight: 700;
  font-size: 2rem;
  margin: 0;
  color: var(--icrd-text);
}
.icrd-news-head p {
  margin: 6px 0 0;
  color: var(--icrd-text-soft);
  max-width: 48ch;
}
.icrd-news-head a {
  color: var(--icrd-gold);
  font-weight: 700;
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
}
.icrd-news-head a:hover { text-decoration: underline; }
/* Steps 3 -> 2 -> 1, on the same breakpoints as the scholar grid. It used to
   drop straight from three columns to one at 980px, which left a single
   column of cards across the whole tablet range. */
.icrd-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) {
  .icrd-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .icrd-news-grid { grid-template-columns: 1fr; }
}

.icrd-news-card {
  background: var(--icrd-card);
  border: 1px solid var(--icrd-line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 5:3. Wider than the theme's usual aspect-3/2 for image cards, chosen for
   news imagery specifically. Replaces a fixed 150px height, which made the
   crop change shape as the grid stepped between three, two and one column. */
.icrd-news-thumb {
  position: relative;
  display: block;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--icrd-cream-2);
}
/* Absolutely positioned, not height:100%. A percentage height resolves against
   the parent's height, and this parent gets its height from aspect-ratio --
   which is not a definite height, so the percentage fell back to auto and a
   portrait-ish upload rendered at its natural height, stretching the card
   taller than its siblings. inset:0 fills the box whatever the file's ratio. */
.icrd-news-thumb svg,
.icrd-news-img,
.icrd-news-thumb-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* No featured image: a flat tinted panel, not a broken frame. */
/* Box geometry comes from the shared rule above; this only paints it. */
.icrd-news-thumb-empty {
  background: linear-gradient(135deg, var(--icrd-deep), var(--icrd-deep-2));
}
.icrd-news-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.icrd-news-date {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--icrd-gold);
  text-transform: uppercase;
}
.icrd-news-card h4 {
  margin: 0;
  font-family: var(--icrd-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--icrd-text);
  line-height: 1.35;
}
.icrd-news-card p {
  margin: 0;
  font-size: .87rem;
  color: var(--icrd-text-soft);
  line-height: 1.55;
  flex: 1;
}
.icrd-news-more {
  font-size: .85rem;
  font-weight: 700;
  color: var(--icrd-deep);
  text-decoration: none;
  margin-top: 4px;
}
.icrd-news-card h4 a { text-decoration: none; }

/* Visible only to screen readers. Normally this comes from the main theme
   bundle, which ICRD does not load, so it is restated here. */
.icrd .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- News listing ---------- */
.icrd-news-listing { padding: 0 0 74px; }
.icrd-body + .icrd-news-listing { padding-top: 8px; }

.icrd-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.icrd-filter-pill {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--icrd-line);
  background: var(--icrd-card);
  font-size: .87rem;
  font-weight: 600;
  color: var(--icrd-text-soft);
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.icrd-filter-pill:hover { color: var(--icrd-deep); background: var(--icrd-cream-2); }
.icrd-filter-pill.is-on {
  background: var(--icrd-deep);
  border-color: var(--icrd-deep);
  color: #fff;
}

.icrd-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.icrd-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--icrd-line);
  background: var(--icrd-card);
  font-size: .89rem;
  font-weight: 600;
  color: var(--icrd-text-soft);
  text-decoration: none;
}
.icrd-pagination a.page-numbers:hover {
  color: var(--icrd-deep);
  background: var(--icrd-cream-2);
}
.icrd-pagination .page-numbers.current {
  background: var(--icrd-deep);
  border-color: var(--icrd-deep);
  color: #fff;
}
.icrd-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

.icrd-empty {
  margin: 0;
  padding: 40px 0;
  color: var(--icrd-text-soft);
}

/* ---------- News article ---------- */
.icrd-article-head {
  background: linear-gradient(100deg, var(--icrd-cream-2), var(--icrd-cream) 65%);
  padding: 44px 0 36px;
  border-bottom: 1px solid var(--icrd-line);
}
.icrd-back {
  display: inline-block;
  margin-bottom: 18px;
  font-size: .87rem;
  font-weight: 700;
  color: var(--icrd-text-soft);
  text-decoration: none;
}
.icrd-article-head h1 {
  margin: 10px 0 0;
  max-width: 24ch;
  font-family: var(--icrd-display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.18;
  color: var(--icrd-text);
  letter-spacing: -.01em;
}
/* Held to the same measure as the body copy below it, rather than running the
   full width of the wrap -- otherwise the image is roughly twice the width of
   the text it introduces. */
.icrd-article-figure {
  margin: 36px 0 0;
  max-width: var(--icrd-measure);
  border-radius: 10px;
  overflow: hidden;
}
/* Same 5:3 as the card, so an article's image does not change shape between
   the listing and the page it opens. Cropped rather than letterboxed, since
   editors upload whatever their camera gave them. */
.icrd-article-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}

.icrd-related {
  padding-top: 0;
  border-top: 1px solid var(--icrd-line);
}
.icrd-related .icrd-news-head { margin-top: 56px; }

/* ---------- Doctoral scholars ---------- */
.icrd-scholars-heading,
.icrd-downloads-heading {
  font-family: var(--icrd-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--icrd-text);
  margin: 0 0 24px;
  max-width: var(--icrd-measure);
}

/* The card mirrors the hospital site's doctor card (parts/components/
   doctor-card.php): same 16px frame, 40px outer radius, 32px photo radius with
   a faint 4px inset border, sage backdrop, square crop and hover lift. That one
   is written in Tailwind utilities, which are not available here, so the design
   is restated in ICRD's own tokens rather than shared. Changing it there does
   not change it here. */
/* Fixed column counts rather than auto-fill, so the row is exactly three from
   the large breakpoint up regardless of how wide the viewport gets. */
.icrd-scholar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) {
  .icrd-scholar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .icrd-scholar-grid { grid-template-columns: 1fr; }
}
.icrd-scholar {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--icrd-surface);
  border: 1px solid var(--icrd-line-mid);
  border-radius: 40px;
  transition: transform .2s ease;
}
.icrd-scholar:hover { transform: scale(1.01); }

@media (prefers-reduced-motion: reduce) {
  .icrd-scholar { transition: none; }
  .icrd-scholar:hover { transform: none; }
}

.icrd-scholar-photo {
  margin-bottom: 16px;
  border-radius: 32px;
  border: 4px solid var(--icrd-overlay-faint);
  background: var(--icrd-sage);
  overflow: hidden;
}
.icrd-scholar-photo img,
.icrd-scholar-photo-empty {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 280px;
  object-fit: cover;
}
/* The stand-in is a real image now, so it needs nothing beyond the shared
   sizing above -- the old rule centred a word of text and set display:grid,
   which would have stopped object-fit cropping it like a photograph. */
.icrd-scholar-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.icrd-scholar-body h3 {
  margin: 0;
  font-family: var(--icrd-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--icrd-text);
}
.icrd-scholar-meta {
  margin: 4px 0 0;
  font-size: .875rem;
  color: var(--icrd-text);
}
.icrd-scholar-label {
  margin: 14px 0 2px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Same colour as the "Guide:" label below, so the two labels on the card
     read as one set. */
  color: var(--icrd-text);
}

/* Research area is clamped to three lines, with the toggle sitting at the end
   of the third. The button is positioned over the text rather than after it,
   with a short fade behind it so it never lands on top of a word. */
.icrd-scholar-area-wrap { position: relative; }
.icrd-scholar-area {
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--icrd-text-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.icrd-scholar-area-wrap.is-expanded .icrd-scholar-area {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* Hidden until assets/js/icrd.js measures the text and finds it overflows, so
   a short research area never gets a pointless toggle. */
.icrd-scholar-more {
  position: absolute;
  right: 0;
  bottom: 0;
  border: 0;
  padding: 0 0 0 30px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--icrd-deep);
  cursor: pointer;
  background: linear-gradient(to right, transparent 0, var(--icrd-surface) 24px);
}
.icrd-scholar-more[hidden] { display: none; }

/* Once open the text is full height, so the toggle drops below it. */
.icrd-scholar-area-wrap.is-expanded .icrd-scholar-more {
  position: static;
  display: block;
  margin-top: 6px;
  padding: 0;
  background: none;
}

/* Without JavaScript the toggle can never appear, so show the text in full
   rather than silently truncating it. */
@media (scripting: none) {
  .icrd-scholar-area {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
}
.icrd-scholar-guide {
  margin: 10px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--icrd-text-soft);
}
.icrd-scholar-guide strong { color: var(--icrd-text); }
/* Keeps the guide lines flush with the bottom of the tallest card in a row. */
.icrd-scholar-guide:last-child { margin-bottom: 0; }

/* ---------- Our Team ----------
   Reuses the scholar card, which already mirrors the hospital site's doctor
   card. Only the pieces a team member has and a scholar does not are added. */
.icrd-team-group + .icrd-team-group { margin-top: 48px; }
.icrd-team-group-title {
  margin: 0 0 24px;
  font-family: var(--icrd-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--icrd-text);
}

/* The photo is a link here, unlike the scholar card's plain frame. */
a.icrd-scholar-photo { display: block; }

.icrd-team-card .icrd-scholar-body h4 {
  margin: 0;
  font-family: var(--icrd-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--icrd-deep);
}
.icrd-team-card .icrd-scholar-body h4 a { text-decoration: none; }
.icrd-team-role {
  margin: 4px 0 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--icrd-text);
}

/* ---------- Publications ---------- */
.icrd-pub-summary { margin-bottom: 32px; }
/* Counts are narrow; only the first column needs room to breathe. */
.icrd-pub-summary table { min-width: 520px; }
.icrd-pub-summary th:not(:first-child),
.icrd-pub-summary td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.icrd-pub-count {
  margin: 0 0 16px;
  font-size: .875rem;
  color: var(--icrd-text-soft);
}

/* Cards rather than a numbered list: an academic title is long enough that two
   columns is the most the measure will take.

   Everything here is scoped under .icrd-body on purpose. The prose defaults
   further down the file (.icrd-body p, .icrd-body h3, .icrd-body li) are all
   (0,1,1) and come later, so a single-class rule would lose both the cascade
   and the specificity fight -- which is what first rendered the type badge in
   body-text grey and the card titles at heading size. */
.icrd-body .icrd-pub-grid {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .icrd-body .icrd-pub-grid { grid-template-columns: 1fr; }
}

.icrd-body .icrd-pub-card {
  /* max-width is reset because .icrd-body li caps it at the reading measure,
     which is meant for prose, not for a grid cell. */
  max-width: none;
  margin: 0;
  background: var(--icrd-card);
  border: 1px solid var(--icrd-line);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* align-self keeps the badge hugging its text instead of stretching to the
   card width, which is what a stretch-aligned flex item does by default. */
.icrd-body .icrd-pub-type {
  margin: 0;
  max-width: none;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--icrd-cream-2);
  color: var(--icrd-deep);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.4;
}
.icrd-body .icrd-pub-title {
  margin: 0;
  font-family: var(--icrd-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--icrd-text);
}
.icrd-body .icrd-pub-title a {
  color: var(--icrd-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.icrd-body .icrd-pub-authors {
  margin: 0;
  max-width: none;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--icrd-text-soft);
  /* Author lists run to dozens of names; the card stays a card. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.icrd-body .icrd-pub-meta {
  margin: auto 0 0;
  max-width: none;
  padding-top: 4px;
  font-size: .8rem;
  color: var(--icrd-text-soft);
}

/* ---------- Sub-page cards ---------- */
/* A section page that points at its children. Same card idiom as the news
   grid, without a thumbnail -- these are sections, not stories. */
/* The two bands of a cards page. The lead-in is a sentence, not a page of
   prose, so it sits closer to the banner above and the grid below than the
   stock 56/74 .icrd-body padding allows. Two classes each, because that
   shorthand is declared later in the file and would otherwise win. */
.icrd-body.icrd-body--intro { padding: 36px 0 40px; }
.icrd-body.icrd-subpages-band { padding-top: 0; }
.icrd-body .icrd-subpages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) {
  .icrd-body .icrd-subpages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .icrd-body .icrd-subpages { grid-template-columns: 1fr; }
}

.icrd-body .icrd-subpage-card {
  max-width: none;
  margin: 0;
  display: flex;
}
.icrd-body .icrd-subpage-link {
  background: var(--icrd-card);
  border: 1px solid var(--icrd-line);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.icrd-body .icrd-subpage-link:hover,
.icrd-body .icrd-subpage-link:focus-visible {
  border-color: var(--icrd-deep);
  box-shadow: var(--icrd-shadow-sm);
  transform: translateY(-2px);
}
.icrd-body .icrd-subpage-link h3 {
  margin: 0;
  font-family: var(--icrd-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--icrd-text);
}
.icrd-body .icrd-subpage-link p {
  margin: 0;
  max-width: none;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--icrd-text-soft);
  flex: 1;
}
.icrd-body .icrd-subpage-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--icrd-deep);
}
.icrd-body .icrd-subpage-more svg { transition: transform .2s ease; }
.icrd-body .icrd-subpage-link:hover .icrd-subpage-more svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .icrd-body .icrd-subpage-link,
  .icrd-body .icrd-subpage-more svg { transition: none; }
  .icrd-body .icrd-subpage-link:hover,
  .icrd-body .icrd-subpage-link:focus-visible { transform: none; }
  .icrd-body .icrd-subpage-link:hover .icrd-subpage-more svg { transform: none; }
}

/* ---------- Downloads ---------- */
.icrd-downloads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.icrd-download { margin: 0; }
.icrd-download > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--icrd-card);
  border: 1px solid var(--icrd-line);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .18s, background .18s;
}
.icrd-download > a:hover {
  border-color: var(--icrd-deep);
  background: var(--icrd-cream-2);
}
.icrd-download-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--icrd-cream-2);
  color: var(--icrd-deep);
}
.icrd-download > a:hover .icrd-download-ic {
  background: var(--icrd-card);
}
.icrd-download-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.icrd-download-label {
  font-weight: 600;
  font-size: .95rem;
  color: var(--icrd-text);
}
.icrd-download-note {
  font-size: .8rem;
  color: var(--icrd-text-soft);
}
.icrd-download-kind {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--icrd-cream-2);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--icrd-text-soft);
}

/* ---------- Footer ---------- */
.icrd-footer {
  background: var(--icrd-deep-3);
  color: var(--icrd-foot-text);
  padding: 44px 0 0;
}
.icrd-foot-title {
  font-family: var(--icrd-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 16px;
  color: #fff;
  flex: 1 1 100%;
}
.icrd-foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--icrd-foot-line);
}
.icrd-foot-col {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1 1 230px;
}
.icrd-foot-ic {
  width: 34px;
  height: 34px;
  border: 1.4px solid var(--icrd-foot-ring);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--icrd-gold-lt);
}
.icrd-foot-col p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--icrd-foot-body);
}
.icrd-foot-col span {
  display: block;
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--icrd-foot-muted);
  margin-bottom: 3px;
  text-transform: uppercase;
}
.icrd-foot-follow {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.icrd-foot-lbl {
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--icrd-foot-muted);
  text-transform: uppercase;
}
.icrd-social { display: flex; gap: 10px; }
.icrd-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.4px solid var(--icrd-foot-ring);
  display: grid;
  place-items: center;
  transition: background .18s, border-color .18s;
}
.icrd-social a:hover {
  background: var(--icrd-gold);
  border-color: var(--icrd-gold);
}
.icrd-social svg { stroke: var(--icrd-foot-text); }

.icrd-foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0 26px;
  font-size: .82rem;
  color: var(--icrd-foot-muted);
}

/* ---------- Page banner ----------
   Mirrors the hospital site's sub-page hero: a full-width band with 16px of
   breathing room holding a rounded panel, the colour on its own layer, and the
   copy centred over it. The gradient keeps that hero's angle and stops and
   only swaps the colour -- teal out, the ICRD blue in.

   That hero is Tailwind utilities, so the geometry is restated here in ICRD
   tokens rather than shared. */
/* Height comes from the band, not the copy -- the hero is
   `min-h-[340px] h-screen max-h-[620px] sm:max-h-[400px]` with an `h-full`
   panel inside it, so the panel fills whatever the band resolves to. */
.icrd-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  /* Shorter band on phones: the hero's 620px cap is most of a small screen,
     and this banner is type only, with no artwork needing the room. */
  min-height: 240px;
  max-height: 320px;
  padding: 16px;
  overflow: hidden;
}
@media (min-width: 640px) {
  .icrd-banner {
    min-height: 340px;
    max-height: 400px;
  }
}
@media (min-width: 768px) {
  .icrd-banner { padding: 24px 16px; }
}

.icrd-banner-frame {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 2000px;
  border-radius: 24px;
  overflow: hidden;
}

/* The hero's axis mirrored: 360 - 322.22 = 37.78deg, so the pale wash lands in
   the top-right corner instead of the top-left. Everything else about the ramp
   is unchanged -- flat colour across most of the panel, lifting at the far
   corner.

   Written as an eased ramp rather than the hero's two stops. A blend that
   begins abruptly at 51.68% is flat before that point and changes fast after
   it, and the eye reads that kink as a diagonal seam (Mach banding) -- far
   more obvious in this blue than in the original teal. These stops follow a
   t^3.5 curve, so the rate of change never jumps and the solid blue holds
   across roughly three quarters of the panel before lifting.

   The pale end is a light blue tint, not white: at this saturation a true
   white corner reads as a blown-out patch rather than part of the same
   colour. The last stop overshoots 100% so even that tint is only approached
   at the very corner. */
.icrd-banner-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(37.78deg,
    #034ea3 0%,
    #034ea3 7.5%,
    #034ea3 15%,
    #044fa3 22.5%,
    #0650a4 30%,
    #0952a5 37.5%,
    #0e56a7 45%,
    #165baa 52.5%,
    #2163af 60%,
    #306eb5 67.5%,
    #447dbd 75%,
    #5e8fc7 82.5%,
    #7fa7d3 90%,
    #a7c3e3 97.5%,
    #d7e6f6 105%);
}
.icrd-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* With a photograph behind it the gradient becomes a tint, holding the heading
   legible over whatever an editor uploads. */
.icrd-banner--image .icrd-banner-bg { opacity: .8; }

/* Copy sits left, on the same horizontal rhythm as .icrd-wrap -- same
   max-width and side padding -- so the banner heading lines up with the page
   content beneath it rather than floating on its own margin. Vertical space is
   the band's job, so the padding here is only the hero's p-6 equivalent. */
.icrd-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Copy sits on the floor of the panel, like the hero's justify-end. */
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  max-width: var(--icrd-max);
  height: 100%;
  margin: 0 auto;
  /* Deeper at the bottom than the sides, so the text is not flush to the edge
     it is aligned against. */
  padding: 24px var(--icrd-gutter) 44px;
  text-align: left;
  color: #fff;
}
.icrd-banner-inner h1 {
  margin: 0;
  max-width: 64rem;
  font-family: var(--icrd-display);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.icrd-banner-inner p {
  margin: 0;
  /* Narrower than the heading: left-aligned prose needs a readable measure,
     where centred copy got it from the symmetry. */
  max-width: 48rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, .88);
}

/* Heading steps up the way the hero's text-3xl / md:text-4xl / lg:text-6xl
   does, on the theme's stepped-down type scale. */
@media (min-width: 768px) {
  .icrd-banner-inner h1 { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .icrd-banner-inner h1 { font-size: 3rem; }
  .icrd-banner-inner p { font-size: 1.375rem; }
}

/* ---------- Dashboard-composed page body ----------
   Styles the core blocks an editor can use alongside the ICRD components, so
   ordinary prose lands in the ICRD design language without them choosing
   anything. */
.icrd-body { padding: 56px 0 74px; }

.icrd-body .icrd-wrap > * { margin: 0 0 24px; }
.icrd-body .icrd-wrap > *:last-child { margin-bottom: 0; }
/* ICRD components get more room than prose does. */
.icrd-body .icrd-wrap > .icrd { margin: 40px 0 24px; }

/* Section rhythm. A heading opens a section, so the gap lives on its top
   margin -- the same h2 mt-16 / h3 mt-10 the hospital templates use, stepped
   down again for h4.

   These have to out-specify `.icrd-body .icrd-wrap > *` above, which sets
   margin-top: 0 and at (0,2,0) already beats a plain `.icrd-body h2` (0,1,1).
   Matching on the child selector takes them to (0,2,1). */
.icrd-body .icrd-wrap > h2 { margin-top: 64px; }
.icrd-body .icrd-wrap > h3 { margin-top: 40px; }
.icrd-body .icrd-wrap > h4 { margin-top: 32px; }
/* No gap above the first thing on the page; .icrd-body already has padding. */
.icrd-body .icrd-wrap > :first-child { margin-top: 0; }

/* Held to the same measure as the copy beneath them. Without it a heading runs
   the full width of the wrap while its paragraph stops well short, so the two
   do not read as one column. */
.icrd-body h2,
.icrd-body h3,
.icrd-body h4 {
  font-family: var(--icrd-display);
  color: var(--icrd-text);
  line-height: 1.25;
  max-width: var(--icrd-measure);
}
.icrd-body h2 { font-size: 1.75rem; font-weight: 700; }
.icrd-body h3 { font-size: 1.3rem; font-weight: 600; }
.icrd-body h4 { font-size: 1.08rem; font-weight: 600; }

/* Headings take --icrd-text and body copy --icrd-text-soft, matching the two
   text colours the rest of the site uses (--color-heading / --color-body).
   .icrd sets --icrd-text as the inherited default, so paragraphs have to say
   otherwise explicitly, exactly as the main theme's templates do with
   text-body. */
.icrd-body p,
.icrd-body li {
  max-width: var(--icrd-measure);
  color: var(--icrd-text-soft);
}
.icrd-body ul,
.icrd-body ol { padding-left: 1.25rem; }
.icrd-body li { margin-bottom: 8px; }

/* A nested list groups people under a role (co-investigators, faculty). The
   source marks those with ticks, and a tick reads better than a second level
   of bullets. Drawn from two borders rather than a glyph so it needs no font
   support and takes the accent colour from the token. */
.icrd-body ul ul {
  list-style: none;
  margin-top: 8px;
  padding-left: 2px;
}
.icrd-body ul ul li {
  position: relative;
  padding-left: 26px;
}
.icrd-body ul ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .35em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--icrd-gold);
  border-bottom: 2px solid var(--icrd-gold);
  transform: rotate(-45deg);
}

.icrd-body a {
  color: var(--icrd-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.icrd-body blockquote {
  margin: 0 0 24px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--icrd-gold);
  font-family: var(--icrd-display);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--icrd-text);
}
.icrd-body blockquote p { margin: 0; }

.icrd-body figure { margin: 0 0 24px; }
.icrd-body img { border-radius: 10px; display: block; }
.icrd-body figcaption {
  margin-top: 8px;
  font-size: .85rem;
  color: var(--icrd-text-soft);
}

.icrd-body hr {
  border: 0;
  border-top: 1px solid var(--icrd-line);
  margin: 36px 0;
}

/* ---------- Tables (core/table) ----------
   Matches the table on the hospital site (parts/thannal/services-and-
   facilities.php): a rounded white card with a subtle border and a 1px shadow,
   dividers between rows only, no column rules, roomy cells and medium weight.
   That one is Tailwind utilities, so the design is restated here in ICRD
   tokens rather than shared.

   Committee rosters run to five columns of names and qualifications, which
   will not fit a phone, so the figure scrolls sideways rather than the columns
   being squeezed to unreadable widths. overflow-y stays hidden so the rounded
   corners still clip the table. */
.icrd-body .wp-block-table {
  margin: 0 0 24px;
  max-width: none;
  background: var(--icrd-card);
  border: 1px solid var(--icrd-line-subtle);
  border-radius: 12px;
  box-shadow: var(--icrd-shadow-sm);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.icrd-body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  /* Keeps the table from collapsing below a readable width inside the
     scrolling figure. */
  min-width: 560px;
}
/* Core styles the section itself, not just its cells:
     .wp-block-table thead { border-bottom: 3px solid }
     .wp-block-table tfoot { border-top: 3px solid }
   Neither declares a colour, so both fall back to currentColor and render as a
   heavy near-black rule. The divider we want is the 1px one on the header
   cells below, so these are cleared. */
.icrd-body .wp-block-table thead,
.icrd-body .wp-block-table tfoot {
  border: 0;
}

.icrd-body .wp-block-table th,
.icrd-body .wp-block-table td {
  border: 0;
  border-bottom: 1px solid var(--icrd-line-subtle);
  padding: 24px;
  text-align: left;
  vertical-align: top;
  font-weight: 500;
  line-height: 1.5;
  color: var(--icrd-text-soft);
  /* Core sets this on .has-fixed-layout and it fights the min-width above. */
  word-break: normal;
}
/* Dividers sit between rows, so the final row of the body has none.
   Scoped to tbody deliberately: an unscoped tr:last-child also matches the
   header row, because that tr is the last child of thead -- which would strip
   the divider under the header. */
.icrd-body .wp-block-table tbody tr:last-child th,
.icrd-body .wp-block-table tbody tr:last-child td { border-bottom: 0; }

/* The reference table has no header row. These rosters need one, so it is kept
   as quiet as possible -- weight and the heading colour over the surface tint,
   rather than a filled band. */
.icrd-body .wp-block-table th {
  background: var(--icrd-surface);
  font-weight: 600;
  color: var(--icrd-text);
  white-space: nowrap;
}
.icrd-body .wp-block-table tbody td:first-child { color: var(--icrd-text); }
.icrd-body .wp-block-table figcaption {
  margin: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--icrd-line-subtle);
  font-size: .85rem;
  color: var(--icrd-text-soft);
}

@media (max-width: 620px) {
  .icrd-body .wp-block-table th,
  .icrd-body .wp-block-table td { padding: 16px; }
}

/* ---------- Galleries ---------- */
/* Core's own gallery CSS is on the page (as an inline <style>, not a link), so
   these rules are a deliberate override rather than a from-scratch layout.

   Two of core's declarations have to be taken back by force:
   - the figure width, set by `figure.wp-block-image:not(#individual-image)`.
     The :not(#id) buys ID-level specificity purely so a theme cannot override
     it by accident, and no selector built from classes can outrank it.
   - the img width:auto, which would otherwise leave each photograph at its
     intrinsic size inside the grid cell. That one only needs more classes. */
.icrd-body .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 24px;
  align-items: start;
}
/* The column count set on the block in the editor, honoured only above the
   width where the grid starts collapsing on its own. Confining it to a
   min-width query matters: .columns-n adds a class, so outside one it would
   outrank the two max-width rules below and the gallery would never step down
   on a narrow screen. */
@media (min-width: 861px) {
  .icrd-body .wp-block-gallery.has-nested-images.columns-1 { grid-template-columns: 1fr; }
  .icrd-body .wp-block-gallery.has-nested-images.columns-2 { grid-template-columns: repeat(2, 1fr); }
  .icrd-body .wp-block-gallery.has-nested-images.columns-3 { grid-template-columns: repeat(3, 1fr); }
  .icrd-body .wp-block-gallery.has-nested-images.columns-4 { grid-template-columns: repeat(4, 1fr); }
  .icrd-body .wp-block-gallery.has-nested-images.columns-5 { grid-template-columns: repeat(5, 1fr); }
  .icrd-body .wp-block-gallery.has-nested-images.columns-6 { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 860px) {
  .icrd-body .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .icrd-body .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); }
}

.icrd-body .wp-block-gallery.has-nested-images figure.wp-block-image {
  /* The grid column decides the width; core's calc(50% - gap) must not. */
  width: auto !important;
  max-width: none;
  margin: 0;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--icrd-line);
  background: var(--icrd-cream-2);
}
.icrd-body .wp-block-gallery.has-nested-images figure.wp-block-image > a {
  display: block;
  cursor: zoom-in;
}
/* 3:2, so a grid of mixed portrait and landscape uploads still lines up. The
   rounding stays on the figure and the image gives its own up, overriding the
   blanket `.icrd-body img`. */
.icrd-body .wp-block-gallery.has-nested-images figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}
.icrd-body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: static;
  margin: 0;
  padding: 8px 10px 10px;
  color: var(--icrd-text-soft);
  font-size: .78rem;
  text-align: left;
  text-shadow: none;
}

/* ---------- Gallery lightbox ---------- */
/* Shows the picture at its own size, capped to the viewport so a large upload
   fits without being blown up past its pixels. */
.icrd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, .82);
}
.icrd-lightbox[hidden] { display: none; }
.icrd-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.icrd-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.icrd-lightbox-close:hover,
.icrd-lightbox-close:focus-visible { background: rgba(255, 255, 255, .26); }
/* Set on <body>, which is outside .icrd, so it cannot be scoped to it. */
body.icrd-lightbox-open { overflow: hidden; }

@media (max-width: 620px) {
  .icrd-lightbox { padding: 16px; }
}

/* ---------- Call-to-action component ---------- */
.icrd-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--icrd-cream-2);
  border: 1px solid var(--icrd-line);
  border-radius: 10px;
  padding: 32px;
}
.icrd-cta h2 {
  margin: 0;
  font-family: var(--icrd-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--icrd-text);
}
.icrd-cta p {
  margin: 8px 0 0;
  color: var(--icrd-text-soft);
  max-width: 52ch;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .icrd-fac-grid { grid-template-columns: 1fr; }
  .icrd-collab-grid { grid-template-columns: 1fr; }
  .icrd-collab-side {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--icrd-line);
    padding-top: 20px;
  }
}

@media (max-width: 620px) {
  /* Smaller again on phones, and the lockup tightens up with them. */
  .icrd-brand-iqraa img { height: 34px; }
  .icrd-brand-logo { height: 42px; }
  .icrd-brand,
  .icrd-brand-iqraa,
  .icrd-brand-icrd { gap: 10px; }
  .icrd-nav-row { gap: 12px; }

  .icrd-banner-inner h1 { font-size: 1.85rem; }
  .icrd-cta { padding: 24px; }
  .icrd-article-head h1 { font-size: 1.75rem; }
  /* Column direction turns flex-basis into a HEIGHT. The 420px on the intro
     paragraph and 240px on each Mission/Vision block were written for the
     desktop row; as heights they stretched every block that tall, which is the
     chasm that opened between Mission and Vision on a phone. */
  .icrd-intro-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .icrd-intro-row > p,
  .icrd-intro-row > .icrd-mv { flex: 0 0 auto; }
  .icrd-mv { max-width: none; }
  /* One stat card per line on a phone. */
  .icrd-stat-grid { grid-template-columns: 1fr; }
  .icrd-divider-v { display: none; }
  .icrd-carousel { min-height: 260px; }
}

/* ---------- Fonts ----------
   Repeated from assets/css/input.css because the Tailwind build that
   normally declares them is not loaded on ICRD pages. Same self-hosted
   files, no external requests. Only the weights this section uses. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/roboto-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2");
}

/* ---------- Pill header ----------
   The hospital site's header shape: a floating, fully rounded brand-blue bar
   with white links, inset from the screen edge and stuck just below the top.
   Layered over the base header rules above rather than replacing them, so the
   menu's structure and behaviour are untouched; only its colours and shape
   change. The dropdown panels stay white, so their own colours stand. */
.icrd-header {
  top: 8px;
  padding: 8px 16px 0;
  background: transparent;
  border-bottom: 0;
}
.icrd-header .icrd-nav-row {
  position: relative;
  max-width: 1640px;
  margin: 0 auto;
  padding: 10px 14px 10px 24px;
  background: var(--icrd-deep);
  border-radius: 999px;
}
.icrd-header .icrd-brand-div { background: rgba(255, 255, 255, .35); }
.icrd-header .icrd-brand-full { color: #fff; }
/* The ICRD mark has dark lettering, so it sits on a small white tile to stay
   legible on the blue bar. */
.icrd-header .icrd-brand-logo {
  height: 52px;
  padding: 3px 6px;
  background: #fff;
  border-radius: 12px;
}

@media (min-width: 981px) {
  .icrd-header .icrd-nav-item > a,
  .icrd-header .icrd-nav-item > .icrd-nav-trig,
  .icrd-header .icrd-nav-caret { color: rgba(255, 255, 255, .85); }
  .icrd-header .icrd-nav-item > a:hover,
  .icrd-header .icrd-nav-item > .icrd-nav-trig:hover,
  .icrd-header .icrd-nav-caret:hover,
  .icrd-header .icrd-nav-item > a[aria-current] { color: #fff; }
  .icrd-header .icrd-nav-item > a[aria-current]::after { background: #fff; }
  /* The overflow button: white pill, teal icon, as on the hospital header. */
  .icrd-header .icrd-nav-item--more > .icrd-nav-trig,
  .icrd-header .icrd-nav-item--more > .icrd-nav-trig:hover {
    background: #fff;
    color: var(--icrd-gold);
  }
}

@media (max-width: 980px) {
  .icrd-header .icrd-nav-row { padding: 8px 10px 8px 18px; }
  .icrd-header .icrd-brand-logo { height: 42px; }
  .icrd-header .icrd-burger {
    display: grid;
    place-items: center;
    padding: 10px 14px;
    background: #fff;
    color: var(--icrd-gold);
    border-radius: 999px;
  }
  /* The menu panel now hangs under a rounded bar, so it gets rounded too and a
     little gap, instead of running flush from a full-width strip. */
  .icrd-header .icrd-links {
    top: calc(100% + 8px);
    border-bottom: 0;
    border-radius: 24px;
    box-shadow: 0 8px 12px 6px var(--icrd-overlay-faint);
  }
}