/* Created: 05:38 26-Aug-2026 */
/* Updated: 06:12 26-Aug-2026 — larger icons (Sumit: they are always too small) */
/* Updated: 07:22 08-Oct-2026 — Release 3 C-08: the Specialization cards as a slider (PhysioSpecialization slider=true) */
/* BAYTI — /physiotherapy-at-home/ rebuild components.
   Sumit, 26-Aug: every service card needs an image with its text underneath; the
   five-item trust strip read as "an Excel row" and must become tabs/tiles; the
   right-hand column of the commitment + Specialization block was empty.

   Only genuinely NEW components live here. The two-column text+media block reuses
   .t2-split from css/t2.css rather than inventing a second one. */

/* ---------------------------------------------------------------- photo cards
   A card that leads with a photograph and carries a heading, a lead line and a
   condition list underneath. .pt-card cannot hold a figure, and stretching it to
   would change every page that already uses it. */
.pc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;
  padding:0;margin:40px 0 0}
.pc-card{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){
  .pc-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px var(--ink-8)}
  .pc-card:hover .pc-shot img{transform:scale(1.04)}
}
.pc-shot{margin:0;overflow:hidden;background:var(--surface-card)}
.pc-shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:50% 42%;transition:transform .6s var(--ease-circ)}
.pc-body{display:flex;flex-direction:column;gap:10px;padding:24px 26px 26px;flex:1}
.pc-body .h5{margin:0;color:var(--text-strong)}
.pc-body > p{margin:0}
/* Nine conditions as bullets made a 9-row column and a ragged grid. As chips they
   wrap, the cards keep an even height, and each term stays individually readable. */
.pc-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:4px 0 0}
.pc-chips li{padding:6px 12px;border-radius:100vw;background:var(--surface-card);
  border:1px solid var(--border-faint);font-size:14px;line-height:20px;
  color:var(--text-medium)}

/* ---------------------------------------------------------------- why tiles
   Replaces .pt-trust on this page. The old markup was a single bordered grid with
   internal dividers, which renders as a spreadsheet row. These are separate tiles. */
.pc-why{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  padding:0;margin:28px 0 0}
.pc-why li{display:flex;flex-direction:column;gap:12px;padding:24px 22px;
  border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint);border-top:3px solid var(--teal);
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ)}
@media (hover:hover){.pc-why li:hover{transform:translateY(-3px);
  box-shadow:0 14px 32px var(--ink-8)}}
/* Sumit, 26-Aug: "you always keep the icons very small, I want icons to be a bit
   bigger" — a general note, so the physiotherapy tiles get the same treatment as the
   respiratory page. Tile 36 -> 44px, glyph 20 -> 26px. */
.pc-why-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;
  background:var(--surface-card);color:var(--teal-deep);flex:0 0 auto}
.pc-why-ico svg{width:26px;height:26px;display:block;stroke-width:1.5}
.pc-why b{font-weight:500;color:var(--text-strong);font-size:15px;line-height:23px}

/* ---------------------------------------------------------------- process steps
   The three steps were a bare number and one sentence each, on a thin row. They now
   carry a short label and sit as cards beside the process photograph. */
/* Steps and note share the left column so the right column's photograph can stretch to
   match it. Laid out the other way the image ran ~400px taller than three short steps
   and left a hole under step 3. */
.pc-how{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;
  align-items:stretch;margin-top:40px}
.pc-how-col{display:flex;flex-direction:column;gap:20px}
.pc-steps{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.pc-step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;
  align-items:start;padding:24px 26px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.pc-step-num{width:38px;height:38px;border-radius:100vw;display:grid;place-items:center;
  background:var(--accent);color:var(--paper-100);font-size:15px;font-weight:500}
.pc-step h3{margin:0 0 6px;font-size:18px;line-height:26px;color:var(--text-strong)}
.pc-step p{margin:0}
.pc-how-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card);
  min-height:100%}
.pc-how-media img{display:block;width:100%;height:100%;min-height:420px;
  object-fit:cover;object-position:50% 50%}
.pc-how-note{margin-top:auto;padding:22px 24px;border-radius:14px;
  background:var(--surface-card);border:1px solid var(--border-faint)}
