/*
 * "Our Products, In Action" — product/platform showcase carousel.
 *
 * Figma: heading 1752:4172 (title 368px + 190px gap + desc 555px, narrow
 * 1112px container) + showcase instance 1752:4176, whose component set is
 * 1615:10299 "products" — six variants covering five products. See
 * template-parts/home/products.php for the variant→product mapping and the
 * per-product logo/photo geometry.
 *
 * Layout (1112x367):
 *   494x343 bordered panel | 24px | 594px column (593x248 media over a 594px
 *   row of 181.761x71.267 logo tabs, 24.358px apart)
 * with two 53px circular arrows at x=352 y=314 straddling the seam.
 *
 * Every measurement below is the literal Figma value; where a number looks
 * odd (0.777px borders, 9.321px radii, 24.358px gaps) that is the mockup's
 * own sub-pixel geometry, kept rather than rounded so the row still lands
 * exactly 594px wide.
 */

/* Gap down to the testimonial band. Figma puts the 1112x367 showcase at
   y5081..5448 and starts the testimonial wash (1752:3947) at y5578, so the
   design leaves 130px of white below the arrows — not the 40 the shared
   .tp-section 64px padding yields once the arrows' 23.73px overhang past the
   showcase box is taken off it. 154 - 23.73 = 130.27.
   Desktop only: at <=1024 the arrows move to bottom:-60 of the showcase and
   the mobile frame governs the rhythm from 768 down. */
@media (min-width: 1025px) {
	.tp2026-products {
		padding-bottom: 154px;
	}
}

/* ---------------------------------------------------------------------------
   Heading block — 1752:4172
   Title 1752:4173: SemiBold 40/normal #021b42, capitalize, 368px measure (so
   it breaks after "Our Products,"). Desc 1752:4175: Regular 16/24 at 80%
   black, 555px, starting 190px after the title. 58px clear of the showcase.
   --------------------------------------------------------------------------- */
.tp2026-products .tp-section__head {
	justify-content: flex-start;
	gap: 190px;
	margin-bottom: 58px;
}

.tp2026-products .tp-section__title {
	flex: 0 0 368px;
	max-width: 368px;
	/* 1752:4173 is 368x100 for two lines — i.e. "normal" leading (~50px),
	   not the --tp-h2 default of 40/1. */
	line-height: normal;
	/* The 368px box breaks after "Our Products," in Figma. Our webfont sets
	   slightly tighter than Figma's, so "In" would otherwise creep onto line
	   one; balancing picks the narrower-max-line split, which is Figma's. */
	text-wrap: balance;
	color: var(--tp-heading);
	text-transform: capitalize; /* Figma textCase TITLE — 1752:4173 */
}

/* 1752:4175 carries NO textCase — sentence case, unlike the title beside it. */
.tp2026-products .tp-section__desc {
	flex: 0 1 555px;
	color: rgba(0, 0, 0, 0.8);
	text-transform: none;
}

/* ---------------------------------------------------------------------------
   Showcase grid — 1112 = 494 panel + 24 gap + 594 right column
   --------------------------------------------------------------------------- */
.tp2026-products__showcase {
	position: relative;
	display: grid;
	grid-template-columns: minmax(280px, 494px) 1fr;
	gap: 24px;
	align-items: start;
}

/* Left panel 1615:10210 — 494x343, 1px #e8f1fe, 24px radius, 174.327deg wash. */
.tp2026-products__panel {
	position: relative;
	display: grid;
	border: 1px solid #e8f1fe;
	border-radius: var(--tp-radius-lg);
	background: linear-gradient(174.327deg, rgba(218, 233, 255, 0.32) 4.4452%, rgba(213, 230, 255, 0) 110.93%);
	/* Fixed, not min-height: all five slides share one grid cell, so a min
	   would let the tallest slide stretch the card on every slide. 1615:10210
	   is a flat 343 and the copy is written to fit it. */
	height: 343px;
	padding: 42px 32px;
}

/* Stack rhythm inside the panel (1615:10211 gap 32 / 1615:10215 gap 18 /
   1615:10217 gap 32) — expressed as per-child margins since the markup is
   one flat column. */
.tp2026-products__info {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 0;
	/* 1615:10211 is a 430px column; the panel's own content box is 428 once
	   the 1px border is taken off, so this overhangs it by 2px exactly as the
	   Figma frame does. Line breaks depend on it. */
	width: 430px;
	opacity: 0;
	pointer-events: none;
	/* DISSOLVE / SPRING_PRESET_THREE, the prototype transition between the
	   variants of 1615:10299 — the stacked panels cross-fade rather than cut. */
	transition: opacity var(--tp-speed-spring) var(--tp-ease-spring);
}

