/* ===================================================================
 	 Products — slider transformation cards
 	 Continuity with whatdo: the same scroll-driven fill edge that lights
 	 up whatdo nodes 01-04 crosses into #products and lights up nodes 05-07,
 	 driving each article's reveal (reversible on scroll-back).
 	 =================================================================== */

section#products {
	position: relative;
	background: var(--color-bg-sunken);
	border-block: 1px solid var(--color-line);
	padding: 0 0;
}

/* Left-edge spine carrying nodes 05-07 (continues from the whatdo rail) */
.product-card-list {
	position: relative;
}
/* The vertical spine line in #products — sits at the container's content-left
   (matching the article's left edge + the node X). Same effect as whatdo track. */
.products__track {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--color-line);
	overflow: hidden;
	pointer-events: none;
}
/* The fill that grows with scroll — identical to whatdo__track::before */
.products__track::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(var(--fill, 0) * 100%);
/*	background: linear-gradient(to bottom, var(--color-accent), color-mix(in srgb, var(--color-accent) 50%, transparent));*/
	background: var(--color-accent);
	will-change: height;
}

article.product-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* leave room for the spine + node on the left edge */
	padding-block: var(--space-2xl);
	padding-inline-start: clamp(3.5rem, 2.5rem + 3vw, 5rem);
	gap: var(--space-lg);
}

.product-card + .product-card {
	border-top: 1px solid var(--color-line-strong);
}

article.product-card.--reverse {
	& > .product-card__head {
		order: 2;
		text-align: right;
	}
	& > .product-card__visual {
		order: 1;
	}
}

/* ---- Product node on the spine (reuses whatdo__node base styling) ----
   The article's left edge sits at the container's content-left (= var(--gutter)
   from the container's box-left). We want the node centered on the article's
   left edge, so left:0 + the base translateX(-50%) does it. */
.products__node {
	left: 0;
	top: calc(var(--space-2xl) + (var(--step-2xs) * 1.55 / 2));
}

/* Filled state: same glow + pulse as whatdo nodes when the track fill crosses */
.product-card.is-filled .products__node {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: #fff;
	width: 40px; height: 40px;
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent),
		0 0 20px color-mix(in srgb, var(--color-accent) 60%, transparent);
	animation: node-pulse 2s ease-in-out infinite;
}

/* ---- Article reveal: mirrors whatdo card fill effect, reversible ---- */
.product-card .product-card__head,
.product-card .product-card__visual,
.product-card > .product-highlight {
	opacity: 0.2;
	transform: translateX(-16px);
	transition:
		opacity 0.8s var(--ease-out),
		transform 0.8s var(--ease-out);
}
.product-card.--reverse .product-card__head,
.product-card.--reverse .product-card__visual,
.product-card.--reverse > .product-highlight {
	transform: translateX(16px);
}
.product-card.is-filled .product-card__head,
.product-card.is-filled .product-card__visual,
.product-card.is-filled > .product-highlight {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.product-card .product-card__head,
	.product-card .product-card__visual,
	.product-card > .product-highlight,
	.product-card.--reverse .product-card__head,
	.product-card.--reverse .product-card__visual,
	.product-card.--reverse > .product-highlight {
		opacity: 1 !important;
		transform: none !important;
	}
}

