/* Brentwood Images — front-end styles (single image card + modal popup).
 * Self-contained. Faithfully mirrors the numbered photo blocks on
 * brentwood.ca/brentwood-100: Oswald header type, a zinc-700/80 ".content-number"
 * badge, a large white card-relative title with the brand-red chevron (or a white
 * dash bar), and a hard "1px 1px #222" text-shadow. Drop several into a Row /
 * Columns layout to build a grid.
 *
 * Brand tokens (from the live site): header font = Oswald; primary = rgb(200,39,44);
 * badge bg = zinc-700 @ 80% = rgba(63,63,70,.8); text-shadow = 1px 1px 0 #222. */

.bw-cg-card,
.bw-cg-card * {
	box-sizing: border-box;
}

/* ── card ──────────────────────────────────────────────────────────────────── */
.bw-cg-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* "Fill section height" — the card stretches to its column / section height
 * instead of a fixed aspect ratio (use inside an equal-height Row / Columns). */
.bw-cg-card--fill {
	height: 100%;
}
.bw-cg-card--fill .bw-cg-card__box {
	aspect-ratio: auto;
	height: 100%;
	flex: 1 1 auto;
}

/* "Fill column (match neighbour)" — the card matches its column height like
 * --fill, but the box is taken OUT of flow (absolute) so it can NEVER define the
 * row height: a taller neighbour column sizes the row and the image conforms /
 * crops to it, WITHOUT stretching the row. Needs an equal-height Row / Columns.
 *
 * The card wrapper contributes ~0 in-flow height (its only child, the box, is
 * absolute), so the neighbour wins; height:100% + position:relative let the card
 * stretch to the flex-equalised column and the absolute box fill it.
 *
 * Mobile (<768px): columns stack with no sibling to size against, so we apply
 * nothing here — the box keeps its base aspect-ratio (var fallback 1 / 1) and
 * renders in flow, so it never collapses. */
.bw-cg-card--fill-col {
	height: 100%;
}
@media (min-width: 768px) {
	.bw-cg-card--fill-col {
		position: relative;
	}
	.bw-cg-card--fill-col .bw-cg-card__box {
		position: absolute;
		inset: 0;
		aspect-ratio: auto; /* inset:0 drives the size, not a ratio/height */
		height: auto;
	}
}

.bw-cg-card__box {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--bw-cg-ratio, 1 / 1);
	overflow: hidden;
	border-radius: var(--bw-cg-radius, 4px);
	/* Frame background — shows behind the image. With "Show whole image" (fit:
	   contain) it fills the letterbox/pillarbox area; default hidden behind a
	   cover image. Overridable per card via --bw-cg-frame-bg. */
	background: var(--bw-cg-frame-bg, #1a1a1a);
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
	/* title/badge sizes scale to the card width (cqi units below) */
	container-type: inline-size;
	/* reset button styling for the modal trigger */
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
	font: inherit;
	color: inherit;
}

/* Responsive aspect ratio (fixed-ratio shapes only). Desktop uses --bw-cg-ratio
 * above; tablet / mobile override it when the author sets a per-breakpoint shape.
 * Kadence breakpoints: tablet ≤1024px, mobile ≤767px. Each falls back down the
 * chain (mobile → tablet → desktop) so unset breakpoints inherit the larger one.
 * Same selector + specificity as the base rule, placed after it, so the matching
 * media query wins at its width. The .bw-cg-card--fill* rules are more specific,
 * so the fill modes (which emit no ratio vars) are unaffected. */
@media (max-width: 1024px) {
	.bw-cg-card__box {
		aspect-ratio: var(--bw-cg-ratio-tablet, var(--bw-cg-ratio, 1 / 1));
	}
}
@media (max-width: 767px) {
	.bw-cg-card__box {
		aspect-ratio: var(--bw-cg-ratio-mobile, var(--bw-cg-ratio-tablet, var(--bw-cg-ratio, 1 / 1)));
	}
}

/* Per-breakpoint "Fill column" (opt-in toggles) — same mechanics as
 * .bw-cg-card--fill-col but scoped to tablet / mobile, and placed LAST so they
 * win (equal specificity) over the desktop shape and the responsive-ratio rules
 * at those widths. Like desktop fill-col, this needs an equal-height Row /
 * Columns with a taller neighbour at that breakpoint; if the columns stack
 * (common on mobile) there is no neighbour to match. */
