/* ============================================================
   Rockwell Health — "Providers" page styles
   Adds ONLY this page's section styles on top of the shared
   editorial system (../style.css owns tokens, header, footer,
   buttons, .ed-head, .ed-eyebrow, .ed-final, utilities).
   Page sub-prefix: ed-pr-
   ============================================================ */

/* ============================================================
   1 · Page intro — editorial, asymmetric (copy + a short ruled
   facts list). Lives on cream paper, reads as a section head.
   ============================================================ */
.ed-pr-intro{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 64%, var(--paper-2) 100%);
  border-bottom:1px solid var(--line);
}
.ed-pr-intro-in{
  display:grid; grid-template-columns:1.18fr .82fr;
  gap:clamp(34px,5vw,80px); align-items:center;
  padding-block:clamp(52px,7.5vw,104px);
}
.ed-pr-intro-copy{ max-width:38ch; }
.ed-pr-intro h1{
  font-size:clamp(2.4rem,4.6vw,3.9rem);
  line-height:1.04; letter-spacing:-.026em; color:var(--navy);
}
.ed-pr-intro h1 em{ font-style:italic; font-weight:600; color:var(--red); }
.ed-pr-intro-lede{
  margin-top:24px; max-width:50ch;
  font-size:clamp(1.08rem,1.3vw,1.24rem);
  line-height:1.62; color:var(--body-2);
}
.ed-pr-intro-cta{
  margin-top:36px;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:18px clamp(20px,2.4vw,30px);
}

/* ruled facts column — quiet, supports the intro without a photo;
   echoes the footer's ruled label language */
.ed-pr-intro-facts{
  margin:0; justify-self:end; width:100%; max-width:380px;
  border-top:1px solid var(--line-2);
}
.ed-pr-fact{
  padding:clamp(18px,1.9vw,24px) 0;
  border-bottom:1px solid var(--line);
}
.ed-pr-fact dt{
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy);
  display:flex; align-items:center; gap:9px;
}
.ed-pr-fact dt::before{
  content:""; width:7px; height:7px; border-radius:var(--r-pill);
  background:var(--red); flex:none;
}
.ed-pr-fact dd{
  margin:9px 0 0; max-width:40ch;
  font-size:.97rem; line-height:1.5; color:var(--body-2);
}

/* ============================================================
   2 + 3 · Roster — an editorial provider directory.
   Each provider is a tidy, uniform entry: one small square frame
   (natural color), a confident name lockup, and a one-line focus.
   The aim is a directory that reads as art-directed, not a wall
   of generic contact cards.
   ============================================================ */
.ed-pr-roster{ padding-block:var(--sec); background:var(--paper); }
.ed-pr-roster--spec{
  background:var(--paper-2);
  border-top:1px solid var(--line);
}

.ed-pr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(316px,1fr));
  gap:clamp(18px,2vw,28px);
}

/* Specialty is a small, deliberate set (two providers): a fixed
   two-up keeps the cards generous instead of letting auto-fill
   squeeze them into a pinched, single-word-per-line column. */
.ed-pr-grid--spec{
  grid-template-columns:repeat(2, minmax(0,1fr));
  max-width:780px;
}

.ed-pr-card{
  position:relative;
  display:flex; align-items:center;
  gap:clamp(18px,1.7vw,24px);
  padding:clamp(18px,1.8vw,24px);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform var(--med) var(--ease),
             box-shadow var(--med) var(--ease),
             border-color var(--med) var(--ease);
}
/* a hairline accent that draws on hover/focus from the brand red —
   articulates the lockup as a deliberate set, never a static stripe */
.ed-pr-card::after{
  content:""; position:absolute; left:clamp(18px,1.8vw,24px); right:auto;
  bottom:0; height:2px; width:0;
  background:var(--red); border-radius:var(--r-pill);
  transition:width var(--med) var(--ease);
}
.ed-pr-card:hover{
  transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2);
}
.ed-pr-card:hover::after{ width:34px; }
/* linked card (sample: Tinea White -> profile) */
.ed-pr-card-a{
  display:flex; align-items:center; gap:clamp(18px,1.7vw,24px);
  width:100%; color:inherit; text-decoration:none;
}
.ed-pr-card-cue{
  margin-top:12px;
  display:inline-flex; align-items:center; gap:.4em;
  font-family:"Figtree",sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.04em; color:var(--red-ink);
}
.ed-pr-card-cue svg{ width:1.05em; height:1.05em; transition:transform var(--fast) var(--ease); }
.ed-pr-card--linked:hover .ed-pr-card-cue svg{ transform:translateX(3px); }

