/* ==========================================================
   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 .accent{color:var(--orange)}
.nav{display:flex;align-items:center;gap:2.25rem}
.nav a{
  position:relative;text-decoration:none;color:#fff;
  font-size:1rem;font-weight:600;letter-spacing:.01em;padding:.35rem 0;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.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 ----
   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) 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)}}

/* ---- 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}
.news-grid--archive{margin-top:2rem}
.load-more{text-align:center;margin-top:2rem}
@media(max-width:860px){.news-grid{grid-template-columns:1fr}}

/* ---- post body formatting (news-post.html) ---- */
.post-date{color:var(--orange);font-weight:600;margin-top:1rem}
#postBody ul,#postBody ol{margin:0 0 1rem 1.25rem}
#postBody a{color:var(--orange);text-decoration:underline}
#postBody a:hover{color:var(--orange-dark)}

/* ---- post image grid (news-post.html) ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
.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-figure{margin:0}
.gallery-caption{font-size:.8rem;color:var(--ink-muted);margin-top:.35rem;line-height:1.4}
@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-address{display:flex;gap:.75rem;align-items:center;margin:0 0 1rem;font-size:.85rem}
.contact-address .icon{background:var(--bg-soft);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-cta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:fit-content;
  background:var(--orange);color:#fff;font-weight:600;
  text-decoration:none;font-size:.85rem;white-space:nowrap;
  padding:.65rem 1.25rem;border-radius:999px;transition:background .15s;margin:3rem auto 0;
}
.contact-cta:hover{background:var(--orange-dark)}
.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: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 .container > span{font-size:.9rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.5rem 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}