/* FITCOM COACH DIRECTORY · /our-coaches (Kelvin signed 2026-10-11)
   Design: 99_Inbox/chatgpt-out/fitcom/2026-10-11-our-coaches-hifi.png
   Roster + filters come from inc/coaches.php (FC_COACH_DIR, FC_STUDIOS). */
.cd{ background:#fff; color:#262626; padding:clamp(36px,5vw,72px) 0 clamp(48px,6vw,96px); }
.cd .fc-wrap{ max-width:1200px; }
.cd-label{ font-size:14px; font-weight:600; color:#F6921E; margin:0; }
.cd-h1{ font-family:var(--font-head); font-size:clamp(32px,3.6vw,50px); line-height:1.08; font-weight:700; letter-spacing:-.02em; margin:8px 0 0; color:#262626; }
.cd-lead{ font-size:17px; color:#58595B; margin:12px 0 0; max-width:40em; }

/* pill dropdown filters + round clear button */
.cd-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:28px 0 28px; }
.cd-pill{ position:relative; display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 44px 0 18px;
  border:1.5px solid #262626; border-radius:999px; background:#fff; color:#262626; }
.cd-pill svg.cd-ico{ width:18px; height:18px; flex:none; }
.cd-pill svg.cd-chev{ position:absolute; right:16px; width:16px; height:16px; pointer-events:none; }
.cd-pill select{ appearance:none; -webkit-appearance:none; border:0; background:transparent; font:inherit; font-size:15px; font-weight:500;
  color:inherit; cursor:pointer; padding:0; min-width:86px; outline:none; }
.cd-pill:focus-within{ box-shadow:0 0 0 3px rgba(246,146,30,.35); }
.cd-pill.is-set{ border-color:#F6921E; }
.cd-clear{ width:48px; height:48px; border-radius:50%; border:1.5px solid #262626; background:#fff; color:#262626; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0; }
.cd-clear svg{ width:16px; height:16px; }
.cd-clear:hover{ background:#262626; color:#fff; }
.cd-clear[disabled]{ opacity:.35; cursor:default; background:#fff; color:#262626; }

/* photo-led cards, name over the photo */
.cd-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.cd-grid li[hidden]{ display:none; }
.cd-card{ position:relative; display:block; aspect-ratio:4/5; border-radius:20px; overflow:hidden; background:#EFF0F0; color:#fff; text-decoration:none; }
.cd-card img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; transition:transform .6s ease; }
a.cd-card:hover img{ transform:scale(1.04); }
.cd-card::after{ content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0)); pointer-events:none; }
.cd-initial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:72px; font-weight:700; color:#A5A7AA; }
.cd-info{ position:absolute; left:20px; right:72px; bottom:18px; z-index:1; }
.cd-name{ display:block; font-family:var(--font-head); font-size:24px; line-height:1.15; font-weight:700; }
.cd-meta{ display:block; font-size:14px; margin-top:4px; opacity:.92; }
.cd-arrow{ position:absolute; right:18px; bottom:18px; z-index:1; width:40px; height:40px; border-radius:50%; background:#fff; color:#262626;
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s; }
.cd-arrow svg{ width:18px; height:18px; }
a.cd-card:hover .cd-arrow{ background:#F6921E; color:#fff; }
.cd-empty{ color:#808083; padding:24px 0; }

/* coaching values */
.cd-values{ background:#EFF0F0; padding:clamp(44px,5vw,80px) 0; }
.cd-values .fc-wrap{ max-width:1200px; }
.cd-values h2{ font-family:var(--font-head); font-size:clamp(26px,2.6vw,36px); font-weight:700; margin:0 0 28px; color:#262626; letter-spacing:-.01em; }
.cd-values ol{ display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:0; padding:0; counter-reset:v; }
.cd-values li{ padding:0 24px; counter-increment:v; }
.cd-values li:first-child{ padding-left:0; }
.cd-values li + li{ border-left:1px solid #CFD1D2; }
.cd-values li::before{ content:counter(v, decimal-leading-zero); display:block; font-size:14px; font-weight:700; color:#F6921E; margin-bottom:10px; }
.cd-values h3{ font-size:17px; line-height:1.3; font-weight:700; margin:0 0 8px; color:#262626; }
.cd-values p{ font-size:14.5px; line-height:1.6; color:#58595B; margin:0; }

@media (max-width:900px){
  .cd-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cd-values ol{ grid-template-columns:1fr 1fr; gap:28px 0; } .cd-values li:nth-child(3){ border-left:0; padding-left:0; }
}
@media (max-width:640px){
  .cd-filters{ gap:8px; flex-wrap:nowrap; }
  .cd-pill{ height:44px; padding:0 34px 0 14px; gap:8px; flex:1 1 0; min-width:0; }
  .cd-pill select{ min-width:0; width:100%; font-size:14px; }
  .cd-pill svg.cd-chev{ right:12px; }
  .cd-clear{ width:44px; height:44px; flex:none; }
  .cd-grid{ gap:10px; }
  .cd-card{ border-radius:16px; }
  .cd-info{ left:12px; right:48px; bottom:12px; }
  .cd-name{ font-size:17px; } .cd-meta{ font-size:12px; }
  .cd-arrow{ width:32px; height:32px; right:10px; bottom:10px; } .cd-arrow svg{ width:15px; height:15px; }
  .cd-values ol{ grid-template-columns:1fr; } .cd-values li, .cd-values li + li{ border-left:0; padding:18px 0; border-top:1px solid #CFD1D2; }
  .cd-values li:first-child{ border-top:0; padding-top:0; }
}