.product-tag {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	margin-bottom: 0.75rem;
	line-height: 20px;
}
.product-title {
	font-size: var(--step-lg);
	margin-bottom: 0.5rem;
}
.product-desc {
	color: var(--color-fg-muted);
	font-size: var(--step-sm);
	line-height: 1.7;
	margin-block: 1.5rem 0;

	/* Shared typographic rules for the three product descriptions */
	& > h4 {
		letter-spacing: 0.15em;
		font-size: var(--step-md);
		line-height: 1.6;
		font-weight: 500;
		color: var(--color-fg);
		letter-spacing: -0.01em;
		margin-block: var(--space-md) var(--space-2xs);
		padding-block-start: var(--space-sm);
		border-block-start: 1px solid var(--color-line);
		&:first-child {
			margin-block-start: 0;
			border-block-start: none;
			padding-block-start: 0;
		}
	}
	& > h4::before {
/*		content: "> ";*/
		color: var(--color-fg-dim);
		font-weight: 600;
	}
	& > p {
		margin-block: 0 var(--space-sm);
		max-width: 62ch;
	}
	& > p:last-child { margin-block-end: 0; }

	& em {
		color: var(--color-fg);
		font-style: italic;
		font-weight: 500;
		padding-inline: 0.1em;
	}

	strong.accent { color: var(--color-accent); }

	/* ---- Chip cloud (product 2 capability list) ---- */
	.product-chips {
		list-style: none;
		margin: var(--space-md) 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-xs);
		& > li {
			font-family: var(--font-mono);
			font-size: var(--step-2xs);
			letter-spacing: 0.02em;
			color: var(--color-fg);
			padding: 0.4em 0.85em;
			border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
			border-radius: var(--radius-pill);
			background: color-mix(in srgb, var(--color-accent) 8%, transparent);
			transition:
				background var(--dur) var(--ease-out),
				border-color var(--dur) var(--ease-out),
				transform var(--dur) var(--ease-out);
		}
		& > li:hover {
			background: color-mix(in srgb, var(--color-accent) 16%, transparent);
			border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
			transform: translateY(-1px);
		}
	}

	/* ---- Engagement table (product 2) ---- */
	.product-table {
		width: 100%;
		border-collapse: collapse;
		border-block: 1px solid var(--color-line-strong);
		margin-block: 2rem;
		font-size: var(--step-xs);
		& th,
		& td {
			text-align: left;
			vertical-align: top;
			padding: var(--space-xs) var(--space-sm);
			border-block-end: 1px solid var(--color-line);
		}
		& th {
			font-family: var(--font-mono);
			font-size: var(--step-2xs);
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			color: var(--color-fg-dim);
			background: var(--color-bg-sunken);
		}
		& tbody tr:last-child td { border-block-end: none; }
		& tbody tr:hover td { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
		& td:first-child {
			width: 40%;
			color: var(--color-fg);
			font-family: var(--font-mono);
			font-size: var(--step-2xs);
		}
		& td:last-child { color: var(--color-fg-muted); line-height: 1.6; }
		& strong { color: var(--color-fg); font-weight: 600; }
	}

	/* ---- Meta callouts (product 2 Méthode / Inclus) ---- */
	.product-meta {
		margin: 0;
		padding-block-start: var(--space-sm);
		border-block-start: 1px solid var(--color-line);
		display: grid;
		gap: var(--space-xs);
		& > div {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: var(--space-xs);
			align-items: baseline;
		}
		& dt {
			font-family: var(--font-mono);
			font-size: var(--step-2xs);
			text-transform: uppercase;
			letter-spacing: 0.08em;
			color: var(--color-fg-dim);
		}
		& dd {
			margin: 0;
			font-size: var(--step-xs);
			color: var(--color-fg-muted);
			line-height: 1.55;
		}
		& dd strong { color: var(--color-fg); font-weight: 600; }
		& dd strong.accent { color: var(--color-accent); }
	}

	/* ---- Blockquote list (product 3) ---- */
	.product-quote {
		margin: var(--space-sm) 0;
		padding: var(--space-sm) var(--space-md);
		background: color-mix(in srgb, var(--color-accent) 6%, transparent);
		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
		& .product-list { margin: 0; }

		& > p { color: var(--color-fg); font-weight: 600; }
	}
	.product-list {
		list-style: none;
		margin: 0 0 var(--space-sm);
		padding: 0;
		display: grid;
		gap: var(--space-xs);
		& > li {
			position: relative;
			padding-inline-start: 1.4em;
			color: var(--color-fg-muted);
			line-height: 1.6;
		}
		& > li::before {
			content: "▸";
			position: absolute;
			inset-inline-start: 0;
			color: var(--color-accent);
			font-weight: 600;
		}
		& > li strong { color: var(--color-fg); font-weight: 600; }
	}
}

