/* Photo Carousel — Figma 2020-1598 */

.photo-carousel {
	background: #f5f5f5;
	padding-top:    var( --pc-pt, 3rem );
	padding-bottom: var( --pc-pb, 3rem );
	margin-top:     var( --pc-mt, 0rem );
	margin-bottom:  var( --pc-mb, 0rem );
	overflow: hidden;
}

.photo-carousel__inner {
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 5rem;
}

.photo-carousel__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	margin-bottom: 3rem;
}
.photo-carousel__eyebrow {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 1rem; font-weight: 500; letter-spacing: 0.25rem;
	text-transform: uppercase; line-height: 1.35; color: rgba( 0, 13, 38, 0.7 ); margin: 0;
}
.photo-carousel__heading {
	font-family: 'Quincy', Georgia, serif;
	font-size: clamp( 2.5rem, 5vw, 3.5rem );
	font-weight: 400; line-height: clamp( 2.875rem, 5.75vw, 4.025rem ); color: #000d26; margin: 0;
}

/* Carousel */
/* Contained to the same 90rem max-width as the rest of the block (was
   previously full-bleed to the browser viewport with no cap at all -- on a
   wide monitor that meant a single slide could render 1200px+ tall, forcing
   visitors to scroll just to get past one carousel). Smaller slide
   flex-basis (was 64%/78%/86%) shrinks the image further and shows more of
   the neighboring slides at once, so the whole carousel reads at a much
   more "fits on screen" size. */
.photo-carousel__viewport { overflow: hidden; width: 100%; max-width: 90rem; margin: 0 auto; aspect-ratio: 4.079 / 1; }
.photo-carousel__track {
	display: flex;
	transition: transform 0.55s cubic-bezier( 0.4, 0, 0.2, 1 );
	will-change: transform;
}
.photo-carousel__slide {
	flex: 0 0 40%;
	margin: 0 1%;
	aspect-ratio: 912 / 559;
	border-radius: 1rem;
	overflow: hidden;
	opacity: 0.44;
	transform: scale( 0.92 );
	transition: opacity 0.55s, transform 0.55s;
}
.photo-carousel__slide.is-active { opacity: 1; transform: scale( 1 ); }
.photo-carousel__img {
	display: block;
	width: 100%;
	aspect-ratio: 912 / 559;
	object-fit: cover;
}

.photo-carousel__caption {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem;
	line-height: 1.35;
	color: rgba( 0, 13, 38, 0.8 );
	text-align: center;
	margin: 1rem auto 0;
	max-width: 41rem;
	min-height: 1.6em;
}

.photo-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.625rem;
	margin-top: 1.5rem;
}
.photo-carousel__dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba( 11, 92, 255, 0.25 );
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.photo-carousel__dot.is-active { background: #0b5cff; transform: scale( 1.15 ); }

/* ── Responsive ── */
@media (max-width: 1200px) {
	.photo-carousel__inner { padding: 0 3rem; }
}
@media (max-width: 900px) {
	.photo-carousel__inner { padding: 0 1.5rem; }
	.photo-carousel__slide { flex-basis: 52%; }
	.photo-carousel__viewport { aspect-ratio: 3.138 / 1; } /* matches the 52%-wide slide at this breakpoint */
}
@media (max-width: 600px) {
	.photo-carousel {
		padding-top:    var( --pc-pt-m, var( --pc-pt, 3rem ) );
		padding-bottom: var( --pc-pb-m, var( --pc-pb, 3rem ) );
		margin-top:     var( --pc-mt-m, var( --pc-mt, 0rem ) );
		margin-bottom:  var( --pc-mb-m, var( --pc-mb, 0rem ) );
	}
	.photo-carousel__inner { padding: 0 1rem; }
	.photo-carousel__head { margin-bottom: 2rem; }
	.photo-carousel__slide { flex-basis: 68%; }
	.photo-carousel__viewport { aspect-ratio: 2.399 / 1; } /* matches the 68%-wide slide at this breakpoint */
}