:root{
  --trainer-gap:16px;
  /* use theme variables so cards & detail follow dark/light mode */
  --trainer-card-bg: color-mix(in oklab, var(--panel) 86%, var(--bg) 14%);
  --trainer-card-border: color-mix(in oklab, var(--border) 78%, transparent 22%);
  --trainer-name-color: var(--text);
  --trainer-detail-bg: color-mix(in oklab, var(--accent) 14%, transparent 0%);
  --trainer-detail-text: var(--text);
  --trainer-focus: var(--accent);
}
.trainers{padding:1rem}
.trainers-grid{display:flex;flex-wrap:wrap;gap:var(--trainer-gap);align-items:flex-start}
.trainer-card{flex:1 1 220px;max-width:320px}
.trainer-card{background:var(--trainer-card-bg);border:1px solid var(--trainer-card-border);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;transition:transform .25s ease, box-shadow .25s ease}
.trainer-media{height:320px;display:flex;align-items:flex-start;justify-content:center;background:linear-gradient(180deg,color-mix(in oklab,var(--panel) 96%,transparent 4%), color-mix(in oklab,var(--panel) 88%,transparent 12%));transition:height .28s ease, transform .28s ease}
.trainer-photo{width:100%;height:100%;object-fit:cover;display:block;transition:transform .28s ease}
.trainer-photo.placeholder{width:64px;height:64px;border-radius:50%;background:color-mix(in oklab,var(--panel) 88%,transparent 12%)}
.trainer-body{padding:0.75rem;min-height:78px;display:flex;flex-direction:column}
.trainer-name{margin:0;font-size:1rem}
.trainer-toggle{all:unset;display:block;width:100%;text-align:left;color:var(--trainer-name-color);font-weight:600;cursor:pointer}
.trainer-courses{margin-top:auto;transition:opacity .18s ease,max-height .28s ease;overflow:hidden;display:block}
.trainer-courses[hidden]{display:none;opacity:0;max-height:0}
.trainer-courses:not([hidden]){display:block;opacity:1;max-height:800px}
/* accessibility focus */
.trainer-toggle:focus{outline:3px solid var(--trainer-focus);outline-offset:2px}

.trainer-card.is-active{z-index:3;transform-origin:center top;transform:scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,0.32);overflow:visible}
/* enlarge the photo visually and nudge it upward so it doesn't push the name/description down */
.trainer-card.is-active .trainer-photo{transform:translateY(-10%) scale(1.06)}
.trainer-card.is-active .trainer-media{overflow:visible}

/* keep trainer-body above the media so the name remains visible */
.trainer-body{position:relative;z-index:2}
.trainer-media{position:relative;z-index:1}

/* Hover / focus visual affordance */
.trainer-card:hover, .trainer-card:focus-within{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 46px rgba(0,0,0,0.38);
}
.trainer-card:hover .trainer-photo, .trainer-card:focus-within .trainer-photo{
  transform: translateY(-8%) scale(1.04);
}

/* Keep hover subtle for active card (don't stack transforms too strongly) */
.trainer-card.is-active:hover, .trainer-card.is-active:focus-within{
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 20px 54px rgba(0,0,0,0.45);
}

@media (prefers-reduced-motion: reduce){
  .trainer-card, .trainer-card .trainer-photo{transition:none !important;transform:none !important}
}

.trainers-grid .trainer-card:not(.is-active){flex:1 1 140px;max-width:180px;opacity:0.95}
.trainers-grid .trainer-card:not(.is-active) .trainer-media{height:220px}
.trainers-grid .trainer-card:not(.is-active) .trainer-photo{transform:scale(0.98);opacity:0.9}

/* On wide screens prefer a single non-wrapping row and enable horizontal scroll if needed
   so enlarging one card doesn't push others to the next line. Keep normal wrapping on small screens. */
@media (min-width: 900px){
  /* Keep cards on a single row; allow vertical overflow so scaled card doesn't get clipped */
  .trainers-grid{flex-wrap:nowrap;overflow-x:hidden;overflow-y:visible;padding-bottom:8px}
  .trainer-card{flex:0 0 170px;min-width:140px;max-width:200px}
  /* active card keeps the same flow width but is visually scaled */
  .trainer-card.is-active{flex:0 0 170px;min-width:140px;max-width:200px}
}

/* Mobile: compact horizontal scroller bar with small portrait cards */
@media (max-width:600px){
  .trainers-grid{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;padding:12px 8px;-webkit-overflow-scrolling:touch}
  .trainer-card{flex:0 0 120px;min-width:110px;max-width:140px;border-radius:8px}
  .trainer-media{height:140px}
  .trainer-card.is-active .trainer-media{height:160px}
  .trainer-body{padding:8px;min-height:48px;text-align:center}
  .trainer-name{font-size:.95rem}
  /* ensure the shared detail sits below the scroller */
  .trainers-detail{margin-top:12px}
}

/* Shared detail area below the grid where the selected coach courses will appear */
.trainers-detail{margin-top:24px;padding:16px;border-radius:8px;background:var(--trainer-detail-bg);color:var(--trainer-detail-text);min-height:64px}
.trainers-detail[hidden]{display:none}

.trainer-detail-name{margin:0 0 8px 0;font-size:1.25rem}
.trainer-detail-desc{color:var(--trainer-detail-text);margin-bottom:8px}
.trainer-detail-sep{border:none;border-top:1px solid color-mix(in oklab,var(--border) 40%,transparent 60%);margin:8px 0}
.trainer-detail-courses{margin-top:8px}