/* -- Visuals -- */

.product-card__visual {
	align-items: center;
	justify-content: center;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
	align-content: start;
	container-type: inline-size;
}

/* ---- Highlight box (product 3, I.A. Rescue) — direct child of the article ---- */
.product-card > .product-highlight {
	grid-column: 1;
	margin-block-start: var(--space-md);
}
.product-highlight {
	background: color-mix(in srgb, var(--color-accent) 14%, transparent);
	border-radius: var(--radius);
	padding: var(--space-md);
	margin-block: var(--space-md) var(--space-sm);

	background:
		repeating-linear-gradient(
			135deg,
			color-mix(in srgb, var(--color-accent) 9%, transparent) 0 10px,
			transparent 10px 20px
		),
		color-mix(in srgb, var(--color-accent) 16%, var(--color-bg));

	background: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--color-bg) 98%, hsl(0, 0%, 100%)) 0 18px, var(--color-bg) 18px 36px );

	& > :first-child { margin-block-start: 0; }
	& > :last-child { margin-block-end: 0; }

	/* Neutralize the nested sub-heading's own top rule so the box border is the only top frame */
	& > .product-sub {
		margin-block-start: 0;
		padding-block-start: 0;
		border-block-start: none;
	}

	/* Keep .product-flow's own border/bg, just sit it flush at the box bottom */
	& > .product-flow { margin-block-end: 0; }

	& > p {
		color: var(--color-fg);
	}
}

/* ---- Sub-heading with badge (product 3) ---- */
.product-sub {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
	font-family: var(--font-mono);
	font-size: var(--step-md);
	font-weight: 600;
	color: var(--color-fg);
	letter-spacing: -0.01em;
	margin-block: var(--space-md) var(--space-2xs);
	padding-block-start: var(--space-sm);
	border-block-start: 1px solid var(--color-line);
}
.product-badge {
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
	background: var(--color-accent);
	padding: 0.25em 0.6em;
	border-radius: var(--radius-pill);
	line-height: 1;
}
.product-sub__icon {
	width: 1.15em;
	height: 1.15em;
	color: var(--color-accent);
	flex-shrink: 0;
}

/* ---- Process flow (product 3) ---- */
.product-flow {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-around ;

	padding: 0;

	gap: var(--space-xs);
	margin-block: var(--space-sm) 0;
	border-radius: var(--radius);
	font-weight: 600;

	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	letter-spacing: 0.02em;
	color: var(--color-fg);
	text-transform: uppercase;

	& .arrow {
		color: var(--color-accent);
		font-weight: 700;
		font-size: 1.75rem;
	}
	& > span:not(.arrow) {
		border-radius: var(--radius-sm);
		background: var(--color-bg);
	}
}

/* ---- Responsive: collapse spine on narrow screens ---- */
@media (max-width: 880px) {
	article.product-card {
		grid-template-columns: 1fr;
		padding: 6rem 0 2rem 5rem;
		border-top: 0 !important;
	}

	.products__track {
		left: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	}
	.product-card-list::before { display: none; }

	.products__node {
		left: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
		transform: translateX(-50%) translateY(-50%);
	}

	/*.product-table {
		display: block;
		overflow-x: auto;
		white-space: normal;
		& thead, & tbody, & tr, & th, & td {
			display: block;
		}
		& tr {
			padding-block: var(--space-xs);
			border-block-end: 1px solid var(--color-line);
		}
		& th { display: none; }
		& td {
			border: none;
			padding: 0;
			width: auto;
		}
		& td:first-child {
			font-size: var(--step-xs);
			margin-block-end: var(--space-3xs);
		}
		& td:last-child { color: var(--color-fg-muted); }
	}*/

	.product-meta > div {
		grid-template-columns: 1fr;
		gap: var(--space-3xs);
	}
}