/* ============================================================
   Concord College International School (CCIS) — brand polish
   Layered on top of Kadence's global design system. Kadence owns
   the palette, typography, buttons, header & footer builder; this
   file carries the brand cues Kadence controls can't express plus
   the styling for the Kadence Header/Footer HTML elements.
   Brand source of truth: brand-spec.md
   ============================================================ */

:root{
  --ccis-burgundy:#7D253A;
  --ccis-burgundy-deep:#5e1b2c;
  --ccis-gold:#B49247;
  --ccis-gold-soft:#c9a85a;
  --ccis-ink:#232323;
  --ccis-muted:#7A7A7A;
  --ccis-surface:#F4F4F4;
  --ccis-band:#E3E3E3;
  --ccis-foot-text:rgba(243,228,232,.78);
}

html{ scroll-behavior:smooth; }

/* Ceremonial gold eyebrow + rule, reusable in content. */
.ccis-eyebrow{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ccis-gold); font-weight:600; display:inline-block;
}
.ccis-gold-rule{
  display:block; width:64px; height:3px; border:0; border-radius:2px;
  background:var(--ccis-gold); margin:18px 0;
}

/* ---------- Header: primary nav reads in the UI face (Inter) ---------- */
.site-header .header-navigation .menu-container > ul > li > a,
.header-navigation .menu > li > a,
#main-navigation .menu-item > a{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:500;
  letter-spacing:.01em;
}

/* Logo size is controlled by the theme: Customize > Site Identity > Logo Max Width.
   (Height is left auto so that width setting governs. Note: the crest is near-
   square, so a large Logo Max Width will grow the header height accordingly.) */

/* ---------- Header utility line (Kadence top-row HTML element) ---------- */
.ccis-utility{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.8rem; display:flex; gap:12px; align-items:center;
  justify-content:flex-end; color:#f3e4e8; width:100%;
}
.ccis-utility a{ color:#f3e4e8; text-decoration:none; }
.ccis-utility a:hover{ color:var(--ccis-gold); }
.ccis-utility-sep{ opacity:.5; }

/* ---------- Google Translate control in the utility line ----------
   The widget is initialised with InlineLayout.SIMPLE, which renders
   .goog-te-gadget-simple (globe image + value + arrow) rather than a
   <select class="goog-te-combo">. Both are styled below so the control
   stays on-brand if the layout is ever switched. */
.ccis-translate{ display:inline-flex; align-items:center; gap:6px; }
.ccis-translate-label{ white-space:nowrap; color:var(--ccis-gold); font-weight:600; }
#google_translate_element{ display:inline-flex; align-items:center; line-height:1; }
#google_translate_element .goog-te-gadget{
  font-size:0; color:transparent; font-family:inherit; line-height:1;
}
/* The theme's global reset (global.min.css: img{display:block}) breaks
   Google's markup, which uses 1x1 spacer <img> tags inline with text.
   Block-level images inside the <a> force line breaks around themselves,
   turning one line of text into five stacked ones. Undo the reset here only. */
#google_translate_element img{ display:inline !important; max-width:none !important; }

/* SIMPLE layout: the clickable pill */
#google_translate_element .goog-te-gadget-simple{
  display:inline-flex; align-items:center; gap:6px;
  margin:0; padding:3px 10px;
  font-family:inherit; font-size:.8rem; line-height:1.4;
  background:rgba(255,255,255,.08);
  border:1px solid var(--ccis-gold);
  border-radius:40px;
  color:#f3e4e8; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
#google_translate_element .goog-te-gadget-simple:hover{
  background:var(--ccis-gold); border-color:var(--ccis-gold); color:var(--ccis-burgundy-deep);
}
/* Google's own globe bitmap cannot be recoloured - drop it and let the
   gold brand label beside the control carry the meaning. */
#google_translate_element .goog-te-gadget-icon{ display:none !important; }
/* The clickable link itself. Its class name (e.g. "VIpgJd-ZVi9od-...") is an
   obfuscated Google build hash, not a stable target, so this is structural:
   the sole <a> inside the pill. Its dropdown-arrow span carries a hardcoded
   inline color, which needs !important to beat. */
#google_translate_element .goog-te-gadget-simple a{
  color:inherit; text-decoration:none; margin:0;
}
#google_translate_element .goog-te-gadget-simple a span{ color:inherit !important; }
#google_translate_element .goog-te-gadget-simple a [style*="border-left"]{
  border-left-color:currentColor !important; opacity:.5;
}

