/* School home page main rotator (module 247, moduleclass fullwidth-swiper)
   Rendered 16:9, width-capped and inset with padding so the banner is not overwhelming. */
.fullwidth-swiper {
	max-width: 1500px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 24px;
	box-sizing: border-box;
}

.fullwidth-swiper .g-swiper,
.fullwidth-swiper .swiper-container {
	width: 100%;
	height: auto !important;
	aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
	.fullwidth-swiper .g-swiper,
	.fullwidth-swiper .swiper-container {
		height: 0 !important;
		padding-bottom: 56.25%;
	}
}

.fullwidth-swiper .swiper-wrapper,
.fullwidth-swiper .swiper-slide {
	height: 100% !important;
}

.fullwidth-swiper .swiper-slide img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 600px) {
	.fullwidth-swiper {
		padding: 16px;
	}
}

/* The template's own (cross-origin) rule zeroes the vertical padding on .fullwidth-swiper,
   so force the box padding with a stronger selector. */
.moduletable.fullwidth-swiper {
	padding: 24px !important;
}

@media (max-width: 600px) {
	.moduletable.fullwidth-swiper {
		padding: 16px !important;
	}
}

/* ---------- Outline chrome: menu bar + rotator ---------- */
/* Menu bar: lift it off the page background with a soft shadow underneath and soften the corners */
#g-navigation {
	border-radius: 5px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Main banner rotator: same treatment, clipped so the image corners follow the radius */
.fullwidth-swiper .g-swiper,
.fullwidth-swiper .swiper-container {
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.fullwidth-swiper .swiper-slide {
	border-radius: 5px;
	overflow: hidden;
}

/* The section below the menu bar paints its own white background over the shadow,
   so lift the bar into its own stacking context to let the shadow show. */
#g-navigation {
	position: relative;
	z-index: 10;
}

/* Slightly stronger, more visible shadow under the menu bar */
#g-navigation {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* School Quicklinks (RokSprocket strips, module 202): six tiles on a single row.
   The module still renders as cols-5, so a sixth item wraps; force a flex row of six
   from tablet-landscape up and leave the smaller breakpoints to RokSprocket. */
@media (min-width: 992px) {
	#g-utility .sprocket-strips-s-container.cols-5 {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: flex-start;
	}
	#g-utility .sprocket-strips-s-container.cols-5 .sprocket-strips-s-block {
		flex: 0 0 16.6667% !important;
		max-width: 16.6667% !important;
		width: 16.6667% !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
}

/* Six tiles leaves ~153px of text width, so the 28.8px strip titles run together
   (ADMISSIONS / SUMMER CAMP touched). Scale the title down at the 6-across breakpoint. */
@media (min-width: 992px) {
	#g-utility .sprocket-strips-s-container.cols-5 .sprocket-strips-s-title {
		font-size: 20px !important;
		line-height: 1.2 !important;
		overflow-wrap: break-word;
		word-break: normal;
	}
}

/* ---------- Slow parallax on the School Quicklinks band ----------
   The section ships as background-attachment: fixed, which pins the image to the
   viewport (it scrolls 1:1). Replace it with an oversized layer we translate at a
   fraction of the scroll so it drifts slowly. */
#g-utility.simpleparallax {
	position: relative;
	overflow: hidden;
	background-image: none !important;
	background-attachment: scroll !important;
}

#g-utility.simpleparallax::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -25%;
	height: 150%;
	background-image: url("/images/template/school/sjbparallax.png");
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transform: translate3d(0, var(--parallax-y, 0px), 0);
	will-change: transform;
	pointer-events: none;
	z-index: 0;
}

#g-utility.simpleparallax > * {
	position: relative;
	z-index: 1;
}