/* =========================
   THEME / TOKENS (unchanged)
   ========================= */
:root{
  --red:#ed1f25; --blue:#253570; --blue-mid:#1b2a59; --blue-dark:#0a1f3f;
  --red-dark:#6c0e12; --gold:#f9ec17; --gold-light:#fff36a;

  --pad: clamp(14px, 3vw, 40px);      /* slightly smaller minimum on phones */
  --brand: var(--blue); --brand-2: var(--red);

  --red-rgb:237,31,37; --blue-rgb:37,53,112; --blue-dark-rgb:27,42,89; --gold-rgb:249,236,23;

  --ink:#e8f1ff; --ink-2:#b8c7e6;

  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.18);

  --radius:14px;
  --shadow:0 12px 30px rgba(0,0,0,.35);

  /* new helpers */
  --container: 1200px;
  --card-gap: clamp(10px, 2.2vw, 14px);
}

/* =========================
   PAGE SHELL
   ========================= */
.page{
  padding-top: 5vh;
  color: var(--ink);
  background: linear-gradient(180deg, var(--blue-dark) 0%, #081531 100%);
  -webkit-text-size-adjust: 100%; /* prevent iOS font zoom jumps */
}

/* generic containers/sections */
.section{ padding: var(--pad); }
.section > *{ max-width: var(--container); margin-inline: auto; }

.section-title{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin: 0 auto clamp(12px,1.2vw,22px); max-width: var(--container); color:var(--ink);
  padding-inline: 4px;
}
.section-title h2{
  margin:0;
  font-size: clamp(1.15rem, 1rem + .9vw, 2rem);
  line-height: 1.15;
}
.section-title .sub{ color:var(--ink-2); font-size: .95rem; }

/* =========================
   HERO (group photo header)
   ========================= */
.team-hero{
  max-width: var(--container); margin: 0 auto; border-radius: 20px; overflow:hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, rgba(var(--blue-dark-rgb),.65), rgba(var(--red-rgb),.35));
}

.team-hero .hero-img{
  position:relative; width:100%;
  aspect-ratio: 16/7; /* a bit taller for phones; was 16/6 */
  background:
    radial-gradient(120% 120% at 70% 10%, rgba(0,0,0,.35), transparent 55%),
    linear-gradient(135deg, var(--blue-mid), var(--red-dark));
  background-size: cover; background-position: center;
}

.team-hero .hero-img[data-src]{ background-image: attr(data-src url); }

.team-hero .hero-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 16px; background: rgba(0,0,0,.28); border-top: 1px solid var(--glass-border);
  flex-wrap: wrap;            /* allow wrapping on narrow screens */
}
.team-hero .title{
  font-size: clamp(1.35rem, 1rem + 2vw, 2.2rem);
  font-weight: 800; letter-spacing:.3px; line-height:1.1;
}
.team-hero .meta{ color:var(--ink-2); font-size: .95rem; }

/* =========================
   COACHES GRID
   ========================= */
.coaches{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: var(--card-gap);
}
.coach-card{
  background: var(--glass); border:1px solid var(--glass-border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden;
  display:flex; flex-direction:column;
}
.coach-card .photo{
  width:100%; aspect-ratio: 3/4; background:#0e1b3b; background-size:cover; background-position:center;
}
.coach-card .body{ padding:12px; display:grid; gap:6px; }
.coach-card .title{ color: var(--gold); font-weight:700; font-size:.9rem; letter-spacing:.3px; }
.coach-card .name{ font-weight:800; font-size:1.05rem; }

/* =========================
   GALLERY GRID
   ========================= */
.gallery{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: clamp(8px, 2vw, 12px);
}
.gallery .shot{
  border-radius: 12px; overflow:hidden; border:1px solid var(--glass-border);
  background:#0e1b3b; aspect-ratio: 16/10; background-size:cover; background-position:center;
}

/* =========================
   PLAYERS TABLE (desktop) + CARDS (mobile)
   ========================= */
.players{
  max-width: var(--container); margin: 0 auto;
  background: var(--glass); border:1px solid var(--glass-border); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow);
}