@media (min-width: 768px) and (max-width: 1024px) {
	.bw-cg-card--fill-col-t {
		height: 100%;
		position: relative;
	}
	.bw-cg-card--fill-col-t .bw-cg-card__box {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		height: auto;
	}
}
@media (max-width: 767px) {
	.bw-cg-card--fill-col-m {
		height: 100%;
		position: relative;
	}
	.bw-cg-card--fill-col-m .bw-cg-card__box {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		height: auto;
	}
}

/* Mobile fallback for "Fill section height" (--fill). Its box is height:100% +
 * aspect-ratio:auto, which needs an ancestor with a definite height. On mobile
 * the Row's columns usually stack, so the column height becomes content-driven;
 * a slider card (whose slides are position:absolute, i.e. 0 in-flow height) then
 * collapses to height 0 and disappears. Restore a real aspect-ratio + in-flow
 * height on mobile so the box always has size (mirrors the --fill-col mobile
 * intent). Falls down the mobile→tablet→desktop ratio chain, else 1/1. */
@media (max-width: 767px) {
	.bw-cg-card--fill .bw-cg-card__box {
		aspect-ratio: var(--bw-cg-ratio-mobile, var(--bw-cg-ratio-tablet, var(--bw-cg-ratio, 1 / 1)));
		height: auto;
		flex: 0 0 auto;
	}
}

.bw-cg-card__box--static {
	cursor: default;
}

.bw-cg-card__img {
	display: block;
	width: 100%;
	height: 100%;
	/* cover = fill the frame (crop); contain = show the whole image at its own
	   ratio inside the frame (letterboxed, "Show whole image" option). */
	object-fit: var(--bw-cg-fit, cover);
}
.bw-cg-card__img--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 10px, #232323 10px, #232323 20px);
}

/* number badge — the live ".content-number": Oswald 700 white on zinc-700/80,
 * floating 4px from the top-left, square, with a hard text-shadow. */
.bw-cg-card__num {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	margin: 0.25rem;
	min-width: 2rem;
	padding: 0.25rem 0.5rem;
	display: grid;
	place-items: center;
	background: rgba(63, 63, 70, 0.8);
	color: #fff;
	font-family: "Oswald", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-shadow: 1px 1px 0 #222;
}

/* label overlay — a column: the label line (label + inline chevron) on top, and
 * the dash divider on the line below. Positioned top / center / bottom; the brand
 * leans on a hard text-shadow rather than a scrim. */
.bw-cg-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 32px;
	line-height: 1;
	pointer-events: none;
}
/* vertical position (top / center / bottom) */
.bw-cg-card__overlay--top {
	justify-content: flex-start;
}
.bw-cg-card__overlay--center {
	justify-content: center;
}
.bw-cg-card__overlay--bottom {
	justify-content: flex-end;
}
/* horizontal alignment (left / center / right) */
.bw-cg-card__overlay--h-left {
	align-items: flex-start;
	text-align: left;
}
.bw-cg-card__overlay--h-center {
	align-items: center;
	text-align: center;
}
.bw-cg-card__overlay--h-right {
	align-items: flex-end;
	text-align: right;
}
/* the label line: label text with the chevron inline immediately after it.
 * The label's clamp font-size lives HERE (not on the label) so the chevron — a
 * sibling of the label — inherits the same large size; otherwise its em sizing
 * would resolve against the default 16px and stay tiny next to a big label. */
.bw-cg-card__line {
	display: inline-flex;
	align-items: center;
	gap: 0.18em;
	max-width: 100%;
	font-size: clamp(1.15rem, 11cqi, 2rem);
}

.bw-cg-card__label {
	color: #fff;
	font-family: "Oswald", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: inherit;
	line-height: 1;
	text-shadow: 1px 1px 0 #222, 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* ── stat overlay — the number stacked LARGE above the label line (the live
 * "72% / Accepted into their first choice university" figure). The number and
 * label are the two lines of the same bottom-left overlay; both use Oswald with
 * the brand's hard text-shadow rather than a scrim. */
