/* TheBank Event Shell v27.33
   Shared layout guardrails for every /events/ page.
   Event-specific art/content stays custom. Navigation, containers and responsive sizing stay consistent. */
html{width:100%;max-width:100%;overflow-x:clip}
body{width:100%;max-width:100%;overflow-x:clip}
img,video,iframe,svg{max-width:100%}
main,section,header,footer,nav,div{min-width:0}

/* one dependable event navigation frame */
.ef-nav,.feature-nav,.ev-nav,.topbar.simple-nav-v2710{
  position:sticky!important;top:0!important;z-index:1000!important;
  width:100%!important;max-width:100%!important;min-height:68px!important;
  background:rgba(5,5,5,.96)!important;color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
}
.ef-nav .ef-wrap,.feature-nav .fwrap,.ev-nav .ev-wrap,.topbar.simple-nav-v2710 .nav{
  width:min(1180px,calc(100% - 36px))!important;max-width:1180px!important;
  min-height:68px!important;margin:0 auto!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;
}
.ef-brand,.feature-brand,.ev-brand,.topbar.simple-nav-v2710 .brand{
  display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;
  color:#fff!important;text-decoration:none!important;font-weight:900!important;letter-spacing:0!important;
}
.ef-brand img,.feature-brand img,.ev-brand img,.topbar.simple-nav-v2710 .brand img{
  width:44px!important;height:44px!important;max-width:44px!important;object-fit:contain!important;flex:0 0 44px!important;
}
.ef-nav nav,.feature-nav nav,.ev-links,.topbar.simple-nav-v2710 .links{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:16px!important;
  margin-left:auto!important;min-width:0!important;flex-wrap:nowrap!important;
}
.ef-nav nav a,.feature-nav nav a,.ev-links a,.topbar.simple-nav-v2710 .links a{
  color:#fff!important;text-decoration:none!important;white-space:nowrap!important;font-size:.86rem!important;font-weight:850!important;
}
.topbar.simple-nav-v2710 .header-cta{margin-left:16px!important;white-space:nowrap!important;flex:0 0 auto!important}

/* dependable content rails */
.ef-wrap,.fwrap,.ev-wrap,.topbar.simple-nav-v2710 .wrap{
  max-width:1180px!important;
}
.ef-hero h1,.feature-hero h1,.dub-hero h1,.hero-copy h1,.page-hero h1,
.ef-section h2,.feature-section h2,.media-section h2,.section h2{
  max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;text-wrap:balance;
}
.ef-hero-grid,.dub-grid,.two-col,.media-grid,.playlist-block,.split,.cards,.ef-grid3,.ef-gallery,.fact-grid,.factrow,.ef-factrow{
  min-width:0!important;
}
.ef-card,.card,.fact,.ef-fact,.listing-card-v2710{min-width:0!important;max-width:100%!important}
.ef-actions,.hero-actions,.listen-links,.three-actions{max-width:100%!important}
.ef-btn,.ef-ghost,.ef-pill,.ev-btn,.pill,.bigpill,.ghostpill,.darkpill,.outline-dark,.btn{
  max-width:100%!important;white-space:normal!important;text-align:center!important;
}

/* generic rich-event hero: large without swallowing the viewport */
.ef-hero{min-height:clamp(620px,78vh,860px)!important}
.ef-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr)!important;gap:46px!important;padding:72px 0 58px!important}
.ef-hero h1{font-size:clamp(3.6rem,7.7vw,7.4rem)!important;line-height:.86!important}
.ef-poster-shell{width:min(100%,500px)!important;max-width:500px!important}

/* custom feature pages keep their worlds, but obey the same frame */
.feature-hero{min-height:clamp(620px,78vh,820px)!important}
.feature-hero-copy{padding:105px 0 72px!important}
.feature-hero h1,.dub-hero h1{font-size:clamp(4rem,10vw,8.5rem)!important}

