/*
 * Curved gallery — Student Feedback (template-parts/feedback-section.php),
 * Success Stories and the Student Portfolio (home-page-template.php).
 *
 * The row is seen from inside a cylinder: cards near the edges swing toward the
 * viewer and grow, the middle ones sit further back. The per-card tilt and depth
 * are set every frame by js/curve-gallery.js, from each card's distance to the
 * centre; this file only sets up the 3D stage and the cards.
 */
.fb-curve {
	--fb-w: 13rem;
	--fb-gap: 1rem;
	position: relative;
	overflow: hidden;
	/* Room for the edge cards that swing forward, and for the card shadows. */
	padding: 3rem 0 4.5rem;
	perspective: 1100px;
	perspective-origin: 50% 50%;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	/* Fades the far ends out instead of cutting the cards off hard. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.fb-curve.is-dragging {
	cursor: grabbing;
}

@media (min-width: 640px) {
	.fb-curve {
		--fb-w: 14.5rem;
		--fb-gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.fb-curve {
		--fb-w: 16.5rem;
		--fb-gap: 1.5rem;
	}
}

/*
 * Wide 16:9 variant — Student Feedback and Success Stories. Sized exactly like
 * the portfolio row below, so all three home galleries show about three cards
 * across from lg up (two on a tablet, one on a phone).
 */
.fb-curve--wide {
	--fb-w: 78vw;
	--fb-gap: 1.5rem;
}

@media (min-width: 640px) {
	.fb-curve--wide {
		--fb-w: 44vw;
	}
}

@media (min-width: 1024px) {
	.fb-curve--wide {
		--fb-w: min(30vw, 34rem);
		--fb-gap: 2rem;
	}
}

.fb-curve--wide .fb-curve__card {
	aspect-ratio: 16 / 9;
}

/* Student Feedback: taller than 16:9. The speaker is centred in every video,
   so the crop only loses empty space at the sides. */
.fb-curve--wide .fb-curve__card--titled {
	aspect-ratio: 4 / 3;
}

/* Success Stories: the banners carry text right to their edges, so they keep
   16:9 and get taller by getting bigger instead. */
@media (min-width: 640px) {
	.fb-curve--stories {
		--fb-w: 52vw;
	}
}

@media (min-width: 1024px) {
	.fb-curve--stories {
		--fb-w: min(37vw, 44rem);
	}
}

/*
 * Cards variant for the home Student Portfolio: each cell holds a whole
 * portfolio card (template-parts/portfolio-card.php), which brings its own
 * white ground, radius and shadow, so the cell itself is only a sized slot.
 */
/* Sized to the viewport so about three cards are in view at any width from
   lg up (two on a tablet, one on a phone), with the next ones peeking in. */
.fb-curve--cards {
	--fb-w: 78vw;
	--fb-gap: 1.5rem;
}

@media (min-width: 640px) {
	.fb-curve--cards {
		--fb-w: 44vw;
	}
}

@media (min-width: 1024px) {
	.fb-curve--cards {
		--fb-w: min(30vw, 34rem);
		--fb-gap: 2rem;
	}
}

.fb-curve--cards .fb-curve__card {
	aspect-ratio: auto;
	overflow: visible;
	border-radius: 1rem;
	background: transparent;
	box-shadow: none;
}

.fb-curve--cards .portfolio-item {
	height: 100%;
}

.fb-curve__track {
	display: flex;
	gap: var(--fb-gap);
	width: max-content;
	transform-style: preserve-3d;
	will-change: transform;
}

.fb-curve__card {
	position: relative;
	flex: 0 0 var(--fb-w);
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 1.25rem;
	background: #E2E8F0;
	box-shadow: 0 22px 40px -22px rgb(15 23 42 / 0.45);
	backface-visibility: hidden;
	will-change: transform;
}

.fb-curve__card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
	transition: transform .5s ease;
}

/* YouTube's hqdefault is 16:9 footage letterboxed into 4:3; the bars are an
   eighth of the height each, so oversize the image by a third and centre it. */
.fb-curve__card img.fb-curve__img--yt {
	top: -17%;
	height: 134%;
}

.fb-curve__card:hover img {
	transform: scale(1.06);
}

.fb-curve__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94A3B8;
	font-size: 3rem;
}

/* Bottom shade under the title, on the Student Feedback cards only. */
.fb-curve__card--titled::after {
	content: '';
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(to top, rgb(15 23 42 / 0.75), transparent);
	pointer-events: none;
}

.fb-curve__title {
	position: absolute;
	right: 0.9rem;
	bottom: 0.85rem;
	left: 0.9rem;
	z-index: 1;
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #FFFFFF;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.35;
	pointer-events: none;
}

.fb-curve__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.fb-curve__play-icon {
	display: flex;
	width: 3.25rem;
	height: 3.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #FFFFFF;
	box-shadow: 0 10px 24px -8px rgb(15 23 42 / 0.45);
	transition: transform .3s ease;
}

.fb-curve__card:hover .fb-curve__play-icon,
.fb-curve__play:focus-visible .fb-curve__play-icon {
	transform: scale(1.1);
}

.fb-curve__play-icon .material-symbols-outlined {
	transform: translateX(1px);
	font-size: 2rem;
}

@media (prefers-reduced-motion: reduce) {
	.fb-curve__card img,
	.fb-curve__play-icon {
		transition: none;
	}
}