/* Created: 08:18 25-Aug-2026 */
/* Updated: 03:08 23-Sep-2026 — accreditation section moved to the shared stylesheet */
/* Updated: 16:09 05-Oct-2026 — 05-Oct C-06 (step 1.9): 10 cards; a lone last card is centred between two brand panels (lane E block at the end) */
/* Updated: 07:17 08-Oct-2026 — R3 C-05 (plan 4.4): a card's hover clip (.hub-vid) lies over its picture and fades in while it plays */
/* Services hub — /dmetco-bayti-home-healthcare-services/. See _build/render_hub.py for
   the seven faults this replaces. Loaded only by that page. */

.hub-eyebrow{color:var(--text-medium);margin-bottom:10px}
.hub-prose p+p{margin-top:18px}
.hub-split-text h2,.hub-editorial-head h2{margin-bottom:0}
.hub-split-text h2+.hub-prose{margin-top:20px}
.hub-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---- hero: typographic. The about photo used to carry this at ~1000px tall. ---- */
.hub-hero{padding:var(--sec-m) 0 var(--sec-s);background:var(--bg-two)}
.hub-hero .hub-lede{color:var(--text-medium);margin-top:20px}
.hub-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ---- two-column split: text beside a contained photo ---- */
.hub-about{padding-block:var(--sec-m)}
.hub-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hub-split-media{margin:0;border-radius:14px;overflow:hidden;background:var(--surface-card)}
.hub-split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  max-height:560px}

/* ---- the service cards (10 since 05-Oct): one Divi cell each, image + title + body + link ---- */
.hub-services{padding-block:var(--sec-s) var(--sec-m);background:var(--bg-two)}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.hub-card{display:flex;flex-direction:column;background:var(--paper-100);
  border:1px solid var(--border-faint);border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .45s var(--ease-circ),box-shadow .45s var(--ease-circ)}
@media (hover:hover){.hub-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px var(--ink-8)}}
.hub-card-media{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--surface-card)}
.hub-card-media img{width:100%;height:100%;object-fit:cover}
/* R3 C-05: the card's own film, as on the homepage grid (design-home.css .svc-vid) and the Other services
   slider (design-service.css .os-vid). It sits OVER the picture and fades in once js/motion.js has it playing,
   so a card never shows a black box while the file loads. No hover (phones), no film: the picture stays. */
.hub-card-media{position:relative}
.hub-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .45s var(--ease-circ);pointer-events:none;z-index:1}
.hub-card.is-filming .hub-vid{opacity:1}
.hub-card-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px}
.hub-card-title{display:block;color:var(--text-strong)}
.hub-card-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--text-medium);margin-top:10px;flex:1}
.hub-card-more{display:block;margin-top:18px;color:var(--accent)}

/* ---- editorial grid: sticky heading left, prose right (was prose pinned left) ---- */
.hub-why{padding-block:var(--sec-m)}
.hub-editorial{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;
  align-items:start}
.hub-editorial-head{position:sticky;top:120px}
.hub-editorial-sub{color:var(--text-medium);margin-top:16px}

/* ---- team preview ---- */
.hub-team{padding-block:var(--sec-s) var(--sec-m);background:var(--bg-two)}
.hub-people{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.hub-person-media{border-radius:12px;overflow:hidden;background:var(--surface-card);
  aspect-ratio:3/2}
.hub-person-media img{width:100%;height:100%;object-fit:cover}
.hub-person-name{margin-top:14px}
.hub-person-role{color:var(--text-medium);display:block;margin-top:2px}

/* ---- accreditation: even grid, white tiles so the JPEGs' own white ground blends ---- */
/* Certification & Affiliation moved to css/design-service-pages.css on 23-Sep:
   the section is now shared with /about/, which does not load hub.css. */

/* ---- closing CTA ---- */
.hub-cta{padding-block:var(--sec-s) var(--sec-m);background:var(--bg-two)}
.hub-cta-inner p{color:var(--text-medium);margin-top:18px}

@media (max-width:1099px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .hub-people{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:899px){
  .hub-split,.hub-editorial{grid-template-columns:1fr;gap:40px}
  .hub-editorial-head{position:static}
  .hub-split-media img{aspect-ratio:16/10;max-height:420px}
}
@media (max-width:639px){
  .hub-grid,.hub-people{grid-template-columns:1fr}
  .hub-hero{padding:var(--sec-s) 0}
}

/* ==== LANE E 05-Oct (C-06, step 1.9): a lone last card ==================================
   With 10 cards in 3 columns the 10th sits alone. It is centred (column 2), and two
   decorative brand panels fill columns 1 and 3 of that row: CSS only, no image file
   (D-61 not involved), no text (content ''), so screen readers see nothing. Works for any
   card count: it applies only when the last card starts a new row (3n+1).
   order:1 puts the two pseudo-elements after every card; dense flow lets them back-fill
   the last row instead of opening a new one. Without :has() the card is still centred and
   the panels simply do not appear. RTL mirrors the row, which is symmetric. */
.hub-card:last-child:nth-child(3n+1){grid-column:2}
.hub-grid:has(> .hub-card:last-child:nth-child(3n+1)){grid-auto-flow:row dense}
.hub-grid:has(> .hub-card:last-child:nth-child(3n+1))::before,
.hub-grid:has(> .hub-card:last-child:nth-child(3n+1))::after{
  content:"";order:1;border-radius:14px;pointer-events:none;
  border:1px solid var(--border-faint)}
.hub-grid:has(> .hub-card:last-child:nth-child(3n+1))::before{grid-column:1;
  background:
    radial-gradient(circle at 78% 22%,var(--teal-32) 0 18%,transparent 18.5%),
    radial-gradient(circle at 78% 22%,transparent 0 30%,var(--teal-16) 30.5% 31.5%,transparent 32%),
    radial-gradient(circle at 78% 22%,transparent 0 43%,var(--teal-16) 43.5% 44.5%,transparent 45%),
    linear-gradient(160deg,var(--purple-16),var(--paper-100) 70%)}
.hub-grid:has(> .hub-card:last-child:nth-child(3n+1))::after{grid-column:3;
  background:
    radial-gradient(circle at 22% 78%,var(--purple-32) 0 18%,transparent 18.5%),
    radial-gradient(circle at 22% 78%,transparent 0 30%,var(--purple-16) 30.5% 31.5%,transparent 32%),
    radial-gradient(circle at 22% 78%,transparent 0 43%,var(--purple-16) 43.5% 44.5%,transparent 45%),
    linear-gradient(340deg,var(--teal-16),var(--paper-100) 70%)}
@media (max-width:1099px){
  .hub-card:last-child:nth-child(3n+1){grid-column:auto}
  .hub-grid:has(> .hub-card:last-child:nth-child(3n+1))::before,
  .hub-grid:has(> .hub-card:last-child:nth-child(3n+1))::after{display:none}
}
/* ==== end LANE E 05-Oct ==== */