/* ========== COACHES PAGE (scoped) ========== */
/* Inherit navbar/body/background from style.css */

/* --- Hero --- */
.coaches-hero{
  text-align:center;
  padding:120px 20px 60px; /* top = clears fixed nav (80px) + breathing room */
  background-size:cover;
  background-position:center;
}

.coaches-hero h1{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:3.2rem;
  letter-spacing:.02em;
  color:#fff;
  margin:0 0 10px;
}

.coaches-hero .hero-subtitle{
  font-size:1.1rem;
  font-weight:400;
  color:#fff;
  letter-spacing:.5px;
  margin:0;
}

/* --- Page container --- */
.coaches-container{
  max-width:1200px;
  margin:40px auto 80px;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:60px;
}

/* --- Coach card (image left, content right) --- */
.coach-card.offset-image{
  display:flex;
  align-items:flex-start;
  gap:48px;
  margin:0 auto;
  padding:40px 50px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,.6);
  max-width:1100px;
}

/* image */
.coach-card .coach-image-wrapper{
  flex-shrink:0;
  position:relative;
}

.coach-card .coach-image{
  width:220px;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.08);
  box-shadow:0 0 30px rgba(255,255,255,.08);
  background:#111;
}

/* content */
.coach-content{ flex:1; }

.coach-content h2{
  font-size:2rem;
  color:#fff;
  margin:0 0 8px;
}

.coach-role{
  color:#f2c94c;
  font-weight:600;
  margin:0 0 16px;
  font-size:1rem;
}

.coach-content p{
  font-size:1rem;
  line-height:1.6;
  color:#ccc;
  margin:0 0 18px;
}

.coach-content h4{
  margin:24px 0 10px;
  font-size:1.05rem;
  font-weight:600;
  color:#fff;
}

.coach-content ul{
  list-style:none;
  padding-left:0;
  margin:10px 0 18px;
}

.coach-content ul li{
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
  color:#ddd;
  font-size:.95rem;
}
.coach-content ul li::before{
  content:"✔";
  position:absolute;
  left:0; top:0;
  color:#f2c94c;
}

/* --- Responsive --- */
@media (max-width: 900px){
  .coach-card.offset-image{
    gap:32px;
    padding:32px 24px;
  }
}

@media (max-width: 768px){
  .coaches-hero{
    padding:110px 16px 40px;
  }

  .coaches-hero h1{
    font-size:2.2rem;
  }

  .coach-card.offset-image{
    flex-direction:column;
    gap:24px;
    padding:28px 18px;
  }

  .coach-card .coach-image{
    width:200px;
    margin:0 auto;
  }

  .coach-content h2,
  .coach-role{
    text-align:center;
  }
}