/* Created: 19:48 25-Aug-2026 */
/* Updated: 06:48 26-Aug-2026 — shared .t2-group component; hero min-height -> --svc-hero-h token */
/* Updated: 08:26 26-Aug-2026 — shared .t2-flow (roadmap + stretched media) for BL-121 /admission/ rework — process roadmap, 3 photographs, 4 icons */
/* Updated: 14:45 23-Sep-2026 — two-up cards stretch to equal height (Vision / Mission on /about/, EN + AR) */
/* Shared components for the bespoke service pages — see _build/svc_t2.py.
   Every rule here exists because of something Sumit rejected on 25-Aug:
   photographs sit INSIDE sections and never as standalone bands; two-column bands are
   vertically CENTRED so short copy leaves symmetric breathing room instead of a hole;
   no decorative dots anywhere; images capped so nothing runs 700px tall; hero crops
   anchored so no head is cut. */

.t2-note{color:var(--text-medium)}
.t2-prose p+p{margin-top:16px}
.t2-prose a{color:var(--accent)}
.t2-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.is-tone{background:var(--bg-two)}

/* hero */
.t2-hero{min-height:var(--svc-hero-h)}
.t2-hero-lede{color:var(--paper-64);margin-top:18px}
@media (max-width:767px){.t2-hero{min-height:var(--svc-hero-h-sm)}}

/* split — text and photograph side by side, alternating down the page */
.t2-split-sec{padding-block:var(--sec-m)}
.t2-split-sec+.t2-split-sec{padding-top:var(--sec-s)}
.t2-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;
  align-items:center}
.t2-split-text .t2-prose{margin-top:18px}
.t2-split-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card)}
.t2-split-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;max-height:420px;
  object-fit:cover;object-position:50% 42%}

/* features — the client's own <li><strong>Label:</strong> body</li> as cards */
.t2-features{padding-block:var(--sec-s) var(--sec-m)}
.t2-cards{list-style:none;display:grid;gap:20px;padding:0;margin:40px 0 0;
  align-items:start}
.t2-cards--2{grid-template-columns:repeat(2,1fr)}
/* A two-up pair reads as one statement, so the shorter card stretches to the taller
   instead of leaving a ragged step under it (Sumit, 23-Sep: Vision 150px vs Mission
   190px on /about/ at 1440). Works in RTL untouched — it is a row-axis rule, so the
   Arabic page gets it for free. The psp bands opt out: they strip .t2-card chrome and
   build their own, where top alignment is deliberate. */
.t2-cards--2:not(.psp-cards){align-items:stretch}
.t2-cards--3{grid-template-columns:repeat(3,1fr)}
/* Cards. These were plain bordered boxes on every page and Sumit called that out -
   "why are you just stuck with your own design part". Now: a brand accent rule that
   grows on hover, a leading tick for title-only cards so a bare label still reads as an
   item rather than floating text, and a real type hierarchy. */
.t2-card{position:relative;padding:26px 26px 24px 30px;border-radius:14px;
  background:var(--paper-100);border:1px solid var(--border-faint);overflow:hidden;
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ),
             border-color .4s ease}
.t2-card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;
  border-radius:0 3px 3px 0;background:var(--teal);
  transition:top .4s var(--ease-circ),bottom .4s var(--ease-circ)}
@media (hover:hover){
  .t2-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px var(--ink-8);
    border-color:var(--teal-32)}
  .t2-card:hover::before{top:0;bottom:0}
}
.t2-card-title{color:var(--text-strong);line-height:1.35;display:block}
.t2-card .t2-note{margin-top:8px}
/* a card with only a label gets a tick, so it reads as an item not a stray line */
.t2-card--bare .t2-card-title{display:flex;gap:10px;align-items:flex-start;
  font-size:16px;font-weight:500}
.t2-card--bare .t2-tick{flex:0 0 16px;margin-top:3px;color:var(--teal-deep)}

/* pills — bare labels with no body. Three vaccine names do not need three cards. */
.t2-pills-sec{padding-block:var(--sec-s) var(--sec-m)}
.t2-pills{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:36px 0 0}
.t2-pill{padding:12px 22px;border-radius:100vw;background:var(--paper-100);
  border:1px solid var(--border-subtle);font-weight:500;color:var(--text-strong)}

.t2-cta{padding-block:var(--sec-m)}
.t2-cta-note{margin-top:18px}

