/* ===============================
   Brand tokens (edit as needed)
   =============================== */
:root{
  --caja-red:#B71234;
  --caja-cream:#F4F6D7;
  --caja-brown:#584528;

  --ink:#3b2f1f;               /* body text */
  --ink-weak:#5d4a31;
  --surface:#ffffff;
  --surface-alt:#faf9f5;

  --radius:14px;
  --shadow:0 8px 18px rgba(0,0,0,.08);
  --w:1100px;
}

/* ===============================
   Base
   =============================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:"ITC Franklin Gothic LT","Franklin Gothic Medium","Libre Franklin",
               system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}

h1,h2,h3,h4{
  margin:0 0 .75rem;
  color:var(--ink);
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing:.02em;
}
h1{font-size:clamp(2.0rem,5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
a{color:var(--caja-red)}
a:hover{opacity:.9}

.container{max-width:var(--w); margin-inline:auto; padding:0 1rem}
.section{padding:3rem 0}
.section.alt{background:var(--surface-alt)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:999px; border:2px solid currentColor;
  text-decoration:none; font-weight:700; cursor:pointer;
  transition:.15s transform, .15s opacity;
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--caja-red); color:var(--caja-cream); border-color:var(--caja-red)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink)}
.link{font-weight:700; text-decoration:underline}

.list{padding-left:1.2rem}
.card{
  background:var(--surface); border:1px solid #00000012; border-radius:var(--radius);
  padding:1.25rem; box-shadow:var(--shadow);
}
.grid{display:grid; gap:1rem}
.grid.cards{grid-template-columns:repeat(3,1fr)}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:1.25rem}

/* ===============================
   Header / Nav
   =============================== */
.header{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--caja-cream) 88%, white);
  border-bottom:4px solid var(--caja-red);
}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; gap:.6rem; align-items:center; color:inherit; text-decoration:none; font-weight:800; letter-spacing:.04em}
.brand-text{font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size:1.8rem}
.nav-links{display:flex; gap:1rem; align-items:center}
.nav-links a{text-decoration:none; color:var(--ink); font-weight:700}
.nav-links a:hover{color:var(--caja-red)}
.nav-toggle{display:none; background:none; border:0; padding:.5rem; cursor:pointer}
.nav-toggle .bar{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:1rem; top:1rem; background:var(--caja-cream); padding:.5rem .75rem; border-radius:.5rem}

/* ===============================
   Hero
   =============================== */
.hero__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1.25rem; align-items:center}
.hero__copy .lede{font-size:1.1rem; color:var(--ink-weak)}
.stack-row{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.75rem}
.hero__media .placeholder{
  display:grid; place-items:center; min-height:220px; border:1px dashed #00000033;
  border-radius:var(--radius); color:#00000066; background:#fff;
}

/* ===============================
   Events list / CTA / Footer
   =============================== */
.event-list{list-style:none; padding:0; margin:0; display:grid; gap:.8rem}
.event-list li{display:grid; grid-template-columns:96px 1fr; gap:1rem; align-items:start}
.event-list .date{
  display:inline-block; background:var(--caja-cream); border-left:6px solid var(--caja-red);
  padding:.45rem .65rem; border-radius:.5rem; font-weight:800;
}
.cta{border-top:4px solid var(--caja-red); text-align:center}
.cta-form{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:.75rem}
.cta-form input{
  padding:.7rem 1rem; border-radius:999px; border:2px solid #00000022; font:inherit; min-width:230px
}
.cta-form button{min-width:160px}
.footer{background:var(--caja-brown); color:var(--caja-cream); padding:2rem 0}
.footer__grid{display:grid; grid-template-columns:1fr auto auto; gap:1rem; align-items:start}
.footer a{color:var(--caja-cream); text-decoration:none}
.footer a:hover{text-decoration:underline}

/* ===============================
   Utilities / separators
   =============================== */
.section-separator{border:0; border-top:1px solid #ccc; margin:2rem 0}
html{scroll-padding-top:80px}

/* ===============================
   Map + Right Panel layout
   =============================== */
#jugger-wrapper{
  max-width:var(--w);
  margin-inline:auto;
  padding:0 1rem;
  display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap;
  margin-top:1.25rem;
}
#jugger-map-container{
  width:40rem; height:30rem; display:flex; flex-direction:column; flex-shrink:0;
  background:var(--surface);
  border:1px solid #00000012; border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}
#jugger-map{flex:1; min-height:20rem}
#jugger-controls{
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding:.6rem .9rem; background:#fff; border-top:1px solid #00000012;
}
#jugger-error{color:#b00; font-size:13px; padding:.6rem .9rem; white-space:pre-wrap}
#jugger-info{
  flex:1; min-width:20rem;
  background:var(--surface);
  border:1px solid #00000012; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1rem;
  /* Gallery sizing & behavior */
  height:66vh;                /* ~2/3 of screen */
  min-height:24rem;
  overflow:hidden;            /* NO SCROLLBARS */
  position:relative;          /* anchor overlay */
  display:grid; align-content:start; gap:1rem;
}
@media (max-width:900px){
  #jugger-wrapper{flex-direction:column}
  #jugger-map-container,#jugger-info{width:100%; min-width:unset}
  #jugger-info{height:auto}
}

