/* A /coachok oldal stílusai. A könyvtárat és a coach-profilokat is a
   web/functions/coachok/*.js rendereli szerveroldalon, ez a fájl adja
   mindkettőhöz a megjelenést. A style.css után jön: annak :root
   változóira épít. A site csak sötét, ezért nincs világos ág. */

/* A teljes oldal (style.css) csak sötét, ezért ez a blokk is az:
   nincs prefers-color-scheme elágazás, világos módú gépen sem
   jelenhetnek meg fehér kártyák a sötét héjban. */
#coaches {
  --m-panel: #131316;
  --m-border: #26262b;
  --m-text: #fafafa;
  --m-muted: #a1a1aa;
  --m-faint: #71717a;
  --m-accent: var(--emerald-400);
  --m-weak: rgba(52,211,153,0.12);
  --m-ring: rgba(52,211,153,0.30);
  --m-shadow: 0 18px 40px -24px rgba(0,0,0,0.8);
}

.qa-muted { opacity: 0.7; }
#coaches .m-sub { color: var(--m-muted); max-width: 56ch; }

/* Avatars - monogram tiles double as the real-photo fallback */
.m-avatar {
  flex: 0 0 auto; border-radius: 16px; display: grid; place-items: center; overflow: hidden;
  font-weight: 700; color: #fff;
  background: linear-gradient(150deg, hsl(var(--h,150) 55% 52%), hsl(calc(var(--h,150) + 26) 52% 38%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); user-select: none;
}
.m-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-avatar--sm { width: 60px; height: 60px; font-size: 20px; border-radius: 14px; }
.m-avatar--lg { width: 104px; height: 104px; font-size: 34px; border-radius: 20px; }
.m-avatar--xl { width: 168px; height: 168px; font-size: 56px; border-radius: 28px; }

.m-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.m-badge--lead { color: var(--m-accent); background: var(--m-weak); border: 1px solid var(--m-ring); }
.m-badge--lead::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-accent); box-shadow: 0 0 8px var(--m-accent); }
.m-badge--coach { color: var(--m-faint); background: var(--m-weak); border: 1px solid var(--m-border); }

#coaches .m-name { margin: 0; font-weight: 750; letter-spacing: -0.01em; color: var(--m-text); }
#coaches .m-role { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--m-accent); }

/* Featured lead coach */
.m-featured { margin: 22px 0 6px; }
.m-lead-card {
  display: flex; gap: 22px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer;
  padding: 22px; border-radius: 20px; font: inherit; color: inherit;
  background: linear-gradient(180deg, var(--m-weak), transparent 42%), var(--m-panel);
  border: 1px solid var(--m-border); box-shadow: 0 0 0 1px var(--m-ring), var(--m-shadow);
  transition: transform 140ms ease;
}
.m-lead-card:hover { transform: translateY(-2px); }
.m-lead-card .m-name { font-size: 24px; margin-top: 12px; }

/* Row label */
.m-rowlabel { display: flex; align-items: center; gap: 14px; margin: 34px 0 16px; }
.m-rowlabel span { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-faint); white-space: nowrap; }
.m-rowlabel::after { content: ""; flex: 1; height: 1px; background: var(--m-border); }

/* Grid */
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.m-card {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 18px; border-radius: 16px; background: var(--m-panel); border: 1px solid var(--m-border);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.m-card:hover { transform: translateY(-2px); border-color: var(--m-ring); box-shadow: var(--m-shadow); }
.m-card-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.m-card .m-name { font-size: 17px; font-weight: 700; }
.m-card .m-role { font-size: 12px; }

/* Bio excerpt (renders sanitized HTML, clamped) */
.m-bio { color: var(--m-muted); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.m-bio--lead { -webkit-line-clamp: 4; margin-top: 12px; max-width: 60ch; font-size: 15px; }
.m-bio :is(p, ul, ol) { margin: 0; }
.m-bio strong, .m-bio b { color: var(--m-text); font-weight: 650; }

/* Detail view */
.m-back { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 24px; background: none; border: none; color: var(--m-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0; }
.m-back:hover { color: var(--m-text); }
.m-detail-head { display: flex; gap: 26px; align-items: center; margin-bottom: 26px; }
.m-detail-head .m-name { font-size: 30px; margin: 10px 0 6px; }
.m-bio-full { color: var(--m-muted); font-size: 16px; line-height: 1.72; max-width: 65ch; }
.m-bio-full p { margin: 0 0 14px; }
.m-bio-full p:last-child { margin-bottom: 0; }
.m-bio-full ul, .m-bio-full ol { margin: 0 0 14px; padding-left: 22px; }
.m-bio-full li { margin: 4px 0; }
.m-bio-full strong, .m-bio-full b { color: var(--m-text); font-weight: 650; }
.m-bio-full a { color: var(--m-accent); text-decoration: underline; }
.m-site { margin: 20px 0 0; font-size: 15px; }
/* Website and e-mail are both .m-site; when a coach gives both, the second
   line tucks under the first instead of opening another 20px gap. */
.m-site + .m-site { margin-top: 6px; }
.m-site .m-site-ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: 8px; color: var(--m-muted); }
.m-site a { color: var(--m-accent); text-decoration: none; border-bottom: 1px solid var(--m-ring); }
.m-site a:hover { border-bottom-color: var(--m-accent); }
.m-detail-cta { margin-top: 28px; padding: 16px 18px; border-radius: 14px; background: var(--m-weak); border: 1px solid var(--m-ring); color: var(--m-text); font-size: 14.5px; }
.m-detail-cta b { color: var(--m-accent); }

.m-foot { margin-top: 34px; }
/* Was an unstyled anchor, so it rendered in the browser's default blue -
   the one element on the page ignoring the palette. */
.m-foot a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--m-weak); border: 1px solid var(--m-ring);
  color: var(--m-accent); font-size: 14.5px; font-weight: 650;
  text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease;
}
.m-foot a:hover { background: var(--m-ring); border-color: var(--m-accent); }
.m-foot a:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 3px; }

.m-card:focus-visible, .m-lead-card:focus-visible, .m-back:focus-visible {
  outline: 2px solid var(--m-accent); outline-offset: 3px; border-radius: 12px;
}
@media (max-width: 560px) {
  .m-lead-card, .m-detail-head { flex-direction: column; align-items: flex-start; }
  .m-avatar--xl { width: 120px; height: 120px; font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { .m-card, .m-lead-card { transition: none; } }

/* A szerveroldalon renderelt könyvtárban a kártyák <a> elemek, nem <button>-ök:
   a gombra a kereső nem tud rákattintani, tehát a profilok bejárhatatlanok
   lennének. A méret- és színszabályok fentebb már `color: inherit`-et adnak,
   az aláhúzást viszont az <a> alapértelmezése hozza magával - itt vesszük le.
   A .m-back ugyanezért lett link a profiloldalon. */
.m-lead-card, .m-card, .m-back { text-decoration: none; }
.m-lead-card:focus-visible, .m-card:focus-visible {
  outline: 2px solid var(--m-ring); outline-offset: 3px;
}