/**
 * Base: a plain stacked list. This is what shows with no JS, a failed
 * script load, or prefers-reduced-motion — the "aio-card-anim--active"
 * rules below only take over once frontend.js has actually run.
 */
.aio-card-anim {
	position: relative;
}

/* Per-card width from the "Width" setting — 50 (Theme default) / 80 (Wide) / 100 (Full) — the horizontal slider sizes its cards in
 * frontend.js from data-card-width; the layered stack is capped here via the
 * --aio-card-width custom property, and only once the script has run so the
 * no-JS fallback stays full width. */
.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__card {
	max-width: var(--aio-card-width, 100%);
	margin-left: auto;
	margin-right: auto;
}

.aio-card-anim__card {
	margin-bottom: 40px;
	border-radius: 20px;
	overflow: hidden;
}

.aio-card-anim__card:last-child {
	margin-bottom: 0;
}

.aio-card-anim__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
}

.aio-card-anim__media {
	flex: 1 1 320px;
}

.aio-card-anim__media img,
.aio-card-anim__media video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.aio-card-anim__body {
	flex: 1 1 280px;
}

/* .aio-card-anim__subheading {
	margin: 0 0 6px;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
} */

.aio-card-anim__title {
	margin: 0 0 12px;
}

.aio-card-anim__text {
	margin: 0 0 16px;
	font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.5), 1.2rem);
}