/* Danksgiving was inheriting multiple generations of CSS. Pin it to one safe geometry. */
body.danksgiving-page .ev-hero{
  min-height:clamp(560px,72vh,720px)!important;height:auto!important;
  padding:82px 0 54px!important;display:flex!important;align-items:flex-end!important;
  background-position:center 26%!important;overflow:hidden!important;
}
body.danksgiving-page .hero-copy{
  position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  width:min(1180px,calc(100% - 36px))!important;max-width:1180px!important;margin:0 auto!important;
  padding:0!important;transform:none!important;
}
body.danksgiving-page .hero-copy h1{
  font-size:clamp(3.5rem,8vw,7rem)!important;line-height:.86!important;letter-spacing:-.055em!important;
  margin:10px 0 16px!important;max-width:900px!important;
}
body.danksgiving-page .hero-copy p{max-width:760px!important}
body.danksgiving-page .fact-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
body.danksgiving-page .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.danksgiving-page .card img{max-width:100%!important;height:auto!important}

/* event hub/list cards: keep poster proportion but stop cards becoming billboard-wide */
body .listing-grid-v2710{width:100%!important;max-width:1180px!important;margin-inline:auto!important}
body .listing-card-v2710{grid-template-columns:220px minmax(0,1fr)!important}
body .listing-card-v2710 img{width:220px!important;max-width:220px!important;height:100%!important;min-height:220px!important;object-fit:contain!important}

@media(max-width:980px){
  .ef-nav nav a:not(.ef-pill),.feature-nav nav a:not(.pill),.ev-links a:not(.ev-btn),.topbar.simple-nav-v2710 .links{display:none!important}
  .ef-hero-grid,.dub-grid,.two-col,.media-grid,.playlist-block,.split{grid-template-columns:1fr!important}
  .ef-poster-shell{justify-self:start!important}
  .ef-hero{min-height:auto!important}
  .ef-hero-grid{padding:56px 0 48px!important}
  .feature-hero{min-height:620px!important}
  body.danksgiving-page .cards{grid-template-columns:1fr!important}
  body.danksgiving-page .fact-grid{grid-template-columns:1fr 1fr!important}
  body .listing-card-v2710{grid-template-columns:180px minmax(0,1fr)!important}
  body .listing-card-v2710 img{width:180px!important;max-width:180px!important}
}

@media(max-width:620px){
  .ef-nav .ef-wrap,.feature-nav .fwrap,.ev-nav .ev-wrap,.topbar.simple-nav-v2710 .nav,
  body.danksgiving-page .hero-copy{width:calc(100% - 22px)!important}
  .ef-brand span,.feature-brand span,.ev-brand span,.topbar.simple-nav-v2710 .brand span{font-size:.92rem!important}
  .ef-nav,.feature-nav,.ev-nav,.topbar.simple-nav-v2710{min-height:62px!important}
  .ef-nav .ef-wrap,.feature-nav .fwrap,.ev-nav .ev-wrap,.topbar.simple-nav-v2710 .nav{min-height:62px!important}
  .ef-brand img,.feature-brand img,.ev-brand img,.topbar.simple-nav-v2710 .brand img{width:40px!important;height:40px!important;max-width:40px!important;flex-basis:40px!important}
  .ef-pill,.pill,.ev-btn,.topbar.simple-nav-v2710 .header-cta{padding:10px 13px!important;min-height:42px!important;font-size:.78rem!important}
  .ef-hero h1{font-size:clamp(3rem,15vw,5.2rem)!important}
  .feature-hero h1,.dub-hero h1{font-size:clamp(3.6rem,18vw,6rem)!important}
  body.danksgiving-page .ev-hero{min-height:500px!important;padding:62px 0 34px!important;background-position:center 24%!important}
  body.danksgiving-page .hero-copy h1{font-size:clamp(3rem,16vw,5.3rem)!important}
  body.danksgiving-page .fact-grid{grid-template-columns:1fr 1fr!important}
  body .listing-card-v2710{grid-template-columns:1fr!important}
  body .listing-card-v2710 img{width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:420px!important}
}
