/* Page-title strip: one gem colour blending diagonally into white (2026-10-19).
   Colour per page via a modifier on <section class="page-strip">:
     page-strip--ruby     treatments, IVF/ICSI, services & pricing
     page-strip--emerald  knowledge, conditions, self-help tools
     (none) = sapphire    clinic, Dr. Pat, diagnostics, policy & legal
   Loaded after style.v3.css, whose old ruby→emerald .page-strip background it replaces. */
.page-strip {
  --strip-deep: #0a3a85; --strip-gem: #0f52ba; --strip-tint: #93b1e0;
  background: linear-gradient(135deg, var(--strip-deep) 0%, var(--strip-gem) 42%, var(--strip-tint) 76%, #fff 100%);
}
.page-strip--ruby    { --strip-deep: #9e0b43; --strip-gem: #e0115f; --strip-tint: #f194b7; }
.page-strip--emerald { --strip-deep: #00684f; --strip-gem: #009473; --strip-tint: #8ccfc0; }
.page-strip h1 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.page-strip p  { color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.page-strip .breadcrumbs,
.page-strip .breadcrumbs a { color: rgba(255,255,255,.88); }
.page-strip .breadcrumbs a:hover { color: #fff; }
/* Right-to-left pages start their text on the right, so the white corner moves to the bottom-left. */
[dir="rtl"] .page-strip {
  background: linear-gradient(225deg, var(--strip-deep) 0%, var(--strip-gem) 42%, var(--strip-tint) 76%, #fff 100%);
}
/* Phones: the title fills the strip, so white only reaches the far corner. */
@media (max-width: 700px) {
  .page-strip {
    background: linear-gradient(150deg, var(--strip-deep) 0%, var(--strip-gem) 50%, var(--strip-tint) 92%, #fff 120%);
  }
  [dir="rtl"] .page-strip {
    background: linear-gradient(210deg, var(--strip-deep) 0%, var(--strip-gem) 50%, var(--strip-tint) 92%, #fff 120%);
  }
}