/* =============================================================================
   SEAN OWN — Brand Component Library (shared site-wide)
   Linked from every page <head>. Per-page inline <style> still wins for
   page-specific overrides, so linking this file is non-breaking.
   See TEMPLATES.md for canonical HTML usage.
   Brand tokens:
     --blue          Berkeley Blue  #003262
     --blue-dark     Hover         #001B3A
     --gold          California Gold #FDB515
     --gold-dark     Accent dim    #C4820E
     --ink           Text          #0A0A0A
   Fonts (loaded via Google Fonts in each page):
     Bebas Neue / Oswald (display)  Inter / Open Sans (body)
   No JS. No carousel. No captions. Square corners. Hover = color swap only.
   ============================================================================= */

.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap,16px);
  margin:32px 0;
}
.gallery > img,
.gallery > a > img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  border:1px solid var(--color-border,#E0E0E0);
}
@media (max-width:700px){ .gallery{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .gallery{grid-template-columns:1fr;} }

/* ---------- News / Related cards ---------- */
.news-card,
.rel-card{
  display:flex;
  flex-direction:column;
  background:var(--color-surface-alt,#F4F4F4);
  border:1px solid var(--color-border,#E0E0E0);
  text-decoration:none;
  color:inherit;
}
.news-card .cover,
.rel-card .cover{
  aspect-ratio:4/3;
  overflow:hidden;
  background:#000;
}
.news-card .cover img,
.rel-card .cover img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.news-card .body,
.rel-card .body{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.news-card .body h3,
.rel-card .body h3{
  font-family:"Bebas Neue","Oswald",Impact,sans-serif;
  font-size:28px;
  line-height:0.95;
  text-transform:uppercase;
  color:var(--blue,#003262);
  margin:0;
}
.news-card .body p,
.rel-card .body p{ color:#333; margin:0; line-height:1.5; }
.news-card .body .read,
.rel-card .body .read{
  margin-top:auto;
  color:var(--gold-dark,#C4820E);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:13px;
}
.news-card:hover .body .read,
.rel-card:hover .body .read{ color:var(--blue,#003262); }

/* ---------- Card media (sources list under news/event cards) ---------- */
.card-media{
  list-style:none;
  padding:0;
  margin:8px 0 0;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
}
.card-media li a{
  color:var(--gold-dark,#C4820E);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.card-media li a:hover{ color:var(--blue,#003262); }

/* ---------- Section heading pattern ---------- */
.section-eyebrow{
  font-family:"Oswald","Inter",sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--gold-dark,#C4820E);
  font-size:13px;
  margin:0 0 8px;
}
.section-title{
  font-family:"Bebas Neue","Oswald",Impact,sans-serif;
  font-size:48px;
  line-height:0.95;
  text-transform:uppercase;
  color:var(--blue,#003262);
  margin:0 0 24px;
}
@media (max-width:700px){ .section-title{font-size:36px;} }

/* ---------- Container helper ---------- */
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Related cross-link grid ---------- */
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:40px 0 0;
}
@media (max-width:800px){ .related-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:500px){ .related-grid{grid-template-columns:1fr;} }

/* ---------- Figure (zero-caption rule enforcement) ----------
   Pages must not render <figcaption>. This rule hides any accidental one. */
figure figcaption{ display:none !important; }

/* ---------- Venue map (interactive Google Maps embed) ----------
   Replaces the old static PNG. No third-party JS needed — it is a plain
   <iframe> (allowed since the 2026-09-03 rule change). Square corners,
   brand border, gold "Open in Google Maps" link below. */
.venue{ margin:24px 0 0; }
.venue-map{
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--color-border,#E0E0E0);
  display:block;
}
.venue-link{
  display:inline-block;
  margin-top:12px;
  font-family:"Oswald","Inter",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:13px;
  color:var(--gold-dark,#C4820E);
  text-decoration:none;
  border-bottom:2px solid currentColor;
  padding-bottom:2px;
}
.venue-link:hover{ color:var(--blue,#003262); }
@media (max-width:700px){ .venue-map{ aspect-ratio:4/3; } }

/* ---------- Text-only "Continue Exploring" cards ---------- */
.explore-block{margin:64px auto 0;padding:0 24px;max-width:1180px;}
.explore-block .kicker{font-family:"Oswald","Inter",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--gold-dark,#C4820E);font-size:13px;display:block;margin:0 0 6px;}
.explore-block h2{font-family:"Bebas Neue","Oswald",Impact,sans-serif;font-size:40px;line-height:.98;text-transform:uppercase;color:var(--blue,#003262);margin:0 0 20px;}
.explore-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.explore-card{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--color-surface-alt,#F4F4F4);border:1px solid var(--color-border,#E0E0E0);text-decoration:none;color:inherit;transition:border-color .15s;}
.explore-card:hover{border-color:var(--blue,#003262);}
.explore-card .ex-kicker{font-family:"Oswald","Inter",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-dark,#C4820E);font-size:11px;}
.explore-card h3{font-family:"Bebas Neue","Oswald",Impact,sans-serif;font-size:22px;line-height:.98;text-transform:uppercase;color:var(--blue,#003262);margin:0;}
.explore-card .ex-read{color:var(--gold-dark,#C4820E);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:12px;margin-top:auto;}
.explore-card:hover .ex-read{color:var(--blue,#003262);}
@media(max-width:900px){.explore-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.explore-grid{grid-template-columns:1fr;}}

/* ---------- Consent banner (GDPR / GA4 Consent Mode v2) ----------
   Driven by js/consent-banner.js. Mounts only when no prior choice is stored
   in localStorage 'seanown_consent' (written by js/analytics.js updateConsent).
   Brand: Berkeley Blue plate, California Gold primary action, square corners,
   hover = color swap only (per component-library rules).                 */
.consent-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9999;
  background:var(--blue,#003262);
  border-top:3px solid var(--gold,#FDB515);
  color:#fff;
  font-family:"Inter","Open Sans",sans-serif;
  animation:consent-rise .28s ease-out;
}
.consent-banner[hidden]{ display:none !important; }
@keyframes consent-rise{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .consent-banner{ animation:none; }
}
.consent-inner{
  max-width:1180px;
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:24px;
}
.consent-copy{ flex:1; min-width:0; }
.consent-copy .consent-title{
  display:block;
  font-family:"Bebas Neue","Oswald",Impact,sans-serif;
  font-size:22px;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--gold,#FDB515);
  margin:0 0 6px;
}
.consent-copy p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}
.consent-copy a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
}
.consent-copy a:hover{ color:var(--gold,#FDB515); }
.consent-actions{
  display:flex;
  gap:10px;
  flex-shrink:0;
}
.consent-btn{
  font-family:"Oswald","Inter",sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  padding:12px 22px;
  border:1px solid transparent;
  cursor:pointer;
  transition:color .15s, background-color .15s, border-color .15s;
  white-space:nowrap;
}
.consent-btn-accept{
  background:var(--gold,#FDB515);
  color:var(--blue,#003262);
}
.consent-btn-accept:hover{
  background:var(--gold-dark,#C4820E);
  color:#fff;
}
.consent-btn-reject{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
}
.consent-btn-reject:hover{
  border-color:#fff;
  background:rgba(255,255,255,.1);
}
/* Stack on narrow screens: copy above, full-width actions below */
@media (max-width:760px){
  .consent-inner{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    padding:18px 20px;
  }
  .consent-actions{ display:flex; }
  .consent-btn{ flex:1; text-align:center; padding:13px 16px; }
}