/* Non-SIMPLE layouts: the native select */
#google_translate_element .goog-te-combo{
  margin:0; font-family:inherit; font-size:.8rem;
  color:#f3e4e8; background:var(--ccis-burgundy-deep);
  border:1px solid var(--ccis-gold); border-radius:40px;
  padding:3px 10px; cursor:pointer;
}
#google_translate_element .goog-te-combo:hover,
#google_translate_element .goog-te-combo:focus{
  background:var(--ccis-gold); color:var(--ccis-burgundy-deep);
  outline:none; box-shadow:0 0 0 2px rgba(180,146,71,.35);
}
#google_translate_element .goog-te-combo option{ color:#232323; background:#fff; }

/* "Powered by Google Translate" wordmark - not recolourable, so hidden */
#google_translate_element .goog-logo-link,
#google_translate_element .goog-te-gadget > span{ display:none !important; }

/* The language menu Google injects at the document root */
.goog-te-menu-frame{ box-shadow:0 8px 30px rgba(35,35,35,.24) !important; border-radius:8px; }

/* Kill the top banner iframe that otherwise pushes the whole page down */
.goog-te-banner-frame.skiptranslate,
.skiptranslate iframe.skiptranslate{ display:none !important; }
body{ top:0 !important; }
@media (max-width:760px){ .ccis-translate-label{ display:none; } }

/* ============================================================
   Footer — content lives in the Kadence Footer HTML element
   (Customize -> Footer). Burgundy-deep band set via Kadence
   footer middle background; this styles the inner layout.
   ============================================================ */