/* Desktop table */
.players .table{
  width:100%; border-collapse: collapse; color: var(--ink);
}
.players .table thead th{
  background: rgba(255,255,255,.06);
  color: var(--ink); text-align:left; font-weight:700; font-size:.95rem;
  padding: 10px 12px; border-bottom:1px solid var(--glass-border); white-space: nowrap;
}
.players .table tbody td{
  padding: 10px 12px; border-bottom:1px solid rgba(255,255,255,.08); color: var(--ink-2);
  vertical-align: middle;
}
.players .table tbody tr:hover{ background: var(--glass-2); }
.players .num{ font-weight:800; color: var(--gold); }
.players .pos{ color:#fff; }
.players .pname{ color:#fff; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width: 0; }

/* Player thumb */
.pthumb{
  width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--glass-border);
  background:#0e1b3b; display:block; flex: 0 0 auto;
}

/* Generic stack spacing */
.stack{ display:grid; gap: clamp(14px,2vw,22px); }

/* Links */
.btn-link{ color: #f9ec17; text-decoration:none; opacity:.85; font-weight:600; }
.btn-link:hover{ opacity:1; text-decoration:underline; }

/* =========================
   RESPONSIVE TWEAKS
   ========================= */

/* --- Tablets down --- */
@media (max-width: 980px){
  .section-title{ align-items:flex-start; }
  .section-title .sub{ font-size:.9rem; }
}

/* --- Phones --- */
@media (max-width: 720px){

  /* Tighter section padding and title stack */
  .section{ padding: clamp(10px, 3.2vw, 18px); }
  .section-title{
    flex-direction: column; align-items:flex-start; gap:6px;
    padding-inline: 2px;
  }
  .section-title h2{ font-size: clamp(1.1rem, 1rem + 1.2vw, 1.6rem); }

  /* Hero: taller image for narrow screens, wrap bar content */
  .team-hero .hero-img{ aspect-ratio: 16/9; }
  .team-hero .hero-bar{ gap:6px; padding: 10px 12px; }
  .team-hero .title{ font-size: clamp(1.2rem, 1rem + 2.5vw, 1.8rem); }
  .team-hero .meta{ font-size: .9rem; }

  /* Coaches: allow smaller cards to fit 2+ per row comfortably */
  .coaches{ grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: clamp(8px, 2.4vw, 12px); }
  .coach-card .body{ padding:10px; }

  /* Gallery: smaller minimum so 2–3 across is possible */
  .gallery{ grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }

  /* Players: switch to mobile cards */
  .players{
    border-radius: 12px;
  }
  .players .table thead{ display:none; }
  .players .table tbody{ display:grid; gap: 8px; padding: 8px; }
  .players .table tr{
    display:grid;
    grid-template-columns: 1fr 1fr; /* two columns label/value look */
    gap: 6px 12px;
    padding: 10px;
    border:1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
  }
  .players .table tr:hover{ background: rgba(255,255,255,.06); }
  .players .table td{
    border:0; padding: 0; display:flex; align-items:center; min-width: 0;
  }
  .players .table td[data-label]::before{
    content: attr(data-label) " ";
    color: var(--ink-2); font-weight:600; margin-right:6px; flex: 0 0 auto;
  }

  /* Make player name line wrap cleanly and ellipsize if extreme */
  .players .table .pname{
    grid-column: 1 / -1;              /* full width row on top */
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(255,255,255,.12);
    margin-bottom: 6px;
  }
  .players .table .pname span{
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .players .table .num{ order: 1; }
  .players .table .pos{ order: 2; }
}

/* --- Very small phones --- */
@media (max-width: 420px){
  .team-hero .hero-img{ aspect-ratio: 4/3; }
  .coach-card .title{ font-size:.85rem; }
  .coach-card .name{ font-size: .98rem; }
  .gallery{ grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); }
  .players .table tr{ grid-template-columns: 1fr; } /* stack all player fields */
  .players .table td[data-label]::before{ display:inline-block; width: 88px; } /* tidy alignment */
}

/* --- Accessibility: reduce visual motion if requested --- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}


/* Fix gallery overflow on mobile: stack to one column */
@media (max-width: 720px){
  .gallery{
    grid-template-columns: 1fr !important;  /* single column */
    gap: 10px;                               /* comfy spacing */
    width: 100%;
    max-width: 100%;
  }

  /* Ensure each shot can't exceed the viewport width */
  .gallery .shot{
    width: 100%;
    max-width: 100%;
    display: block;
    aspect-ratio: 16 / 10;                   /* keep your ratio */
    background-size: cover;
    background-position: center;
  }

  /* (Optional) belt-and-suspenders to kill any stray horizontal scroll */
  .page{ overflow-x: hidden; }
}


/* ===== Group nav chips ===== */
.group-nav{
  max-width: var(--container); margin: 0 auto;
  display:flex; flex-wrap:wrap; gap: 8px;
}
.group-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-border);
  color:#fff; text-decoration:none; font-weight:700; font-size:.9rem;
}
.group-chip:hover{ background: rgba(255,255,255,.12); }

/* ===== Group card wrapper ===== */
.group-card{
  max-width: var(--container); margin: 0 auto;
}

/* Group header/hero (like a mini hero) */
/* Group header/hero (larger) */
.group-hero{
  --gh-ratio: 16 / 7;               /* was 16/6 → taller; adjust as you like */
  --gh-min-h: 260px;                 /* minimum visual height */
  --gh-max-h: 520px;                 /* cap on very wide screens */

  border: 1px solid var(--glass-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(
    135deg,
    rgba(var(--blue-dark-rgb), .6),
    rgba(var(--red-rgb), .25)
  );
}

.group-hero-img{
  width: 100%;
  aspect-ratio: var(--gh-ratio);
  height: clamp(var(--gh-min-h), 38vw, var(--gh-max-h)); /* make it taller overall */
  min-height: var(--gh-min-h);
  background: #0e1b3b;
  background-size: cover;
  background-position: center;
}

.group-hero-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(12px, 1.6vw, 20px) clamp(16px, 2vw, 24px);
  background: rgba(0,0,0,.32);
  border-top: 1px solid var(--glass-border);
  flex-wrap: wrap;
}

.group-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.1rem); /* bigger title */
}

.group-meta{
  color: var(--ink-2);
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: clamp(.95rem, .85rem + .35vw, 1.05rem);
}
.group-meta .dot{ opacity:.6; }

/* Optional: even taller image on small screens for impact */
@media (max-width: 640px){
  .group-hero{ --gh-ratio: 4 / 3; --gh-min-h: 220px; --gh-max-h: 420px; }
}

/* Gallery: ensure no overflow on phones */
@media (max-width: 720px){
  .gallery{ grid-template-columns: 1fr !important; gap: 10px; max-width: 100%; }
  .gallery .shot{ width:100%; max-width:100%; }
}

/* Minor spacing between groups */
.group-footer{ margin-top: 8px; }