/* Chenies Events: [ce_event_hero], the line under the title in the event page banner. */

/* The banner section holding [ce_event_hero] gets a soft fade: light at the top
   so the photo stays bright, darker behind the text. It replaces whatever flat
   overlay is set on that section in Breakdance, and touches no other section.
   Browsers too old to understand :has() keep the Breakdance overlay. */
.bde-section:has(.ce-hero) > .section-background-overlay{opacity:1!important;background:linear-gradient(180deg,rgba(20,26,25,.15) 0%,rgba(20,26,25,.55) 45%,rgba(20,26,25,.72) 100%)!important}
/* The title and this line sit in the lower part of the banner, not the middle. */
.bde-section:has(.ce-hero) > .section-container{min-height:clamp(340px,40vw,560px);justify-content:flex-end!important}
.ce-hero{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:100%;margin-top:14px;padding:0 16px;color:#fff;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.35);box-sizing:border-box}
.ce-hero p{margin:0!important;color:#fff!important;text-align:center!important}
.ce-hero-line{max-width:100%;font-family:'Marcellus',serif!important;font-weight:400!important;font-size:clamp(1.15rem,1rem + .6vw,1.4rem)!important;line-height:1.35!important;overflow-wrap:break-word}
.ce-hero-dot{padding:0 .5em;opacity:.85}
.ce-hero-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.ce-hero-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid rgba(255,255,255,.7);border-radius:5px;background:rgba(20,26,25,.35);font-family:'Marcellus',serif;font-size:1rem;line-height:1.3;text-shadow:none}
.ce-hero-pill svg{width:22px;height:22px;flex:none}
.ce-hero .ce-hero-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 24px;background:#fff;color:#5D6D6B!important;border-radius:5px;font-family:'Marcellus',serif;font-size:1rem;text-shadow:none;text-decoration:none!important;transition:background .25s}
.ce-hero .ce-hero-btn:hover{background:#eef1f0}
.ce-hero .ce-hero-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ce-hero-btn svg{width:20px;height:20px;flex:none}
@media (max-width:700px){
 .ce-hero-line span{display:block}
 .ce-hero-line .ce-hero-dot{display:none}
}
@media (prefers-reduced-motion:reduce){.ce-hero-btn{transition:none}}