/* ============================================================
   Rockwell Health — Provider profile (sample: Tinea White)
   Adds ONLY this page's section styles on top of the shared
   editorial system (../../style.css owns :root tokens, header,
   footer, buttons, .ed-eyebrow, .ed-textlink, utilities).
   Page sub-prefix: pp-
   ============================================================ */

/* ============================================================
   1 · Breadcrumb — a quiet ruled strip between the sticky header
   and the hero. Back affordance left, trail right.
   ============================================================ */
.pp-crumb{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.pp-crumb-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px 28px; flex-wrap:wrap;
  padding-block:clamp(16px,1.7vw,22px);
}
.pp-crumb-back{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:"Figtree",sans-serif; font-weight:600; font-size:.94rem;
  color:var(--red-ink); border-radius:var(--r-xs);
  transition:gap var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pp-crumb-back svg{ width:1.1em; height:1.1em; transition:transform var(--fast) var(--ease); }
.pp-crumb-back:hover{ color:var(--navy); gap:.72em; }
.pp-crumb-back:hover svg{ transform:translateX(-3px); }

.pp-crumb-trail{
  display:flex; align-items:center; flex-wrap:wrap;
  font-family:"Figtree",sans-serif; font-size:.84rem;
  letter-spacing:.02em; color:var(--body-2);
}
.pp-crumb-trail li{ display:inline-flex; align-items:center; }
.pp-crumb-trail li + li::before{
  content:""; width:5px; height:5px; margin:0 .85em;
  border-top:1.5px solid var(--line-3); border-right:1.5px solid var(--line-3);
  transform:rotate(45deg); flex:none;
}
.pp-crumb-trail a{ color:var(--body-2); transition:color var(--fast) var(--ease); border-radius:var(--r-xs); }
.pp-crumb-trail a:hover{ color:var(--navy); }
.pp-crumb-trail [aria-current="page"]{ color:var(--navy); font-weight:600; }

/* ============================================================
   2 · Profile hero — asymmetric: a contained, framed natural-color
   headshot left, name lockup + lead + CTAs right. Lives on the same
   cream → sand gradient the roster intro uses, so it reads as a
   continuation of the Providers section, not a new world.
   ============================================================ */
.pp-hero{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, var(--paper-2) 100%);
  border-bottom:1px solid var(--line);
}
.pp-hero-in{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(32px,4.4vw,72px); align-items:center;
  padding-block:clamp(48px,6.8vw,96px);
}

/* --- the portrait: source is genuinely low-res, so it is held at a
   contained size on a light, warm mat with the site's keyline. The
   roster's exact natural-color normalization is reused (no grayscale,
   no navy duotone). A faint top sheen reads it as framed glass. --- */
.pp-portrait-col{
  display:flex; flex-direction:column; align-items:center;
  gap:16px; justify-self:start;
}
.pp-portrait{
  position:relative; margin:0;
  width:clamp(208px,22vw,248px); aspect-ratio:1;
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, #fffdf9 0%, #f1e9dc 100%);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-2);
}
.pp-portrait img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 24%;
  /* natural color, gentle normalization only (matches the roster) */
  filter:saturate(1.04) contrast(1.03);
  /* source is ~74px; let the browser smooth the upscale rather than
     hard-edge it, and keep the frame modest so it never looks blown up */
  image-rendering:auto;
}
.pp-portrait::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, transparent 26%);
  box-shadow:inset 0 0 0 1px rgba(40,34,80,.10);
}
.pp-portrait-tag{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--body-2);
}
.pp-portrait-tag svg{ width:15px; height:15px; color:var(--red-ink); flex:none; }

/* --- the copy column --- */
.pp-hero-copy{ min-width:0; max-width:46ch; }
.pp-hero h1{
  font-size:clamp(2.5rem,4.6vw,3.7rem);
  line-height:1.03; letter-spacing:-.026em; color:var(--navy);
}
/* credentials — the roster's ruled small-caps "department label" */
.pp-creds{
  margin-top:16px;
  display:flex; align-items:center; gap:.7em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--red-ink);
}
.pp-creds::before{
  content:""; width:22px; height:1.5px; background:var(--red);
  border-radius:2px; flex:none;
}
.pp-focus{
  margin-top:12px;
  font-family:"Spectral",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.18rem,1.6vw,1.42rem); line-height:1.3;
  letter-spacing:-.01em; color:var(--navy);
}
.pp-lede{
  margin-top:20px; max-width:48ch;
  font-size:clamp(1.06rem,1.25vw,1.2rem);
  line-height:1.62; color:var(--body);
}
.pp-hero-cta{
  margin-top:32px;
  display:flex; flex-wrap:wrap; gap:14px;
}

/* ============================================================
   3 · About + at-a-glance rail — a two-column editorial body.
   Prose + a ruled service list left; a sticky details card right.
   ============================================================ */
.pp-body{ padding-block:var(--sec); background:var(--paper); }
.pp-body-in{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,30%,360px);
  gap:clamp(36px,5vw,76px); align-items:start;
}

