/* ==========================================================
   LAYOUT — header, hero, cards, footer
   Sections are ordered the same way they appear on the page.
   ========================================================== */

/* ---- header ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--navy-800);color:#fff;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1rem;padding-bottom:1rem;
}
.logo{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:1.2rem;text-decoration:none;color:#fff}
.logo img{height:32px;width:auto}
.logo .accent{color:var(--orange)}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{text-decoration:none;color:#dbe2ea;font-size:.95rem}
.nav a:hover{color:#fff}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}
@media(max-width:860px){
  .nav{position:fixed;inset:64px 0 0 0;background:var(--navy-800);flex-direction:column;
    padding:2rem;gap:1.5rem;transform:translateY(-110%);transition:transform .25s ease}
  .nav.is-open{transform:translateY(0)}
  .nav-toggle{display:block}
}

/* ---- hero ----
   NOTE: hero image height reduced from the reference (was ~640px tall).
   Adjust --hero-h to make it bigger/smaller. */
.hero{
  --hero-h:380px;
  /* team photo, cropped to the group; variants below per screen size */
  --hero-image:url('../assets/img/hero.jpg');
  position:relative;height:var(--hero-h);min-height:320px;
  display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  background:linear-gradient(180deg,rgba(16,31,54,.55),rgba(16,31,54,.85)),
             var(--hero-image, linear-gradient(135deg,#1c3654,#101f36)) center 35%/cover;
}
/* taller hero on wide screens so the group stays in frame, 4K asset beyond 2200px */
@media(min-width:1600px){.hero{--hero-h:520px}}
@media(min-width:2200px){.hero{--hero-h:min(1050px,80vh);--hero-image:url('../assets/img/hero-3840.jpg')}}
.hero-content{max-width:640px;padding:0 5%}
.hero-logo{display:block;height:150px;width:auto;margin:0 auto 1rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.hero .eyebrow{color:#f2b08f}
.hero h1{font-size:2.75rem;margin-bottom:.75rem}
.hero h1 .accent{color:var(--orange)}
@media(max-width:640px){
  .hero{--hero-h:300px;--hero-image:url('../assets/img/hero-mobile.jpg')}
  .hero h1{font-size:2rem}
  .hero-logo{height:96px}
}

/* ---- stats bar ---- */
.stats{background:var(--navy-700);color:#fff}
.stats .container{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:2.5rem 5%}
.stat{text-align:center}
.stat .icon{width:56px;height:56px;margin:0 auto .6rem;display:flex;align-items:center;justify-content:center;color:var(--orange);background:rgba(255,255,255,.14);border-radius:50%}
.stat .icon svg{width:28px;height:28px}
.stat .num{font-size:1.6rem;font-weight:700;font-family:var(--font-display)}
.stat .label{color:#aeb9c6;font-size:.85rem}
@media(max-width:640px){.stats .container{grid-template-columns:repeat(2,1fr)}}

/* ---- about ---- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.about-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}
.badge{background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;font-size:.85rem}
.about-media{position:relative}
.about-media img{border-radius:var(--radius);box-shadow:var(--shadow)}
.about-media .founded{
  position:absolute;bottom:-1rem;left:-1rem;background:var(--orange);color:#fff;
  border-radius:var(--radius-sm);padding:.75rem 1rem;text-align:center;box-shadow:var(--shadow);
}
.founded .n{display:block;font-weight:700;font-size:1.1rem}
.founded .l{font-size:.7rem}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}}

/* ---- news ---- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.news-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;text-decoration:none;color:var(--ink);transition:box-shadow .15s, transform .15s;
  overflow:hidden;
}
.news-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.news-card .cover{
  display:block;width:calc(100% + 3rem);max-width:none;margin:-1.5rem -1.5rem 1rem;
  aspect-ratio:16/9;object-fit:cover;
}
.news-card .date{color:var(--orange);font-size:.8rem;font-weight:600}
.news-card h3{font-size:1.05rem;margin:.5rem 0}
.news-card p{color:var(--ink-muted);font-size:.9rem;margin:0}
.news-archive-link{display:block;text-align:center;margin-top:2rem}
@media(max-width:860px){.news-grid{grid-template-columns:1fr}}

/* ---- teams ---- */
.teams-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.team-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;text-align:center;text-decoration:none;color:var(--ink);
  transition:box-shadow .15s, transform .15s;
}
.team-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.team-card .medal{font-size:1.5rem}
.team-card h3{font-size:1rem;margin:.5rem 0 .25rem}
.team-card .league{color:var(--ink-muted);font-size:.85rem}
@media(max-width:860px){.teams-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.teams-grid{grid-template-columns:1fr}}

/* ---- membership ---- */
.membership-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.membership-grid img{border-radius:var(--radius);box-shadow:var(--shadow)}
.price-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--bg-soft);border-radius:var(--radius-sm);padding:1rem 1.25rem;margin-bottom:.75rem;
}
.price-row .amount{font-weight:700;color:var(--orange)}
@media(max-width:860px){.membership-grid{grid-template-columns:1fr}}

/* ---- post image grid (news-post.html) ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.gallery-item{position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:0;padding:0;background:none}
.gallery-item img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .2s}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item .caption{
  position:absolute;left:0;right:0;bottom:0;padding:.75rem;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));
  color:#fff;font-size:.85rem;font-weight:600;text-align:left;
}
@media(max-width:860px){.gallery-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.gallery-grid{grid-template-columns:1fr}}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.contact-list{list-style:none;padding:0;margin:1.5rem 0 0}
.contact-list li{display:flex;gap:.75rem;margin-bottom:1rem;align-items:flex-start}
.contact-list .icon{background:var(--bg-soft);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-grid img{border-radius:var(--radius);box-shadow:var(--shadow)}
.contact-map{display:block}
.contact-map img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:box-shadow .15s,transform .15s}
.contact-map:hover img{box-shadow:var(--shadow-lg,0 12px 30px rgba(16,31,54,.25));transform:translateY(-2px)}
.map-attribution{display:block;margin-top:.5rem;color:var(--ink-muted);font-size:.75rem}
.map-attribution a{color:inherit}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---- footer ---- */
.site-footer{background:var(--navy-900);color:#aeb9c6;padding:2rem 0}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.site-footer .logo{color:#fff}
.footer-links{display:flex;gap:1.5rem;list-style:none;padding:0;margin:0}
.footer-links a{text-decoration:none;color:#aeb9c6;font-size:.9rem}
.footer-links a:hover{color:#fff}

/* ---- placeholder media (no real photos yet) ---- */
.placeholder-img{
  background:repeating-linear-gradient(135deg,var(--bg-soft),var(--bg-soft) 10px,#eef0f3 10px,#eef0f3 20px);
  display:flex;align-items:center;justify-content:center;color:var(--ink-muted);
  font-size:.85rem;text-align:center;border-radius:var(--radius);min-height:220px;
}