.pc-how-note p{margin:0;color:var(--text-medium)}
.pc-how-note p+p{margin-top:12px}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1199px){
  .pc-grid{grid-template-columns:repeat(2,1fr)}
  .pc-why{grid-template-columns:repeat(3,1fr)}
  .pc-how{grid-template-columns:1fr;gap:36px}
  .pc-how-media{min-height:0;order:-1}
  .pc-how-media img{min-height:0;aspect-ratio:16/9;max-height:360px}
}
@media (max-width:767px){
  .pc-grid{grid-template-columns:1fr;gap:20px}
  .pc-why{grid-template-columns:1fr;gap:12px}
  .pc-body{padding:22px 22px 24px}
  .pc-step{padding:20px 22px;gap:16px}
}

/* ---------------------------------------------------------------- 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 empty — that was the blank column
   above Specialization. With the lead as a real second child the row fills, matching
   what .svc-included already does with its own 5fr/7fr override. */
.pc-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;
  align-items:end}
.pc-head h2{margin:0}
.pc-head > p{margin:0 !important;max-width:none !important}
@media (max-width:899px){
  .pc-head{grid-template-columns:1fr;gap:16px;align-items:start}
}

/* ---------------------------------------------------------------- intro facts
   The intro's left column was a heading over ~250px of nothing. These three anchors
   restate the clauses of the paragraph beside them; no new claim is introduced. */
.pc-facts{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:12px}
.pc-facts li{position:relative;padding-left:34px;font-size:16px;line-height:26px;
  color:var(--text-medium)}
.pc-facts li::before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;
  border-radius:100vw;background:var(--surface-card);border:1px solid var(--border-faint)}
.pc-facts li::after{content:"";position:absolute;left:7px;top:11px;width:8px;height:8px;
  border-radius:100vw;background:var(--teal-deep)}

/* ---------------------------------------------------------------- grid callout
   Seven cards in a three-wide grid left row 3 with one card and two empty cells. The
   callout fills them — which is also where the source infographic puts it. */
.pc-callout{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;
  padding:40px 44px;border-radius:14px;background:var(--accent);color:var(--paper-100)}
.pc-callout .h4{margin:0 0 10px;color:var(--paper-100)}
.pc-callout p{margin:0;color:var(--paper-88)}
@media (max-width:1199px){.pc-callout{grid-column:span 2;padding:32px 34px}}
@media (max-width:767px){.pc-callout{grid-column:span 1;padding:28px 24px}}

/* ---------------------------------------------------------------- intro block
   TWO measured faults, both scoped to this file so the other 162 pages cannot move.

   1. NO MARGIN UNDER THE HERO. Measured 26-Aug at 1440: hero.bottom 486px,
      heading.top 486px — a 0px gap, the text sitting flush against the photograph.
      Cause: the BL-100 fix zeroes .svc-about{padding-top} because the 13 pages whose
      first child is .svc-lead double-padded to 240px. This page's first child is
      .about-grid-2, which carries no pad of its own, so it inherited nothing.

   2. HEADING OVERLAPPING THE FACT LIST. .about-lead .h2 is position:sticky (the
      Athelas editorial grid — the heading holds while the long prose scrolls past).
      The fact list added on 26-Aug is its SIBLING, so once the heading detached it
      slid straight down over it. Measured overlap while scrolled: 102px, exactly the
      height of the list. The heading and the list now sit in ONE sticky block, so
      they travel together and cannot cross. */
#about-service-intro{padding-top:var(--sec-m)}
.pc-lead-stick{position:sticky;top:120px}
.pc-lead-stick .h2{position:static}
/* Matches the breakpoint at which service.css already un-sticks this heading. */
@media (max-width:991px){
  .pc-lead-stick{position:static}
}

/* ---------------------------------------------------------------- Specialization as a slider
   Release 3 (08-Oct client reply, C-08). PhysioSpecialization with slider=true puts the same
   .pt-card cards in js/main.js's [data-testi-track] slider (blocks/card-slider.tsx) instead of
   the .pt-grid. Widths follow the grid's own steps (3 / 2 / 1 across) and main.js's maths:
   one card + the 20px gap of .rev-track (sections-c.css), so two gaps = 40px. Only the English
   page is switched; the Arabic page keeps the grid and never meets these rules. */
.pt-track{list-style:none;margin:0;padding:0;align-items:stretch}
.pt-track>.pt-card{flex:0 0 calc((100% - 40px)/3);min-width:0}
.pt-slider-arrows{justify-content:flex-end}
#specialization .pt-slider{margin-top:20px;padding-bottom:12px}
@media (max-width:1199px){.pt-track>.pt-card{flex:0 0 calc((100% - 20px)/2)}}
@media (max-width:767px){.pt-track>.pt-card{flex:0 0 100%}}