.aio-card-anim__link {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Horizontal Slider — the section pins in place while GSAP translates
 * the card track sideways; the page's scroll distance stretches to
 * match how far the track has to travel (handled by ScrollTrigger's
 * own pin — Layered below needs no such pin, it's plain CSS sticky).
 * ---------------------------------------------------------------- */
.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__sticky {
	display: flex;
	align-items: stretch;
	height: 100vh;
	/* Breathing room above/below the card while the section is pinned to the
	   top of the viewport — border-box keeps the track (and its 100%-height
	   cards) at 100vh minus this padding, so 20px of the page shows through
	   top and bottom instead of the card running edge to edge. */
	box-sizing: border-box;
	padding-top: 20px;
	padding-bottom: 20px;
	overflow: hidden;
}

.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__track {
	display: flex;
	gap: 20px;
	width: max-content;
	height: 100%;
	will-change: transform;
}

.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__card {
	/* Width is set in px by frontend.js at 85% of the pinned viewport's
	   actual rendered width (not a CSS percentage, which would be circular
	   against the track's own max-content width) — narrower than the full
	   viewport so the next card visibly peeks in at the edge. */
	flex: 0 0 auto;
	height: 100%;
	margin: 0;
}

.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__inner {
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
}

.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__media {
	flex: 0 0 50%;
	order: 2;
	box-sizing: border-box;
	padding: 2.5vw;
}

.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__media img,
.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}

.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__body {
	flex: 1 1 50%;
	order: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	height: 100%;
	padding: 56px;
}

/* The Heading field is the big background-style numeral/label (matches
   how the hello-kids reference itself works — it's a separately, manually
   authored heading, not something this block generates). */
.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__title {
	margin: 0;
	font-size: 20vw;
	line-height: 1;
	font-weight: 600;
}

.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__content {
	display: flex;
	flex-direction: column;
}

/* Subheading is the card's real, visible title here — grouped with the
   description/link (not the giant Heading numeral above) so they move
   together as one block, pushed to the bottom via the body's
   justify-content: space-between. */
.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__subheading {
	margin: 0 0 12px;
	font-size: 1.4em;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	opacity: 1;
}

.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__text {
	margin: 0;
}

.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__link {
	margin-top: 16px;
}

/* ------------------------------------------------------------------
 * Horizontal Slider — responsive. The media/body 50%+50% side-by-side
 * split (with 56px body padding and a 2.5vw-padded image half) had no
 * breakpoint — inside an already-narrow 85vw-ish pinned card on a phone
 * that leaves each half maybe 150px wide, squeezing the numeral and body
 * text into an unreadably narrow column. Stack image above text instead
 * once the card itself gets this narrow.
 * ---------------------------------------------------------------- */
@media (max-width: 700px) {
	.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__inner {
		flex-direction: column;
	}

	.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__media {
		flex: 0 0 38%;
		order: 1;
		padding: 0;
	}

	.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__media img,
	.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__media video {
		border-radius: 0;
	}

	.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__body {
		flex: 1 1 auto;
		order: 2;
		min-height: 0;
		padding: 24px;
	}

	.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__title {
		font-size: 15vw;
	}

	.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__subheading {
		font-size: 1.15em;
		margin-bottom: 8px;
	}

	.aio-card-anim--active.aio-card-anim--horizontal .aio-card-anim__text {
		font-size: 0.92em;
	}
}

/* ------------------------------------------------------------------
 * Portfolio Layered — matches Salient's own "layout-stacked" post grid:
 * a plain vertical stack of position:sticky, full-bleed image cards (no
 * GSAP pin needed — native CSS sticky does the stacking), title/category
 * overlaid on the image, and the outgoing card blurs + scales down as the
 * next one covers it (frontend.js).
 * ---------------------------------------------------------------- */
.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__card {
	position: sticky;
	top: 24px;
	height: 80vh;
	margin: 0 0 24px;
	border-radius: 20px;
	overflow: hidden;
	transform-origin: top center;
	will-change: transform, filter;
	/* Sticky-stacking otherwise relies on plain DOM order to paint later
	   cards over earlier ones — but GSAP's blur()/scale() on the outgoing
	   card each open a new stacking context, which can throw that off and
	   let an already-passed card render on top of the one that's supposed
	   to have covered it. Pin the paint order explicitly instead. */
	z-index: calc(var(--i, 0) + 1);
}

.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__card:last-child {
	margin-bottom: 0;
}

.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__inner {
	position: relative;
	max-width: none;
	height: 100%;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

/* Dark scrim so the overlaid text stays legible over any photo. */
.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__inner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__media {
	position: absolute;
	inset: 0;
}

.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__media img,
.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__media video {
	width: 100%;
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
	object-fit: cover;
}

.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__body {
	position: relative;
	z-index: 2;
	height: 100%;
	box-sizing: border-box;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
}

.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__title {
	margin: 0 0 12px;
	font-size: min(160px, 9vw);
	line-height: 1.05;
	color: #fff;
}

/* The shared markup puts Heading (title) before the Subheading/Description/
   Link group (so Horizontal Slider can push that group to the bottom as one
   block) — Layered keeps that same order, Subheading reading as a caption
   under the title rather than an eyebrow above it. Flattening .content with
   display:contents lets its children join .body's own flex order without
   duplicating the markup per style. */
.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__content {
	display: contents;
}

/* ------------------------------------------------------------------
 * Portfolio Layered — "side-by-side" view: a second look for this style.
 * Still the exact same sticky-stack scroll mechanic as the Overlay rules
 * above (position:sticky per card, blur+scale on the outgoing one) — only
 * the layout inside each card changes, to a light card with normal-sized
 * text on the left and a separate boxed photo on the right, instead of a
 * full-bleed image with white text overlaid on it.
 * ---------------------------------------------------------------- */
/* Overlay's 80vh card height and stretch-to-fill image were sized for a
   tall, full-bleed hero photo — this view is a compact landscape banner
   instead, so it needs its own (much shorter) intrinsic height. */
.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__card {
	height: auto;
}

.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__inner {
	display: flex;
	flex-direction: row;
	/* The base (unscoped) .aio-card-anim__inner rule sets flex-wrap: wrap for
	   the no-JS fallback layout — without overriding it back here, the
	   browser is still free to wrap media/body onto separate lines instead
	   of sharing the row, which is what was pushing the text out of view. */
	flex-wrap: nowrap;
	align-items: center;
	gap: 64px;
	padding: 64px;
	box-sizing: border-box;
}

.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__inner::before {
	display: none;
}

.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__media {
	position: relative;
	inset: auto;
	/* The markup puts .media before .body in the DOM (image, then text) —
	   push it after .body here so it lands on the right, text on the left,
	   matching the reference design. */
	order: 2;
	flex: 1 1 50%;
	/* A flex item's default min-width is auto, not 0 — meaning the browser
	   can refuse to shrink it below the source image's own intrinsic width
	   even with flex-shrink:1, which (combined with the wrap bug above) is
	   what let a portrait 1024px-tall photo blow the row width out. */
	min-width: 0;
	aspect-ratio: 4 / 3;
	border-radius: 24px;
	overflow: hidden;
}

.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__body {
	position: relative;
	z-index: auto;
	flex: 1 1 50%;
	min-width: 0;
	height: auto;
	padding: 0;
	justify-content: center;
	color: #1c1a1a;
}

.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__title {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1.15;
	color: #1c1a1a;
}

.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__link {
	display: inline-block;
	width: fit-content;
	margin-top: 24px;
	padding: 14px 28px;
	background: #1c1a1a;
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * Portfolio Layered — responsive. Neither view had a breakpoint before:
 * Side-by-side stayed a fixed flex-direction:row with 64px gap/padding
 * and a 4:3 image no matter how narrow the viewport got, squeezing image
 * and text into unreadable slivers on tablet/phone; Overlay's 80vh card
 * + 40px body padding also just ate too much of a short phone viewport.
 * ---------------------------------------------------------------- */
@media (max-width: 900px) {
	.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 28px;
	}

	.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__media {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 10;
	}

	.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__body {
		flex: 0 0 auto;
	}

	.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__title {
		font-size: clamp(1.5rem, 4.5vw, 2.25rem);
	}
}

@media (max-width: 600px) {
	.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__card {
		top: 12px;
		height: 70vh;
		margin: 0 0 16px;
		border-radius: 14px;
	}

	.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__body {
		padding: 22px;
	}

	.aio-card-anim--active.aio-card-anim--layered .aio-card-anim__subheading {
		font-size: 0.8em;
	}

	.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__inner {
		padding: 18px;
		gap: 16px;
	}

	.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__media {
		aspect-ratio: 4 / 3;
		border-radius: 16px;
	}

	.aio-card-anim--active.aio-card-anim--layered.aio-card-anim--view-side-by-side .aio-card-anim__link {
		padding: 12px 22px;
		font-size: 0.9em;
	}
}