/* ==========================================================================
   Zalfi — clinician profile pages (restrained design, pass 1)
   ---------------------------------------------------------------------------
   Loaded ONLY by the five clinician pages, after site.css. Everything is
   scoped under .pf (the <main> element), so the header, footer and the rest
   of the site are untouched. When the new system is rolled out site-wide,
   these tokens move into src/tailwind.css and this file goes away.

   Layout: open, text-led sections on warm paper with hairline dividers;
   the portrait carries the warmth; one filled panel ("Before you book").
   Dark mode follows the site's switch: theme.js puts .dark on <html>.
   ========================================================================== */

/* Source Serif 4 regular + italic: display headings on these pages only.
   The 600 weight is already declared in fonts.css. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/serif/source-serif-4-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/serif/source-serif-4-latin-400-italic.woff2") format("woff2");}

.pf{
  /* colour */
  --pf-paper:      #fbf9f5;   /* warm off-white ground */
  --pf-ink:        #15314d;   /* headings, deep Zalfi blue */
  --pf-text:       #23394f;   /* body, 11.9:1 on paper */
  --pf-muted:      #53667a;   /* secondary, 5.7:1 on paper */
  --pf-rule:       #e2dcd1;
  --pf-rule-strong:#cbc3b5;
  --pf-brand:      #256ba5;   /* brand-700: buttons and links */
  --pf-brand-deep: #1c5280;
  --pf-on-brand:   #ffffff;
  --pf-teal:       #257680;   /* teal-700: small labels only */
  --pf-panel:      #e9f2f3;
  --pf-soft:       #e3edf6;   /* secondary button fill, never transparent */
  --pf-soft-hover: #d5e4f1;
  --pf-selfpay-bg: #fbecd9;
  --pf-selfpay-fg: #7a4310;
  --pf-ins-bg:     #e9f2f3;
  --pf-ins-fg:     #235f68;
  /* type */
  --pf-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --pf-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-display: 2.25rem;
  --pf-h2: 1.625rem;
  --pf-lead: 1.125rem;
  --pf-body: 1.0625rem;
  --pf-small: .9375rem;
  --pf-label: .75rem;
  --pf-gutter: 1.5rem;
  --pf-radius: 4px;

  display:block;
  background:var(--pf-paper);
  color:var(--pf-text);
  font:400 var(--pf-body)/1.65 var(--pf-sans);
}
.dark .pf{
  --pf-paper:      #0a1e30;   /* the site's dark ground */
  --pf-ink:        #e6eef6;
  --pf-text:       #c9d6e2;
  --pf-muted:      #9aaebf;
  --pf-rule:       #1f3850;
  --pf-rule-strong:#2d4b68;
  --pf-brand:      #7cc0ee;
  --pf-brand-deep: #a6d4f4;
  --pf-on-brand:   #08192a;
  --pf-teal:       #7fd3d9;
  --pf-panel:      #112b43;
  --pf-soft:       #16324d;
  --pf-soft-hover: #1c3d5d;
  --pf-selfpay-bg: #3a2a16;
  --pf-selfpay-fg: #f3c998;
  --pf-ins-bg:     #123a41;
  --pf-ins-fg:     #9fe0e5;
}
@media (min-width:64rem){
  .pf{ --pf-display:3.25rem; --pf-h2:2rem; --pf-lead:1.25rem; }
}

.pf *,.pf *::before,.pf *::after{box-sizing:border-box}
.pf img{max-width:100%; height:auto; display:block}
.pf p{margin:0}
.pf ul,.pf ol,.pf dl,.pf dd{margin:0; padding:0; list-style:none}
.pf a{color:var(--pf-brand); text-underline-offset:.2em; text-decoration-thickness:1px}
.pf a:hover{color:var(--pf-brand-deep)}
.pf a[href^="tel:"]{white-space:nowrap}
.pf h1,.pf h2,.pf h3{font-family:var(--pf-serif); color:var(--pf-ink); font-weight:400; margin:0; text-wrap:balance; letter-spacing:-.012em}
.pf h3{font-weight:600; letter-spacing:0}

.pf .pf-wrap{max-width:80rem; margin-inline:auto; padding-inline:var(--pf-gutter)}
.pf-section{padding-block:4rem; border-top:1px solid var(--pf-rule)}
@media (min-width:64rem){ .pf-section{padding-block:6rem} }

.pf .pf-eyebrow{font:600 var(--pf-label)/1.3 var(--pf-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--pf-teal); margin:0 0 .9rem}

/* --- Breadcrumbs ---------------------------------------------------------- */
.pf .pf-crumbs ol{display:flex; flex-wrap:wrap; align-items:center; font-size:.8125rem; color:var(--pf-muted); padding-block:1.25rem 0}
.pf-crumbs a{color:var(--pf-muted); text-decoration:none; display:inline-block; padding-block:.25rem}
.pf-crumbs a:hover{color:var(--pf-brand); text-decoration:underline}
.pf-crumbs .sep{margin-inline:.5rem; color:var(--pf-rule-strong)}
.pf-crumbs [aria-current]{color:var(--pf-ink)}

