/* Hero wrapper — 500px tall, clips the background image */
.bsw-interior-hero.wp-block-group.alignfull {
	position: relative;
	height: 500px;
	overflow: hidden;
	padding: 0 !important;
	margin-block: 0 !important;
}

/* Background image — absolutely fills the container */
.bsw-interior-hero__bg.wp-block-image {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	line-height: 0;
}

.bsw-interior-hero__bg.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	display: block;
}

/* Mobile art direction. The pattern ships a second image so a hero whose desktop
   photo is too wide to crop down to the 440 canvas can carry a purpose-made
   portrait crop. It is inert by default — hidden everywhere, and only allowed to
   replace the desktop image when the block is actually present, so pages saved
   before this image existed keep rendering off their single image. */
.bsw-interior-hero__bg--mobile {
	display: none !important;
}

/* Title container — stretched to fill the hero, centers text */
.bsw-interior-hero__titles.wp-block-group {
	position: absolute !important;
	inset: 0;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1;
	padding: 0 !important;
	margin: 0 !important;
}

/* Supertitle — Cormorant Regular, uppercase, wide-tracked */
p.bsw-interior-hero__supertitle {
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant', serif) !important;
	font-size: 70px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	text-transform: uppercase !important;
	letter-spacing: 0.2em !important;
	color: #fff !important;
	line-height: normal !important;
	margin: 0 !important;
}

/* Script title — Brittany Signature */
p.bsw-interior-hero__script {
	font-family: 'Brittany Signature', cursive !important;
	font-size: 70px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	color: #fff !important;
	line-height: 1 !important;
	margin: 0 !important;
}

/* Venues page modifier — add "bsw-interior-hero--venues" to the pattern's root
   group in the editor (Advanced → Additional CSS class). Adds the design's 20%
   black overlay over the photo, plus this photo's crop (portrait source shown
   as a band ~61% down the image). */
.bsw-interior-hero--venues::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 0;
}

.bsw-interior-hero--venues .bsw-interior-hero__bg img {
	object-position: center 61%;
}

/* Spaces pages modifier — add "bsw-interior-hero--spaces" to the pattern's root
   group. Same 20% black overlay as --venues; the supertitle is the venue name
   with the "spaces" script hung up into it (Figma: script box starts 19px above
   the supertitle's bottom edge). This photo is a plain centered cover fit. */
.bsw-interior-hero--spaces::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 0;
}

.bsw-interior-hero--spaces .bsw-interior-hero__bg img {
	object-position: center;
}

.bsw-interior-hero--spaces p.bsw-interior-hero__script {
	line-height: 1.35 !important;
	margin-top: -19px !important;
}

.bsw-interior-hero--spaces p.bsw-interior-hero__credit {
	bottom: 10px;
}

/* Preferred Vendors page modifier — add "bsw-interior-hero--vendors" to the
   pattern's root group. Same 20% black overlay as --venues; the title is a single
   uppercase line with no script, and the design hangs it 7.5px above the hero's
   vertical centre (70px box at top 207.5 in a 500px hero). This page is also the
   one hero using the mobile crop image — the desktop photo is a 2592x750 band that
   would show little more than the car's grille on a 440 canvas. */
.bsw-interior-hero--vendors::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 0;
}

.bsw-interior-hero--vendors .bsw-interior-hero__bg img {
	object-position: center 60%;
}

.bsw-interior-hero--vendors .bsw-interior-hero__titles.wp-block-group {
	transform: translateY(-7.5px);
}

.bsw-interior-hero--vendors p.bsw-interior-hero__credit {
	bottom: 15px;
}

/* Generic interior-page modifier — add "bsw-interior-hero--page" to the pattern's
   root group. The default treatment for a seeded interior page (see
   tools/create-interior-pages.php): the 20% black scrim every interior hero
   carries, one uppercase Cormorant line naming the section, no script line, and a
   plain centered cover crop. */
.bsw-interior-hero--page::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 0;
}

.bsw-interior-hero--page .bsw-interior-hero__bg img {
	object-position: center;
}

/* Accommodations — the artboard crops this photo at 50% 30% on both
   breakpoints rather than the --page default centre. */
.bsw-interior-hero--accommodations .bsw-interior-hero__bg img {
	object-position: center 30%;
}

/* Dining — 50% 60% desktop, easing up to 55% on mobile (artboard). */
.bsw-interior-hero--dining .bsw-interior-hero__bg img {
	object-position: center 60%;
}

/* Packages — the artboard's 50% 60% crop, easing to 55% on mobile, same as Dining. */
.bsw-interior-hero--packages .bsw-interior-hero__bg img {
	object-position: center 60%;
}

/* Your Wedding — 50% 60%, easing to 55% on mobile (artboard). */
.bsw-interior-hero--your-wedding .bsw-interior-hero__bg img {
	object-position: center 60%;
}

