/* Brentwood Video Hero — full-bleed video with a white text card overlapping
   the bottom, matching the live brentwood.ca hero (CMS 'huge' layout).
   Reference: staging copy at brentwood.demoing.info (card: max-w-2xl,
   p-8 md:px-16, shadow-lg, pulled up -mt-32 over the video; text gray-600,
   h1 30px/300, body 18px). */
.bw-hero{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-bottom:2rem}
/* Width = "Theme width": constrain to the theme content width instead of the
   full-bleed 100vw (doubled class beats the base .bw-hero rule). Centered with
   a 2rem bottom gap; border-box keeps the padding inside the content width.
   The side padding must MATCH the theme's content gutter so the hero media lines
   up with body content at every breakpoint. Kadence rows (.kb-row-layout-wrap,
   set in Customizer CSS) use a 1rem gutter below 1280px and 4rem at ≥1280px, so
   mirror that here — otherwise a fixed 4rem makes the hero far too narrow on
   tablet/mobile (the reported bug). */
.bw-hero.bw-hero--theme{box-sizing:border-box;width:100%;max-width:var(--global-content-width,1280px);margin:0 auto 2rem;padding-left:1rem;padding-right:1rem}
@media(min-width:1280px){
	.bw-hero.bw-hero--theme{padding-left:4rem;padding-right:4rem}
}
.bw-hero__media{position:relative;width:100%;padding-bottom:50%;overflow:hidden;background:#1a1a1a}
.bw-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;display:block}
.bw-hero__card{position:relative;z-index:7;margin:-8rem auto 0;max-width:42rem;background:#fff;color:#4b5563;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);padding:2rem 4rem;text-align:left}
.bw-hero__card h1{font-size:1.875rem;font-weight:300;line-height:1.2;color:#4b5563;margin:0 0 1rem}
.bw-hero__card p{margin:.75rem 0 0;font-size:1.125rem;line-height:1.55}
/* Closing dash — mirrors brentwood/hero-card (assets/dash.svg, 4rem × 4px). */
.bw-hero__dash{display:block;width:4rem;height:4px;margin:1.5rem 0 0}
.bw-hero__dash--left{margin-left:0;margin-right:auto}
.bw-hero__dash--center{margin-left:auto;margin-right:auto}
.bw-hero__dash--right{margin-left:auto;margin-right:0}
@media(max-width:768px){
	.bw-hero__media{padding-bottom:100%}
	.bw-hero__card{margin:-3rem 1rem 0;padding:1.5rem 2rem}
}

/* ── Carousel mode ──────────────────────────────────────────────────────────
   A crossfading image slideshow filling the same media box as the video, with
   dot navigation sitting just above the overlapping white card (matches the
   live brentwood.ca image hero). */
.bw-hero__carousel{position:absolute;inset:0}
.bw-hero__slides{position:absolute;inset:0}
.bw-hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.bw-hero__slide.is-active{opacity:1}
/* Dots: centred row, raised clear of the card (which is pulled up -8rem). z above
   the card so they stay visible/clickable over its top edge. */
.bw-hero__dots{position:absolute;left:0;right:0;bottom:calc(8rem + 1rem);z-index:8;display:flex;justify-content:center;gap:.6rem}
.bw-hero__dot{width:.7rem;height:.7rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.12);cursor:pointer;transition:background .2s ease,transform .2s ease}
.bw-hero__dot:hover{background:rgba(255,255,255,.85)}
.bw-hero__dot.is-active{background:#fff;transform:scale(1.1)}
@media(max-width:768px){
	.bw-hero__dots{bottom:calc(3rem + .75rem)}
}
@media(prefers-reduced-motion:reduce){
	.bw-hero__slide{transition:none}
}

/* Editor: same composition as the front end, but contained to the canvas (no 100vw full-bleed) */
.bw-hero--editor{width:100%;max-width:100%;margin-left:0}
.bw-hero--editor.bw-hero--theme{box-sizing:border-box;max-width:var(--global-content-width,1280px);margin:0 auto 2rem;padding-left:1rem;padding-right:1rem}
@media(min-width:1280px){
	.bw-hero--editor.bw-hero--theme{padding-left:4rem;padding-right:4rem}
}
.bw-hero--editor .bw-hero__card{margin-top:-5rem}

/* Editor: when no media chosen yet, let the upload placeholder size the area */
.bw-hero--editor .bw-hero__media:has(.bw-hero__placeholder){padding-bottom:0}
.bw-hero--editor .bw-hero__placeholder{min-height:240px}