/*
 * Final, page-scoped geometry corrections for:
 * - St. Bernards: 125 Years of Healing Beyond Medicine
 * - RiverSpring Living: The RiverSpring Living Difference
 *
 * Load this stylesheet after work-figma.css and the legacy theme stylesheet.
 * No rule in this file is shared with another Work project.
 */

/* RiverSpring's identifying image URL remains in data-src until Smush swaps it
 * into src. Match either state so the page has stable geometry before scroll. */
.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-hanging-sign"], [data-src*="rsl-hanging-sign"])) {
	margin-top: 144px;
}

.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-hanging-sign"], [data-src*="rsl-hanging-sign"])) .image-cinter {
	aspect-ratio: 4 / 3;
	max-width: 1067px;
	overflow: hidden;
}

.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-hanging-sign"], [data-src*="rsl-hanging-sign"])) .image-cinter img {
	height: 100%;
	object-fit: cover;
}

.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-full-image"], [data-src*="rsl-full-image"])) {
	margin-top: 144px;
}

.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-full-image"], [data-src*="rsl-full-image"])) .container {
	max-width: 1728px;
	padding-left: 0;
	padding-right: 0;
}

.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-full-image"], [data-src*="rsl-full-image"])) .image-cinter {
	aspect-ratio: 1728 / 1077;
	max-width: 1728px;
	overflow: hidden;
}

.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-full-image"], [data-src*="rsl-full-image"])) .image-cinter img {
	height: 100%;
	object-fit: cover;
}

.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) {
	margin-top: 144px;
	padding-bottom: 144px;
}

.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) .image-cinter {
	aspect-ratio: 1539 / 515;
	max-width: 1539px;
	overflow: hidden;
}

.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) .image-cinter img {
	height: 100%;
	object-fit: cover;
}

/* The social artwork is 465 x 688 in the desktop frame. Clear the legacy
 * per-image margins, which otherwise force Flexbox to shrink every card. */
.work-sample-the-riverspring-living-difference .work-1-content:has(.image-items) {
	margin-top: 144px;
}

.work-sample-the-riverspring-living-difference .work-1-content .image-items {
	column-gap: 72px;
	display: flex;
	margin: 0 auto;
	max-width: 1539px;
	padding: 0;
	width: 100%;
}

.work-sample-the-riverspring-living-difference .work-1-content .image-items img {
	aspect-ratio: 465 / 688;
	flex: 0 0 calc((100% - 144px) / 3);
	height: auto;
	margin: 0;
	object-fit: cover;
	width: calc((100% - 144px) / 3);
}

@media (min-width: 1051px) {
	/* The first St. Bernards video needs 144px from poster to banner: 40px
	 * section padding plus the existing 104px banner offset. */
	.work-sample-125-years-of-healing-beyond-medicine > .work-about + .work-video {
		padding-bottom: 40px;
	}

	/* Thin media rows are already followed by a 104px content offset. */
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-short-video-poster"]),
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) {
		padding-bottom: 0;
	}

	/* The final map film has the authored 104px space on both sides. */
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-map-video-poster"]) {
		padding-bottom: 104px;
		padding-top: 104px;
	}

	/* Figma 2357:35399: 708 + 123 + 708 across the 1539px website grid. */
	.work-sample-the-riverspring-living-difference .work-9-content .work-4-images {
		column-gap: 123px;
		max-width: min(1539px, calc(100% - 64px));
		row-gap: 144px;
	}

	.work-sample-the-riverspring-living-difference .work-9-content .work-4-images .img {
		width: 100%;
	}
}