.ccis-footer{
  width:100%;
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ccis-foot-text); font-size:.88rem; text-align:left;
}
.ccis-foot-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:34px 26px; margin-bottom:36px;
}
.ccis-foot-brand{ grid-column:1 / -1; max-width:580px; }
.ccis-foot-crest{
  height:58px; width:auto; background:#fff; padding:8px;
  border-radius:12px; display:inline-block; box-shadow:0 2px 12px rgba(0,0,0,.22);
}
.ccis-foot-brand p{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.08rem; color:rgba(243,228,232,.72); margin:14px 0 0; line-height:1.5;
}
.ccis-foot-col h4{
  font-family:"Cinzel",Georgia,serif; color:#fff; font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px;
}
.ccis-foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ccis-foot-col a{ color:rgba(243,228,232,.75); text-decoration:none; font-size:.86rem; }
.ccis-foot-col a:hover{ color:var(--ccis-gold); }
.ccis-foot-contact li{ color:rgba(243,228,232,.75); font-size:.84rem; line-height:1.45; margin-bottom:10px; }
.ccis-foot-contact a{ color:rgba(243,228,232,.75); text-decoration:none; }
.ccis-foot-contact a:hover{ color:var(--ccis-gold); }
.ccis-foot-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.8rem; color:rgba(243,228,232,.6);
}
.ccis-foot-bottom a{ color:rgba(243,228,232,.6); text-decoration:none; }
.ccis-foot-bottom a:hover{ color:#fff; }

/* ============================================================
   Home (CCIS) — core-block brand layer
   The homepage is built from core WordPress blocks (editable in
   Gutenberg) and styled here: section bands, cards, eyebrows, etc.
   ============================================================ */
.ccis-band{ padding-top:clamp(56px,8vw,100px); padding-bottom:clamp(56px,8vw,100px); }
.ccis-band.ccis-tight-bottom{ padding-bottom:clamp(18px,2.5vw,28px); }
.ccis-band.ccis-tight-top{ padding-top:clamp(10px,1.5vw,18px); }
.ccis-band-surface{ background:#F4F4F4; }
.ccis-band-burgundy{ background:#5e1b2c; color:#f3e4e8; }
.ccis-band-center{ text-align:center; }
.ccis-band-center .wp-block-buttons{ justify-content:center; }
.ccis-band-burgundy :is(h1,h2,h3,h4){ color:#fff; }
.ccis-on-dark{ color:#fff !important; }

.ccis-lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:#7A7A7A; line-height:1.6; }
.ccis-band-burgundy .ccis-lead, .ccis-lead.ccis-on-dark{ color:#f3e4e8; }
.ccis-hero-eyebrow{ color:#c9a85a !important; }
.ccis-rule{ width:64px; height:3px; background:#B49247; border:0; border-radius:2px; margin:14px auto 20px; }

/* Hero (core/cover) */
.ccis-hero .wp-block-cover__inner-container{ max-width:720px; margin-left:0; }
.ccis-hero h1{ color:#fff; font-size:clamp(2.4rem,5vw,3.6rem); }

/* Card grids (core/group inside core/column) */
.wp-block-columns{ align-items:stretch; }
.ccis-card, .ccis-card-burgundy, .ccis-card-left{
  border:1px solid #E3E3E3; background:#fff; border-radius:20px;
  padding:clamp(22px,2.4vw,30px); height:100%;
}
.ccis-card, .ccis-card-burgundy{ text-align:center; }
.ccis-card-left{ text-align:left; }
.ccis-card-burgundy{ background:#7D253A; border-color:#7D253A; color:#fff; }
.ccis-card h3, .ccis-card-left h3{ color:#7D253A; font-size:1.35rem; margin:.25em 0; }
.ccis-card-burgundy h3{ color:#fff; }
.ccis-card-burgundy .ccis-eyebrow{ color:#c9a85a; }
.ccis-age{ color:#7D253A; font-weight:600; font-size:.92rem; }
.ccis-card-burgundy .ccis-age{ color:#fff; }
.ccis-muted{ color:#7A7A7A; }
.ccis-dest-list{ color:#232323; line-height:1.9; font-size:1.05rem; }

/* Stats */
.ccis-stat-num{ font-family:"Cinzel",Georgia,serif; font-weight:600; font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; color:#fff; margin:0; }
.ccis-stat-label{ color:#e7d3da; font-size:.9rem; margin:.55em 0 0; }

/* Accreditation cards */
.ccis-accr h4{ color:#7D253A; font-size:1.05rem; margin:0 0 .3em; }
.ccis-accr .ccis-muted{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }

/* News cards */
.ccis-news{ padding:0; overflow:hidden; }
.ccis-news .wp-block-image{ margin:0; }
.ccis-news .wp-block-image img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.ccis-news-body{ padding:20px 22px 24px; text-align:left; }
.ccis-news-body h3{ color:#7D253A; font-size:1.2rem; }

/* Principal + video */
.ccis-prin-card{ text-align:left; }
.ccis-avatar img{ width:104px; height:104px; border-radius:50%; object-fit:cover; border:3px solid #B49247; }
.ccis-prin-quote{ color:#232323; font-size:1.18rem; line-height:1.5; border-left:3px solid #B49247; padding-left:18px; font-style:italic; }
.ccis-video img{ border-radius:20px; width:100%; object-fit:cover; }

/* Buttons: gold hover (global pill + burgundy already set by Kadence) */
.wp-block-button__link:hover{ background-color:#B49247 !important; border-color:#B49247 !important; color:#fff !important; }

/* ─── DARK GLASS (matches existing .glass-effect) ─── */
/* Use on dark-background sections */

.glass-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); /* Safari — was blur(5px), corrected to match */
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 10px;
}


/* ─── LIGHT GLASS ─── */
/* Use on light/image backgrounds */

.glass-light {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
  padding: 10px;
}



/* ─── PROFILE MODAL — FULL-BLEED PORTRAIT ON MOBILE ─── */
/* omt/modal profile cards (staff "Read profile"). On desktop the portrait sits
   in the left column of a right-golden row and the container's 30px padding is
   the right gutter. On mobile the row stacks, and a portrait inset by 30px on
   each side reads as a thumbnail rather than a photograph — so the container
   padding is dropped and the text column supplies its own gutter instead.
   Scoped to .omt-block-pro-modal, so nothing outside a modal is affected. */

@media (max-width: 767px) {
  .omt-block-pro-modal .kt-modal-container {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Portrait runs edge to edge. max-width also has to be released on the
     figure, which is where the block's imgMaxWidthMobile lands. */
  .omt-block-pro-modal .kt-modal-content .kt-row-column-wrap > .wp-block-omt-column:first-child .wp-block-omt-image,
  .omt-block-pro-modal .kt-modal-content .kt-row-column-wrap > .wp-block-omt-column:first-child .wp-block-omt-image img {
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  /* Gutter moves onto the text column... */
  .omt-block-pro-modal .kt-modal-content .kt-row-column-wrap > .wp-block-omt-column:nth-child(2) .kt-inside-inner-col {
    padding: 20px 24px 0;
  }

  /* ...and onto profiles with no photo, which have no columns at all. */
  .omt-block-pro-modal .kt-modal-content > .wp-block-omt-advancedheading {
    padding-left: 24px;
    padding-right: 24px;
  }
  .omt-block-pro-modal .kt-modal-content > .wp-block-omt-advancedheading:first-child {
    padding-top: 24px;
  }

  /* The close button loses its padded corner, so give it a legible chip
     against whatever part of the photograph ends up behind it. */
  .omt-block-pro-modal .kt-close-position-inside .kt-modal-close {
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    padding: 6px;
  }
}


/* ─── PROFILE MODAL — CLOSE BUTTON AT THE FOOT ─── */
/* A long profile (Dr Outram's runs to five paragraphs) scrolls the x at the top
   out of view, so each modal ends with its own Close. It is a plain button
   carrying data-modal-close, which is the only thing MicroModal's close handler
   checks — no extra script. Appearance is the theme's: .button plus
   .button-style-outline on the element itself. This rule only places it —
   right-aligned on desktop and tablet, full width on mobile. */

.ccis-modal-close-end {
  display: block;
  width: auto;
  margin: 28px 0 0 auto;
  cursor: pointer;
}

@media (max-width: 767px) {
  /* the container's side padding is dropped on mobile for the full-bleed
     portrait, so the button supplies its own breathing room */
  .ccis-modal-close-end {
    width: calc(100% - 48px);
    margin: 24px 24px 0;
  }
}

/* Body copy is NOT justified. The school asked for left alignment and no
   end-of-line hyphenation (email, 2026-08-13): justify stretched short
   paragraphs — OMT writes job titles and eyebrows as <p>, so "Head of Primary"
   was spread across 345px on the SLT page — and hyphens:auto broke words
   mid-line.

   There is deliberately no `text-align: left` here. Paragraphs inherit their
   block's alignment, which is left unless the design centres it; forcing left
   would have overridden the centred CTA bands and the centred mobile slider.

   The rule that used to live here (justify + text-justify:inter-word +
   hyphens:auto, with a <600px override and a slider exception) is preserved in
   concord.css.bak-2026-08-13-justify on the server and in out/rollback/.
   scripts/cr_justify_to_left.py --rollback puts it back. */


/* ─── beta round 2 — 2026-08-06 ─────────────────────────────────── */

/* The hero breadcrumb needed a text-shadow while heroes had a weak overlay.
   Since the hero standardisation (row overlay #0f0c0e at 61%) the gradient
   carries it, so the shadow is gone — Jon, 2026-08-07. */

/* Headings broke mid-word because the theme sets word-break: break-word —
   "Understandin / g the World" in an Early Years infobox, and on mobile any
   long word in a section heading ("Governanc / e," on Policies at 375px).
   word-break: normal wraps at the space; overflow-wrap still lets a word that
   genuinely cannot fit break rather than overflow its box. */
.kt-blocks-info-box-title,
.wp-block-omt-advancedheading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Futures — the journey row (change request 5, Ken, 7 Aug 2026).

   Progression arrows between the five steps. Pseudo-elements rather than four
   extra columns: `colLayout: equal` would give the arrows the same width as
   the steps, and a real column would still point sideways once the row stacks.

   These are CSS-only, so they do NOT appear in the block editor canvas — only
   on the front end. Adjust them here, not in the editor.

   Scoped by the row's className, not its uniqueID, which the editor renumbers
   on save. */

/* Side by side: anchored to .wp-block-omt-icon, which is full column width and
   exactly as tall as the icon, so the arrow stays on the icon's centre line at
   whatever size the icon is set to. */
@media (min-width: 768px) {
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column:not(:last-child) .wp-block-omt-icon {
    position: relative;
  }
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column:not(:last-child) .wp-block-omt-icon::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    left: calc(100% + 16px);   /* centre of the 32px column gutter, which is
                                  also the midpoint between two icon discs */
    transform: translate(-50%, -50%);
    font-size: 28px;
    line-height: 1;
    color: var(--global-palette2, #B49247);
    pointer-events: none;
  }
}

/* Stacked: point down the list rather than off the side of it.

   The gap the arrow sits in is set here rather than inherited, because the
   step columns do not agree — the first has its padding zeroed in the editor
   while the rest carry `md`, so relying on it put the first arrow through the
   middle of the word "Discover". */
@media (max-width: 767px) {
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column {
    position: relative;
  }
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column:not(:last-child) > .kt-inside-inner-col {
    padding-bottom: 44px;
  }
  .ccis-journey .kt-row-column-wrap > .wp-block-omt-column:not(:last-child)::after {
    content: "\2192";
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%) rotate(90deg);
    font-size: 26px;
    line-height: 1;
    color: var(--global-palette2, #B49247);
    pointer-events: none;
  }
}

/* Person cards: equal height whatever the job title does.
   Ken, 2026-08-08 (change request 21): "Rebecca's picture and timothy's
   picture box also seems to be longer". Measured at 1440px, their two cards
   were 770px against everyone else's 747 — exactly one extra line, because
   theirs are the only job titles that wrap. The grid already stretches the
   COLUMN to the tallest in the row; it is `.kt-inside-inner-col`, which
   carries the border and the radius, that sizes to its content and leaves the
   short cards ending 23px early.

   Scoped by :has() to columns holding a modal, which on this site means a
   person card and nothing else — Senior Leadership Team, Primary and
   Secondary Staff, Board of Governors. On a column that is not already
   stretched this is a no-op. Same fault, same fix, for change request 22. */
.wp-block-omt-column:has(> .kt-inside-inner-col > .wp-block-omt-modal)
  > .kt-inside-inner-col {
  height: 100%;
}

/* ---------- Academic calendar month grids ----------
   Jon, 2026-08-10, from a phone screenshot: "Smaller text and make sure the
   background fills the entire cell."

   A day's colour sits on the advancedheading inside the cell, because
   omt/table-data has no background attribute. That heading is a block in a
   table-cell: vertically centred, only as tall as its own text. So in a week
   where one day wraps to four lines, every other coloured day rendered as a
   band floating in a white box. height:100% on a block child of a table-cell
   resolves against the cell, which is what carries the colour to the borders;
   vertical-align:top stops the short cells centring their numbers.

   The font sizes are here rather than on the block because Kadence's smallest
   token is `sm` (clamp .8-.9rem), still too wide for seven columns on a phone.

   `height:1px` on the cell is what makes that percentage resolve. A table cell
   treats height as a minimum and always grows to its row, so the rendered
   height is unchanged — but it is now a *definite* value, and without it
   `height:100%` on the child falls back to auto and the colour stops short.
   Measured before: an 81px heading in a 99px cell.

   Scoped by :has() to a table with a seventh column — the month grid, matched as EXACTLY seven
   columns: the Steps for Enrolment assessment table has eight and was being
   caught by this rule, which is what made its type smaller than the table
   beside it, the same reasoning as the person-card rule above. */
.kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) td { vertical-align: top; height: 1px; }
.kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) td > .wp-block-omt-advancedheading,
.kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) th > .wp-block-omt-advancedheading {
  box-sizing: border-box;
  margin: 0;
  font-size: .8rem;
  line-height: 1.3;
}
.kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) td > .wp-block-omt-advancedheading { height: 100%; }

@media (max-width: 767px) {
  .kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) td > .wp-block-omt-advancedheading,
  .kb-table:has(td:nth-child(7)):not(:has(td:nth-child(8))) th > .wp-block-omt-advancedheading {
    font-size: .6rem;
    line-height: 1.2;
    padding: .4rem .3rem;
  }
}

/* [91] Monitoring Progress hero row: hold the background photo's 3:2 shape on
   mobile. minHeight on 1738_bdd505-d2 is a flat 460, so a narrow screen gives a
   375x460 portrait window and background-size:cover crops the sides off a
   landscape photo. 66.7vw keeps the row at 3:2 at any mobile width; the copy in
   that row needs ~93px, so it never runs out of room. */
@media (max-width: 767px) {
  .kb-row-layout-id1738_bdd505-d2.kb-row-layout-id1738_bdd505-d2 > .kt-row-column-wrap { min-height: 66.7vw; }
}

/* [92] USP cards on the homepage and Why Us: reserve two lines for the card
   title so every paragraph in a row starts at the same y. The titles ran one or
   two lines depending on viewport width and had been shimmed into line with
   trailing (and one leading) <br>, which only holds at the width they were
   counted at — at 1280 and 1440 the first row's paragraphs sat 25px apart. The
   <br> are gone from the block content now. 2lh not a pixel value because the
   two pages compute different line-heights, 25px and 23.1px. */
.kb-row-layout-id1571_3ad39e-b0 .kt-blocks-info-box-title,
.kb-row-layout-id1290_dd48a7-f8 .kt-blocks-info-box-title,
.kb-row-layout-id1290_7fd91a-2f .kt-blocks-info-box-title {
  min-height: 2lh;
}

/* [93] Search results on mobile: the result title is 34px in a 294px column, so
   "International School in Kuala Lumpur, Selangor & Malaysia" ran to five lines
   (Eric 128). search_archive_columns is now 1, which fixes desktop, but mobile
   was always one column so the option does nothing there — only size does.
   Measured on that title at 390px: 34px = 5 lines, 28px = 4, 22px = 3, and it
   plateaus at 3 below 22px because "International" and "Kuala Lumpur" set the
   floor. 22px is the largest size that reaches it. Line-height is a ratio on
   this element, so it scales with the size and needs no rule of its own.
   Not set through search_archive_title_font: that option is a font array, and
   OMT attribute arrays replace their defaults wholesale. */
@media (max-width: 767px) {
  .search-archive .entry-title { font-size: 22px; }
}

/* [94] Staff cards: keep the Read profile button on the same line across a row.
   The button sits at the end of the card, under the name and the role, and both
   of those change line count with viewport width — at 1024px the Senior
   Leadership row spanned 69px between the highest and lowest button.

   A min-height on the role was the first attempt and it only held at wide
   widths: it fixes a two-line role next to a one-line role, but not a three-line
   role, and not a name that wraps. Bottom-aligning the button removes the whole
   class of problem, because the card columns in a row already stretch to a
   common height, so pushing the button to the bottom of one puts it level with
   the rest whatever the copy above does.

   The figure's margin-bottom is zeroed because flex stops margins collapsing:
   the image's 20px and the name's 29.5px collapsed to 29.5px in block layout and
   would otherwise sum to 49.5px, dropping everything below by 20px.

   Scoped by ":has(> .wp-block-omt-modal)", which is the staff card shape and
   nothing else on the site — only senior-leadership-team, primary-staff,
   secondary-staff and board-of-governors use omt/modal. */
.kt-inside-inner-col:has(> .wp-block-omt-modal) {
  display: flex;
  flex-direction: column;
}
.kt-inside-inner-col:has(> .wp-block-omt-modal) > figure.wp-block-omt-image {
  margin-bottom: 0;
}
.kt-inside-inner-col > .wp-block-omt-modal {
  margin-top: auto;
}

/* [95] Homepage USP cards: five of them in a two-column grid leaves the fifth
   stranded at the left of a row of its own. Jon, 2026-08-18: "move GLOBAL
   CONNECTIVITY, that column to the middle ... gotta be same size as the rest of
   the boxes." Spanning both tracks is what allows it to centre; the width calc
   hands back exactly one track (grid content box less the 32px gutter, halved)
   so it centres without stretching to double width. Gated above 768px because
   below that the row is a single column and the card is already full width. */
@media (min-width: 768px) {
  .kb-row-layout-id1571_3ad39e-b0 > .kt-row-column-wrap > .omt-column1571_usp5-c5 {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 32px) / 2);
  }
}

/* [96] Why Us: the same stranded card as [95], in a different shape. Its five
   USPs are three separate two-column rows, and the third holds GLOBAL
   CONNECTIVITY on the left with an empty column beside it, so the card sat hard
   left under two full rows of pairs. Jon, 2026-08-18: same treatment as the
   homepage. The empty column renders nothing at any width, so it is hidden
   outright; the card then spans both tracks at one track's width (grid content
   box less the 32px gutter, halved) and centres without growing. Both rules are
   keyed to :empty rather than the column's uniqueID, so the day that second
   column gets content in the editor the row reverts to an ordinary pair. */
.kb-row-layout-id1290_7fd91a-2f .wp-block-omt-column:has(> .kt-inside-inner-col:empty) {
  display: none;
}
@media (min-width: 768px) {
  .kb-row-layout-id1290_7fd91a-2f
    .kt-row-column-wrap:has(> .wp-block-omt-column > .kt-inside-inner-col:empty)
    > .wp-block-omt-column {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 32px) / 2);
  }
}