/*
 * "Engineering What's Next With AI" slider.
 *
 * Figma: heading 1752:4368 (x=164, w=809, 42px above the rail) and instance
 * 1752:4370 "AI Slider" (x=164, y=2126, 1368x408) on the 1440 root canvas.
 *
 * Geometry, straight from the instance:
 *   featured card        576 x 408          (I1752:4370;1588:4316)
 *   right column         768 wide           (I1752:4370;1588:4327)
 *     card row           372 x 191 x2, gap 24
 *     footer row         372 text col + 24 + 104.46 nav pill, top-aligned
 *   column gap           24 (576 + 24 + 768 = 1368)
 *   row/footer gap       24 (row 0..191, footer starts 215)
 *
 * Both nodes start at x=164 — the 1112px narrow column — and the rail is
 * 1368 wide, so it runs 256px past that column and 92px past the page.
 * That overhang is the point: the third card is clipped by the viewport so
 * the row reads as a slider. __viewport clips it; __shell re-uses the
 * narrow container purely to pin the rail's left edge to x=164.
 *
 * Breakpoints reference (Figma frame = 1440):
 * 1440 desktop / 1024 small-desktop / 768 tablet / 425,375,320 mobile.
 */

/* Figma 1752:4368: 809px wide, SemiBold 40/50, heading box ends y=2084 and
   the rail starts y=2126. */
.tp2026-ai-carousel__heading {
	margin: 0 0 42px;
	max-width: 809px;
	text-transform: capitalize; /* Figma 1752:4368 textCase=TITLE */
}

.tp2026-ai-carousel__viewport {
	overflow: hidden; /* clips the rail's 256px right-hand overhang */
}

/* The container only supplies the rail's left edge — the rail runs past its
   right edge, so nothing here may centre or clip it. */
.tp2026-ai-carousel__shell {
	display: block;
}

/* The rail spans from the container's left content edge to the right edge
   of the page, capped at the Figma 1368. `100%` is the container's inner
   width, and (100vw - 100% - 40px) / 2 + 20px is the gutter the container
   leaves on the right, so the sum is exactly the width Figma has visible:
   1112 + 164 = 1276 on a 1440 page. Card sizes below stay at their Figma
   pixels at every viewport — only how much of the third card the page
   clips changes, which is the slider behaviour the design is showing. */
.tp2026-ai-carousel__body {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	width: calc(100% + (100vw - 100% - 40px) / 2 + 20px);
	min-width: 100%;
	max-width: 1368px;
}

/* ---------------------------------------------------------------------
 * Cards — image fill + gradient scrim, exported from the Figma fills in
 * assets/images/ai-carousel/.
 * --------------------------------------------------------------------- */

.tp2026-ai-card {
	position: relative;
	display: block;
	border-radius: 20px;
	overflow: hidden;
	background: #0a1440;
	color: var(--tp-white);
	text-decoration: none;
}

/* Each capability carries its own featured-slot framing in --tp-ai-size /
   --tp-ai-pos / --tp-ai-scrim (set inline in PHP, re-set by the JS as the
   slider moves). The crop has to live in background-size/position, not in
   a transform: transforming this element moves the painted box itself, so
   any offset large enough to matter drags the artwork's edge into view. */
.tp2026-ai-card__media {
	--tp-media-hover: 1;
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transform: scale(var(--tp-media-hover));
	transition: transform var(--tp-speed-slow) var(--tp-ease), opacity var(--tp-speed-slow) var(--tp-ease-gentle), filter var(--tp-speed-slow) var(--tp-ease-gentle);
}

.tp2026-ai-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
}

.tp2026-ai-card:hover .tp2026-ai-card__media {
	--tp-media-hover: 1.04;
}

.tp2026-ai-card--featured {
	flex: 0 0 576px;
	width: 576px;
	height: 408px;
}

/* Figma frames each photograph differently in this box — Agentic at 152%,
   Generative 168%, AI Development 144%, the last two plain cover — so the
   values ride in with the capability rather than being hard-coded here.
   Both axes are always supplied together, which reproduces the uniform
   scale Figma applied and guarantees the box stays covered. */
.tp2026-ai-card--featured .tp2026-ai-card__media {
	background-size: var(--tp-ai-size, cover);
	background-position: var(--tp-ai-pos, center);
}

/* Two scrims across the five variants: 1588:4317/4354 ramp from a 0.66
   black at 15.17%, while 1588:4395 / 1752:4744 / 1752:4779 start later and
   stronger (0.7 at 38.03%) because those photographs are brighter behind
   the headline. Which one applies travels with the capability. */
