/* =========================================================
   Bobcats site styles — custom.css
   Path: user/themes/bootstrap4/css/custom.css
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --bobcats-blue:#200ee8;
  --bobcats-gold:#FFD700;
  --ink:#212529;
  --muted:#6c757d;
  --card-shadow: 0 8px 20px rgba(0,0,0,.3);
}

/* ---------- Page background / body classes ---------- */
body.game-blue { background: var(--bobcats-blue); color:#fff; }

/* Optional: hide default page titles if a theme header is still rendering them */
.kill-page-title .page-title,
.kill-page-title h1.page-title { display:none !important; }

/*----------- Navbar ------------*/
.navbar-bobcats { background: var(--bobcats-blue); position: relative; }
.navbar-bobcats .brand-block { display:flex; flex-direction:column; line-height:1.05; }
.navbar-bobcats .brand-title { color:var(--bobcats-gold); font-weight:800; font-size:clamp(20px,3.4vw,28px); letter-spacing:.2px; }
.navbar-bobcats .brand-sub { color:#fff; opacity:.95; font-size:clamp(12px,1.8vw,14px); margin-top:2px; }
.nav-underline { height:4px; background:var(--bobcats-gold); }

/* ---------- Hero (theme partial) ---------- */
.hero { color:#fff; text-align:center; padding:48px 16px 24px; margin-top:0; }
.hero.game-blue { background:var(--bobcats-blue); }
.hero h1 { margin:0; color:var(--bobcats-gold); font-size:clamp(28px,4vw,52px); line-height:1.06; letter-spacing:.2px; }
.hero p { margin:8px 0 0; font-size:clamp(14px,2.2vw,18px); opacity:.95; }
.hero.game-blue::after { content:""; display:block; width:120px; height:4px; margin:18px auto 0; background:var(--bobcats-gold); border-radius:2px; }

/* ---------- Layout helper ---------- */
.wrap { max-width:1100px; margin:0 auto; padding:0 16px; overflow-x:hidden; }

/* ---------- Team photo card ---------- */
.team-photo { display:flex; justify-content:center; margin:24px auto 40px; }
.team-photo img { max-width:95%; border-radius:12px; background:#fff; padding:6px; box-shadow:0 8px 30px rgba(0,0,0,.45); }

/* =======================================================================
   SWIPER
   - Cards are responsive via aspect-ratio (no fixed heights)
   - 3-up desktop, coverflow w/ overlap on tablet/phone
   ======================================================================= */

/* Base container adds room for arrows & dots */
.mySwiper { position:relative; padding:0 56px 42px; touch-action:auto; }
.swiper { width:100%; overflow:hidden; padding:18px 0; }

/* Safety: never let slides stack vertically */
.swiper-wrapper { display:flex; }
.swiper-slide   { flex:0 0 auto; width:auto; }

/* Card */
.swiper-card{
  width:100%;
  background:#fff; color:#000;
  border-radius:16px; overflow:hidden;
  box-shadow:var(--card-shadow);
}
.swiper-card .meta{ padding:12px 14px 16px; }
.swiper-card .label{ display:block; font-size:.8rem; color:var(--muted); margin-bottom:6px; }
.swiper-card .label.upcoming{
  color:#7a6300; background:linear-gradient(#fff9d1,#fff3b0);
  display:inline-block; padding:2px 10px; border-radius:999px; border:1px solid rgba(122,99,0,.25);
}
.swiper-card h5{ margin:0 0 4px; font-size:1rem; color:var(--ink); }
.swiper-card .sub{ font-size:.9rem; color:var(--muted); }
.swiper-card .sub + .sub{ margin-top:2px; }

/* Media: responsive 16:9 by default; can tweak by breakpoint */
.swiper-card img{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
}

/* ---- Slide widths by breakpoint (so tablets don't oversize) ---- */

/* Phones */
@media (max-width:699px){
  .mySwiper { padding:0 44px 36px; }
  .swiper-slide { width:88vw; }              /* 1 card with peeks */
  .swiper-card h5 { font-size:.95rem; }
  .swiper-card .sub{ font-size:.85rem; }
}

/* Tablets (portrait & landscape) */
@media (min-width:700px) and (max-width:1024px){
  .swiper-slide { width:420px; }             /* up to ~2–3 cards w/ coverflow */
  /* Slightly shorter media on tablets, optional */
  .swiper-card img{ aspect-ratio:5 / 3; }
}

/* Desktop */
@media (min-width:1025px){
  .swiper-slide { width:360px; }             /* ~3-up comfortably */
}

/* ---- Navigation buttons ---- */
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5;
  width:52px; height:52px; border-radius:50%;
  color:#fff; /* arrow glyph color */
  background: radial-gradient(30px 30px at 50% 50%, var(--bobcats-blue), rgba(32,14,232,.85));
  border:1px solid rgba(255,255,255,.25);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.mySwiper .swiper-button-prev { left:10px; }
.mySwiper .swiper-button-next { right:10px; }

.mySwiper .swiper-button-prev::after,
.mySwiper .swiper-button-next::after{
  color:#fff; font-size:28px; text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* Hover → gold background (arrows stay white) */
.mySwiper .swiper-button-prev:hover,
.mySwiper .swiper-button-next:hover{
  background: radial-gradient(30px 30px at 50% 50%, var(--bobcats-gold), rgba(255,215,0,.85));
  transform:scale(1.08);
}

/* Pagination */
.swiper-pagination-bullet { background:rgba(0,0,0,.3); opacity:1; }
.swiper-pagination-bullet-active{
  background:var(--bobcats-gold);
  box-shadow:0 0 0 3px rgba(255,215,0,.25);
}

/* ---------- Roster grid (players) ---------- */
.grid { 
  display:grid; 
  grid-template-columns:repeat(2,1fr); 
  gap:16px; 
}
@media (min-width:700px){ .grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .grid { grid-template-columns:repeat(4,1fr); } }

.player { 
  background:#fff; 
  color:#000; 
  border-radius:16px; 
  overflow:hidden; 
  box-shadow: var(--card-shadow); 
}

/* Make photos responsive */
.player .photo img {
  width:100%;
  height:auto;              /* auto height keeps aspect ratio */
  aspect-ratio: 16 / 9;      /* fallback ratio, keeps cards consistent */
  object-fit:cover;         /* crop if image doesn’t match ratio */
  display:block;
}

/* Card text */
.player .meta { padding:12px; }
.player .num { font-weight:800; color:var(--bobcats-blue); }
.player .pos { color:#6c757d; font-size:.9rem; }


/* ---------- Utilities / a11y ---------- */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
:focus-visible{ outline:2px solid var(--bobcats-gold); outline-offset:2px; }