/* Created: 10:24 25-Aug-2026 */
/* Updated: 06:48 26-Aug-2026 — hero min-height -> --svc-hero-h token */
/* Updated: 07:22 08-Oct-2026 — Release 3 C-10: the specialisation categories slider (NrSpecialisations) */
/* /homecare-nursing/ — rebuilt after Sumit rejected the photography pass. The page was
   8,296px with 34 identical dotted rows and three decorative 540px photo bands that
   related to nothing. See _build/render_nursing.py for the full list. */

.nr-note{color:var(--text-medium)}
.nr-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---- intro: photograph BESIDE the copy, not in a band below it ---- */
.nr-intro{padding-block:var(--sec-m) var(--sec-s)}
.nr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;
  align-items:center}
.nr-split-text .nr-lead{margin-top:20px}
.nr-split-text .nr-note{margin-top:16px}
.nr-split-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card)}
.nr-split-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;max-height:430px;
  object-fit:cover;object-position:50% 40%}

/* ---- services: three columns, one per clinical group ---- */
.nr-services{padding-block:var(--sec-s) var(--sec-m)}
/* BL-063 - full-width bands, one per clinical group. The groups hold 10 / 7 / 4 items
   and the counts cannot be rebalanced (they are the client's clinical groupings), so
   columns of equal width always leave one short. A band is sized by its own content,
   so no group can leave a hole. The group name takes its own column, which makes
   Ceire's grouping the structure rather than a caption inside a card. */
.nr-groups{display:grid;gap:20px;margin-top:44px}
.nr-band{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px 40px;
  padding:26px 28px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint);align-items:start}
.nr-band-head{display:flex;flex-direction:column;gap:6px;position:sticky;top:104px}
.nr-band-count{font-size:13px;color:var(--text-medium);opacity:.75;white-space:nowrap}
.nr-group{padding:26px 24px 22px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.nr-group-title{color:var(--text-strong)}
.nr-list{list-style:none;padding:0;margin:0;columns:2;column-gap:36px}
.nr-list li{break-inside:avoid;-webkit-column-break-inside:avoid}
.nr-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;
  font-size:15px;line-height:1.5;color:var(--text-medium)}
.nr-list li+li{border-top:1px solid var(--ink-4)}
.nr-tick{flex:0 0 15px;margin-top:4px;color:var(--teal-deep)}
/* BL-063 entrance. The item's delay rides on --nr-d, set per item by
   render_nursing.py. Namespaced nr- so it cannot collide with another section's
   hooks. Released when the item's own GROUP gets .in-view, so the three groups
   cascade independently as you scroll rather than the whole block fading at once. */
.js .nr-band .nr-item{opacity:0;transform:translateY(9px)}
.js .nr-band.in-view .nr-item{opacity:1;transform:none;
  transition:opacity .5s ease var(--nr-d,0s), transform .5s ease var(--nr-d,0s)}

/* ---- who benefits: a DIFFERENT component from the services above ---- */
.nr-who{padding-block:var(--sec-m);background:var(--bg-two)}
.nr-who-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;
  align-items:start}
.nr-who-intro{position:sticky;top:112px}
.nr-who-intro .nr-note{margin-top:16px}
.nr-who-media{margin:24px 0 0;border-radius:16px;overflow:hidden;background:var(--surface-card)}
.nr-who-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;object-position:50% 38%}
.nr-who-list{list-style:none;padding:0;margin:0;
  columns:2;column-gap:24px}
.nr-who-item{break-inside:avoid;padding:14px 16px 14px 30px;margin:0 0 12px;
  border-radius:10px;background:var(--paper-100);border:1px solid var(--border-faint);
  font-size:15px;line-height:1.5;color:var(--text-medium);position:relative}
.nr-who-item::before{content:"";position:absolute;left:14px;top:21px;width:6px;height:6px;
  border-radius:50%;background:var(--teal-deep)}

/* ---- how it works ---- */
.nr-how{padding-block:var(--sec-m) var(--sec-s)}
.nr-how-head .nr-note{margin-top:16px}
.nr-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:0;margin:44px 0 0}
.nr-step{padding:28px 24px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.nr-step-num{display:block;color:var(--accent);font-family:'IBM Plex Mono',monospace;
  margin-bottom:14px}
.nr-step h3{color:var(--text-strong)}
.nr-step .nr-note{margin-top:10px}
.nr-how-foot{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;
  align-items:center;margin-top:48px}
.nr-how-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card)}
.nr-how-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;
  max-height:380px;object-fit:cover;object-position:50% 45%}

@media (max-width:1099px){
  /* BL-063: the band's name column folds above its list before the list narrows */
  .nr-band{grid-template-columns:1fr;gap:16px}
  .nr-band-head{position:static;flex-direction:row;align-items:baseline;
    justify-content:space-between;gap:12px;padding-bottom:12px;
    border-bottom:1px solid var(--border-faint)}
  .nr-steps{grid-template-columns:1fr}
}
@media (max-width:899px){
  /* One column. Two columns of ticks below this width squeezes long clinical
     names ("Enteral and Parenteral Feeding Support (NGT, PEG, PEJ & TPN)") past
     the viewport edge - measured as a horizontal overflow at 390px. */
  .nr-list{columns:1}
  .nr-band{padding:22px 20px}
  .nr-split,.nr-who-grid,.nr-how-foot{grid-template-columns:1fr;gap:32px}
  .nr-who-intro{position:static}
  .nr-who-list{columns:1}
}
@media (max-width:639px){
  .nr-groups{grid-template-columns:1fr}
}

/* Hero. The faces in this photograph sit ~20-25% down the frame, so the crop is anchored
   there and the band is taller than the 54vh default; the previous hero cut the top of a
   client's head. Never crop heads (project rule, 24-Aug). */
.svc-hero{min-height:var(--svc-hero-h)}
.svc-hero-media img{object-position:50% 26%}
@media (max-width:767px){.svc-hero{min-height:var(--svc-hero-h-sm)}}

/* Below 900px this grid collapses to one column and a 16:10 image becomes full-width
   at 562px tall. Capped so no picture dominates a narrow screen. */
@media (max-width:899px){.nr-who-media img{max-height:360px}}

/* BL-063 safety net. If the group never gets .in-view - reduced motion, no
   IntersectionObserver, a print stylesheet - the items must still be readable.
   Content that is invisible unless an animation fires is content that is lost. */
@media (prefers-reduced-motion:reduce){
  .js .nr-band .nr-item{opacity:1;transform:none;transition:none}
}
@media print{
  .js .nr-band .nr-item{opacity:1;transform:none}
}

/* ---- specialisation categories (Release 3, 08-Oct client reply, C-10) ----
   NrSpecialisations: six cards in js/main.js's [data-testi-track] slider (blocks/card-slider.tsx),
   right after the services list, no heading for now (client point 14). The cards are the
   physiotherapy Specialization cards (.pt-card / .pt-prose, service.css); the widths are the same
   3 / 2 / 1 steps with main.js's 20px gap. English page only. */
.nr-spec{padding-block:0 var(--sec-m)}
.nr-spec .pt-track{list-style:none;margin:0;padding:0;align-items:stretch}
.nr-spec .pt-track>.pt-card{flex:0 0 calc((100% - 40px)/3);min-width:0}
.nr-spec-arrows{justify-content:flex-end}
.nr-spec .pt-slider{margin-top:20px;padding-bottom:12px}
@media (max-width:1199px){.nr-spec .pt-track>.pt-card{flex:0 0 calc((100% - 20px)/2)}}
@media (max-width:767px){.nr-spec .pt-track>.pt-card{flex:0 0 100%}}