.tp2026-products__info.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Brand lockup — each product's logo group has its own intrinsic size
   (NetvirE 162x47, Maridock 217x47, NavitasAI 225x37.3, TestNova 158x27,
   Q-Aud 170x47), set inline, so the category below starts at a slightly
   different y per slide exactly as the variants do. */
.tp2026-products__brand {
	position: relative;
	flex: 0 0 auto;
	margin-bottom: 32px;
}

.tp2026-products__brand img,
.tp2026-products__tab-logo img {
	position: absolute;
	display: block;
	max-width: none;
	object-fit: contain;
}

.tp2026-products__category {
	font: var(--tp-h3);
	color: var(--tp-black);
	text-transform: capitalize; /* Figma textCase TITLE — 1615:10216 */
	margin-bottom: 18px;
}

/* 1615:10219 — Regular 16/24 #595959, 442px measure. Carries NO textCase,
   so it stays sentence case between the capitalized category and link. */
.tp2026-products__desc {
	font: var(--tp-body);
	color: var(--tp-gray-700);
	text-transform: none;
	/* 1615:10218 is 442px — deliberately wider than the 430px column it sits
	   in, and the copy is written to that measure, so it is a width rather
	   than a max-width. */
	width: 442px;
	max-width: none;
	margin-bottom: 32px;
}

/* 1615:10220/10221 — Bold 16/24, 8px gap to the 24x24 arrow. #e37900 in every
   variant, so the colour is fixed here rather than per product. */
.tp2026-products__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	font: var(--tp-btn);
	color: #e37900;
	text-transform: capitalize; /* Figma textCase TITLE — 1615:10221 */
}

/* 1615:10222 wraps the glyph in a 90deg rotation, turning the exported
   up-left arrow into the up-right one the mockup shows. */
.tp2026-products__link svg {
	flex: 0 0 auto;
	transform: rotate(90deg);
	transition: translate var(--tp-speed-fast) var(--tp-ease);
}

/* The component set defines no hover variant, so the only affordance is a
   transform-only nudge — nothing that reflows the panel. */
.tp2026-products__link:hover svg,
.tp2026-products__link:focus-visible svg {
	translate: 2px -2px;
}

/* ---------------------------------------------------------------------------
   Right column — 593x248 media (1615:10290) over the tab row, 24px apart
   (media bottom 248 + 24 = tab row top 272 in the Figma frame).
   --------------------------------------------------------------------------- */
