/* ==========================================================================
   Advanced Health Chiropractic - meet the team
   Loaded after site.css on /meet-our-team/. The hero, split, proof row,
   reviews and booking band are site.css as built; this file adds the hero's
   framing for its photo, the jump row and the four profiles.
   ========================================================================== */

/* the reception photo: people right of centre, the dark desk front under
   the copy. A phone shows well under its width, so it centres on the team. */
.hero--team .hero__bg img{object-position:64% 50%}
@media (orientation:landscape){ .hero--team .hero__bg img{object-position:50% 60%} }
/* the wall's lettering sits behind the headline in a landscape frame, so a
   wash from the left quiets it; the people on the right stay clear */
@media (orientation:landscape){
  .hero--team .hero__scrim{background:
    linear-gradient(to right,rgba(38,41,31,.72) 0%,rgba(38,41,31,.5) 30%,rgba(38,41,31,.12) 55%,transparent 70%),
    linear-gradient(to top,rgba(38,41,31,.82) 0%,rgba(38,41,31,.5) 25%,transparent 55%),
    linear-gradient(to bottom,rgba(38,41,31,.6) 0%,transparent 30%)}
}

/* ---------- our story ---------------------------------------------------- */
.story .split__media img{object-position:50% 60%}
/* one story in one voice: a single size and colour throughout */
.story__text{margin-top:var(--s5);max-width:56ch}
.story__text p{font-size:17px;line-height:27px;color:var(--ink)}
@media (min-width:768px){ .story__text p{font-size:18px;line-height:29px} }
.story__text p+p{margin-top:var(--s4)}
.story .proof{margin-top:var(--s7)}
.story .proof li{border-top:3px solid var(--ink)}

/* ---------- the chiropractors -------------------------------------------- */
.chiros .sec-intro{margin-top:var(--s5);max-width:64ch}
/* four round portraits that jump to each profile - the round rule the
   homepage keeps for portraits inside a list */
.jump{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);margin-top:var(--s6)}
.jump a{display:flex;align-items:center;gap:var(--s3);text-decoration:none;font-size:16px;letter-spacing:-.02em}
.jump img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.jump a span{border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color var(--t)}
.jump a:hover span{border-color:var(--ink)}

.profile{display:grid;gap:var(--s7);padding-block:var(--s8);border-top:1px solid var(--line-strong)}
.profile:first-of-type{margin-top:var(--s7)}
.profile__media{position:relative;padding-bottom:18%}
.profile__head img{width:78%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
/* the action shot overlaps the headshot's lower corner: the person, then
   the person at work */
.profile__work{position:absolute;right:0;bottom:0;width:48%;border:6px solid var(--surface-cream);overflow:hidden}
.profile__work img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* the pair follows the pointer a little (site.js sets --mx and --my from
   -0.5 to 0.5): the small shot moves with it and tilts, the headshot eases
   the other way. The transition smooths every move and the return. */
.profile__media{--mx:0;--my:0}
/* two classes, so it outranks the shared .anim .rv-img rule, whose transition
   list is clip-path only and would otherwise make the photo snap; clip-path
   stays in the list so the scroll-in reveal still runs */
.profile__media .profile__work{transition:clip-path 1s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);
  transform:translate(calc(var(--mx) * 18px),calc(var(--my) * 14px)) rotate(calc(var(--mx) * 3deg))}
.profile__head{overflow:hidden}
/* specific enough to win over the shared .rv-img reveal, which resets img transforms */
.profile__media .profile__head img{transition:transform .8s var(--ease);
  transform:translate(calc(var(--mx) * -8px),calc(var(--my) * -6px)) scale(1.03)}
.profile__media.is-tilting .profile__work{box-shadow:0 16px 36px rgba(38,41,31,.16)}
@media (prefers-reduced-motion:reduce){
  .profile__work,.profile__work img,.profile__head img{transition:none;transform:none!important}
}
.profile .overline{color:var(--lime-text)}
.profile h2{margin-top:var(--s3)}
/* the intro reads in the same voice as the story above it */
.profile__intro{margin-top:var(--s4);max-width:56ch;font-size:17px;line-height:27px;color:var(--ink)}
@media (min-width:768px){ .profile__intro{font-size:18px;line-height:29px} }
/* their own words: a pull-quote a step above body size, held off a fine
   ink rule, rather than a display-size block that outweighs the name */
.profile__quote{margin:var(--s6) 0 0;padding-left:var(--s5);border-left:2px solid var(--ink);max-width:54ch}
.profile__quote figcaption{color:var(--ink-muted)}
.profile__quote blockquote{margin:var(--s3) 0 0}
.profile__quote blockquote p{font-weight:300;font-size:19px;line-height:30px;letter-spacing:-.012em;color:var(--ink)}
@media (min-width:768px){ .profile__quote blockquote p{font-size:21px;line-height:32px} }
.profile__quote blockquote p+p{margin-top:var(--s3)}
.profile__facts{margin-top:var(--s6);border-top:1px solid var(--line-strong)}
.profile__facts>div{display:grid;gap:var(--s2);padding-block:var(--s4);border-bottom:1px solid var(--line-strong)}
@media (min-width:600px){ .profile__facts>div{grid-template-columns:160px 1fr;gap:var(--s5)} }
.profile__facts dt{color:var(--ink-muted);padding-top:2px}
.profile__facts dd{margin:0;font-size:16px;line-height:24px}
.profile__facts dd p+p{margin-top:var(--s2)}
.profile__facts .dot-link{margin-top:var(--s2)}
.profile__close{margin-top:var(--s5);color:var(--ink-muted)}
.profile__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s6)}
@media (max-width:767px){ .profile__cta .btn{width:100%} }
@media (min-width:1024px){
  .profile{grid-template-columns:5fr 7fr;column-gap:var(--s9);align-items:start}
  /* flipped, the photo moves right and the columns mirror with it, so every
     chiropractor's photos are the same size */
  .profile--flip{grid-template-columns:7fr 5fr}
  .profile--flip .profile__media{order:2}
  @media (min-height:760px){
    .profile__media{position:sticky;top:calc(var(--promo-h) + var(--nav-h) + var(--s6))}
  }
}