/* ==========================================================================
   FBBA — "Broadcast" Theme
   A dense, high-contrast, competition-site aesthetic:
   dark blocks, condensed uppercase type, poster-style cards, stat strips.
   Fonts: "Anton" (display) + "Barlow Condensed" (UI/labels) + "Barlow" (body)
   ========================================================================== */

:root{
  --ink:#070d18;        /* near-black navy — nav, footer, dark blocks */
  --navy:#0d2145;       /* card-level dark surface */
  --navy-2:#123566;
  --paper:#f1f3f7;      /* light section background */
  --white:#fff;
  --line:#e1e5ec;
  --line-dark:rgba(255,255,255,.14);
  --flame:#ff4419;      /* primary accent — hot orange-red */
  --flame-dark:#e3350d;
  --amber:#ffb703;      /* secondary accent — scoreboard gold */
  --muted:#5c6577;
  --text:#0b1220;
  --radius:4px;
  --container:1180px;
  --gutter:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Barlow",system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.55;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Anton",system-ui,sans-serif;
  color:var(--ink);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 .35em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--container),calc(100% - 2*var(--gutter)));margin:auto}

/* ---------- Top strip ---------- */
.top-strip{background:var(--ink);color:#9fb0c4;font-size:.72rem;border-bottom:1px solid var(--line-dark)}
.top-strip-inner{height:28px;display:flex;justify-content:space-between;align-items:center;font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.top-strip-inner>span:first-child:before{content:"● ";color:var(--flame)}
.top-links{display:flex;align-items:center;gap:16px}
.top-links a{color:#dfe7f0;font-weight:600}
.top-links a:hover{color:var(--flame)}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;background:var(--ink);z-index:50;border-bottom:3px solid var(--flame)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:100px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:94px;height:94px;object-fit:contain;border-radius:3px}
.brand span{display:flex;flex-direction:column;line-height:1.05}
.brand strong{font-family:"Anton",sans-serif;font-size:1.8rem;color:#fff;letter-spacing:.04em}
.brand small{font-family:"Barlow Condensed",sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:#8ea1b8;font-weight:600}

.main-nav{display:flex;gap:2px;align-items:center;font-family:"Barlow Condensed",sans-serif}
.main-nav a{font-size:.94rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;position:relative;padding:22px 13px;color:#c7d2e0;transition:.15s}
.main-nav a:hover{color:#fff}
.main-nav a:after{content:"";position:absolute;left:13px;right:13px;bottom:16px;height:3px;background:var(--flame);transform:scaleX(0);transition:.15s;transform-origin:left}
.main-nav a:hover:after{transform:scaleX(1)}
.main-nav a.active{color:#fff}
.main-nav a.active:after{transform:scaleX(1)}
.main-nav a.nav-cta{margin-left:10px;padding:9px 16px;background:var(--flame);color:#fff;border-radius:2px}
.main-nav a.nav-cta:after{display:none}
.main-nav a.nav-cta:hover{background:var(--flame-dark);color:#fff}
.menu-toggle{display:none;border:0;background:none;font-size:1.5rem;color:#fff;cursor:pointer}

/* ---------- Hero ---------- */
.hero{
  min-height:420px;
  background:linear-gradient(100deg,rgba(4,9,18,.95) 10%,rgba(4,9,18,.55) 60%,rgba(4,9,18,.25) 100%),url('../images/hero.jpg') center/cover no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-top:4px solid var(--flame);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:38px;background:#fff;transform:skewY(-1.6deg);transform-origin:bottom left}
.hero-overlay{display:none}
.hero-content{position:relative;color:#fff;padding:50px 0 60px;max-width:600px}
.eyebrow,.section-kicker{
  display:inline-flex;
  align-items:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1.1rem;
  font-weight:700;
  font-family:"Barlow Condensed",sans-serif;
  color:var(--flame);
  background:rgba(255,68,25,.12);
  border:1px solid rgba(255,68,25,.4);
  padding:4px 10px;
  border-radius:2px;
  margin-bottom:.8em;
}
.page-hero .section-kicker{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:var(--amber)}
.hero h1{font-size:clamp(1.8rem,2vw,2rem);line-height:1.05;color:#fff;margin:.2em 0 .3em}
.hero p{font-family:"Barlow",sans-serif;font-size:1.2rem;max-width:660px;color:#c7d2e0;margin:0 0 1.5em}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:2px;
  font-weight:700;
  font-size:.82rem;
  font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:.15s;
  border:1.5px solid transparent;
}
.btn-primary{background:var(--flame);color:#fff}
.btn-primary:hover{background:var(--flame-dark)}
.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-light:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- Stat strip ---------- */
.stat-strip{background:var(--navy);position:relative}
.stat-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-block{padding:22px 14px;text-align:center;border-left:1px solid rgba(255,255,255,.1)}
.stat-block:first-child{border-left:0}
.stat-block strong{display:block;font-family:"Anton",sans-serif;font-size:1.9rem;color:var(--amber);line-height:1}
.stat-block span{display:block;font-family:"Barlow Condensed",sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#aebbcc;font-weight:600;margin-top:4px}

/* ---------- Sections ---------- */
.section{padding:48px 0}
.light-bg{background:var(--paper)}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.split>div:first-child{border-left:4px solid var(--flame);padding-left:18px}
.section h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;margin:.1em 0}
.text-link,.section-head>a{font-weight:700;color:var(--ink);font-size:.8rem;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--flame);padding-bottom:2px}
.text-link:hover,.section-head>a:hover{color:var(--flame-dark)}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:12px}

/* ---------- Poster-style content cards ---------- */
.card-grid{display:grid;gap:16px}
.card-grid.three{grid-template-columns:repeat(3,1fr)}
.content-card{position:relative;background:var(--ink);border-radius:var(--radius);overflow:hidden;transition:.2s}
.content-card:hover{box-shadow:0 10px 26px rgba(7,13,24,.25)}
.content-card a{display:block}
.content-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:.3s}
.content-card:hover img{transform:scale(1.05)}
.card-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;background:linear-gradient(to top,rgba(4,9,18,.95) 0%,rgba(4,9,18,.72) 40%,rgba(4,9,18,0) 80%);pointer-events:none}
.card-body time{align-self:flex-start;margin-bottom:8px;font-family:"Barlow Condensed",sans-serif;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--flame);padding:4px 8px;border-radius:2px}
.card-body h3{font-family:"Barlow Condensed",sans-serif;font-size:1.05rem;font-weight:700;line-height:1.2;margin:0;color:#fff;text-transform:none;letter-spacing:0}
.card-body h3 a{pointer-events:auto}
.card-body p{color:#c2cddc;margin:.3em 0 0;font-size:.8rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}

/* ---------- News list (fixture/ticker style) ---------- */
.news-list{border-top:2px solid var(--ink)}
.news-row{
  display:grid;
  grid-template-columns:66px 1fr 22px;
  gap:16px;
  align-items:center;
  padding:14px 6px;
  border-bottom:1px solid var(--line);
  border-left:4px solid transparent;
  transition:.15s;
}
.news-row:hover{padding-left:12px;background:var(--paper);border-left-color:var(--flame)}
.news-date{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:2px;padding:6px 2px;text-transform:uppercase;font-family:"Barlow Condensed",sans-serif;font-size:.62rem;font-weight:600}
.news-date b{font-family:"Anton",sans-serif;font-size:1.3rem;line-height:1;color:var(--amber);font-weight:400}
.news-row small{display:inline-block;color:#fff;background:var(--flame);font-weight:700;text-transform:uppercase;font-size:.62rem;letter-spacing:.04em;padding:2px 7px;border-radius:2px;font-family:"Barlow Condensed",sans-serif;margin-bottom:3px}
.news-row strong{display:block;font-size:1rem;font-weight:600;font-family:"Barlow Condensed",sans-serif;color:var(--ink)}
.news-row em{font-style:normal;color:var(--muted);display:block;font-size:.82rem;margin-top:2px}
.arrow{font-size:1.2rem;color:var(--flame);justify-self:end;font-weight:700}

/* ---------- Club / logo grid ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.logo-grid.large{grid-template-columns:repeat(4,1fr)}
.club-logo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-height:140px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;transition:.15s}
.club-logo-card:hover{border-color:var(--flame);box-shadow:0 6px 18px rgba(7,13,24,.1)}
.club-logo-card img{width:58px;height:58px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.2s}
.club-logo-card:hover img{filter:grayscale(0);opacity:1}
.club-logo-card strong{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:.92rem}
.club-logo-card small{color:var(--muted);font-size:.74rem}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:var(--ink);color:#fff;padding:44px 0 56px;position:relative;overflow:hidden;border-top:4px solid var(--flame)}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:30px;background:#fff;transform:skewY(-1.6deg);transform-origin:bottom left}
.page-hero h1{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.08;margin:.1em 0;color:#fff}
.page-hero.detail h1{max-width:800px}

/* ---------- Objectives (About) ---------- */
.objective-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
.objective{background:var(--paper);border-left:4px solid var(--flame);padding:14px 18px;display:flex;gap:14px;align-items:center}
.objective span{font-family:"Anton",sans-serif;font-weight:400;color:var(--ink);font-size:2.1rem;opacity:.22;line-height:1;flex-shrink:0}
.objective p{margin:0;font-size:.92rem}

/* ---------- Affiliations ---------- */
.affiliation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.affiliation-grid>div{border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center;background:#fff;transition:.15s}
.affiliation-grid>div:hover{border-color:var(--flame)}
.affiliation-grid img,.pbbf-placeholder{height:76px;width:76px;object-fit:contain;margin:0 auto 12px;filter:grayscale(1);opacity:.8;transition:.2s}
.affiliation-grid>div:hover img{filter:grayscale(0);opacity:1}
.affiliation-grid strong{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.02em}
.pbbf-placeholder{display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:1.2rem;font-family:"Anton",sans-serif}

/* ---------- People (office bearers) — roster card ---------- */
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.person-card{position:relative;border:1px solid var(--line);border-top:4px solid var(--flame);border-radius:var(--radius);padding:20px;background:var(--ink);color:#fff;overflow:hidden}
.person-initial{width:42px;height:42px;border-radius:2px;background:var(--navy-2);color:var(--amber);display:grid;place-items:center;font-family:"Anton",sans-serif;font-size:1.2rem;margin-bottom:14px}
.person-card small{color:#fff;background:var(--flame);display:inline-block;font-weight:700;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:2px;font-family:"Barlow Condensed",sans-serif}
.person-card h3{margin:.4em 0 0;font-size:1.05rem;color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.01em}

/* ---------- Article ---------- */
.article-wrap{max-width:820px}
.article-cover{width:100%;max-height:400px;object-fit:cover;border-radius:var(--radius);margin-bottom:26px;border-top:4px solid var(--flame)}
.article-text{font-family:"Barlow",sans-serif;font-size:1rem;line-height:1.8;white-space:normal;color:var(--text)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:28px}
.gallery img{width:100%;height:130px;object-fit:cover;border-radius:var(--radius);transition:.2s}
.gallery img:hover{transform:scale(1.04)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.contact-card{background:var(--ink);color:#fff;border-radius:var(--radius);border-top:4px solid var(--flame);padding:26px;display:flex;flex-direction:column}
.contact-card small{color:#fff;background:var(--flame);display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:12px;font-size:.64rem;padding:3px 8px;border-radius:2px;font-family:"Barlow Condensed",sans-serif}
.contact-card a{font-size:1rem;font-weight:700;color:#fff;font-family:"Barlow Condensed",sans-serif}
.contact-card a:hover{color:var(--amber)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#9fb0c4;padding-top:40px;border-top:4px solid var(--flame)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
.footer-logo{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:3px;margin-bottom:14px}
.site-footer h3{color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.7em;font-weight:700}
.site-footer p{font-size:.86rem}
.site-footer a{color:#c7d2e0}
.site-footer a:hover{color:var(--flame)}
.partner-logos{display:flex;gap:8px;flex-wrap:wrap}
.partner-logos img{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:3px;padding:4px;filter:grayscale(1);transition:.2s}
.partner-logos img:hover{filter:grayscale(0)}
.social-links{display:flex;gap:10px;margin-top:12px}
.social-links a{font-weight:700;color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;border:1px solid rgba(255,255,255,.3);padding:5px 11px;border-radius:2px;font-family:"Barlow Condensed",sans-serif}
.social-links a:hover{border-color:var(--flame);color:var(--flame)}
.copyright{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:14px;margin-top:32px;font-size:.72rem;color:#6c7c90;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.03em}
.empty{padding:24px;color:var(--muted)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:92px;left:0;right:0;background:var(--ink);flex-direction:column;align-items:stretch;padding:8px 16px 14px;box-shadow:0 15px 30px rgba(0,0,0,.25);border-bottom:3px solid var(--flame)}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 10px}
  .main-nav a:after{display:none}
  .main-nav a.nav-cta{margin-left:0;margin-top:6px;text-align:center}
  .top-strip-inner span:first-child{display:none}
  .top-strip-inner{justify-content:center}
  .split,.contact-grid{grid-template-columns:1fr;gap:18px}
  .split>div:first-child{border-left:0;border-top:4px solid var(--flame);padding-left:0;padding-top:14px}
  .card-grid.three,.people-grid{grid-template-columns:repeat(2,1fr)}
  .logo-grid,.logo-grid.large,.gallery{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .hero{min-height:360px;background-position:center;background-size:cover}
  .stat-strip-grid{grid-template-columns:repeat(2,1fr)}
  .stat-block:nth-child(3){border-left:0}
  .objective-grid,.affiliation-grid{grid-template-columns:1fr}
  .section{padding:36px 0}
}
@media(max-width:580px){
  .brand small{display:none}
  .brand img{width:34px;height:34px}
  .nav-wrap{min-height:56px}
  .main-nav{top:84px}
  .card-grid.three,.people-grid{grid-template-columns:1fr}
  .news-row{grid-template-columns:46px 1fr 16px;gap:10px}
  .news-date b{font-size:1.05rem}
  .logo-grid,.logo-grid.large,.gallery{grid-template-columns:1fr 1fr}
  .gallery img{height:100px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero{min-height:320px}
  .stat-strip-grid{grid-template-columns:1fr 1fr}
  .section{padding:30px 0}
}