.tp2026-ai-card--featured .tp2026-ai-card__media::after {
	background: var(--tp-ai-scrim, linear-gradient(0deg, rgba(0, 0, 0, 0.66) 15.17%, rgba(0, 0, 0, 0) 67.15%));
}

/* Figma 1588:4318: body box 32,284 512x84 inside the 576x408 card —
   32px side inset, 40px from the bottom (408 - 284 - 84). */
.tp2026-ai-card__body {
	position: absolute;
	left: 32px;
	right: 32px;
	bottom: 40px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 1;
}

/* Figma 1588:4319 — SemiBold 20/24 */
.tp2026-ai-card__title {
	font: 600 20px/24px var(--tp-font-body);
	text-transform: capitalize;
}

/* Figma 1588:4322 — Regular 16/24, pure #ffffff, no textCase. Stays
   sentence case directly beneath the capitalized card title. */
.tp2026-ai-card__desc {
	font: var(--tp-body);
	text-transform: none;
	color: var(--tp-white);
}

/* Right column — Figma I1752:4370;1588:4327, 768 wide, 24px vertical gap.
   It takes whatever the rail has left after the 576px featured card, so on
   a 1440 page it measures 676 and the 768px card row inside it runs 92px
   past the viewport — exactly the clip Figma's placement produces. */