.bw-cg-card__overlay--stat {
	gap: 0.12em;
}
.bw-cg-card__statnum {
	font-family: "Oswald", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 700;
	/* scales with the card width (cqi), like the label line */
	font-size: clamp(2rem, 22cqi, 4.25rem);
	line-height: 1;
	text-shadow: 1px 1px 0 #222, 0 2px 10px rgba(0, 0, 0, 0.45);
}
/* in stat mode the label is the smaller descriptive line under the number */
.bw-cg-card__overlay--stat .bw-cg-card__line {
	font-size: clamp(1rem, 9cqi, 1.6rem);
}
.bw-cg-card__overlay--stat .bw-cg-card__label {
	font-weight: 600;
}

/* chevron — FontAwesome angle-right inline after the label, now sized in em of
 * the label's real (large) font-size. viewBox is 320×512 (aspect 0.625), so keep
 * width = 0.625 × height or it squishes. Height ≈ 1.05em → the arrow is about the
 * label's cap height, like the live text-4xl chevron beside the text-6xl title. */
.bw-cg-card__chevron {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex-shrink: 0;
	margin-left: 0.1em;
	line-height: 0;
}
.bw-cg-card__line .bw-cg-card__chevron svg {
	display: block;
	width: 0.5em;
	height: 0.8em;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

/* dash — the live dash.svg: a flat 64×4 white bar on its own line below the
 * label, with a soft black shadow behind it so it reads on light photos. */
.bw-cg-card__dash {
	display: block;
	width: 4rem;
	max-width: 70cqi;
	height: 0.25rem;
	margin-top: 1em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 1px rgba(0, 0, 0, 0.6);
}

/* hover lift on interactive cards. The Lightbox layout is excluded: it already
 * signals interactivity with the magnifier icon (opacity 0.5→1) + zoom-in cursor,
 * so the image should stand still on hover rather than shift up. */
.bw-cg-card__box:not(.bw-cg-card__box--static) {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
/* Frame background on hover ("Show whole image" mode). Falls back to the base
   frame background when no hover colour is set, so nothing changes then. */
.bw-cg-card__box:hover {
	background: var(--bw-cg-frame-bg-hover, var(--bw-cg-frame-bg, #1a1a1a));
}
.bw-cg-card__box:not(.bw-cg-card__box--static):not(.bw-cg-card__box--lightbox):hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.bw-cg-card__box:focus-visible {
	outline: 2px solid rgb(200, 39, 44);
	outline-offset: 2px;
}

/* caption — a bottom overlay ON the image (mirrors the live photo "description"
 * line and the video-text layout-6 caption: bg-black/50, white text, text-shadow).
 * Two background widths: --fit hugs the text (a positioned box), --full spans the
 * whole image width. Text aligns left / center / right via --align-*. */
.bw-cg-card__caption {
	position: absolute;
	bottom: 0;
	z-index: 3;
	margin: 0;
	padding: 4px 10px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.3;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* fit — the background hugs the text; the box itself is positioned left / center /
 * right along the bottom edge (alignment moves the box, not just the text). */
.bw-cg-card__caption--fit {
	max-width: 90%;
}
.bw-cg-card__caption--fit.bw-cg-card__caption--align-left {
	left: 0;
	right: auto;
	border-top-right-radius: 4px;
}
.bw-cg-card__caption--fit.bw-cg-card__caption--align-center {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.bw-cg-card__caption--fit.bw-cg-card__caption--align-right {
	left: auto;
	right: 0;
	border-top-left-radius: 4px;
}

/* full — the background spans the whole width (the Image #9 style); the text
 * inside aligns left / center / right. */
.bw-cg-card__caption--full {
	left: 0;
	right: 0;
	max-width: none;
}
.bw-cg-card__caption--full.bw-cg-card__caption--align-left {
	text-align: left;
}
.bw-cg-card__caption--full.bw-cg-card__caption--align-center {
	text-align: center;
}
.bw-cg-card__caption--full.bw-cg-card__caption--align-right {
	text-align: right;
}

/* ── slider layout — a dot-navigated slideshow inside the image box ─────────── */
.bw-cg-card__box--slider {
	cursor: default;
}
.bw-cg-card__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.bw-cg-card__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
	line-height: 0;
}
.bw-cg-card__slide.is-active {
	opacity: 1;
}
.bw-cg-card__slide .bw-cg-card__img {
	width: 100%;
	height: 100%;
	/* Respect the "Show whole image (fit inside frame)" toggle (--bw-cg-fit),
	   like the non-slider image; falls back to cover. */
	object-fit: var(--bw-cg-fit, cover);
}
/* Per-slide caption. The slide is inset:0 of the box, so the shared
 * .bw-cg-card__caption rules (position:absolute; bottom:0) land on the same
 * bottom edge they would in the other layouts — no separate geometry. Because it
 * sits INSIDE the slide it inherits the .is-active opacity fade, so the text
 * cross-fades with its own photo and view.js stays untouched.
 * .bw-cg-card__slides is z-index:0 + positioned = a stacking context, so the
 * caption's z-index:3 is scoped inside it and still paints under the dots /
 * arrows (z 4) and the transparent hit layer (z 1). */
.bw-cg-card__slide .bw-cg-card__caption {
	line-height: 1.3; /* the slide sets line-height:0 to kill the img gap */
}

/* Dots share the bottom edge with the caption bar, so lift them clear of it when
 * any slide has caption text (render.php adds --has-caption). Sized for a
 * single-line caption (~1.6rem tall + breathing room); a caption long enough to
 * wrap will still reach up behind them. */
.bw-cg-card__box--slider.bw-cg-card__box--has-caption .bw-cg-card__dots {
	bottom: 2.25rem;
}

/* hit layer — the link / modal trigger covering the photo, sitting above the
 * image (z 1) but below the dots / arrows (z 4) so they stay clickable. */
.bw-cg-card__hit {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.bw-cg-card__hit:focus-visible {
	outline: 2px solid rgb(200, 39, 44);
	outline-offset: -2px;
}
/* let clicks on the badge fall through to the hit layer (it's decorative) */
.bw-cg-card__box--slider .bw-cg-card__num {
	pointer-events: none;
}

/* dots — bottom-centre inside the image, like brentwood.ca's photo slider */
.bw-cg-card__dots {
	position: absolute;
	left: 50%;
	bottom: 0.85rem;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	gap: 0.5rem;
	padding: 0;
}
.bw-cg-card__dot {
	width: 0.6rem;
	height: 0.6rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
.bw-cg-card__dot:hover {
	background: rgba(255, 255, 255, 0.85);
}
.bw-cg-card__dot.is-active {
	background: #fff;
	transform: scale(1.15);
}
.bw-cg-card__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* autoplay progress line — mirrors brentwood.ca's slideshow-timer: two stacked
 * white/20% bars (a static track + an animated fill that scales 0 → 1 from the
 * centre over the interval, ease-in). The duration is set inline per slide and the
 * animation is (re)started by view.js so it stays in sync with the autoplay timer. */
@keyframes bw-cg-timer {
	0%   { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}
.bw-cg-card__timer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	height: 0.25rem;
	overflow: hidden;
	pointer-events: none;
}
.bw-cg-card__timer-track,
.bw-cg-card__timer-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
}
.bw-cg-card__timer-fill {
	z-index: 2;
	transform: scaleX(0);
	animation-name: bw-cg-timer;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
	animation-play-state: paused; /* view.js starts / restarts it per slide */
}

/* prev / next arrows (optional) */
.bw-cg-card__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.2s ease;
}
.bw-cg-card__arrow:hover {
	background: rgba(0, 0, 0, 0.55);
}
.bw-cg-card__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.bw-cg-card__arrow svg {
	width: 0.6rem;
	height: 0.95rem;
	display: block;
}
.bw-cg-card__arrow--prev {
	left: 0.6rem;
}
.bw-cg-card__arrow--prev svg {
	transform: rotate(180deg);
}
.bw-cg-card__arrow--next {
	right: 0.6rem;
}

/* ── modal popup (native <dialog>, mirrors bw/interlinking) ─────────────────── */
/* The dialog itself is just a transparent positioning shell; the white card is
 * __inner and the scroll lives on __content. Keeping the scroll off __inner means
 * the close button can overhang the top-right corner without being clipped. */
.bw-cg-modal {
	width: 92vw;
	max-width: 720px;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.bw-cg-modal--small  { max-width: 480px; }
.bw-cg-modal--medium { max-width: 720px; }
.bw-cg-modal--large  { max-width: 1000px; }
.bw-cg-modal--full   { max-width: 1280px; }
.bw-cg-modal::backdrop {
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
}
.bw-cg-modal__inner {
	position: relative;
	width: 100%;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);
}
.bw-cg-modal__content {
	max-height: calc(100vh - 2rem);
	overflow: auto;
	border-radius: 12px;
	padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
	-webkit-overflow-scrolling: touch;
}
.bw-cg-modal__content > :first-child { margin-top: 0; }
.bw-cg-modal__content > :last-child  { margin-bottom: 0; }

/* close button — same look as bw/interlinking's: a light-grey circle that
 * overhangs the top-right corner, with a soft drop shadow. */
.bw-cg-modal__close {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: #f3f4f6 !important;
	color: #374151 !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px -1px rgba(0, 0, 0, .12) !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease;
}
.bw-cg-modal__close:hover,
.bw-cg-modal__close:focus {
	background: #e5e7eb !important;
	color: #374151 !important;
	outline: none;
}
.bw-cg-modal__close svg {
	width: 1.05rem;
	height: 1.05rem;
	display: block;
}
/* Force the icon dark (the surrounding section may set color:#fff, which would
 * otherwise make currentColor — and the X — white and invisible on the chip). */
.bw-cg-modal__close svg,
.bw-cg-modal__close svg path {
	fill: #374151 !important;
}

/* ── lightbox layout — magnifier hint + full-screen viewer ──────────────────── */
.bw-cg-card__box--lightbox {
	cursor: zoom-in;
}
/* magnifier (search-plus) hint, bottom-right of the image — matches the live
 * brentwood.ca photo "enlarge" icon: a plain white icon at 50% opacity, no chip. */
.bw-cg-card__zoom {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 3;
	display: flex;
	margin: 0 0.5rem 0.5rem 0;
	color: #fff;
	opacity: 0.5;
	transition: opacity 0.2s ease;
}
.bw-cg-card__box--lightbox:hover .bw-cg-card__zoom {
	opacity: 1;
}
/* when a caption bar is present the magnifier lifts above it so the two don't
 * overlap (a full-width / right-aligned caption would otherwise sit under it). */
.bw-cg-card__box--has-caption .bw-cg-card__zoom {
	bottom: 2rem;
}
.bw-cg-card__zoom svg {
	width: 1.125rem;
	height: 1.125rem;
	display: block;
	fill: currentColor;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.bw-cg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bw-cg-lightbox[hidden] {
	display: none;
}
.bw-cg-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.95);   /* white overlay, matching the live site */
	opacity: 0;
	transition: opacity 0.25s ease;
}
.bw-cg-lightbox.is-open .bw-cg-lightbox__overlay {
	opacity: 1;
}
.bw-cg-lightbox__figure {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 92vw;
	max-height: 92vh;
	display: flex;
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.bw-cg-lightbox.is-open .bw-cg-lightbox__figure {
	opacity: 1;
	transform: none;
}
.bw-cg-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 90vh;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.bw-cg-lightbox__close,
.bw-cg-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	/* Darker than before so the white glyph stays legible on the WHITE overlay
	   (a dark circular control reads cleanly over both the overlay and the image). */
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff;
	box-shadow: none !important;
	border-radius: 9999px !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease;
}
.bw-cg-lightbox__close:hover,
.bw-cg-lightbox__close:focus,
.bw-cg-lightbox__nav:hover,
.bw-cg-lightbox__nav:focus {
	background: rgba(0, 0, 0, 0.78) !important;
	color: #fff;
	outline: none;
}
.bw-cg-lightbox__close {
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
}
.bw-cg-lightbox__close svg {
	width: 1.1rem;
	height: 1.1rem;
	display: block;
	fill: currentColor;
}
.bw-cg-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
}
.bw-cg-lightbox__prev { left: 1rem; }
.bw-cg-lightbox__next { right: 1rem; }
.bw-cg-lightbox__nav svg {
	width: 1.3rem;
	height: 1.3rem;
	display: block;
	fill: currentColor;
}
.bw-cg-lightbox__counter {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: #e5e7eb;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}
@media (max-width: 600px) {
	.bw-cg-lightbox__nav { width: 2.5rem; height: 2.5rem; }
	.bw-cg-lightbox__prev { left: 0.4rem; }
	.bw-cg-lightbox__next { right: 0.4rem; }
	.bw-cg-lightbox__close { top: 0.5rem; right: 0.5rem; }
}

/* While the modal/lightbox is open we lock the page scroll. The padding-right
 * (set by view.js to the scrollbar's width) replaces the now-hidden scrollbar so
 * the page behind it doesn't shift sideways. */
html.bw-cg-modal-open {
	overflow: hidden;
}

@media (max-width: 560px) {
	.bw-cg-modal__content {
		padding: 1.5rem 1.1rem;
	}
}