/* --- Buttons: filled, never see-through ----------------------------------- */
.pf-btns{display:flex; flex-wrap:wrap; gap:.75rem}
.pf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:3rem; padding:.7rem 1.35rem; border-radius:var(--pf-radius);
  font:600 1rem/1.2 var(--pf-sans); text-decoration:none;
}
.pf a.pf-btn-primary{background:var(--pf-brand); color:var(--pf-on-brand)}
.pf a.pf-btn-primary:hover{background:var(--pf-brand-deep); color:var(--pf-on-brand)}
.pf a.pf-btn-soft{background:var(--pf-soft); color:var(--pf-ink)}
.pf a.pf-btn-soft:hover{background:var(--pf-soft-hover); color:var(--pf-ink)}
.pf-btn .bi{font-size:1.05rem; line-height:1}
@media (max-width:47.99rem){ .pf-hero .pf-btn{flex:1 1 100%} }

/* --- Hero: large portrait + at-a-glance ---------------------------------- */
.pf-hero{padding-block:2rem 3.5rem}
.pf-hero-grid{display:grid; gap:2rem}
.pf-portrait{margin:0}
.pf-portrait img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 25%; border-radius:var(--pf-radius); background:var(--pf-rule)}
.pf-hero h1{font-size:var(--pf-display); line-height:1.08; margin-bottom:1rem}
.pf .pf-lead{font-size:var(--pf-lead); line-height:1.6; color:var(--pf-text); max-width:36rem; margin-bottom:2rem}
.pf .pf-glance{font-size:var(--pf-small); line-height:1.5; margin-bottom:2rem}
.pf .pf-glance > div{display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:1rem; padding-block:.8rem; border-top:1px solid var(--pf-rule)}
.pf .pf-glance > div:last-child{border-bottom:1px solid var(--pf-rule)}
.pf .pf-glance dt{color:var(--pf-muted)}
.pf .pf-glance dd{color:var(--pf-ink)}
.pf-tag{display:inline-block; font:600 .75rem/1 var(--pf-sans); letter-spacing:.02em; padding:.32rem .5rem; border-radius:3px; margin-right:.4rem; vertical-align:1px}
.pf-tag-selfpay{background:var(--pf-selfpay-bg); color:var(--pf-selfpay-fg)}
.pf-tag-ins{background:var(--pf-ins-bg); color:var(--pf-ins-fg)}
.pf .pf-note{margin-top:1.25rem; font-size:.875rem; color:var(--pf-muted)}
@media (min-width:64rem){
  .pf-hero{padding-block:3rem 6rem}
  .pf-hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:5rem; align-items:start}
  .pf-portrait img{aspect-ratio:4/5}
  .pf .pf-glance > div{grid-template-columns:8.5rem minmax(0,1fr)}
}

/* --- Body: prose + one filled panel -------------------------------------- */
.pf-body{display:grid; gap:3rem}
.pf-prose{max-width:40rem; min-width:0}
.pf-prose h2{font-size:var(--pf-h2); line-height:1.2; margin-bottom:1.25rem}
.pf-prose * + h2{margin-top:3.5rem}
.pf-prose p + p{margin-top:1.1rem}
.pf .pf-quote{margin:0 0 1.5rem; padding:0; font:italic 400 1.5rem/1.4 var(--pf-serif); color:var(--pf-ink); max-width:32rem}
@media (min-width:64rem){ .pf-quote{font-size:1.75rem} }
.pf-focus{display:grid; grid-template-columns:1fr; column-gap:2rem}
.pf-focus li{padding-block:.6rem; border-top:1px solid var(--pf-rule); font-size:var(--pf-small); color:var(--pf-ink)}
.pf-list li{padding-block:.75rem; border-top:1px solid var(--pf-rule); font-size:var(--pf-small); color:var(--pf-ink)}
.pf-list li:last-child{border-bottom:1px solid var(--pf-rule)}
@media (min-width:40rem){ .pf-focus{grid-template-columns:1fr 1fr} }
.pf-aside{align-self:start; min-width:0}
@media (min-width:64rem){
  .pf-body{grid-template-columns:minmax(0,1fr) 22rem; gap:6rem}
  .pf-aside{position:sticky; top:7.5rem}
}
.pf-panel{background:var(--pf-panel); border-radius:var(--pf-radius); padding:1.75rem}
.pf-panel h2{font:600 1.25rem/1.3 var(--pf-serif); color:var(--pf-ink); margin:0 0 .85rem}
.pf-panel p{font-size:var(--pf-small); line-height:1.55}
.pf-panel p + p{margin-top:.8rem}
.pf-panel .pf-btns{margin-top:1.4rem}
.pf-panel .pf-btn{width:100%}
.pf .pf-fine{font-size:.875rem; line-height:1.55; color:var(--pf-muted); margin-top:1.25rem}
@media (min-width:64rem){ .pf-panel{padding:2.1rem} }

/* --- Other clinicians ----------------------------------------------------- */
.pf-head{display:grid; gap:.75rem; margin-bottom:2.5rem}
.pf-head h2{font-size:var(--pf-h2)}
.pf-head p{color:var(--pf-muted); max-width:34rem}
@media (min-width:64rem){ .pf-head{grid-template-columns:1fr 1fr; gap:5rem; align-items:end; margin-bottom:3.5rem} }
.pf-others{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.25rem}
.pf-others a{text-decoration:none; color:var(--pf-ink); display:grid; gap:.6rem}
.pf-others img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; border-radius:var(--pf-radius); background:var(--pf-rule)}
.pf-others strong{font:400 1.125rem/1.25 var(--pf-serif); color:var(--pf-ink)}
.pf-others span{font-size:.8125rem; line-height:1.45; color:var(--pf-muted)}
.pf-others a:hover strong{color:var(--pf-brand)}
@media (min-width:64rem){ .pf-others{grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.5rem} }