/**
 * Find Out More — overlapping card fan (exact Figma spec).
 *
 * Figma node 18097:682. Card sizes:
 *   centre  (Muslim Youth)      w480  h667  (image 480)
 *   2nd     (Sister / Kids)     w400  h587  (image 400)
 *   3rd     (El mensaje / Pods) w400  h507  (image 320)
 *
 * Every card is anchored to the stage centre (top:50% / left:50%) and pushed
 * out in even 200px steps, so the fan is always symmetric and centred. The arc
 * comes purely from the different card heights while all cards share one
 * vertical centre line (Figma "align items centre"). Symmetric pairs therefore
 * have identical heights and spacing.
 */

.tmi-find {
	display: flex;
	flex-direction: column;
	gap: 56px;
	background-color: var(--tmi-dark-200);
}

.tmi-find-stage {
	position: relative;
	height: 720px;
}

.tmi-find-cards {
	position: absolute;
	inset: 0;
	--tmi-fan-step: 200px;
}

/* ------------------------------------------------------ Card (base = back) */
.tmi-find-card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	overflow: hidden;
	background: var(--tmi-white);
	box-shadow: 0 16px 32px rgba(9, 11, 12, 0.16);
	transform-origin: center;
	backface-visibility: hidden;
	transition:
		transform 450ms cubic-bezier(0.645, 0.045, 0.355, 1),
		width 450ms cubic-bezier(0.645, 0.045, 0.355, 1),
		translate 220ms var(--ease-out-quint),
		opacity 180ms ease-out,
		box-shadow 300ms ease;
}

.tmi-find-cards.is-reordering .tmi-find-card {
	transition: none !important;
}

.tmi-find-cards.is-shuffling .tmi-find-card {
	will-change: translate, scale, rotate, opacity;
}

.tmi-find-card > img {
	display: block;
	width: 100%;
	object-fit: cover;
	transition: transform 320ms var(--ease-out-quint);
}

/*
 * Explicit per-card image heights. These MUST all use the same
 * `.tmi-find-card.is-card-N > img` specificity (0,0,2,1) so they beat the
 * WordPress/parent-theme global `img { height: auto }` rule — otherwise the
 * outer cards fall back to their natural aspect ratio and the fan breaks.
 */
.tmi-find-card.is-card-0 > img,
.tmi-find-card.is-card-4 > img {
	height: 320px;
}

.tmi-find-card.is-card-1 > img,
.tmi-find-card.is-card-3 > img {
	height: 400px;
}

.tmi-find-card.is-card-2 > img {
	height: 480px;
}

.tmi-find-card > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 40px;
	text-align: center;
}

.tmi-find-card h3 {
	margin: 0;
}

@media (hover: hover) and (pointer: fine) {
	.tmi-find-card:hover {
		translate: 0 -8px;
		box-shadow: 0 24px 48px rgba(9, 11, 12, 0.22);
	}

	.tmi-find-card:hover > img {
		transform: scale(1.025);
	}
}

/* Outer-left — El mensaje (back layer, image 320) */
.tmi-find-card.is-card-0 {
	z-index: 1;
	transform: translate(calc(-50% - var(--tmi-fan-step) * 2), -50%);
}

/* Inner-left — Sister to Sister (2nd layer, image 400) */
.tmi-find-card.is-card-1 {
	z-index: 2;
	transform: translate(calc(-50% - var(--tmi-fan-step)), -50%);
}

/* Centre — Muslim Youth (front, image 480) */
.tmi-find-card.is-card-2 {
	z-index: 3;
	width: 480px;
	transform: translate(-50%, -50%);
}

/* Inner-right — Kids Corner (2nd layer, image 400) */
.tmi-find-card.is-card-3 {
	z-index: 2;
	transform: translate(calc(-50% + var(--tmi-fan-step)), -50%);
}

/* Outer-right — Podcasts (back layer, image 320) */
.tmi-find-card.is-card-4 {
	z-index: 1;
	transform: translate(calc(-50% + var(--tmi-fan-step) * 2), -50%);
}

/* --------------------------------------------------------------- Arrows */
.tmi-find-arrow {
	position: absolute;
	top: 50%;
	z-index: 6;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	background: transparent;
	transform: translateY(-50%);
	cursor: pointer;
	transition: transform 180ms var(--ease-out-quint), opacity 180ms ease;
}

.tmi-find-arrow.is-left {
	left: 16px;
}

.tmi-find-arrow.is-right {
	right: 16px;
}

.tmi-find-arrow img {
	width: 100%;
	height: 100%;
}

@media (hover: hover) and (pointer: fine) {
	.tmi-find-arrow:hover {
		transform: translateY(-50%) scale(1.08);
	}
}

.tmi-find-arrow:active {
	transform: translateY(-50%) scale(0.94);
}

.tmi-find-arrow:focus-visible {
	outline: 3px solid var(--tmi-green);
	outline-offset: 4px;
}

/* ------------------------------------------------ Responsive fan scaling */
@media (max-width: 1440px) {
	.tmi-find-cards {
		--tmi-fan-step: 175px;
	}
}

@media (max-width: 1240px) {
	.tmi-find-cards {
		--tmi-fan-step: 140px;
	}
}

/* ------------------------------ Tablet + phone 3D coverflow carousel ------
   Below the fan's usable width the section becomes a horizontal snap track
   whose cards rotate back in 3D as they scroll — the centred card faces the
   reader while its neighbours angle away like album covers. A treatment
   distinct from the other sections' flat focus carousel. */
