/* Created: 06:14 26-Aug-2026 */
/* Updated: 06:09 26-Aug-2026 — bigger icons; pack both long cards into the last row */
/* BAYTI — /respiratory-therapy-services/ rebuild components.
   Sumit, 26-Aug: more images; club the 12 services into groups that can carry a
   photograph; the long "Neurological and Neuromuscular Conditions" card was taller
   than its row-mates; both standalone paragraphs left the right half of their row
   empty; replace the repeated tick with real icons.

   Scoped to this file, which only this page links, so the other 162 cannot move. */

/* ---------------------------------------------------------------- section head
   .section-head is a flex row with justify-content:space-between; given one child it
   parks the heading left and leaves the other half blank. */
.rp-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px;
  align-items:end}
/* css/t2.css turns `.svc-included .section-head>div` into ANOTHER 5fr/7fr grid. Nested
   inside this one, the heading was getting 5/12 of 5/12 of the container — measured at
   212px, so "Who can benefit from Respiratory Therapy?" broke across five lines. */
.svc-included .section-head.rp-head > div{display:block;max-width:none}
.rp-head h2{margin:0;max-width:none}
.rp-head > p{margin:0 !important;max-width:none !important}
.rp-head-cta{align-items:center}
.rp-head-btn{justify-self:end}
@media (max-width:899px){
  .rp-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .rp-head-btn{justify-self:start}
}

/* ---------------------------------------------------------------- icon cards
   Replaces .incl-item on this page. Two changes: a real per-item icon instead of the
   same tick nine times, and align-items:stretch — css/t2.css sets .incl-grid to
   align-items:start, which is why the three-line Neurological card grew while the two
   cards beside it stayed one line tall. */
.rp-grid{display:grid;gap:20px;list-style:none;padding:0;margin:40px 0 0;
  align-items:stretch}
.rp-grid-3{grid-template-columns:repeat(3,1fr)}
/* Centred, not top-aligned: a row is only as tall as its longest card, so the short
   cards beside it will always carry slack. Sitting their text in the middle of that
   space reads as deliberate; pinned to the top it reads as a gap underneath. */
.rp-item{display:flex;gap:14px;align-items:center;padding:20px 22px;
  background:var(--paper-100);border:1px solid var(--border-faint);border-radius:12px;
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ)}
@media (hover:hover){.rp-item:hover{transform:translateY(-3px);
  box-shadow:0 12px 28px var(--ink-8)}}
.rp-item p{margin:0}
/* Sumit, 26-Aug: "you always keep the icons very small, I want icons to be a bit
   bigger". Population cards 22 -> 30px, service lines 20 -> 26px. Stroke width drops
   to 1.5 at this size so the glyph does not read as heavy. */
.rp-ico{flex:0 0 30px;width:30px;height:30px;margin-top:-2px;color:var(--teal-deep);
  stroke-width:1.5}
.rp-item{gap:16px}
.rp-item-sm{padding:14px 16px;background:transparent;border:0;border-radius:10px;gap:14px}
@media (hover:hover){.rp-item-sm:hover{transform:none;box-shadow:none;
  background:var(--surface-card)}}
.rp-item-sm .rp-ico{flex:0 0 26px;width:26px;height:26px;margin-top:-1px}

/* ---------------------------------------------------------------- row packing
   Equal-height rows removed the ragged card but did not remove the WHITE SPACE — it
   redistributed it. Measured at 1440 before this rule: 162px of dead vertical space
   across the nine cards, because the only three-line card (Neurological) sat in row 2
   and the only two-line card (Covid-19) sat in row 3, so BOTH of the lower rows were
   forced tall while row 1 stayed short.

   Sumit, 26-Aug: "you could have used your brain and put respiratory failure on the
   second row so that all the bottom row would have gotten more space."

   Exactly right. Swapping the display position of Neurological and Respiratory Failure
   puts both multi-line cards in the SAME row, so rows 1 and 2 collapse to one line each
   and only the last row is tall.

   Done with `order`, not by editing the list: the DOM keeps the LIVE PAGE'S OWN
   sequence, which render_respiratory.py's docstring is explicit about preserving. Only
   the visual placement moves, and only at the width where there are three columns —
   below that the grid reflows and any reordering would just scramble the list. */
@media (min-width:1200px){
  .rp-grid-3 > :nth-child(1){order:1}
  .rp-grid-3 > :nth-child(2){order:2}
  .rp-grid-3 > :nth-child(3){order:3}
  .rp-grid-3 > :nth-child(4){order:4}
  .rp-grid-3 > :nth-child(5){order:5}
  .rp-grid-3 > :nth-child(6){order:7}   /* Neurological  -> bottom row */
  .rp-grid-3 > :nth-child(7){order:6}   /* Resp. Failure -> row 2 */
  .rp-grid-3 > :nth-child(8){order:8}
  .rp-grid-3 > :nth-child(9){order:9}
}

/* ---------------------------------------------------------------- service groups
   Four alternating photo/text rows. The 12 services previously ran as 12 equal tick
   rows in two columns, which read as a checklist and gave nothing for a photograph to
   attach to. Each group keeps its services verbatim and separate. */
.rp-groups{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:24px}
.rp-group{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;
  background:var(--paper-100);border:1px solid var(--border-faint);border-radius:16px;
  overflow:hidden}
.rp-group-media{margin:0;background:var(--surface-card);min-height:100%}
.rp-group-media img{display:block;width:100%;height:100%;min-height:260px;
  object-fit:cover;object-position:50% 45%}
.rp-group-body{padding:32px 34px;display:flex;flex-direction:column;justify-content:center}
.rp-group-body .h5{margin:0 0 14px;color:var(--text-strong)}
.rp-group-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
/* Alternating sides stop four identical rows reading as a table. */
.rp-group-flip .rp-group-media{order:2}
.rp-group-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

/* ---------------------------------------------------------------- paragraph splits */
.rp-split-flip .t2-split-text{order:2}
.svc-lead .t2-split,#referral .t2-split{align-items:center}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1199px){
  .rp-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:899px){
  .rp-group,.rp-group-flip{grid-template-columns:1fr}
  .rp-group-media{min-height:0}
  .rp-group-media img{min-height:0;aspect-ratio:16/9;max-height:280px}
  /* order:2 would drop the photo below its own list on a phone. */
  .rp-group-flip .rp-group-media{order:0}
  .rp-split-flip .t2-split-text{order:0}
}
@media (max-width:767px){
  .rp-grid-3{grid-template-columns:1fr}
  .rp-group-body{padding:26px 24px}
}