/* --- The portrait treatment ---------------------------------
   Headshots are real but low-resolution and vary in source crop
   and lighting. We render them SMALL + UNIFORM under ONE editorial
   treatment: one square frame on a LIGHT mat, a per-portrait crop
   tuned to the source, and the site's keyline language, in fully
   NATURAL COLOR (no monochrome / no navy duotone), so the people
   stay warm and human while the set still reads as tidy.
   ------------------------------------------------------------ */
.ed-pr-portrait{
  position:relative; flex:none; margin:0;
  width:clamp(120px,11.5vw,138px); aspect-ratio:1;
  border-radius:var(--r); overflow:hidden;
  /* light, warm mat so any letterboxing reads as paper, not a dark void */
  background:linear-gradient(160deg, #fffdf9 0%, #f1e9dc 100%);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
}
.ed-pr-portrait img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  /* natural color, gentle normalization only (no monochrome / no tint) */
  filter:saturate(1.04) contrast(1.03);
}
/* per-portrait crop tuning — the sources are framed differently, so
   a single object-position clipped some faces. Two tuned positions
   keep every face centered and the set visually uniform. */
.ed-pr-portrait img.ed-pr-pos-a{ object-position:center 24%; }
.ed-pr-portrait img.ed-pr-pos-b{ object-position:center 32%; }
/* a faint top sheen + the site's inner keyline, so the tile reads as
   framed glass, not a flat crop. No color cast over the photo. */
.ed-pr-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);
}

/* Coley — no headshot: the brand illustration avatar on a light
   ground, in natural color, sharing the EXACT frame/size/radius so
   it sits cleanly in the set (never a monogram tile). */
.ed-pr-portrait--illus{
  background:linear-gradient(160deg, #fffefb 0%, #efe7da 100%);
}
.ed-pr-portrait--illus img{ filter:none; object-position:center top; }

.ed-pr-card-body{ min-width:0; }
.ed-pr-name{
  font-size:clamp(1.2rem,1.5vw,1.42rem); font-weight:600;
  letter-spacing:-.014em; line-height:1.14; color:var(--navy);
  text-wrap:balance;
}
/* credentials — a fine ruled line + small caps, the page's
   "department label" applied to a person */
.ed-pr-creds{
  margin-top:8px;
  display:flex; align-items:center; gap:.7em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-ink);
}
.ed-pr-creds::before{
  content:""; width:18px; height:1.5px; background:var(--red);
  border-radius:2px; flex:none;
}
.ed-pr-focus{
  margin-top:13px; max-width:30ch;
  font-size:.99rem; line-height:1.46; color:var(--body);
  text-wrap:pretty;
}
/* a small ruled meta line for an extra fact (language / role),
   set as an icon + label so it reads as a deliberate marker */
.ed-pr-note{
  margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line);
  display:inline-flex; align-items:center; gap:.55em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.82rem; line-height:1.3; letter-spacing:.005em;
  color:var(--body-2);
}
.ed-pr-note svg{ width:16px; height:16px; color:var(--red-ink); flex:none; }
.ed-pr-note--role{ color:var(--navy); }

/* Primary care leads the page: a touch more presence than specialty */
.ed-pr-grid--lead{
  grid-template-columns:repeat(auto-fill, minmax(330px,1fr));
}
.ed-pr-grid--lead .ed-pr-card{ padding:clamp(20px,1.9vw,26px); }
.ed-pr-grid--lead .ed-pr-portrait{ width:clamp(128px,12.5vw,150px); }

/* gentle staggered rise, gated exactly like the shared sheet's
   reveals so headless / reduced-motion never ship blank */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ed-pr-card{
      animation:ed-rise .7s var(--ease) both;
      animation-timeline:view(); animation-range:entry 2% cover 24%;
    }
  }
}

/* ============================================================
   4 · Team approach — a LIGHT editorial panel (deliberately NOT
   navy: the page already closes on navy, and two stacked navy
   bands read as navy fatigue. This keeps the closer the single
   dark moment, with a confident cream panel before it).
   ============================================================ */