@media (max-width: 1050px) {
	/* St. Bernards main video is a 520px card inside the authored 656px frame. */
	.work-sample-125-years-of-healing-beyond-medicine > .work-about + .work-video {
		padding-bottom: 96px;
		padding-top: 80px;
	}

	/* Full-width banner pairs are contiguous at the tablet and mobile frames. */
	.work-sample-125-years-of-healing-beyond-medicine .work-3-content {
		margin-bottom: 0;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-3-content .work-3-2-images {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
		margin: 48px 0 0;
		max-width: none;
		padding: 0;
		width: 100%;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video + .work-3-content .work-3-2-images {
		margin-top: 0;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-3-content .work-3-2-images .img {
		aspect-ratio: 656 / 346;
		flex: none !important;
		height: auto;
		margin: 0;
		width: 100%;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-3-content .work-3-2-images .img img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	/* Campaign pairs use the 592px Figma content measure and a uniform 48px
	 * rhythm, including the first pair after each full-width banner group. */
	.work-sample-125-years-of-healing-beyond-medicine .images-2-big {
		margin: 48px 0 0;
		max-width: none;
		width: 100%;
	}

	.work-sample-125-years-of-healing-beyond-medicine .images-2-big .container {
		align-items: stretch;
		flex-direction: column;
		gap: 48px;
		margin: 0 auto;
		max-width: 656px;
		padding-left: clamp(16px, calc(7.767vw - 18.95px), 32px);
		padding-right: clamp(16px, calc(7.767vw - 18.95px), 32px);
		width: 100%;
	}

	.work-sample-125-years-of-healing-beyond-medicine .images-2-big .img {
		flex: none !important;
		margin: 0;
		width: 100%;
	}

	/* Thin videos are items in the same 48px stack, not standalone modules with
	 * the base Work component's 110px bottom padding. */
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-short-video-poster"]),
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) {
		padding-bottom: 0;
		padding-top: 48px;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-short-video-poster"]) .container,
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) .container {
		max-width: 656px;
		padding-left: clamp(16px, calc(7.767vw - 18.95px), 32px);
		padding-right: clamp(16px, calc(7.767vw - 18.95px), 32px);
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-short-video-poster"]) .video-container {
		aspect-ratio: 9 / 1;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) .video-container {
		aspect-ratio: 18 / 1;
	}

	/* Exterior art and the final map share the tablet's 592px content measure. */
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-map-video-poster"]) {
		padding-bottom: 96px;
		padding-top: 48px;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-map-video-poster"]) .container {
		max-width: 656px;
		padding-left: clamp(16px, calc(7.767vw - 18.95px), 32px);
		padding-right: clamp(16px, calc(7.767vw - 18.95px), 32px);
	}

	/* RiverSpring's tablet frame is one 592px column inside 32px gutters. */
	.work-sample-the-riverspring-living-difference .work-1-content .image-cinter {
		max-width: none;
		width: 100%;
	}

	.work-sample-the-riverspring-living-difference .work-9-content .work-4-images {
		column-gap: 0;
		display: flex;
		flex-direction: column;
		margin: 48px auto 0;
		max-width: 656px;
		padding-left: clamp(16px, calc(7.767vw - 18.95px), 32px);
		padding-right: clamp(16px, calc(7.767vw - 18.95px), 32px);
		row-gap: 48px;
	}

	.work-sample-the-riverspring-living-difference .work-9-content .work-4-images .img {
		margin: 0;
		width: 100%;
	}

	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-hanging-sign"], [data-src*="rsl-hanging-sign"])),
	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-full-image"], [data-src*="rsl-full-image"])),
	.work-sample-the-riverspring-living-difference .work-1-content:has(.image-items),
	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) {
		margin-top: 48px;
	}

	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-hanging-sign"], [data-src*="rsl-hanging-sign"])) .image-cinter,
	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-full-image"], [data-src*="rsl-full-image"])) .image-cinter,
	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) .image-cinter {
		max-width: none;
		width: 100%;
	}

	.work-sample-the-riverspring-living-difference .work-1-content .image-items {
		column-gap: 0;
		flex-direction: column;
		margin: 0;
		max-width: none;
		row-gap: 48px;
		width: 100%;
	}

	.work-sample-the-riverspring-living-difference .work-1-content .image-items img {
		flex: none;
		margin: 0;
		width: 100%;
	}

	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) {
		padding-bottom: 96px;
	}

	/* Preserve the approved compact execution at its native 300 x 250 size. */
	.work-sample-the-riverspring-living-difference .work-2-content .videos-2 > .work-video-tile:last-child {
		align-self: center;
		max-width: 300px;
		width: 100%;
	}
}