@media (max-width:1099px){.t2-cards--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:899px){
  .t2-split{grid-template-columns:1fr;gap:32px}
  .t2-cards--2,.t2-cards--3{grid-template-columns:1fr}
  /* image first on a flipped band, so mobile reads picture then text consistently */
  .t2-split--flip .t2-split-media{order:-1}
}

/* features + photograph. Exists so a generated image can sit NEXT TO the content it
   illustrates rather than in a standalone band between sections. The image is sticky so
   it stays in view beside a long card list, and capped so it never dominates. */
.t2-fm{padding-block:var(--sec-s) var(--sec-m)}
.t2-fm-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;
  align-items:start;margin-top:40px}
.t2-fm-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card);
  position:sticky;top:112px}
.t2-fm-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;max-height:420px;
  object-fit:cover;object-position:50% 42%}
.t2-cards--1{grid-template-columns:1fr}
@media (max-width:899px){
  .t2-fm-grid{grid-template-columns:1fr;gap:28px}
  .t2-fm-media{position:static}
  .t2-fm-grid>.t2-fm-media{order:-1}
}

/* ---- /caregiver-services/ ---- */
/* The 5 caregiver categories each have their own photograph from the live site. Fixed
   4/3 media so a portrait and a landscape source sit level, and object-position kept
   high so no face is cropped. */
.cg-cats{padding-block:var(--sec-s) var(--sec-m)}
.cg-cat-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:0;margin:40px 0 0;align-items:start}
.cg-cat{display:flex;flex-direction:column;background:var(--paper-100);
  border:1px solid var(--border-faint);border-radius:14px;overflow:hidden;
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ)}
@media (hover:hover){.cg-cat:hover{transform:translateY(-3px);box-shadow:0 14px 32px var(--ink-8)}}
.cg-cat-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-card)}
.cg-cat-media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.cg-cat-body{display:block;padding:20px 22px 22px}
.cg-cat-title{display:block;color:var(--text-strong);line-height:1.3}
.cg-cat-body .t2-note{display:block;margin-top:8px}

.cg-how{padding-block:var(--sec-s) var(--sec-m)}
.cg-step-num{display:block;color:var(--accent);font-family:'IBM Plex Mono',monospace;
  margin-bottom:10px}

.cg-reviews{padding-block:var(--sec-m)}
.cg-review-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding:0;margin:40px 0 0;align-items:start}
.cg-review{padding:24px 22px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.cg-review-stars{color:var(--warning);letter-spacing:2px;font-size:13px;margin-bottom:12px}
.cg-review-text{margin:0;color:var(--text-medium);
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.cg-review-text[dir="rtl"]{text-align:right}
.cg-review-name{margin-top:14px;color:var(--text-strong)}

@media (max-width:1099px){
  .cg-cat-grid,.cg-review-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .cg-cat-grid,.cg-review-grid{grid-template-columns:1fr}
}

/* ---- inline media on the Ceire-spec pages (physio, respiratory) ---- */
/* Their photographs used to sit in standalone 540px bands. add_ceire_media.py wraps a
   rendered section so the picture sits beside the copy without touching Ceire's markup. */
.cm-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;
  align-items:start;margin-top:36px}
.cm-copy{min-width:0}
/* Anything the wrapper narrows must be able to reflow. A fixed 2-column .incl-grid
   inside the copy column overflowed by 21px on /respiratory-therapy-services/. */
.cm-copy .incl-grid{grid-template-columns:1fr}
.cm-copy .incl-item{min-width:0}
.cm-copy img{max-width:100%;height:auto}
/* sticky, so beside a long list the picture stays in view instead of sinking to the
   bottom of its column, which is what made it look "stuck in between". */
.cm-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card);
  position:sticky;top:112px}
.cm-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;max-height:420px !important;
  object-fit:cover;object-position:50% 40%}
@media (max-width:1023px){
  .cm-grid{grid-template-columns:1fr;gap:28px}
  .cm-media{position:static}
  .cm-grid>.cm-media{order:2}
}

/* The Ceire-spec section leads carry a `measure` cap (~448px) that leaves the right half
   of the band empty. On these sections the heading and its lead sit side by side instead,
   so the width is used. Sumit: "that whole paragraph is giving good spacing on the
   right hand side". */
