/* =====================================================================
   THERALETIK STEGLITZ — service.css
   Template baris layanan (physio_row) — dipakai oleh:
   physiotherapie / spezialtherapien / ergotherapie.
   Butuh globals.css (tokens + nav/hero/footer) dimuat lebih dulu.
   Token + rem/clamp only (no px, no hex).
   ===================================================================== */

/* ============================ SERVICE ROWS ============================ */
.physio_row { background: var(--light-100); padding-block: var(--sp-sect-sm); }
.physio_row_inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-7); }
.physio_row_aside { flex: 0 0 9.5rem; width: 9.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.physio_row_eyebrow { font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }
.physio_row_num { font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.01em; color: var(--brand-500); opacity: .12; }
.physio_bars { display: flex; flex-direction: column; gap: var(--sp-1); width: 1.4375rem; margin-top: var(--sp-1); }
.physio_bars_seg { height: .25rem; width: 100%; border-radius: var(--r-100); background: var(--brand-o20); }
.physio_bars_seg.is-on { background: var(--brand-500); }

.physio_row_main { flex: 0 1 62.5rem; display: flex; gap: var(--sp-5); }
.physio_row_info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5); min-height: 27.5rem; }
.physio_row_title { color: var(--brand-500); }
.physio_row_text { display: flex; flex-direction: column; gap: var(--sp-3); }
.physio_row_desc { font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }
.physio_row_list { display: flex; flex-direction: column; gap: var(--sp-3); }
.physio_row_item { display: flex; align-items: center; gap: var(--sp-1); }
.physio_row_check { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; }
.physio_row_label { font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-500); }
.physio_row_media { flex: 0 0 30.25rem; height: 27.5rem; border-radius: var(--r-large); overflow: hidden; background: var(--light-1000); }
.physio_row_img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ RESPONSIVE (service) ============================ */
@media (max-width: 60rem) {
  .physio_row_inner { flex-direction: column; align-items: stretch; gap: var(--sp-5); }
  .physio_row_aside { flex: none; width: auto; }
  .physio_row_main { flex: none; width: 100%; flex-direction: column; gap: var(--sp-4); }
  .physio_row_info { min-height: 0; order: 2; }
  .physio_row_media { flex-basis: auto; width: 100%; height: 18rem; order: 1; }
}