@media (max-width: 450px) {
	/* Figma 2489:1799 gives the main poster asymmetric 8px/9px gutters. */
	.work-sample-125-years-of-healing-beyond-medicine > .work-about + .work-video {
		padding-bottom: 56px;
		padding-top: 48px;
	}

	.work-sample-125-years-of-healing-beyond-medicine > .work-about + .work-video .container {
		max-width: none;
		padding-left: 8px;
		padding-right: 9px;
	}

	.work-sample-125-years-of-healing-beyond-medicine > .work-about + .work-video .video-container {
		aspect-ratio: 343 / 192;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-3-content .work-3-2-images {
		margin-top: 32px;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video + .work-3-content .work-3-2-images {
		margin-top: 0;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-3-content .work-3-2-images .img {
		aspect-ratio: 656 / 346;
		height: auto;
	}

	.work-sample-125-years-of-healing-beyond-medicine .images-2-big {
		margin-top: 32px;
		max-width: none;
	}

	.work-sample-125-years-of-healing-beyond-medicine .images-2-big .container {
		gap: 32px;
		max-width: none;
		padding-left: 15px;
		padding-right: 15px;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-short-video-poster"]),
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) {
		padding-bottom: 0;
		padding-top: 32px;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-short-video-poster"]) .container,
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) .container,
	.work-sample-125-years-of-healing-beyond-medicine .work-1-content .container,
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-map-video-poster"]) .container {
		max-width: none;
		padding-left: 15px;
		padding-right: 15px;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-short-video-poster"]) .video-container {
		aspect-ratio: 330 / 33;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) .video-container {
		aspect-ratio: 330 / 34;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-short-video-poster"]) .play-button-wrapper svg,
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) .play-button-wrapper svg {
		height: 28.9079px;
		width: 32.1141px;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-map-video-poster"]) .video-container {
		aspect-ratio: 592 / 332;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-map-video-poster"]) .play-button-wrapper svg {
		height: 42.7079px;
		width: 42.8439px;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-1-content .image-cinter {
		aspect-ratio: 330 / 234.6899;
		overflow: hidden;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-1-content .image-cinter .img,
	.work-sample-125-years-of-healing-beyond-medicine .work-1-content .image-cinter img {
		height: 100%;
		width: 100%;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-1-content .image-cinter img {
		object-fit: cover;
	}

	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-map-video-poster"]) {
		padding-bottom: 56px;
		padding-top: 32px;
	}

	/* Figma 2489:2072 uses a 330px RiverSpring column at x=16. */
	.work-sample-the-riverspring-living-difference .work-1-content .container,
	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-full-image"], [data-src*="rsl-full-image"])) .container,
	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) .container {
		max-width: none;
		padding-left: 16px;
		padding-right: 14px;
	}

	.work-sample-the-riverspring-living-difference .work-9-content .work-4-images {
		margin-top: 32px;
		max-width: none;
		padding-left: 16px;
		padding-right: 14px;
		row-gap: 32px;
	}

	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-hanging-sign"], [data-src*="rsl-hanging-sign"])),
	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-full-image"], [data-src*="rsl-full-image"])),
	.work-sample-the-riverspring-living-difference .work-1-content:has(.image-items),
	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) {
		margin-top: 32px;
	}

	.work-sample-the-riverspring-living-difference .work-1-content .image-items {
		row-gap: 32px;
	}

	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) {
		padding-bottom: 56px;
	}

	.work-sample-the-riverspring-living-difference .work-2-content .videos-2 > .work-video-tile:last-child {
		max-width: 300px;
	}
}

/* Fancybox gives every HTML5 video a fixed 960 x 540 box. Restrict these
 * exceptions to RiverSpring's three animated executions so its 16:9 film
 * carousel keeps the library default. */
body:has(.work-sample-the-riverspring-living-difference) .fancybox__slide.has-html5video:has([src*="riverspring-living-animated-creative-1080x1350"]) .fancybox__content {
	aspect-ratio: 1080 / 1350;
	height: auto;
	max-height: calc(100vh - 120px);
	width: min(1080px, calc(80vh - 96px), calc(100vw - 32px));
}

body:has(.work-sample-the-riverspring-living-difference) .fancybox__slide.has-html5video:has([src*="riverspring-living-animated-creative-970x250"]) .fancybox__content {
	aspect-ratio: 970 / 250;
	height: auto;
	max-height: calc(100vh - 120px);
	width: min(970px, calc(100vw - 32px));
}

body:has(.work-sample-the-riverspring-living-difference) .fancybox__slide.has-html5video:has([src*="riverspring-living-animated-creative-300x250"]) .fancybox__content {
	aspect-ratio: 300 / 250;
	height: auto;
	max-height: calc(100vh - 120px);
	width: min(300px, calc(100vw - 32px));
}

@media (max-width: 450px) {
	body:has(.work-sample-the-riverspring-living-difference) .fancybox__slide.has-html5video:has([src*="riverspring-living-animated-creative-300x250"]) .fancybox__content {
		width: min(360px, calc(100vw - 32px));
	}
}

body:has(.work-sample-the-riverspring-living-difference) .fancybox__slide.has-html5video:has([src*="riverspring-living-animated-creative-"]) .fancybox__html5video {
	height: 100%;
	object-fit: contain;
	width: 100%;
}


/* St Bernards' main video previously carried a 68px-per-side gutter here to hit
 * the frame's 520px player at 656. The theme's own measure already produces
 * exactly 520px at that width, so the custom gutter only ever mattered below the
 * frame - where 136px of gutter on a 451px screen collapsed the player to 315px,
 * 70 percent of the screen against 96 percent one pixel earlier. Removed; the
 * page now steps the same -39px every other Work page does at that breakpoint. */

/* Frame measures belong to the frame. These held the 656px tablet column across
 * the whole 451-1050 band, so .work-1-content measured 656px in a 1000px window
 * where the legacy pages measure 983px. Confined to the designed frame; above it
 * the theme default applies. Spacing rules in the same block are untouched. */
@media (min-width: 451px) and (max-width: 656px) {
	.work-sample-125-years-of-healing-beyond-medicine .work-1-content .container {
		max-width: 656px;
		padding-left: clamp(16px, calc(7.767vw - 18.95px), 32px);
		padding-right: clamp(16px, calc(7.767vw - 18.95px), 32px);
		padding-top: 0;
	}

	.work-sample-the-riverspring-living-difference .work-1-content .container {
		max-width: 656px;
		padding-left: clamp(16px, calc(7.767vw - 18.95px), 32px);
		padding-right: clamp(16px, calc(7.767vw - 18.95px), 32px);
	}

	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-full-image"], [data-src*="rsl-full-image"])) .container,
	.work-sample-the-riverspring-living-difference .work-1-content:has(img:is([src*="rsl-carousel"], [data-src*="rsl-carousel"])) .container {
		max-width: 656px;
		padding-left: clamp(16px, calc(7.767vw - 18.95px), 32px);
		padding-right: clamp(16px, calc(7.767vw - 18.95px), 32px);
	}
}

/* One content measure across the site. Above the tablet frame these pages carry
 * their own desktop container caps (1635px / 1728px), which outrank the theme's
 * 983px rule and left the new pages full-bleed at 1000px where the legacy pages
 * sit at 983px. Restate the theme's own measure for the band so every Work page
 * shares one width. */
@media (min-width: 657px) and (max-width: 1050px) {
	.work-sample-125-years-of-healing-beyond-medicine .work-1-content .container,
	.work-sample-the-riverspring-living-difference .work-1-content .container,
	.work-sample-see-the-signs-of-sjogrens .work-1-content .container {
		max-width: 983px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Figma 2489:1942 / 2489:2013: this historical filmstrip is a fixed-height
 * 34px media treatment at both authored responsive frames. It is not the
 * regular video-player ratio, and its compact play control must be centered
 * independently of the shared 53px tablet control. */
.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) .play-button {
	line-height: 0;
}

.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) .play-button-wrapper svg {
	display: block;
}

@media (max-width: 1050px) {
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) .video-container {
		aspect-ratio: auto;
		height: 34px;
	}
}

@media (min-width: 451px) and (max-width: 1050px) {
	.work-sample-125-years-of-healing-beyond-medicine .work-video:has(video[data-poster*="stb-filmstrip-video-poster"]) .play-button-wrapper svg {
		height: 30.2382px;
		width: 29.25px;
	}
}