/* ================================================================
   BCA Team Gallery – Click Cards + Lightbox
   Version 2.0 | BCA Business Coaching Akademie
   Design-Tokens aus BCA Custom CSS übernommen
   ================================================================ */

/* ---- BCA Design-Tokens ---- */
:root {
  --bca-blue   : #2a52bc;   /* Primärfarbe – Text, Rückseite Cards    */
  --bca-gold   : #b89434;   /* Akzentfarbe – Buttons, Schatten, HR    */
  --bca-orange : #e15632;   /* CTA-Akzent (Split-Bereiche)            */
  --bca-white  : #ffffff;
  --bca-radius : 3px;       /* Wie .bca-grid-item                     */

  --bca-font-heading : 'Playfair Display', Georgia, serif;
  --bca-font-body    : "Montserrat", Sans-serif;
}

/* ================================================================
   GRID
   ================================================================ */
.bca-team-gallery {
  display: grid;
  gap: 30px;
  margin: 40px 0;
  padding: 8px;          /* Verhindert dass der goldene Shadow abgeschnitten wird */
}
.bca-cols-1 { grid-template-columns: repeat(1, 1fr); }
.bca-cols-2 { grid-template-columns: repeat(2, 1fr); }
.bca-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bca-cols-4 { grid-template-columns: repeat(4, 1fr); }
.bca-cols-5 { grid-template-columns: repeat(5, 1fr); }
.bca-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
  .bca-cols-4,
  .bca-cols-5,
  .bca-cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .bca-cols-3,
  .bca-cols-4,
  .bca-cols-5,
  .bca-cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .bca-team-gallery { grid-template-columns: 1fr; }
}

/* ================================================================
   KARTE  (klickbar, kein Flip)
   ================================================================ */
.bca-team-card {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 280px;
  justify-self: center;
  cursor: pointer;
  outline: none;
}

.bca-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--bca-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(.4, .2, .2, 1),
              box-shadow  0.28s cubic-bezier(.4, .2, .2, 1);
}

.bca-team-card:hover .bca-card-inner,
.bca-team-card:focus-visible .bca-card-inner {
  transform: translateY(-5px) scale(1.02);
}

/* ---- Foto-Bereich ---- */
.bca-card-photo {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.bca-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.38s ease;
}

.bca-team-card:hover .bca-card-photo img,
.bca-team-card:focus-visible .bca-card-photo img {
  transform: scale(1.06);
}

/* Initialen-Fallback */
.bca-card-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bca-font-heading);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--bca-white);
  letter-spacing: .05em;
}

/* ---- Hover-Overlay ---- */
.bca-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.bca-team-card:hover .bca-card-overlay,
.bca-team-card:focus-visible .bca-card-overlay {
  opacity: 1;
}

.bca-card-cta {
  color: var(--bca-white);
  font-family: var(--bca-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, .85);
  padding: 10px 18px;
  border-radius: var(--bca-radius);
  backdrop-filter: blur(2px);
}

/* ---- Info-Streifen (Name + Rolle) ---- */
.bca-card-info {
  padding: 14px 16px;
  text-align: center;
  flex-shrink: 0;
}

.bca-card-name {
  font-family: var(--bca-font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--bca-white) !important;
  margin: 0 !important;
}

.bca-card-pos {
  font-family: var(--bca-font-body) !important;
  color: rgba(255, 255, 255, .8) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  margin: 4px 0 0 !important;
  line-height: 1.4;
}

/* ================================================================
   KARTEN-FARBVARIANTEN
   ================================================================ */

/* --- BLAU (Standard) --- */
.bca-color-blau {
  border: 1px solid #d0d9f0;
  box-shadow: 0 2px 14px rgba(42, 82, 188, .15), 0 0 0 4px var(--bca-blue);
}
.bca-color-blau .bca-card-info     { background: var(--bca-blue); }
.bca-color-blau .bca-card-initials { background: var(--bca-blue); }
.bca-color-blau .bca-card-overlay  { background: rgba(42, 82, 188, .60); }

.bca-team-card:hover .bca-color-blau,
.bca-team-card:focus-visible .bca-color-blau {
  box-shadow: 0 8px 28px rgba(42, 82, 188, .25), 0 0 0 4px var(--bca-blue);
}

/* --- ROT --- */
.bca-color-rot {
  border: 1px solid #f5d5cc;
  box-shadow: 0 2px 14px rgba(225, 86, 50, .15), 0 0 0 4px var(--bca-orange);
}
.bca-color-rot .bca-card-info      { background: var(--bca-orange); }
.bca-color-rot .bca-card-initials  { background: var(--bca-orange); }
.bca-color-rot .bca-card-overlay   { background: rgba(225, 86, 50, .60); }