/* ===============================
   Right-panel Clubs Gallery
   =============================== */

/* Section heading inside the panel */
#jugger-info .clubs-head{margin:.25rem 0 .5rem}

/* 2×2 grid */
.clubs-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem;
}

/* ---- Card (smaller logo, caption below image) ---- */
.club-card{
  --glow-1:#ff4d4d;  /* fallback gradient; can be overridden per team via inline style */
  --glow-2:#ffd166;
  --glow-3:#06d6a0;

  position:relative;
  background:var(--surface);
  border:1px solid #00000014;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  padding:.6rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Smaller logo: limit visual dominance */
.club-card img{
  width:78%;               /* shrink relative to tile width */
  max-width:9rem;          /* hard ceiling so they don’t get huge */
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:calc(var(--radius) - 6px);
  background:#fff;
}

/* Caption sits UNDER the image (no overlay) */
.club-card span{
  position:static;
  font-weight:800;
  color:var(--ink);
  text-align:center;
  line-height:1.2;
  font-size:.95rem;
}

/* Moving gradient border on hover */
.club-card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  padding:2px; /* border thickness */
  background:conic-gradient(from 0deg,var(--glow-1),var(--glow-2),var(--glow-3),var(--glow-1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; /* show only ring */
  opacity:0; transform:scale(.98);
  transition:opacity .2s ease, transform .2s ease;
  z-index:-1;
}
.club-card:hover::before{opacity:1; transform:scale(1); animation:spin 2.5s linear infinite}
.club-card:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.12)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===============================
   Full-panel overlay (for details)
   =============================== */
.club-overlay{
  position:absolute; inset:0; z-index:5;
  background:var(--surface);
  border:1px solid #00000012; border-radius:var(--radius); box-shadow:var(--shadow);
  display:grid; grid-template-rows:auto 1fr; gap:.5rem; padding:1rem;
  opacity:0; transform:scale(.98);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.club-overlay.open{opacity:1; transform:scale(1); pointer-events:auto}
.club-overlay__header{display:flex; align-items:center; justify-content:space-between; gap:.75rem}
.club-overlay__title{margin:0; font-size:1.2rem}
.club-overlay__body{overflow:hidden; color:var(--ink-weak)} /* keep gallery area clean */
.club-overlay__text{margin:0}
.club-overlay__close{
  border:1px solid #0000001a; background:#fff; cursor:pointer;
  border-radius:999px; padding:.4rem .7rem; font-weight:800; box-shadow:var(--shadow);
}

/* ===============================
   Small-screen grid tweak
   =============================== */
@media (max-width:520px){
  .clubs-grid{grid-template-columns:1fr}
}
/* === Compact the club tiles (smaller logos) ============================== */
/* Tighten grid spacing a bit */
#jugger-info .clubs-grid{ gap:.65rem; }

/* Reduce tile height & padding */
.club-card{
  padding:.45rem;
  height:7.5rem;          /* ~120px tall tile */
}

/* Make the logo smaller and cap its absolute size */
.club-card img{
  /* min, preferred %, max — keeps things consistent across widths */
  width: clamp(3.5rem, 52%, 5.75rem);
  max-width: 5.75rem;     /* ~92px absolute ceiling */
}

/* Slightly smaller caption */
.club-card span{
  font-size:.85rem;
  line-height:1.15;
}
/* === Keep map and gallery the same height ================================= */
:root{
  --gallery-h: 66vh; /* adjust this if you want taller/shorter panels */
}

/* Match left map container height to the gallery's height */
#jugger-map-container{ height: var(--gallery-h) !important; }
#jugger-info{ height: var(--gallery-h) !important; }

/* === Compact gallery so both sections fit (no scrollbars) ================== */
/* tighter section heading + grid gap */
#jugger-info .clubs-head{ margin:.15rem 0 .35rem !important; }
#jugger-info .clubs-grid{ gap:.5rem !important; }

/* smaller cards */
.club-card{
  padding:.35rem !important;
  height:6rem !important;      /* ~96px high tile */
}

/* smaller logos (but consistent across widths) */
.club-card img{
  width: clamp(3.0rem, 46%, 4.5rem) !important; /* min / preferred % / max */
  max-width: 4.5rem !important;
}

/* smaller caption */
.club-card span{
  font-size:.8rem !important;
  line-height:1.1 !important;
}
/* Make logo images transparent (no white box behind them) */
.club-card img,
.team-detail .detail-media img,
#jugger-info .club-overlay img {
  background: transparent !important;
}

/* drop into your styles.css */
.socials{ display:flex; gap:.6rem; align-items:center }
.icon-btn{
  display:inline-grid; place-items:center;
  width:2rem; height:2rem; border-radius:999px;
  color:inherit; text-decoration:none;
  transition:transform .15s ease, opacity .15s ease;
}
.icon-btn:hover{ transform:translateY(-1px); opacity:.9 }
.icon-btn i{ font-size:1.15rem; line-height:1; }