/**
 * Work Explore — post-footer carousel
 *
 * End-of-post "Explore recent work" pattern. Used on single-work CPT.
 * Pattern: atomicdust/work-explore
 * JS: assets/js/work-explore.js
 *
 * Carved out of custom.css (2026-05-18) for conditional per-page load.
 * Loaded only when the wrapper class `ad-work-explore` appears in the page —
 * see ad_pattern_asset_map() in functions.php.
 */

.ad-work-explore {
	position: relative;
}

.ad-work-explore__heading {
	margin: 0 0 var(--wp--preset--spacing--50) 0;
	/* Flex row (space-between via block layout): text stack left, arrows top-right. */
	align-items: flex-start;
}

/* Prev/next arrows — top-right of the header, opposite the label. Buttons are
   the shared .ad-carousel-btn component, injected by work-explore.js. */
.ad-work-explore__nav {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

.ad-work-explore__stage {
	position: relative;
	/* Stage spans the full viewport width — the parent group uses layout:default
	   (no contentSize cap), so the stage is not constrained. */
	overflow: hidden;
	cursor: pointer; /* every card is clickable → opens its case study */
	/* Allow native vertical scrolling on touch; we intercept horizontal drags. */
	touch-action: pan-y;
	/* Prevent text selection / image drag ghost during carousel drag. */
	-webkit-user-select: none;
	user-select: none;
}

.ad-work-explore__img,
.ad-work-explore__video {
	-webkit-user-drag: none;
	user-drag: none;
}

.ad-work-explore__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 2rem;
	/* JS sets --offset (in px) to shift the track so the focused card is centered */
	transform: translate3d(var(--ad-we-offset, 0), 0, 0);
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
}

.ad-work-explore__track.is-snapping,
.ad-work-explore__track.is-snapping .ad-work-explore__card {
	transition: none; /* instant reposition on loop wrap — cards too so their scale doesn't re-animate after teleport */
}

/* While the user is dragging: disable track transition so transform follows
   cursor in real time. Card scale transitions stay enabled so focus changes
   still animate if currentVisual updates mid-drag (it doesn't in this impl,
   but safer). */
.ad-work-explore__track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.ad-work-explore__card {
	flex: 0 0 auto;
	/* Width changes are instant — transitioning width desyncs with the track
	   transform and lands the focused card off-center. Scale (below) animates
	   the visual "grow/shrink" on focus change because it doesn't affect layout. */
	width: var(--ad-we-peek-width, 40vw);
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	opacity: 0.85;
	transform: scale(0.92);
	transform-origin: center;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
	will-change: transform;
}

.ad-work-explore__card.is-center {
	width: var(--ad-we-center-width, 55vw);
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.ad-work-explore__card {
		transition: none;
		transform: none;
	}
	.ad-work-explore__card.is-center {
		transform: none;
	}
}

.ad-work-explore__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background-color: var(--wp--preset--color--tone-light);
}

.ad-work-explore__img,
.ad-work-explore__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

.ad-work-explore__meta {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 1rem;
	padding: 0 0.25rem;
	min-height: 1.5em;
}

.ad-work-explore__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	line-height: 1.3;
	letter-spacing: -0.005em;
	/* Title column = left side. Hide for non-center cards until the card is
	   actually the focus (keeps peek cards from crowding the meta row). */
}

.ad-work-explore__tags {
	margin: 0;
	font-family: var(--wp--preset--font-family--sohne);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--body);
	text-align: right;
	letter-spacing: 0.01em;
	/* Only shows on center card (other cards don't render this element) */
}

/* Reduced-motion: skip the scale transitions + slide animation. */
@media (prefers-reduced-motion: reduce) {
	.ad-work-explore__track {
		transition: none;
	}
	.ad-work-explore__card {
		transition: none;
	}
}

/* Small screens: keep the horizontal carousel but with equal-sized cards and
   touch-swipe navigation. JS sets both --ad-we-*-width vars to the same value
   when MOBILE is true, so the card/.is-center width CSS still works without
   !important overrides. Drop the focus scale (all cards visually equal). */
@media (max-width: 782px) {
	.ad-work-explore__track {
		gap: 1rem;
	}
	.ad-work-explore__card,
	.ad-work-explore__card.is-center {
		transform: none;
		opacity: 1;
	}
	/* Mobile meta: put title above tags (stack instead of left/right split) */
	.ad-work-explore__meta {
		grid-template-columns: 1fr;
		row-gap: 0.125rem;
	}
	.ad-work-explore__tags {
		text-align: left;
	}
}