/* Photo credit — pinned to bottom-right */
p.bsw-interior-hero__credit {
	position: absolute !important;
	bottom: 20px;
	right: 10px;
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	font-style: italic !important;
	color: #fff !important;
	line-height: normal !important;
	margin: 0 !important;
	z-index: 1;
	text-align: right !important;
}

@media (max-width: 767px) {
	.bsw-interior-hero.wp-block-group.alignfull {
		height: 341px;
	}

	/* Hand over to the mobile crop, but only on heroes that carry one. */
	.bsw-interior-hero:has(.bsw-interior-hero__bg--mobile)
		.bsw-interior-hero__bg:not(.bsw-interior-hero__bg--mobile) {
		display: none !important;
	}

	.bsw-interior-hero__bg--mobile {
		display: block !important;
	}

	p.bsw-interior-hero__supertitle {
		font-size: 50px !important;
		letter-spacing: 0.2em !important;
	}

	p.bsw-interior-hero__script {
		font-size: 56px !important;
	}

	/* Spaces mobile — supertitle drops to 0.15em tracking (0.2em overflows the
	   440 canvas), the title block is pinned 140px from the top instead of
	   centered, and the script hang deepens to match the Figma boxes. */
	.bsw-interior-hero--spaces p.bsw-interior-hero__supertitle {
		letter-spacing: 0.15em !important;
	}

	.bsw-interior-hero--spaces .bsw-interior-hero__titles.wp-block-group {
		justify-content: flex-start;
		padding-top: 140px !important;
	}

	.bsw-interior-hero--spaces p.bsw-interior-hero__script {
		margin-top: -31.5px !important;
	}

	/* Spaces mobile crop — zoomed past a plain cover fit (Figma: image spans
	   268% of the viewport width, left -85.5%, top -65.25%). */
	.bsw-interior-hero--spaces .bsw-interior-hero__bg img {
		position: absolute;
		width: 268.09%;
		height: 230.53%;
		left: -85.5%;
		top: -65.25%;
		max-width: none;
		object-fit: cover;
		object-position: center;
	}

	.bsw-interior-hero--spaces p.bsw-interior-hero__credit {
		bottom: 5px;
		right: 5px;
	}

	/* Vendors mobile — the 660x519 crop is a near-exact fit for the 440x341 frame,
	   so it just needs the design's 55% focal point and a slightly heavier scrim.
	   Title drops to 46px and hangs 12.5px above centre (top 135px in 341px). */
	.bsw-interior-hero--vendors::after {
		background: rgba(0, 0, 0, 0.22);
	}

	.bsw-interior-hero--vendors .bsw-interior-hero__bg img {
		object-position: center 55%;
	}

	.bsw-interior-hero--vendors p.bsw-interior-hero__supertitle {
		font-size: 46px !important;
	}

	.bsw-interior-hero--vendors .bsw-interior-hero__titles.wp-block-group {
		transform: translateY(-12.5px);
	}

	.bsw-interior-hero--vendors p.bsw-interior-hero__credit {
		bottom: 14px;
		right: 16px;
		font-size: 12px !important;
	}

	/* Page heroes carry one short label rather than a title; 40px keeps the
	   longest of them ("ACCOMMODATIONS", "TESTIMONIALS") inside the 440 canvas
	   at 0.2em tracking, where the site's usual 50px would overflow. */
	.bsw-interior-hero--page p.bsw-interior-hero__supertitle {
		font-size: 40px !important;
	}

	/* "ACCOMMODATIONS" is the longest label of the set and still overflows the
	   440 canvas at 40px/0.2em (15 characters ≈ 450px). The artboard sets 30px
	   for exactly this reason — the one place this page keeps the design's own
	   type size rather than the site scale. */
	.bsw-interior-hero--accommodations p.bsw-interior-hero__supertitle {
		font-size: 30px !important;
	}

	.bsw-interior-hero--dining .bsw-interior-hero__bg img {
		object-position: center 55%;
	}

	.bsw-interior-hero--packages .bsw-interior-hero__bg img {
		object-position: center 55%;
	}

	.bsw-interior-hero--your-wedding .bsw-interior-hero__bg img {
		object-position: center 55%;
	}

	/* "YOUR WEDDING" is 12 characters and clips the 440 canvas at the --page 40px
	   (~440px at 0.2em). The artboard's 32px is load-bearing, like Accommodations. */
	.bsw-interior-hero--your-wedding p.bsw-interior-hero__supertitle {
		font-size: 32px !important;
	}

	/* Venues crop — the mobile design zooms past a plain cover fit (image spans
	   181% of the viewport width), so size the image explicitly like the
	   lets-connect mobile crop (img: width 181.27%, left -38.55%, top -126.32%). */
	.bsw-interior-hero--venues .bsw-interior-hero__bg img {
		position: absolute;
		width: 181.27%;
		height: 320.39%;
		left: -38.55%;
		top: -126.32%;
		max-width: none;
		object-fit: cover;
		object-position: center;
	}
}