@media (max-width: 1080px) {
	.tmi-find-stage {
		height: auto;
		min-height: 0;
		padding: 0;
	}

	.tmi-find-cards {
		position: static;
		display: flex;
		flex-wrap: nowrap;
		grid-template-columns: none;
		gap: 10px;
		width: 100%;
		height: auto;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 12%;
		perspective: 1200px;
		padding: 28px 0 42px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.tmi-find-cards::-webkit-scrollbar {
		display: none;
	}

	.tmi-find-card,
	.tmi-find-card.is-card-0,
	.tmi-find-card.is-card-1,
	.tmi-find-card.is-card-2,
	.tmi-find-card.is-card-3,
	.tmi-find-card.is-card-4 {
		position: static;
		flex: 0 0 44%;
		width: auto;
		transform: none;
		scroll-snap-align: center;
		transform-origin: center;
	}

	.tmi-find-card > img,
	.tmi-find-card.is-card-0 > img,
	.tmi-find-card.is-card-1 > img,
	.tmi-find-card.is-card-2 > img,
	.tmi-find-card.is-card-3 > img,
	.tmi-find-card.is-card-4 > img {
		height: 280px;
	}

	.tmi-find-arrow {
		display: none;
	}
}

/* Phone: fewer, larger cards + compact type. */
@media (max-width: 720px) {
	.tmi-find-cards {
		gap: 8px;
		scroll-padding-inline: 19%;
		perspective: 1000px;
		padding: 24px 0 36px;
	}

	.tmi-find-card,
	.tmi-find-card.is-card-0,
	.tmi-find-card.is-card-1,
	.tmi-find-card.is-card-2,
	.tmi-find-card.is-card-3,
	.tmi-find-card.is-card-4 {
		flex: 0 0 62%;
	}

	.tmi-find-card > img,
	.tmi-find-card.is-card-0 > img,
	.tmi-find-card.is-card-1 > img,
	.tmi-find-card.is-card-2 > img,
	.tmi-find-card.is-card-3 > img,
	.tmi-find-card.is-card-4 > img {
		height: 240px;
	}

	.tmi-find-card > div {
		gap: 16px;
		padding: 22px 18px 26px;
	}

	.tmi-find-card h3 {
		font-size: 19px;
	}

	.tmi-find-card .tmi-button {
		gap: 8px;
		padding: 10px 18px;
		font-size: 13px;
		white-space: nowrap;
	}

	.tmi-find-card .tmi-button img {
		width: 16px;
		height: 16px;
	}
}

@supports (animation-timeline: view()) {
	@media (max-width: 1080px) {
		.tmi-find-card {
			animation: tmi-find-coverflow linear both;
			animation-timeline: view(inline);
			animation-range: cover;
		}
	}

}

/* -------------------------------------------- Desktop fan "deal" entrance ---
   A one-shot entrance that plays once when the section scrolls into view (JS
   adds .is-armed on load, then .is-revealed via IntersectionObserver). The
   cards fly up into their fan slots one-by-one, left to right, on a time-based
   stagger — NOT linked to scroll position. The fan POSITION lives on each
   card's `transform`, so the entrance rides the independent translate / scale /
   rotate / opacity properties, which compose on top of that transform instead
   of overwriting it. Without JS (or on reduced motion) the fan just shows. */
@media (min-width: 1081px) {
	.tmi-find-stage.is-armed .tmi-find-card {
		opacity: 0;
		translate: 0 110px;
		scale: 0.8;
		rotate: -6deg;
	}

	.tmi-find-stage.is-armed.is-revealed .tmi-find-card {
		animation: tmi-find-deal 720ms var(--ease-out-quint) both;
	}

	.tmi-find-stage.is-armed.is-revealed .tmi-find-card.is-card-0 {
		animation-delay: 0ms;
	}

	.tmi-find-stage.is-armed.is-revealed .tmi-find-card.is-card-1 {
		animation-delay: 130ms;
	}

	.tmi-find-stage.is-armed.is-revealed .tmi-find-card.is-card-2 {
		animation-delay: 260ms;
	}

	.tmi-find-stage.is-armed.is-revealed .tmi-find-card.is-card-3 {
		animation-delay: 390ms;
	}

	.tmi-find-stage.is-armed.is-revealed .tmi-find-card.is-card-4 {
		animation-delay: 520ms;
	}
}

@keyframes tmi-find-deal {
	from {
		opacity: 0;
		translate: 0 110px;
		scale: 0.8;
		rotate: -6deg;
	}
	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
		rotate: 0deg;
	}
}

/* Reduced motion: show the fan cards statically. Only the independent
   translate/scale/rotate/opacity are reset here — the fan `transform` must stay
   so the desktop layout doesn't collapse. */
@media (prefers-reduced-motion: reduce) {
	.tmi-find-card {
		animation: none !important;
		transition: none !important;
		translate: none !important;
		scale: none !important;
		rotate: none !important;
		opacity: 1 !important;
	}

	.tmi-find-card > img,
	.tmi-find-arrow {
		transition: none !important;
	}
}

@keyframes tmi-find-coverflow {
	0% {
		transform: rotateY(-34deg) scale(0.86);
		opacity: 0.62;
	}
	50% {
		transform: rotateY(0deg) scale(1);
		opacity: 1;
	}
	100% {
		transform: rotateY(34deg) scale(0.86);
		opacity: 0.62;
	}
}

/* Reduced motion: keep the swipe carousel, drop the 3D rotation (scoped to the
   mobile width so the desktop fan's transforms are untouched). */
@media (prefers-reduced-motion: reduce) and (max-width: 1080px) {
	.tmi-find-card {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}