/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #222;
  line-height: 1.7;
  background: #fafafa;
}

/* GLOBAL */
.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}

h2 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 2rem;
}

.btn {
  background: grey;
  color: white;
  padding: 0.7rem 1.2rem;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  color: white;
  background: #808080;
}

.btn-secondary {
  background: #808080;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 5px;
}

/* HEADER */
.site-header {
  background: black;
  padding: 1rem 0;
  color: white;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.main-nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

/* HERO */
.hero {
  height: 65vh;
  background: black;
  display: flex;
  align-items: center;
  color: white;
  text-align: center;
  font-size: 1.5rem;
}

.hero-content h2 {
  font-size: 2rem;
  color: white;
  margin-bottom: 1rem;
}

/* ABOUT */
.about-wrapper {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.about-text {
  flex: 1;
}

.about-image img {
  width: 100%;
  border-radius: 10px;
}

/* TEAMS */

.team-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.team-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease;
  width: 250px;
}

.team-card:hover {
  transform: scale(1.05);
}

.team-card img {
  border-radius: 10px;
  width: 100%;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
  .team-cards {
    flex-direction: column;
    align-items: center;
  }
}


/* TEAM SECTIONS */
.team-section {
  padding: 4rem 0;
  text-align: center;
}

.insta-embed iframe {
  width: 100%;
  height: 500px;
  border-radius: 10px;
}

/* COACHES */


.coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Card Base */
.coach-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(17, 17, 17, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Hover Animation */
.coach-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
}

/* Coach Image */
.coach-card img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

.coach-card:hover img {
  transform: scale(1.08);
}

/* Text */
.coach-card h3 {
  font-size: 1.25rem;
  margin-bottom: 6px;
  color: #111;
}

.coach-card .role {
  font-weight: 600;
  color: #444;
  margin-bottom: 10px;
}

.coach-card .bio {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.55;
}

/* Interactive Overlay (Optional) */
.coach-card::after {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  background: #ffcc00;
  color: #111;
  font-weight: bold;
  text-align: center;
  padding: 12px 0;
  transition: bottom 0.3s ease;
}

.coach-card:hover::after {
  bottom: 0;
}


/* ==== Managers & Admin Cards ==== */

/* Force 2 columns in the managers-admin section */
#managers-admin .contact-card-grid.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px;
}

/* Stack on small screens */
@media (max-width: 639px) {
  #managers-admin .contact-card-grid.two-col {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure individual cards don't span multiple columns */
#managers-admin .contact-card {
  grid-column: auto !important;
}



/* Optional: ensure cards look balanced */
.contact-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}


.contact-card-grid {
  display: grid;
  grid-template-columns: 1fr; /* single column on mobile */
  gap: 16px;
}

@media (min-width: 640px) {
  .contact-card-grid {
    grid-template-columns: repeat(2, 1fr); /* two columns */
  }
}

/* Optional: ensure cards look balanced */
.contact-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.contact-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .contact-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .contact-card-grid { grid-template-columns: repeat(3, 1fr); }
}

.contact-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: stretch;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
  border-color: #d1d5db;
}

.contact-card-media {
  background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
}
.contact-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-card-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.contact-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.role-badge {
  color: #fff;
  background: #e53935; /* S4G red accent */
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  line-height: 1;
}
.role-admin { background: #3f51b5; }      /* blue for admin */
.role-registrar { background: #00bcd4; }  /* teal for registrar */

.contact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 6px 0 8px;
}
.contact-list dt { font-weight: 600; color: #6b7280; }
.contact-list dd { margin: 0; }
.contact-list a { color: #0d6efd; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.contact-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
  cursor: pointer;
}
.btn-primary {
  background: #e53935;
  color: #fff;
  border: 1px solid transparent;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: #e53935;
  border: 1px solid #e53935;
}
.btn-outline:hover { background: rgba(229,57,53,0.1); }

@media (max-width: 480px) {
  .contact-card { grid-template-columns: 96px 1fr; }
  .contact-card-body { padding: 12px; }
}




/* CONTACT */
.contact form {
  max-width: 500px;
  margin: auto;
  display: grid;
  gap: 1rem;
}

input, textarea {
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* FOOTER */
.site-footer {
  background: #808080;
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: 3rem;
}