.tp2026-ai-carousel__col {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Figma I1752:4370;1588:4328 — 768 wide (372 + 24 + 372); deliberately
   allowed to overflow the column, __viewport clips it. */
.tp2026-ai-carousel__row {
	display: flex;
	gap: 24px;
}

/* Figma 1588:4329/4332: 372x191, title box at 32,83 — 32px from the left,
   vertically centred ((191 - 24) / 2 = 83.5), not bottom-aligned. Both
   fills are scaled to fill and bottom-aligned (object-bottom). */
.tp2026-ai-card--secondary {
	flex: 0 0 372px;
	width: 372px;
	height: 191px;
	display: flex;
	align-items: center;
	padding: 0 32px;
}

/* Sits over a #f5f7ff base fill (1588:4332/4369). */
.tp2026-ai-card--secondary {
	background: #f5f7ff;
}

/* THE colour rule. Across all five variants the featured photograph is in
   colour and the two secondaries are the same photographs desaturated, so
   each capability ships one colour asset and this slot drains it — a card
   regains its colour as it slides into the large box.

   Framing: most of the thumbnails really are scaleMode FILL (1588:4367 /
   4369 / 4408 / 4410 / 1752:4757), which is what the `cover center` fallback
   below is. Generative AI is the exception — 1588:4330 hand-crops it so the
   iris clears the label — so it ships --tp-ai-size-sm/--tp-ai-pos-sm and this
   rule defers to them, exactly as the featured slot defers to the unsuffixed
   pair. Both axes are always supplied together so the box stays covered. */
.tp2026-ai-card--secondary .tp2026-ai-card__media {
	filter: grayscale(1);
	background-size: var(--tp-ai-size-sm, cover);
	background-position: var(--tp-ai-pos-sm, center);
}

/* Figma 1588:4332 / 4367 / 4369 all use the same diagonal scrim. (Only
   1588:4330 — Generative in slot 1 of variant 1 — differs, at 64.74deg
   17.06->53.78%. Cards rotate through both slots, so the value three of
   the four instances share wins; it is also the stronger of the two,
   which matters now that a title can wrap to two lines.) */
.tp2026-ai-card--secondary .tp2026-ai-card__media::after {
	background: linear-gradient(65.77deg, rgba(0, 0, 0, 0.46) 46.02%, rgba(0, 0, 0, 0) 81.11%);
}

/* Figma variant 4 shows one secondary card and variant 5 none: the window
   runs off the end of the list instead of wrapping. Both variants keep the
   768x191 card row (1752:4755 / 1752:4790) and so the slider's 408px
   height — hiding rather than removing the card holds that height, which
   also stops the page shifting under the reader as they click through. */
.tp2026-ai-card.is-empty {
	visibility: hidden;
}

/* Figma 1588:4331/4333 — Regular 20/24 (the featured title is SemiBold).
   4333 caps its text box at 230px (32 left + 230 + 110 right = 372). */
.tp2026-ai-card--secondary .tp2026-ai-card__title {
	position: relative;
	z-index: 1;
	max-width: 230px;
	font-weight: 400;
}

/* Figma I1752:4370;1588:4334 — HORIZONTAL, gap 24, items top-aligned: the
   372px text column then the prev/next pill. */
.tp2026-ai-carousel__footer {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

/* Figma 1588:4335: VERTICAL stack, gap 35 — the intro paragraph sits above
   the "Discover More" pill (paragraph 0..96, pill at y=131). */
.tp2026-ai-carousel__intro-col {
	flex: 0 1 372px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 35px;
}

/* Figma 1588:4336 — 372px wide, Regular 16/24, #000000 at 80%, no
   textCase. Stays sentence case above the capitalized "Discover More". */
.tp2026-ai-carousel__intro {
	font: var(--tp-body);
	text-transform: none;
	color: rgba(0, 0, 0, 0.8);
	margin: 0;
}

/* Shared icon-pill hover — Figma 1588:4337 -> 1546:3889, ON_HOVER
   SMART_ANIMATE SPRING_PRESET_THREE. Geometry copied from .tp-btn--white
   in base.css: the 36px disc slides from a 4px left inset to a 4px right
   inset while the label slides the other way (icon 4,4 -> 139,4; label
   50,10 -> 16,10 on a 179px pill = calc(100% - 40px)). The pill also
   inverts: fill gains #1977f3, stroke drops, disc and label flip to white.
   No scale/translateY — Figma keeps the pill the same size in both states. */
.tp2026-ai-carousel__discover {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	height: 44px;
	padding: 4px 16px 4px 50px; /* 4 inset + 36 disc + 10 gap */
	border: 1px solid var(--tp-blue);
	border-radius: var(--tp-radius-pill);
	color: var(--tp-blue);
	/* Figma 1544:3888 — Bold 16/24, textCase=TITLE */
	font: var(--tp-btn);
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
	transition: padding var(--tp-speed-spring) var(--tp-ease-spring), background var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease), border-color var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-ai-carousel__discover:hover,
.tp2026-ai-carousel__discover:focus-visible {
	padding: 4px 50px 4px 16px;
	background: var(--tp-blue);
	border-color: var(--tp-blue); /* stroke: #1977f3 -> null (matches the fill) */
	color: var(--tp-white);
}

.tp2026-ai-carousel__discover-icon {
	position: absolute;
	left: 4px;
	top: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tp-blue);
	color: var(--tp-white);
	flex: 0 0 auto;
	transition: left var(--tp-speed-spring) var(--tp-ease-spring), background var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-ai-carousel__discover-icon svg {
	display: block;
}

.tp2026-ai-carousel__discover:hover .tp2026-ai-carousel__discover-icon,
.tp2026-ai-carousel__discover:focus-visible .tp2026-ai-carousel__discover-icon {
	left: calc(100% - 40px); /* 36 disc + 4 inset */
	background: var(--tp-white);
	color: var(--tp-blue);
}

/* ---------------------------------------------------------------------
 * Mobile dot rail — Figma 2255:3876 (68x12, 12px #1977f3 active + four 8px
 * #d9d9d9, 6px apart). Desktop has no dots at all; the prev/next pill is
 * the control there, so this is display:none until 768.
 * --------------------------------------------------------------------- */

.tp2026-ai-carousel__dots {
	display: none;
}

.tp2026-ai-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d9d9d9;
	cursor: pointer;
	transition: width var(--tp-speed-fast) var(--tp-ease), height var(--tp-speed-fast) var(--tp-ease), background var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-ai-carousel__dot.is-active {
	width: 12px;
	height: 12px;
	background: var(--tp-blue);
}

/* ---------------------------------------------------------------------
 * Prev/next pill — Figma I1752:4370;1795:19959.
 * 104.459 x 54.376 pill, #e8f1ff fill, 0.715px #ffffff stroke, radius
 * 42.928, 5px side padding, two 42.928px discs (so the gap is 8.603).
 * The group is rotated 180 in Figma, which is why the *right* disc is the
 * filled #0e65ea one — i.e. "next" is the active arrow.
 * --------------------------------------------------------------------- */

.tp2026-ai-carousel__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 104.46px;
	height: 54.38px;
	padding: 0 5px;
	background: #e8f1ff;
	border: 0.715px solid var(--tp-white);
	border-radius: 42.93px;
	box-sizing: border-box;
}

/* Figma 1795:19961 — enabled arrow: #0e65ea disc, white glyph. Both
   arrows are enabled on variants 2-4. */
.tp2026-ai-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42.93px;
	height: 42.93px;
	padding: 3.577px;
	border: 0;
	border-radius: 21.46px;
	background: #0e65ea;
	color: var(--tp-white);
	cursor: pointer;
	transition: background var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-ai-carousel__arrow-glyph {
	display: block;
	width: 35.774px;
	height: 35.774px;
}

.tp2026-ai-carousel__arrow--prev .tp2026-ai-carousel__arrow-glyph {
	transform: rotate(180deg);
}

.tp2026-ai-carousel__arrow:hover,
.tp2026-ai-carousel__arrow:focus-visible {
	background: var(--tp-blue);
}

/* Figma 1795:19984 — end-of-list arrow: no disc, #b1c6e5 glyph. The list
   does not wrap, so prev is like this on variant 1 (1795:19985) and next
   on variant 5 (1752:4805). */
.tp2026-ai-carousel__arrow:disabled {
	background: transparent;
	color: #b1c6e5;
	cursor: default;
}

/* Figma 1795:19961 -> 1588:4352, ON_CLICK SMART_ANIMATE GENTLE_SPRING:
   the arrows swap the whole card set, so fade content out and back rather
   than letting the text and artwork pop. */
.tp2026-ai-card__body,
.tp2026-ai-card--secondary .tp2026-ai-card__title {
	transition: opacity var(--tp-speed-slow) var(--tp-ease-gentle);
}

.tp2026-ai-carousel__body.is-rotating .tp2026-ai-card__body,
.tp2026-ai-carousel__body.is-rotating .tp2026-ai-card__title,
.tp2026-ai-carousel__body.is-rotating .tp2026-ai-card__media {
	opacity: 0;
}

/* ---------------------------------------------------------------------
 * Responsive. Below 1024 the fixed Figma rail can no longer bleed
 * meaningfully, so the whole thing reflows to the container width.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Below the small-desktop breakpoint there is no room left to bleed
	   into, so the rail reflows to the container and nothing is clipped. */
	.tp2026-ai-carousel__viewport {
		overflow: visible;
	}

	.tp2026-ai-carousel__body {
		flex-direction: column;
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	.tp2026-ai-card--featured {
		flex: 0 0 auto;
		width: 100%;
		height: 320px;
	}

	/* The 1.19x zoom crop is tuned to the 576x408 box — on a card that is
	   now much wider than it is tall, sizing on height stops covering. Go
	   back to cover, framed on the subject. */
	.tp2026-ai-card--featured .tp2026-ai-card__media {
		background-size: cover;
		background-position: 55% 32%;
	}

	.tp2026-ai-carousel__row {
		width: 100%;
	}

	.tp2026-ai-card--secondary {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	/* Same reasoning as the featured card above: 1588:4330's crop is measured
	   against a 372x191 box, and these cards now stretch to share the row, so
	   the hand-framing stops being the one the designer drew. Cover. */
	.tp2026-ai-card--secondary .tp2026-ai-card__media {
		background-size: cover;
		background-position: center;
	}
}

/* ---------------------------------------------------------------------
 * Mobile — one card at a time, arrows above the rail.
 *
 * Client request (2026-08-04): on mobile the three cards stacked into a
 * ~900px tall column that had to be scrolled past before the prev/next
 * pill at the bottom was even reachable, so the controls were invisible at
 * the moment the cards were on screen. Below 768 the window therefore
 * narrows to the featured card alone and the pill moves above it, which is
 * also what makes the arrows read as slider controls rather than as part
 * of the "Discover More" block they sit beside on desktop.
 *
 * FR-026 is untouched by this: the same fixed repeating order, the same
 * wrap-around and the same 5s autoplay drive the single card, and the two
 * secondary slots are only hidden — the JS still fills them, so nothing
 * has to know which slots are on screen.
 * --------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* Figma 2251:3773 / 2255:3876 / 2263:3985, measured on the 360 frame:
	     heading   20,2268  320x68   28/34 SemiBold #021b42
	     intro     20,2352  320x72   12/18 rgba(0,0,0,0.8)
	     card      20,2448  320x338  radius 20
	     dots        centred,2798  68x12
	     Discover  20,2830  320x44   outlined, full width
	   so the gaps run 16 / 24 / 12 / 20 rather than one shared value. The
	   heading owns the first, the flex items below own the rest. */
	/* 2263:3985 bottoms out at y2874 and the Industries panel starts at
	   y2938; that section supplies 40 of the 64px gap. */
	.tp2026-ai-carousel {
		padding-bottom: 24px;
	}

	.tp2026-ai-carousel__heading {
		margin-bottom: 16px;
		font-size: 28px;
		line-height: 34px;
	}

	/* Both secondaries are dropped rather than hidden: .__row is a flex item
	   of the column, so leaving it in place would keep its 24px gap and a
	   collapsed strip above the footer. */
	.tp2026-ai-carousel__row {
		display: none;
	}

	/* Figma reorders the block on mobile: the intro paragraph moves out from
	   beside the slider and up between the heading and the card, and the
	   "Discover More" pill drops to the very bottom, under the dots. Rather
	   than duplicate either into a second mobile-only block, the three
	   wrappers that hold them together on desktop (__col > __footer >
	   __intro-col) collapse to display:contents so their children become
	   flex items of __body and can simply be ordered. */
	.tp2026-ai-carousel__col,
	.tp2026-ai-carousel__footer,
	.tp2026-ai-carousel__intro-col {
		display: contents;
	}

	.tp2026-ai-carousel__body {
		position: relative;
		gap: 0; /* the four gaps differ — carried as margins below */
		/* The card is swipeable (see section-ai-carousel.js) — claim the
		   horizontal axis while leaving vertical scrolling to the page. */
		touch-action: pan-y;
	}

	.tp2026-ai-carousel__intro {
		order: 1;
		margin-bottom: 24px;
		font-size: 12px;
		line-height: 18px;
	}

	.tp2026-ai-card--featured {
		order: 2;
		height: 338px;
		margin-bottom: 12px;
	}

	/* The desktop crop is framed for the 576x408 box; at 320x338 the same
	   framing pushes the subject off the right edge. Figma's mobile fill
	   (2611:1738) scales the photograph to 106.51% of the card height and
	   frames it 30.9% across — `auto` on the width keeps that a uniform zoom,
	   so it holds for all five photographs rather than just this one. */
	.tp2026-ai-card--featured .tp2026-ai-card__media {
		background-size: auto 106.51%;
		background-position: 30.9% 50%;
	}

	/* Figma 2611:1739 — body box 20,228 280x90 inside the 338-tall card, so
	   20px side inset and 20px up from the bottom, title 14/24 over 12/18. */
	.tp2026-ai-card__body {
		left: 20px;
		right: 20px;
		bottom: 20px;
		gap: 12px;
	}

	.tp2026-ai-card__title {
		font-size: 14px;
		line-height: 24px;
	}

	.tp2026-ai-card__desc {
		font-size: 12px;
		line-height: 18px;
	}

	.tp2026-ai-carousel__dots {
		order: 3;
		/* __body is a flex-start column, so the rail centres itself rather
		   than the column re-aligning — everything else is full width. */
		align-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		/* Figma puts the 68px rail at x=129.5 on the 320 card, i.e. 3.5px right
		   of centre; the left margin reproduces that against align-self. */
		margin: 0 0 20px 7px;
	}

	/* Figma 2263:3985 — on mobile the pill loses its icon disc and stretches
	   to the container: 320x44, 1px #1977f3, radius 59, label centred. The
	   disc-slide hover belongs to the desktop pill and has nothing to move
	   into here, so both it and the padding swap are dropped. */
	.tp2026-ai-carousel__discover {
		order: 4;
		width: 100%;
		justify-content: center;
		padding: 10px 16px;
		border-radius: 59px;
	}

	.tp2026-ai-carousel__discover:hover,
	.tp2026-ai-carousel__discover:focus-visible {
		padding: 10px 16px;
	}

	.tp2026-ai-carousel__discover-icon {
		display: none;
	}

	/* Client request (2026-08-06): drop the prev/next pill on mobile. Swipe
	   and the 5s autoplay already move the carousel here, so the arrows were
	   redundant controls costing 78px of vertical space above the card — the
	   padding-top that reserved that space is gone with them.
	   Hidden rather than removed from the markup: the JS still holds
	   references to both buttons and toggles their disabled state during the
	   fade, so they have to stay in the DOM. Desktop is unaffected. */
	.tp2026-ai-carousel__nav {
		display: none;
	}

}

@media (prefers-reduced-motion: reduce) {
	.tp2026-ai-card__media,
	.tp2026-ai-card__body,
	.tp2026-ai-card--secondary .tp2026-ai-card__title,
	.tp2026-ai-carousel__discover,
	.tp2026-ai-carousel__discover-icon {
		transition: none;
	}
}