/**
 * Insights Explore — black blog-feed carousel
 *
 * Full-width black interstitial injected after the 6th post on the blog feed
 * (page 1). Mirrors the work-explore carousel in function; black background
 * with white type. Shows the 8 latest "Atomicdust Insights" posts.
 *
 * Render: inc/insights-explore.php   JS: assets/js/insights-explore.js
 */

/* ---- Feed-injection wrapper ------------------------------------------------
   The carousel is spliced into the feed's post-template <ul> as an extra <li>.
   Span all feed columns (its own full-width row) and bleed out of the feed's
   global padding to the viewport edges so the black reaches edge-to-edge. The
   section re-applies site padding on its heading (see __heading below). */
/* Selector is intentionally specific: the feed grid resets its <li> margins to
   0 with a more specific rule, which would otherwise cancel the bleed. */
.ad-query-loop .wp-block-post-template > .ad-insights-explore-item {
	grid-column: 1 / -1;
	list-style: none;
	/* Critical: grid items default to min-width:auto, which would let the wide
	   carousel track force the column (and on mobile, the single 1fr column —
	   so every feed post) to grow far beyond the viewport. Pin to 0 so the
	   track is clipped by the stage instead of expanding the grid. */
	min-width: 0;
	margin-top: 0;
	margin-bottom: 0;
	/* Cancel the feed's global padding so the black reaches the viewport edges.
	   The real padding var (inherited) is clamp(0.75rem, 2.5vw, 2.5rem). */
	margin-left: calc(-1 * var(--wp--style--root--padding-left, clamp(0.75rem, 2.5vw, 2.5rem)));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, clamp(0.75rem, 2.5vw, 2.5rem)));
}

.ad-insights-explore {
	position: relative;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--section);
}

/* Heading row: text stack left, arrows top-right. Site padding re-applied here
   (the section itself is full-bleed) so the heading aligns with the feed. */
.ad-insights-explore__heading {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--60) 0;
	padding-left: var(--wp--style--root--padding-left, clamp(1rem, 4vw, 4rem));
	padding-right: var(--wp--style--root--padding-right, clamp(1rem, 4vw, 4rem));
}

.ad-insights-explore__heading-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ad-insights-explore__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
}

.ad-insights-explore__subtitle {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--tone-dark);
}

.ad-insights-explore__viewall {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	align-self: flex-start;
	padding-bottom: 0.1rem;
	transition: border-color 0.2s ease;
}
.ad-insights-explore__viewall:hover {
	border-bottom-color: var(--wp--preset--color--secondary);
}

/* Prev/next arrows — below the carousel, aligned to the right at the site
   padding edge. Buttons are the shared .ad-carousel-btn--dark component,
   injected by insights-explore.js. */
.ad-insights-explore__nav {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--40);
	padding-left: var(--wp--style--root--padding-left, clamp(0.75rem, 2.5vw, 2.5rem));
	padding-right: var(--wp--style--root--padding-right, clamp(0.75rem, 2.5vw, 2.5rem));
}

.ad-insights-explore__stage {
	position: relative;
	overflow: hidden;
	cursor: pointer; /* every card is clickable → opens that post */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.ad-insights-explore__img {
	-webkit-user-drag: none;
	user-drag: none;
}

.ad-insights-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-ie-offset, 0), 0, 0);
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
}

.ad-insights-explore__track.is-snapping,
.ad-insights-explore__track.is-snapping .ad-insights-explore__card {
	transition: none; /* instant reposition on loop wrap */
}

.ad-insights-explore__track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.ad-insights-explore__card {
	flex: 0 0 auto;
	width: var(--ad-ie-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-insights-explore__card.is-center {
	width: var(--ad-ie-center-width, 55vw);
	opacity: 1;
	transform: scale(1);
}

.ad-insights-explore__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.06);
}

.ad-insights-explore__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
	/* Grow within the mask on hover — mirrors the feed cards. */
	transition: transform 0.4s ease;
}

.ad-insights-explore__card:hover .ad-insights-explore__img {
	transform: scale(1.03);
}

.ad-insights-explore__meta {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0 0.25rem;
}

.ad-insights-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--secondary);
	line-height: 1.3;
	letter-spacing: -0.005em;
}

/* Animated underline on hover — mirrors the feed cards' title link: a
   left-to-right gradient reveal on an inline element. */
.ad-insights-explore__title-line {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	/* Underline sits close to the text — matches the feed cards. */
	background-position: 0 calc(100% - 0.16em);
	background-size: 0% 2px;
	background-repeat: no-repeat;
	transition: background-size 0.4s ease;
	padding-bottom: 0;
}

.ad-insights-explore__card:hover .ad-insights-explore__title-line {
	background-size: 100% 2px;
}

.ad-insights-explore__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--tone-dark);
	line-height: 1.5;
	/* Excerpt only reads cleanly on the focused (center) card; keep peeks tidy. */
}

@media (prefers-reduced-motion: reduce) {
	.ad-insights-explore__track,
	.ad-insights-explore__card,
	.ad-insights-explore__card.is-center {
		transition: none;
		transform: none;
	}
	.ad-insights-explore__img,
	.ad-insights-explore__title-line {
		transition: none;
	}
	.ad-insights-explore__card:hover .ad-insights-explore__img {
		transform: none;
	}
}

/* Small screens: equal-sized cards + touch-swipe. JS sets both --ad-ie-*-width
   vars to the same value when MOBILE, so the width CSS still works. Drop the
   focus scale (all cards visually equal). */
@media (max-width: 782px) {
	.ad-insights-explore__track {
		gap: 1rem;
	}
	.ad-insights-explore__card,
	.ad-insights-explore__card.is-center {
		transform: none;
		opacity: 1;
	}
}