/* ============================================================
   INSIGHT CHIROPRACTIC — Our Team, 2026-09-17
   Loaded AFTER insight.css, insight-hero.css, insight-contact.css and
   insight-archive.css. Nothing in those four files is changed.
   Every rule here is new and scoped to .team-page, .tgroup or .tcard.

   Body class is team-page, NOT archive-page: the archive body copy is
   Poppins and on this page the bios stay in Open Sans. The archive header
   and the archive hero are scoped to .masthead--arc and .c-intro--arc, so
   they arrive on this page without the archive body class.

   CARLOS: the Team Members CPT feeds this. One card template, two groups.
   ============================================================ */

/* the header is the shared one now (116px); no page-level override */

/* ---- group headings · Cinzel, modest, each with a rule to the rail edge ---- */
.tgroup + .tgroup{margin-top:clamp(64px,7.5vw,112px)}
.tgroup__h{display:flex;align-items:center;gap:clamp(16px,2vw,26px);
  font-size:clamp(21px,2.1vw,27px);letter-spacing:.03em;margin:0 0 clamp(26px,3vw,40px)}
.tgroup__h::after{content:"";flex:1 1 auto;height:1px;background:var(--hairline-strong)}
/* intro paragraph under the breadcrumb, built like the Treatments intro, Open Sans */
.team-intro{padding-block:clamp(28px,3.2vw,44px) 0}
.team-intro .lede{font-family:var(--text);max-width:none;margin:0 0 1.1em;font-size:16px;line-height:1.72;color:var(--body)}
.team-intro .lede:last-child{margin-bottom:0}
.team-intro + .section{padding-top:clamp(30px,3.4vw,48px)}

.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,52px)}

/* ---- the card · no box, no border, no shadow ---- */
.tcard{display:flex;flex-direction:column;min-width:0;
  scroll-margin-top:calc(var(--nav-h) + 28px)}
.tcard__body{flex:1 1 auto;min-width:0}

/* ---- the portrait frame ----
   All six sit in the same 4:5 frame on one warm ground sampled from the
   Ohlson backdrop, lighter behind the head and falling off at the edges.
   The photograph is placed by --z (its height as a multiple of the frame
   height) and --l / --t (its top-left corner, % of the frame). Nothing is
   ever stretched: width stays auto. Heads come to one size and the eyes
   land on one line across each row.
   GARY: the ground is already here, so the plain-ground cut-outs drop
   straight in as transparent PNGs with no other change. */
.tcard__frame{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:10px;
  background:radial-gradient(92% 72% at 50% 31%,#F4E7D6 0%,#EEDDC9 54%,#E4D3BA 100%)}
.tcard__frame img{position:absolute;display:block;background:none;max-width:none;
  width:auto;height:calc(var(--z,1) * 100%);left:var(--l,0);top:var(--t,0)}
/* Gary, 9/18: Dr. Cox faces left and sits at the left of the row, so he looks off the
   page. Mirrored on his instruction so he looks into the row.
   KNOWN COST, flagged and accepted: he is in the black Insight polo, so the embroidered
   wordmark on his chest and his name badge both render backwards. The only real fix is a
   frame where he already faces right. CARLOS: do not retouch the embroidery. */
.tcard__frame--flip img{transform:scaleX(-1)}

/* ---- name, role, bio ---- */
.tcard h3{margin:22px 0 3px;font-size:clamp(20px,1.7vw,23px);line-height:1.18;
  letter-spacing:.02em;text-wrap:balance}
.tcard .role{font-family:var(--text);font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text);margin:0 0 14px;max-width:none}
.tcard p{font-size:15.5px;line-height:1.68;color:var(--body);max-width:none;margin:0 0 .95em}
.tcard__body>p:last-child{margin-bottom:0}
/* bios are off the page (Gary, 9/18), so the role is often the last line in the body.
   Drop its trailing space so the card does not carry a hole under the title. */
.tcard__body>.role:last-child{margin-bottom:0}

/* ---- actions · one line at the foot of the card, both actions on it: the button
   first, Read more beside it on the button's centerline. Read more used to strand
   as its own line inside the bio, which read as two orphaned rows.
   .tcard__body flexes, so this line is shared across the row however long each
   bio runs. CARLOS: BB button module plus a text link in one flex row. ---- */
.tcard__actions{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:clamp(18px,1.8vw,26px);row-gap:12px;margin:24px 0 0}
.tcard__actions .btn{display:inline-flex;align-items:center;gap:10px;
  min-height:44px;width:auto}
/* Gary, 9/18: a little colour on the card buttons. The gold border and gold label keep
   them outline buttons, so they stay quieter than the gold-filled Book Now in the header.
   #7A6644 is the gold that clears 4.5:1 as text on paper (5.20:1); #867250 is the gold
   that clears it as a border (4.37:1). Hover fills with the brand gold under a white
   label, per Gary 9/18: no dark label on the gold. Never #A7916C as text on paper, 2.87:1. */
.tcard__actions .btn--ghost{color:#7A6644;border-color:#867250}
.tcard__actions .btn--ghost:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.tcard__actions .btn span{display:inline-block;transition:transform .2s ease}
.tcard__actions .btn:hover span{transform:translateX(3px)}

/* read more · a quiet text link, not a second button: body font, body size, ink with
   a thin gold underline. #867250 is the gold that clears 4.5:1 on paper. */
.tcard__more{font-family:var(--text);font-size:15.5px;line-height:1.68;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:#867250;transition:text-decoration-color .18s ease}
.tcard__more:hover{text-decoration-color:var(--ink)}

/* ---- deep link · the card lands clear of the fixed header and its frame
   shows a thin ring that fades. Under reduced motion the ring just stays. ---- */
@keyframes tring{0%,64%{box-shadow:inset 0 0 0 2px #867250}
  100%{box-shadow:inset 0 0 0 2px rgba(134,114,80,0)}}
.tcard:target .tcard__frame{animation:tring 3.4s ease forwards}

/* ---- scroll reveal · a short rise with a stagger down each row ---- */
.js .tcard{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.js .tcard.is-in{opacity:1;transform:none}
.tcard:nth-child(2){transition-delay:.09s}
.tcard:nth-child(3){transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  .js .tcard{opacity:1;transform:none;transition:none}
  .tcard__more,.tcard__actions .btn span{transition:none}
  .tcard:target .tcard__frame{animation:none;box-shadow:inset 0 0 0 2px #867250}
}

/* ---- between phone and desktop · one person per row, portrait on the left ---- */
@media (max-width:1000px){
  .tgrid{grid-template-columns:1fr;gap:clamp(30px,4vw,44px)}
}
@media (min-width:621px) and (max-width:1000px){
  .tcard{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);
    column-gap:clamp(24px,3.2vw,40px);align-items:start}
  .tcard__frame{grid-row:1 / 3}
  .tcard h3{margin-top:0}
  .tcard__actions{margin-top:16px}
  .tcard:nth-child(n){transition-delay:0s}
}
@media (max-width:620px){
  .tgroup__h{font-size:20px}
  .tcard__actions{flex-direction:column;align-items:stretch;row-gap:14px}
  .tcard__actions .btn{width:100%;justify-content:center}
  .tcard__more{text-align:center}
  .tcard:nth-child(n){transition-delay:0s}
}