.pp-block + .pp-block{ margin-top:clamp(40px,4.6vw,64px); }
.pp-h{
  font-size:clamp(1.7rem,2.7vw,2.3rem); font-weight:600;
  letter-spacing:-.018em; line-height:1.1; color:var(--navy);
}
.pp-prose{
  margin-top:18px; max-width:64ch;
  font-size:clamp(1.04rem,1.15vw,1.14rem); line-height:1.7; color:var(--body);
}
.pp-prose + .pp-prose{ margin-top:18px; }
/* the placeholder marker — clearly secondary, muted + italic */
.pp-prose-note{
  margin-top:22px;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Spectral",serif; font-style:italic;
  font-size:.96rem; line-height:1.4; color:var(--body-2);
}
.pp-prose-note::before{
  content:""; width:18px; height:1.5px; background:var(--line-3);
  border-radius:2px; flex:none;
}

/* areas of care — a ruled list with quiet check marks (no cards) */
.pp-care{
  margin-top:22px;
  border-top:1px solid var(--line-2);
}
.pp-care li{
  display:flex; align-items:center; gap:.85em;
  padding:clamp(13px,1.4vw,17px) 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.01rem,1.1vw,1.1rem); line-height:1.4; color:var(--body);
}
.pp-care-ic{
  display:grid; place-items:center; flex:none;
  width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--card); color:var(--red-ink);
  border:1px solid var(--line-2);
}
.pp-care-ic svg{ width:15px; height:15px; }

/* --- at-a-glance rail --- */
.pp-rail{ position:sticky; top:96px; }
.pp-rail-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:clamp(24px,2.4vw,32px);
}
.pp-rail-h{
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy);
  padding-bottom:14px; border-bottom:1px solid var(--line-2);
}
.pp-glance{ margin:0; }
.pp-glance-row{ padding:clamp(15px,1.5vw,18px) 0; border-bottom:1px solid var(--line); }
.pp-glance-row dt{
  display:flex; align-items:center; gap:.55em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--body-2);
}
.pp-glance-row dt svg{ width:15px; height:15px; color:var(--red-ink); flex:none; }
.pp-glance-row dd{
  margin:8px 0 0; padding-left:calc(15px + .55em);
  font-family:"Spectral",serif; font-weight:500;
  font-size:1.12rem; letter-spacing:-.008em; line-height:1.3; color:var(--navy);
}

.pp-status{
  margin-top:18px;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.92rem; color:var(--body);
}
.pp-status-dot{
  width:9px; height:9px; border-radius:var(--r-pill);
  background:#1f9d57; flex:none;
  box-shadow:0 0 0 3px rgba(31,157,87,.16);
}
.pp-rail-btn{
  margin-top:22px; width:100%; justify-content:center;
}
.pp-rail-link{
  margin-top:16px; font-size:.96rem;
  justify-content:center; width:100%;
}

/* ============================================================
   4 · Closing CTA — light cream/sand closer (NOT navy), echoing
   the homepage .ed-close pattern: copy left, CTAs right, in a
   warm card with the brand keyline.
   ============================================================ */
.pp-close{
  padding-block:clamp(56px,7vw,104px);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.pp-close-in{
  display:grid; grid-template-columns:1.2fr auto;
  align-items:center; gap:clamp(28px,4vw,56px);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:clamp(30px,4vw,56px);
}
.pp-close-rule{
  display:block; width:38px; height:2px; border-radius:2px;
  background:var(--red); margin-bottom:clamp(16px,1.8vw,22px);
}
.pp-close-copy h2{
  font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.06; color:var(--navy);
}
.pp-close-copy p{
  margin-top:14px; max-width:48ch;
  font-size:clamp(1.04rem,1.2vw,1.16rem); line-height:1.58; color:var(--body-2);
}
.pp-close-meet{ margin-top:20px; font-size:.99rem; }
.pp-close-cta{ display:flex; flex-direction:column; gap:14px; }

/* ============================================================
   Responsive — 1024 (tablet)
   ============================================================ */
@media (max-width:1024px){
  /* body → single column; rail drops below the prose, full width */
  .pp-body-in{ grid-template-columns:1fr; gap:clamp(32px,4vw,44px); }
  .pp-rail{ position:static; top:auto; }
  .pp-rail-card{ max-width:520px; }
  .pp-prose,.pp-care{ max-width:none; }

  /* closer stacks */
  .pp-close-in{ grid-template-columns:1fr; gap:clamp(24px,4vw,34px); }
}

/* ============================================================
   Responsive — 720 (hero stacks)
   ============================================================ */
@media (max-width:720px){
  .pp-hero-in{
    grid-template-columns:1fr;
    gap:clamp(26px,5vw,36px);
    justify-items:start;
  }
  .pp-portrait-col{ justify-self:start; }
  .pp-hero-copy{ max-width:none; }
}

/* ============================================================
   Responsive — 560 (phone / 390 target)
   ============================================================ */
@media (max-width:560px){
  .pp-crumb-back{ font-size:.9rem; }

  .pp-hero-cta{ width:100%; }
  .pp-hero-cta .ed-btn{ flex:1 1 auto; justify-content:center; }

  .pp-portrait{ width:clamp(176px,52vw,212px); }

  .pp-close-cta{ width:100%; }
  .pp-close-cta .ed-btn{ width:100%; justify-content:center; }
}

/* ============================================================
   Reduced motion — neutralize this page's hover transitions
   defensively (shared sheet disables transitions globally)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .pp-crumb-back:hover{ gap:.55em; }
  .pp-crumb-back:hover svg{ transform:none; }
}