/* ================================
   TEAMS PAGE STYLES (aligned with core)
   - Keeps legacy .hero-cover working
   - Adds new .hero-bleed structure
   ================================ */

/* ---------- HERO (new) ---------- */
.hero-bleed {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 2.5rem;
  color: #fff;
}
@media (min-width: 992px) {
  .hero-bleed { padding: 5rem 0 3.5rem; }
}
.hero-bleed--flat {}
.hero-bleed__bg { position: absolute; inset: 0; }
.hero-bleed__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(1.05) contrast(1.02);
}
.hero-bleed__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 100%);
  mix-blend-mode: multiply;
}
.text-white-75 { color: rgba(255,255,255,.75) !important; }
.eyebrow { letter-spacing: .12em; font-size: .8rem; }

/* ---------- HERO (legacy alias for membership pages) ---------- */
.hero-cover {
  position: relative;
  padding: 2.5rem 0 2rem;
  color: #fff;
  background: var(--club-deep-teal, #0a4950);
  background-size: cover;
  background-position: center;
}
.hero-cover .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,107,115,.75), rgba(10,73,80,.75));
  z-index: 1;
}
.hero-cover .container { position: relative; z-index: 2; }
.hero-cover h1 { font-weight: 700; }
.hero-cover .eyebrow { font-size: .75rem; letter-spacing: .08em; opacity: .9; }

/* ---------- Chips / badges ---------- */
.chip {
  display:inline-block;
  font-size:.75rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background: var(--club-teal, #0f6b73);
  color:#fff;
  font-weight: 600;
}
.chip--glass {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* ---------- Category pills ---------- */
.category-pills .pill {
  border-radius: 999px !important;
  border: 1px solid var(--line, rgba(0,0,0,.08));
  padding: .35rem .9rem;
  transition: all .2s ease;
  color: var(--muted, #6c757d);
}
.category-pills .pill.active {
  color: #fff !important;
  background: var(--club-teal, #0f6b73);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.category-pills .pill:not(.active):hover {
  border-color: var(--club-teal, #0f6b73);
  text-decoration: none;
}

/* ---------- Tabs (if used) ---------- */
.team-tabs { margin-top: .25rem; }
.team-tabs .nav-link { padding:.75rem 1rem; font-weight:600; color: var(--muted,#6c757d); }
.team-tabs .nav-link.active { color: var(--club-deep-teal,#0a4950); border-bottom:2px solid var(--club-amber,#f29e2e); }

/* ---------- Cards / visuals ---------- */
.soft-card {
  border:1px solid var(--line,rgba(0,0,0,.08));
  border-radius:1rem;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Team list cards (index) — updated to match new markup */
.team-card {
  display: block;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line, rgba(0,0,0,.08));
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
  color: inherit;
  text-decoration: none;
}
.team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  text-decoration: none;
}
.team-card__media {
  position: relative;
  aspect-ratio: 5 / 3;
  background: #f3f5f7;
}
.team-card__img {
  position: absolute;
  inset: 0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.team-badge {
  position: absolute; left: .75rem; bottom: .75rem;
  background: rgba(0,0,0,.7);
  color: #fff; padding: .25rem .55rem; border-radius: .5rem; font-size: .8rem;
}
.team-card__body { padding:.9rem 1rem 1.1rem; }
.match-card .h5 { font-weight:700; }

/* ---------- Avatars ---------- */
.avatar-fallback {
  width:64px; height:64px;
  background:#e9ecef;
  border-radius:50%;
}

/* ---------- Small helpers ---------- */
.tracking { letter-spacing: .12em; }

/* ---------- Mobile spacing tweaks ---------- */
@media (max-width: 575.98px) {
  .col-sm-6.col-lg-4.mb-4 { margin-bottom: 1rem !important; }
}

/* Placeholder image (team silhouette) */
.team-card__media { position: relative; aspect-ratio: 5 / 3; background: #f3f5f7; }
.team-card__placeholder {
  position: absolute; inset: 0; width: 60%; height: 60%;
  margin: auto; display: block; opacity: .7;
  object-fit: contain;
  filter: grayscale(20%);
}