.ed-pr-band{
  padding-block:var(--sec);
  background:var(--paper);
  border-top:1px solid var(--line);
}
.ed-pr-band-in{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,84px); align-items:start;
}
.ed-pr-band-copy{ max-width:42ch; }
.ed-pr-band-copy h2{
  color:var(--navy);
  font-size:clamp(2.1rem,3.6vw,3rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.07;
}
.ed-pr-band-lede{
  margin-top:20px; max-width:46ch;
  font-size:clamp(1.05rem,1.2vw,1.2rem); line-height:1.62; color:var(--body-2);
}

.ed-pr-band-points{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line-2);
}
.ed-pr-band-point{
  display:flex; align-items:flex-start; gap:clamp(16px,1.6vw,22px);
  padding:clamp(22px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line);
}
.ed-pr-band-ic{
  display:grid; place-items:center; flex:none;
  width:46px; height:46px; border-radius:var(--r-sm);
  background:var(--card); color:var(--red-ink);
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
}
.ed-pr-band-ic svg{ width:23px; height:23px; }
.ed-pr-band-point h3{
  color:var(--navy);
  font-size:clamp(1.16rem,1.4vw,1.32rem); font-weight:600;
  letter-spacing:-.012em; line-height:1.2;
}
.ed-pr-band-point p{
  margin-top:9px; max-width:48ch;
  font-size:.99rem; line-height:1.6; color:var(--body-2);
  text-wrap:pretty;
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ed-pr-band-point{
      animation:ed-rise .7s var(--ease) both;
      animation-timeline:view(); animation-range:entry 2% cover 26%;
    }
    .ed-pr-band-point:nth-child(2){ animation-range:entry 5% cover 29%; }
    .ed-pr-band-point:nth-child(3){ animation-range:entry 8% cover 32%; }
  }
}

/* ============================================================
   Responsive — 1024 (tablet)
   ============================================================ */
@media (max-width:1024px){
  .ed-pr-intro-in{ grid-template-columns:1fr; gap:clamp(30px,5vw,44px); }
  .ed-pr-intro-copy{ max-width:none; }
  .ed-pr-intro-lede{ max-width:62ch; }
  .ed-pr-intro-facts{
    justify-self:stretch; max-width:none;
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line-2);
  }
  .ed-pr-fact{
    padding:clamp(16px,2vw,22px) clamp(18px,2vw,26px) clamp(16px,2vw,22px) 0;
    border-bottom:none;
  }
  .ed-pr-fact + .ed-pr-fact{
    border-left:1px solid var(--line);
    padding-left:clamp(18px,2vw,26px);
  }

  .ed-pr-band-in{ grid-template-columns:1fr; gap:clamp(28px,4vw,40px); }
  .ed-pr-band-copy{ max-width:none; }
  .ed-pr-band-lede{ max-width:64ch; }
}

/* ============================================================
   Responsive — 760
   ============================================================ */
@media (max-width:760px){
  /* roster → single readable column of rows. The specialty
     override needs matching specificity to fold to one column too. */
  .ed-pr-grid,
  .ed-pr-grid--lead,
  .ed-pr-grid--spec{ grid-template-columns:1fr; max-width:none; }

  /* facts → stacked ruled rows again */
  .ed-pr-intro-facts{ grid-template-columns:1fr; border-top:1px solid var(--line-2); }
  .ed-pr-fact,
  .ed-pr-fact + .ed-pr-fact{
    border-left:none; padding-inline:0;
    border-bottom:1px solid var(--line);
  }
}

/* ============================================================
   Responsive — 560 (phone / 390 target)
   ============================================================ */
@media (max-width:560px){
  .ed-pr-intro-cta{ gap:16px; }
  .ed-pr-intro-cta .ed-btn{ width:100%; justify-content:center; }

  /* cards keep the row layout but tighten; portraits stay uniform */
  .ed-pr-card,
  .ed-pr-grid--lead .ed-pr-card{ gap:16px; padding:16px; }
  .ed-pr-card::after{ left:16px; }
  .ed-pr-portrait,
  .ed-pr-grid--lead .ed-pr-portrait{ width:104px; }
}

/* ============================================================
   Reduced motion — neutralize this page's reveals defensively
   (shared sheet already disables transitions globally)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ed-pr-card,.ed-pr-band-point{ animation:none; opacity:1; transform:none; }
  .ed-pr-card:hover{ transform:none; }
  .ed-pr-card:hover::after{ width:0; }
}