/* Brentwood page/post hero (template-rendered — see inc/brentwood-hero.php).
   Frame geometry: contained 72rem media at a 16:9 ratio with shadow; white
   card (max-w 672, p 32/64, gray-600 text, closing dash) overlapping by 4rem.
   Home video variant is full-bleed 100vw at 50% ratio with an 8rem overlap,
   matching the old homepage block.

   The framed crop is 16:9 (not the old 2.35:1 cinematic banner) so that a
   landscape featured image overflows the frame *horizontally* — without that
   slack, object-fit:cover pins the image to full width and the "Featured
   image — horizontal focus" control has no room to pan (only vertical would
   move). 16:9 keeps both focus axes meaningful for typical photos. */

/* Framed modes: image / video / carousel */
.bw-phero--frame{position:relative;max-width:72rem;margin:0 auto 2rem}
/* Framed page hero: 42.5% (~2.35:1) to match the live site (Tailwind pb-[42.5%]).
   Was 56.25% (16:9) — the client found that too tall on desktop widescreen. */
.bw-phero--frame .bw-phero__media{position:relative;width:100%;padding-bottom:42.5%;overflow:hidden;background:#1a1a1a;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
/* On phones 2.35:1 is a thin strip — keep framed heroes at 16:9 there.
   (YouTube heroes stay 16:9 everywhere via their own --youtube rule below.) */
@media(max-width:768px){.bw-phero--frame .bw-phero__media{padding-bottom:56.25%}}

/* Full-bleed home video */
.bw-phero--bleed{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-bottom:2rem}
.bw-phero--bleed .bw-phero__media{position:relative;width:100%;padding-bottom:50%;overflow:hidden;background:#1a1a1a}
@media(max-width:768px){.bw-phero--bleed .bw-phero__media{padding-bottom:100%}}

.bw-phero__media img,.bw-phero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Carousel: fixed-height slider (default 380px = brentwood.ca/academics/courses;
   set per page via the "Carousel height" field → --bw-carousel-h), overriding
   the framed aspect-ratio padding. Mobile scales down proportionally. */
.bw-phero--frame .bw-phero__media--carousel{padding-bottom:0;height:var(--bw-carousel-h,380px)}
@media(max-width:768px){.bw-phero--frame .bw-phero__media--carousel{height:calc(var(--bw-carousel-h,380px) * 0.68)}}

/* Featured Image: optional fixed height (the "Featured image — height" field →
   --bw-phero-h), overriding the default 16:9 aspect padding. The image covers
   the box, honouring its focus point + zoom. Mobile scales down proportionally. */
.bw-phero--frame .bw-phero__media--fixed-h{padding-bottom:0;height:var(--bw-phero-h,460px)}
@media(max-width:768px){.bw-phero--frame .bw-phero__media--fixed-h{height:calc(var(--bw-phero-h,460px) * 0.68)}}

/* Video loading overlay — white logo + spinning ring on the dark media bg,
   fades out once the video can play (page-hero.js adds .is-loaded). */
.bw-phero__loader{position:absolute;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none;transition:opacity .5s ease}
.bw-phero__media.is-loaded .bw-phero__loader{opacity:0}
.bw-phero__media .bw-phero__loader-icon{position:absolute;inset:auto;width:80px;height:auto;object-fit:contain}
.bw-phero__loader-ring{position:absolute;width:104px;height:104px;opacity:.5}
.bw-phero__loader-ring div{box-sizing:border-box;display:block;position:absolute;width:104px;height:104px;border:4px solid #fff;border-radius:50%;animation:bw-phero-spin 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:#fff transparent transparent transparent}
.bw-phero__loader-ring div:nth-child(1){animation-delay:-.45s}
.bw-phero__loader-ring div:nth-child(2){animation-delay:-.3s}
.bw-phero__loader-ring div:nth-child(3){animation-delay:-.15s}
@keyframes bw-phero-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@media print{.bw-phero__loader{display:none}}

/* YouTube hero: 16:9 frame, click-to-load facade */
.bw-phero--frame .bw-phero__media--youtube{padding-bottom:56.25%}
@media(min-width:768px){.bw-phero--frame .bw-phero__media--youtube{padding-bottom:56.25%}}
.bw-phero__yt{position:absolute;inset:0;cursor:pointer;background:#000}
.bw-phero__yt-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bw-phero__yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;padding:0;border:0;background:none;cursor:pointer}
.bw-phero__yt-play svg{width:100%;height:100%}
.bw-phero__yt-bg{fill:#212121;fill-opacity:.8;transition:fill-opacity .2s}
.bw-phero__yt:hover .bw-phero__yt-bg{fill:#f00;fill-opacity:1}
.bw-phero__yt-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.bw-phero__yt.is-playing .bw-phero__yt-poster,.bw-phero__yt.is-playing .bw-phero__yt-play{display:none}

/* Carousel slides crossfade (page-hero.js advances them) */
.bw-phero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
.bw-phero__slide.is-active{opacity:1}
.bw-phero__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Carousel indicators: dots + a timer bar (built by page-hero.js) */
.bw-phero__dots{position:absolute;left:0;right:0;bottom:16px;z-index:6;display:flex;justify-content:center;gap:10px}
.bw-phero__dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.4);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .3s,transform .3s}
.bw-phero__dot:hover{background:rgba(255,255,255,.85)}
.bw-phero__dot.is-active{background:#fff;transform:scale(1.25)}
.bw-phero__progress{position:absolute;left:0;right:0;bottom:0;z-index:6;height:4px;background:rgba(255,255,255,.25);overflow:hidden}
.bw-phero__progress-fill{height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
@keyframes bw-phero-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Keep indicators clear of an overlapping white card */
.bw-phero__media--carousel.has-card .bw-phero__dots{bottom:calc(4rem + 14px)}
.bw-phero__media--carousel.has-card .bw-phero__progress{bottom:4rem}
@media(max-width:768px){
	.bw-phero__media--carousel.has-card .bw-phero__dots{bottom:calc(2.5rem + 14px)}
	.bw-phero__media--carousel.has-card .bw-phero__progress{bottom:2.5rem}
}
@media(prefers-reduced-motion:reduce){
	.bw-phero__progress-fill{animation:none !important;transform:scaleX(1)}
}
@media print{.bw-phero__dots,.bw-phero__progress{display:none}}

/* White text card */
.bw-phero__cardwrap{position:relative;z-index:7;display:grid;place-items:center}
.bw-phero--frame .bw-phero__cardwrap{margin-top:-4rem}
.bw-phero--bleed .bw-phero__cardwrap{margin-top:-8rem}
.bw-phero__card{width:100%;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-phero__card h1{font-size:1.875rem;font-weight:300;line-height:1.2;color:#4b5563;margin:0 0 1rem}
.bw-phero__body p{margin:.75rem 0 0;line-height:1.55;color:#4b5563}
.bw-phero__dash{display:block;width:4rem;height:4px;margin:1.5rem 0 0}
.bw-phero__dash--left{margin-left:0;margin-right:auto}
.bw-phero__dash--center{margin-left:auto;margin-right:auto}
.bw-phero__dash--right{margin-left:auto;margin-right:0}

/* Card as a Gutenberg block (brentwood/hero-card). Keep it the FIRST block
   on the page: the template prints the hero media right before the content,
   so the block is the media's next sibling and overlaps it like the
   field-rendered card does. Standalone (no hero above) it just flows. */
.bw-hero-card .bw-phero__cardwrap{margin-top:0}
.bw-phero + .bw-hero-card{margin-top:0 !important}      /* cancel theme block gap */
.bw-phero:has(+ .bw-hero-card){margin-bottom:0}          /* cancel the hero's own bottom margin */
.bw-phero--frame + .bw-hero-card .bw-phero__cardwrap{margin-top:-4rem}
.bw-phero--bleed + .bw-hero-card .bw-phero__cardwrap{margin-top:-8rem}
@media(max-width:768px){
	.bw-phero--frame + .bw-hero-card .bw-phero__cardwrap{margin-top:-2.5rem}
	.bw-phero--bleed + .bw-hero-card .bw-phero__cardwrap{margin-top:-3rem}
}
/* Featured YouTube: while the video plays, drop the overlapping card BELOW the
   video so the whole clip shows; it slides back over when paused/ended
   (page-hero.js toggles .is-yt-playing on the hero). Higher specificity than the
   negative-margin rules above, so it wins at every breakpoint. */
.bw-phero__cardwrap{transition:margin-top .35s ease}
.bw-phero--frame.is-yt-playing + .bw-hero-card .bw-phero__cardwrap{margin-top:1rem}

/* "Play Video" link inside the hero card (YouTube mode), like the live site. */
.bw-hero-playvideo{display:inline-flex;align-items:center;gap:.5em;margin:1.25rem 0 0;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--global-palette1,#c8272c);line-height:1}
.bw-hero-playvideo__icon{width:1.6em;height:auto;display:block;flex:0 0 auto}
.bw-hero-playvideo:hover,.bw-hero-playvideo:focus{text-decoration:underline}
@media print{.bw-hero-playvideo{display:none}}
/* Editor canvas: same card look, sized to the canvas */
.bw-hero-card--editor .bw-phero__card{width:100%}
/* Editor-only: label the H1 so admins know it IS the Page Title Override.
   (Never output on the front end — rendered only by editor.js.) */
.bw-hero-card--editor .bw-hero-card__ovr-label{display:inline-block;margin:0 0 6px;padding:1px 7px;font-size:10px;font-weight:600;line-height:1.7;letter-spacing:.05em;text-transform:uppercase;color:#1d4ed8;background:#eef2ff;border:1px solid #c7d2fe;border-radius:3px;-webkit-user-select:none;user-select:none}
.bw-hero-card--editor h1.bw-hero-card__ovr{margin-top:0}
.bw-hero-card--editor h1.bw-hero-card__ovr:focus{outline:2px solid #3b82f6;outline-offset:3px;border-radius:2px}
.bw-phero__card .bw-phero__body > p:first-child{margin-top:.75rem}

/* Hero Card call-to-action — optional red button at the card's top-right,
   beside the heading (mirrors the live "Apply Now ›"). The title + button
   share a flex header row; the title wraps on the left, the button stays
   pinned top-right. Only present when the CTA toggle is on. */
.bw-phero__head{display:flex;align-items:flex-start;gap:1.5rem}
.bw-phero__head > h1{flex:1 1 auto;min-width:0}
.bw-hero-cta{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:.35em;background:var(--global-palette1,#c8272c);color:#fff;font-size:1rem;font-weight:600;line-height:1;padding:.7em 1.15em;border-radius:2px;text-decoration:none;white-space:nowrap;transition:background .15s ease}
.bw-hero-cta:hover,.bw-hero-cta:focus{background:var(--global-palette2,#a32024);color:#fff;text-decoration:none}
.bw-hero-cta__arrow{font-size:1.15em;font-weight:400;line-height:1}
.bw-hero-card--editor .bw-hero-cta{cursor:default}      /* editor preview isn't a live link */
@media(max-width:768px){
	.bw-phero__head{flex-direction:column;gap:.85rem}
	.bw-hero-cta{margin-left:0;align-self:flex-start}
}

/* Gallery grid (the migrated blog layout) */
.bw-phero--gallery{display:grid;grid-template-columns:repeat(var(--bw-phero-cols,2),1fr);gap:4px;width:100%;margin-bottom:2rem}
.bw-phero--gallery .bw-phero__cell{position:relative;overflow:hidden}
.bw-phero--gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}

@media(max-width:768px){
	.bw-phero__card{margin:0 1rem;padding:1.5rem 2rem}
	.bw-phero--frame .bw-phero__cardwrap{margin-top:-2.5rem}
	.bw-phero--bleed .bw-phero__cardwrap{margin-top:-3rem}
}
@media print{
	.bw-phero__media{box-shadow:none}
	.bw-phero__slide{position:static;opacity:1}
}

/* -------------------------------------------------------------------------
   Single blog post layout (matches the live blog single):
   hero spans the full content width; everything else sits in the right 67%,
   beside the red vertical .border-primary-line at 33.9% (customizer CSS).
   Kadence full-width rows (.kb-row-layout-wrap) keep their own width.
   ------------------------------------------------------------------- */
/* Kadence's featured-image area is emptied on single posts (the hero renders
   inside the content instead) — collapse its reserved space. */
.single-post .post-thumbnail.article-post-thumbnail{display:none}

.bw-post-header h1{font-size:1.875rem;font-weight:300;line-height:1.2;color:#4b5563;margin:0 0 .5rem}
.bw-post-header__meta{font-size:.9375rem;color:#6b7280}
.bw-post-header__meta span{display:block}
.bw-post-header__author{font-style:italic}
.bw-post-header{margin-bottom:1.5rem}

@media(min-width:768px){
	.single-post .entry-content > *:not(.bw-phero):not(.bw-hero-card):not(.alignfull):not(.alignwide):not(.kb-row-layout-wrap){
		margin-left:33.9%;
		max-width:64.1%;
		padding-left:3rem;
		padding-right:3rem;
		position:relative;
		z-index:1;
	}
	.single-post .entry-content > .bw-phero{position:relative;z-index:2}
}
@media(max-width:767.98px){
	.bw-post-header,.single-post .entry-content > p{padding-left:1rem;padding-right:1rem}
}

/* Hero video loading spinner disabled per Rian (2026-06-20): it lingered over an
   already-playing video. Reversible — delete this one rule to restore the loader.
   (Markup from bw_hero_loader() + page-hero.js are left untouched.) */
.bw-phero__loader{display:none !important}