.tp2026-products__aside {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tp2026-products__media {
	position: relative;
	display: grid;
	height: 248px;
	border-radius: 12px;
	overflow: hidden;
}

.tp2026-products__media-slide {
	position: relative;
	grid-area: 1 / 1;
	overflow: hidden;
	opacity: 0;
	/* Same DISSOLVE as the info panel — the two must cross-fade in step. */
	transition: opacity var(--tp-speed-spring) var(--tp-ease-spring);
}

.tp2026-products__media-slide.is-active {
	opacity: 1;
}

/* Each variant crops its photo differently inside the 593x248 frame; the
   left/top/width/height percentages come straight from that variant's fill
   and are set inline per slide. */
.tp2026-products__media-img {
	position: absolute;
	left: var(--tp-hero-x, 0);
	top: var(--tp-hero-y, 0);
	width: var(--tp-hero-w, 100%);
	height: var(--tp-hero-h, 100%);
	max-width: none;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Logo tab row 1615:10224 — 594 wide: three 181.761x71.267 tiles, 24.358px
   apart, 0.777px #e8f1fe border, 9.321px radius.
   The row is a queue: each variant shows the next three products in cyclic
   order, so tiles carry a flex `order` and drop out via .is-out — both
   maintained by assets/js/section-products.js.
   --------------------------------------------------------------------------- */
.tp2026-products__tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 24.358px;
}

.tp2026-products__tab-item {
	display: flex;
}

.tp2026-products__tab-item.is-out {
	display: none;
}

.tp2026-products__tab {
	position: relative;
	flex: 0 0 181.761px;
	width: 181.761px;
	height: 71.267px;
	border: 0.777px solid #e8f1fe;
	border-radius: 9.321px;
	background: var(--tp-white);
	transition: border-color var(--tp-speed-fast) var(--tp-ease);
}

/* No hover variant exists in the component set either; a border tint is the
   lightest affordance that still uses the design's own blue and does not
   shift the 594px row. */
.tp2026-products__tab:hover,
.tp2026-products__tab:focus-visible {
	border-color: var(--tp-blue);
}

/* Absolutely placed at each logo's exact Figma offset inside the tile. */
.tp2026-products__tab-logo {
	position: absolute;
	display: block;
}

/* ---------------------------------------------------------------------------
   Prev/next arrows — 1615:10291 at x=352 y=314 of the 1112x367 showcase,
   overhanging the panel's bottom-right corner. Two 53px circles, 12px apart,
   holding a 32px chevron. Prev is the next button rotated 180deg.
   --------------------------------------------------------------------------- */
.tp2026-products__nav {
	position: absolute;
	left: 352px;
	top: 314px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 2;
}

.tp2026-products__arrow {
	width: 53px;
	height: 53px;
	background: var(--tp-white);
	border-color: var(--tp-blue);
	color: var(--tp-blue);
}

.tp2026-products__arrow--prev svg {
	transform: rotate(180deg);
}

/* 1615:10292 — on the Default variant prev is a muted, non-interactive shape
   rather than a button, and it is drawn at full opacity (not the 40% the
   shared .tp-btn--arrow-circle:disabled rule would apply). */
.tp2026-products__arrow--prev:disabled {
	opacity: 1;
	border-color: #e8f1fe;
	color: #dfdfdf;
}

/* Responsive breakpoints reference (Figma frame = 1440):
   1440 desktop / 1024 small-desktop / 768 tablet / 425,375,320 mobile */
@media (max-width: 1160px) {
	/* Below the 1112 Figma column the three fixed tiles no longer fit one row. */
	.tp2026-products__tabs {
		flex-wrap: wrap;
		gap: 16px;
	}
}

@media (max-width: 1024px) {
	.tp2026-products .tp-section__head {
		gap: 40px;
		justify-content: space-between;
	}

	/* base.css turns .tp-section__head into a column at 768; the Figma
	   flex-basis values above would then be read as *heights*, so both are
	   handed back to auto sizing here. */
	.tp2026-products .tp-section__title,
	.tp2026-products .tp-section__desc {
		flex: 0 1 auto;
		max-width: 555px;
	}

	.tp2026-products .tp-section__title {
		max-width: none;
	}

	.tp2026-products__nav {
		left: auto;
		right: 0;
		top: auto;
		bottom: -60px;
		transform: none;
	}

	/* That -60 overhang is deeper than the 48px .tp-section padding at this
	   breakpoint, so the arrows were landing 12px inside the testimonial wash.
	   Add the overhang back on top of the 48 so the band still clears them. */
	.tp2026-products {
		padding-bottom: 108px;
	}
}

@media (max-width: 1160px) {
	/* Tiles now wrap to a straight 2-column grid instead of ragged
	   fixed-width flex items, so every row lines up flush left/right. */
	.tp2026-products__tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.tp2026-products__tab {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — Figma 2486:9926 on the 360 frame:

     title      85,4447  190x68   28/34 SemiBold #021b42, centred, 2 lines
     subcopy    20,4531  320x36   12/18 #000 at 80%, centred
     photo      20,4591  320x210  radius 20
     card       20,4758  320x297  radius 24, overlapping the photo by 43
       logo     99,4788  162x47
       title    40,4853  280x34   22/34 SemiBold #131313
       desc     40,4899  280x54   12/18 #595959
       link   120.5,4973 119x24   16/24 Bold #e37900 + 24px arrow
     arrows    121,5027  118x53   two 53px discs, 12 apart, 25 below the card

   The desktop two-column split becomes photo-over-card, everything centred,
   and the logo tab row is not in the mobile frame at all — the two arrows
   are the only control.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* The block bottoms out at y5080 and Testimonials follows 64px later. */
	.tp2026-products {
		padding-bottom: 24px;
	}

	/* Figma 2283:4459 — stacked and centred, 16px apart. The title keeps a
	   190px measure so it still breaks after "Our Products,". */
	.tp2026-products .tp-section__head {
		align-items: center;
		text-align: center;
		gap: 16px;
		margin-bottom: 24px;
	}

	.tp2026-products .tp-section__title {
		flex: 0 0 auto;
		max-width: 190px;
		font-size: 28px;
		line-height: 34px;
	}

	.tp2026-products .tp-section__desc {
		flex: 0 1 auto;
		max-width: none;
		font-size: 12px;
		line-height: 18px;
	}

	.tp2026-products__showcase {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Photo first, card second — and the card climbs 43px back over the photo
	   while its own arrows hang 25px below it: 210 - 43 + card + 25, so Figma's
	   489 becomes 516 with the taller card set below. */
	.tp2026-products__aside {
		order: 1;
		gap: 0;
	}

	.tp2026-products__panel {
		order: 2;
		z-index: 1;
		/* Figma's 297 is drawn around NetvirE, whose category is one line. Three
		   of the five products ("Ship Management Platform", "AI-Powered Test
		   Automation Platform", "Audit Management Platform") run to two, which
		   pushes the whole block down 34px — and since the arrows straddle the
		   card's bottom edge (they overlap it by 28, see __nav below), the link
		   landed *inside* them: content ended 3px past the discs' top edge with
		   nothing between the two.
		   All five slides share one grid cell, so the card cannot size to the
		   active slide without jumping on every rotation; the height has to
		   cover the worst case instead. 324 leaves the two-line slides 24px of
		   clearance above the discs and the one-line slides 58 (Figma's own
		   NetvirE gap is 30) — the compromise a fixed cell forces. */
		height: 324px;
		margin: -43px 0 25px;
		/* Figma's 1px stroke is inside the card, so its 30/20 content inset is
		   measured from the outer edge and the CSS border takes 1 of each.
		   No bottom padding: the block is top-aligned and the space below it is
		   what the height above budgets for. */
		padding: 29px 19px 0;
		border-radius: 24px;
		background: linear-gradient(177.678deg, rgba(218, 233, 255, 0.32) 1.487%, rgba(213, 230, 255, 0) 117.68%), #ffffff;
	}

	.tp2026-products__media {
		height: 210px;
		border-radius: 20px;
	}

	/* Figma's mobile crop (imageTransform on 2283:4655) is a 119x115 stretch
	   that is authored for the NetvirE photograph alone — the other four heroes
	   run from 1:1 to 2.39:1 — and it is not uniform: it squeezes the image to
	   0.888 horizontally, so no undistorted setting can match both axes. The
	   element is given Figma's own 114.76%/-20.73% vertical crop (which is the
	   visible difference — it drops the top 18% of sky) and object-fit keeps
	   the aspect, with 60.7% standing in for the horizontal centre. General
	   enough to hold for all five heroes. */
	.tp2026-products__media-img {
		left: 0;
		top: -20.73%;
		width: 100%;
		height: 114.76%;
		object-position: 60.7% center;
	}

	/* Figma 2283:4564 — a 280px centred column, 18px under the logo, then
	   12 / 20 down to the description and the link. */
	.tp2026-products__info,
	.tp2026-products__desc {
		width: 100%;
	}

	.tp2026-products__info {
		align-items: center;
		text-align: center;
	}

	.tp2026-products__brand {
		margin-bottom: 18px;
	}

	/* The clamps are what make the fixed height above a bounded promise: 2 title
	   lines + 3 description lines is the worst case it is sized for, so a longer
	   category or blurb truncates rather than growing into the arrows. */
	.tp2026-products__category {
		font: 600 22px/34px var(--tp-font-heading);
		margin-bottom: 12px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	.tp2026-products__desc {
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 20px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}

	.tp2026-products__link {
		align-self: center;
	}

	/* Figma 2283:4644 — centred on the card, 53px discs 12px apart, sitting
	   25px past its bottom edge; the showcase's own box ends with them. */
	.tp2026-products__nav {
		position: absolute;
		left: 50%;
		right: auto; /* the 1024 rule pins it right; both set would size it */
		top: auto;
		bottom: 0;
		transform: translateX(-50%);
		justify-content: center;
		margin-bottom: 0;
	}

	/* Not in the mobile frame — the arrows are the whole control there. */
	.tp2026-products__tabs {
		display: none;
	}
}

/* The `width: 100%` handed to .tp2026-products__tab at 1160 never actually
   applied: the tile is a flex item of .tp2026-products__tab-item, and its
   `flex: 0 0 181.761px` basis outranks width, so the tile stayed 181.761px
   however narrow the 1fr track got. At 320 that put a 182px tile in a 134px
   column and pushed the document to 348px wide — which is what dragged the
   fixed header off-screen too, since the bar stretches to the scroll width.
   auto-fit tracks capped at the Figma measure drop the row to one tile as
   soon as two stop fitting, so the tiles keep their exact size and the row
   can never be wider than the column. */
@media (max-width: 480px) {
	.tp2026-products__tabs {
		gap: 12px;
		grid-template-columns: repeat(auto-fit, minmax(0, 181.761px));
		justify-content: center;
	}

	.tp2026-products__tab-item {
		min-width: 0;
	}

	/* Shrinkable basis + min-width:0 is the belt to auto-fit's braces: below
	   ~222px, where even one tile is wider than the track, the tile gives way
	   instead of bursting out of it. */
	.tp2026-products__tab {
		flex: 0 1 181.761px;
		width: 100%;
		min-width: 0;
	}
}

/* The single full-width tab tile that used to stand in for the desktop queue
   below 768 is gone: Figma 2486:9925 has no logo tab row on mobile at all, so
   .tp2026-products__tabs is display:none there and this block had nothing left
   to lay out. section-products.js still narrows the queue to one tile at this
   breakpoint, which is now simply unobserved. */

/* The 35/47 mobile H2 this used to restate is superseded by Figma 2283:4453,
   which sets 28/34 for this heading on the 360 frame — see the 768 block. */

@media (prefers-reduced-motion: reduce) {
	.tp2026-products__info,
	.tp2026-products__media-slide,
	.tp2026-products__tab,
	.tp2026-products__tab-item,
	.tp2026-products__arrow,
	.tp2026-products__link svg {
		transition: none;
	}
}