.hero .tournament-banner{display:grid;grid-template-columns:minmax(0,1fr) 12px;gap:3px 10px;align-items:center;align-self:stretch;flex:none;min-height:52px;margin:0 0 14px;padding:9px 13px;border-radius:12px;background:rgba(20,33,40,.54);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;text-decoration:none;text-shadow:0 1px 3px #0004;z-index:2}
.hero .tournament-banner[hidden]{display:none}
.tournament-banner-name{font-size:10px;line-height:1.3;font-weight:550;letter-spacing:.08em;text-transform:uppercase;color:#e0e4e7}
.tournament-banner-text{font-size:14px;line-height:1.3;font-weight:550;letter-spacing:-.015em;overflow-wrap:anywhere}
.tournament-banner-arrow{grid-column:2;grid-row:1/3;font-size:23px;font-weight:300;opacity:.8}
.tournament-banner:focus-visible{outline:2px solid white;outline-offset:4px}
.hero.has-tournament-banner{height:calc(clamp(430px,100vw,510px) + 66px + env(safe-area-inset-top));min-height:calc(clamp(430px,100vw,510px) + 66px + env(safe-area-inset-top))}
.hero.hero-wallpaper-revealed .tournament-banner{visibility:hidden;pointer-events:none}
@media(min-width:601px){.hero .tournament-banner{max-width:400px}}
.hero.has-tournament-banner .tournament-banner{margin-top:auto}


/* Dates share the existing eyebrow row so the banner remains two lines. */
.tournament-banner-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.tournament-banner-date{flex:none;font-size:11px;line-height:1.3;font-weight:450;letter-spacing:0;color:#dce3e7;white-space:nowrap}
@media(max-width:350px){.tournament-banner-name{font-size:9px;letter-spacing:.04em}.tournament-banner-date{font-size:10px}}