.svc-included .section-head>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:48px;align-items:start}
.svc-included .section-head h2{margin:0}
.svc-included .section-head p{margin-top:0 !important;max-width:none !important}
@media (max-width:899px){
  .svc-included .section-head>div{grid-template-columns:1fr;gap:16px}
}

/* The Ceire-spec list items put the tick on its own line above the label, and the grid
   stretched every card to the tallest in its row. Tick beside the text, cards sized to
   their own content. */
.incl-grid{align-items:start}
.incl-item{display:flex;gap:12px;align-items:flex-start}
/* service.css sets `.svc-sec-cards .incl-item{flex-direction:column}`, which stacked the
   tick on its own line above the label. These lists are one short line each, so the tick
   belongs beside the text. */
.svc-sec-cards .incl-item{flex-direction:row;gap:12px}
.incl-item>.nr-tick{flex:0 0 15px;margin-top:4px;color:var(--teal-deep)}
.incl-item>p{margin:0}

/* ---------------------------------------------------------------- service groups
   Added 26-Aug for /patients-support-service/. A long flat checklist beside one
   photograph leaves the column under that photograph empty (Sumit: "it looks very dull,
   in the left-hand side it's empty"). Grouped rows give every item a photograph that
   reaches the full height of its own block.

   NOTE: css/resp.css carries .rp-group, the same pattern, written first for the
   respiratory page. They should converge on this one the next time that page is
   touched — kept separate for now so an approved page is not disturbed. */
.t2-groups{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:24px}
.t2-group{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  background:var(--paper-100);border:1px solid var(--border-faint);border-radius:16px;
  overflow:hidden}
.t2-group-media{margin:0;background:var(--surface-card);min-height:100%}
.t2-group-media img{display:block;width:100%;height:100%;min-height:280px;
  object-fit:cover;object-position:50% 42%}
.t2-group-body{padding:32px 34px;display:flex;flex-direction:column;justify-content:center}
.t2-group-body .h5{margin:0 0 16px;color:var(--text-strong)}
.t2-group-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.t2-group-list li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;
  border-radius:10px}
@media (hover:hover){.t2-group-list li:hover{background:var(--surface-card)}}
.t2-group-list p{margin:0}
.t2-group-ico{flex:0 0 26px;width:26px;height:26px;margin-top:-1px;color:var(--teal-deep);
  stroke-width:1.5}
.t2-group-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.t2-group-flip .t2-group-media{order:2}
@media (max-width:899px){
  .t2-group,.t2-group-flip{grid-template-columns:1fr}
  .t2-group-media{min-height:0}
  .t2-group-media img{min-height:0;aspect-ratio:16/9;max-height:300px}
  /* order:2 would drop the photograph below its own list on a phone. */
  .t2-group-flip .t2-group-media{order:0}
}
@media (max-width:767px){.t2-group-body{padding:26px 24px}}

/* ================= flow — a roadmap with a photograph sticky beside it =================
   Added 08:34 26-Aug-2026 for /admission/. Shared from birth, in t2.css rather than a
   page file: there are ALREADY seven page-scoped step components in this codebase
   (.doc-step .iv-step .nr-step .pc-step .svc-step .pt-step .flow-step) and an eighth
   would be the same mistake again. Any page whose process runs long enough to leave a
   tall band can use this. */
.t2-flow{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;
  align-items:stretch}
/* the 40px belongs to the gap UNDER a heading, so it is conditional on there being one.
   /admission/ has no section-head and was carrying the offset as dead space. */
.section-head+.t2-flow{margin-top:40px}
/* stretch, NOT sticky + aspect-ratio. Measured 26-Aug at 1440: a 4/3 figure came out
   413px beside a 516px roadmap and left a 103px hole under the photograph. Filling the
   column is exact at any copy length; a fixed ratio is only ever right by luck. Same
   pattern as .t2-group-media, which is approved. */
.t2-flow-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card);
  min-height:100%}
.t2-flow-media img{display:block;width:100%;height:100%;min-height:320px;
  object-fit:cover;object-position:50% 40%}
@media (max-width:899px){
  .t2-flow{grid-template-columns:1fr;gap:32px}
  /* ABOVE the steps — a figure below its own list is dead weight on a phone, the same
     fault fixed on .t2-group-flip. */
  .t2-flow-media{order:-1;min-height:0}
  .t2-flow-media img{height:auto;min-height:0;aspect-ratio:16/9;max-height:300px}
}