.bca-team-card:hover .bca-color-rot,
.bca-team-card:focus-visible .bca-color-rot {
  box-shadow: 0 8px 28px rgba(225, 86, 50, .25), 0 0 0 4px var(--bca-orange);
}

/* --- GOLD --- */
.bca-color-gold {
  border: 1px solid #ffe9bc;
  box-shadow: 0 2px 14px rgba(184, 148, 52, .20), 0 0 0 4px var(--bca-gold);
}
.bca-color-gold .bca-card-info     { background: var(--bca-gold); }
.bca-color-gold .bca-card-initials { background: var(--bca-gold); color: var(--bca-blue); }
.bca-color-gold .bca-card-overlay  { background: rgba(184, 148, 52, .60); }

.bca-team-card:hover .bca-color-gold,
.bca-team-card:focus-visible .bca-color-gold {
  box-shadow: 0 8px 28px rgba(184, 148, 52, .30), 0 0 0 4px var(--bca-gold);
}

/* ================================================================
   REVEAL TOGGLE
   Der Link wird manuell auf der Seite gesetzt mit class="bca-team-trigger".
   Kein Plugin-CSS — Styling erfolgt über eigene Klassen wie .bca-cta-btn.
   JS verdrahtet nur die Funktionalität.
   ================================================================ */

/* Panel Slide-Down */
.bca-team-reveal-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .55s cubic-bezier(.4, 0, .2, 1),
              opacity .4s ease;
  opacity: 0;
}
.bca-team-reveal-panel.bca-panel-open {
  max-height: 4000px;
  opacity: 1;
}

/* Leer-Meldung */
.bca-team-empty {
  font-family: var(--bca-font-body);
  color: #888;
  font-style: italic;
}

/* ================================================================
   TRAINER EINZELSEITE  (.bca-profile)
   ================================================================ */
.bca-profile {
  font-family: var(--bca-font-body);
}

/* ---- Hero ---- */
.bca-profile-hero {
  padding: 60px 40px;
}
.bca-profile-hero--blau { background: var(--bca-blue); }
.bca-profile-hero--rot  { background: var(--bca-orange); }
.bca-profile-hero--gold { background: var(--bca-gold); }

.bca-profile-hero-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: center;
}

.bca-profile-photo {
  flex-shrink: 0;
  width: 220px;
  height: 280px;
  border-radius: var(--bca-radius);
  overflow: hidden;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .3);
}
.bca-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.bca-profile-name {
  font-family: var(--bca-font-heading) !important;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--bca-white) !important;
  margin: 0 0 12px !important;
}

.bca-profile-position {
  font-family: var(--bca-font-body) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .85) !important;
  margin: 0 0 6px !important;
}

.bca-profile-jahrgang {
  font-family: var(--bca-font-body) !important;
  font-size: .9rem !important;
  color: rgba(255, 255, 255, .65) !important;
  margin: 0 !important;
}

/* ---- Content ---- */
.bca-profile-body {
  padding: 60px 40px;
  background: var(--bca-white);
}

.bca-profile-content {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.bca-profile-credentials ul {
  margin: 0;
  padding-left: 20px;
}
.bca-profile-credentials li {
  font-family: var(--bca-font-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  color: var(--bca-blue) !important;
  margin-bottom: 4px;
}

.bca-profile-bio {
  font-family: var(--bca-font-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  color: var(--bca-blue) !important;
}
.bca-profile-bio p {
  margin: 0 0 1em !important;
  font-family: var(--bca-font-body) !important;
  font-size: 1rem !important;
  color: var(--bca-blue) !important;
}
.bca-profile-bio p:last-child { margin-bottom: 0 !important; }

.bca-profile-quote {
  margin: 0;
  font-family: var(--bca-font-body);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--bca-blue);
  border-left: 4px solid var(--bca-gold);
  padding: 16px 20px;
  background: #fdf8ec;
  border-radius: 0 var(--bca-radius) var(--bca-radius) 0;
}
.bca-profile-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: .9rem;
  color: #888;
}

/* Zurück-Button */
.bca-profile-back-btn {
  background: none;
  border: 2px solid var(--bca-blue);
  color: var(--bca-blue);
  font-family: var(--bca-font-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 12px 24px;
  border-radius: var(--bca-radius);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.bca-profile-back-btn:hover {
  background: var(--bca-blue);
  color: var(--bca-white);
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .bca-profile-hero       { padding: 40px 20px; }
  .bca-profile-hero-inner { flex-direction: column; gap: 24px; }
  .bca-profile-photo      { width: 180px; height: 230px; }
  .bca-profile-name       { font-size: 2rem !important; }
  .bca-profile-body       { padding: 40px 20px; }
}