/**
 * Card primitives — product cards, application cards, section frames.
 * Built on KDL .kdl-card / .kdl-card--linked.
 */

/* ============================================================
 * Section frame
 * ========================================================= */
.upton-section {
	padding: var(--upton-section-gap) 24px;
	max-width: 1320px;
	margin: 0 auto;
}

/* Stacked sections share one gap instead of adding their paddings. */
.upton-section + .upton-section {
	padding-top: 0;
}

.upton-section__header {
	text-align: left;
	margin-bottom: clamp(32px, 5vw, 56px);
	max-width: 760px;
}

.upton-section__title {
	font-family: var(--kdl-font-sans, "IBM Plex Sans", sans-serif);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--kdl-text-strong, #0a0d11);
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}

.upton-section__lede {
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.5;
	color: var(--kdl-text-default, #3f4751);
	max-width: 680px;
	margin: 0;
}

/* Eyebrows are labels, not errors: KDL muted ink (gray-500 keeps 7:1+ on
 * the raised page-header surface) with a 6px red pilot light. Red stays
 * concentrated on primary actions and the mark. */
.kdl-eyebrow {
	font-family: var(--kdl-font-mono, Lilex, monospace);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kdl-gray-500, #444c56);
	margin: 0 0 12px;
}

.kdl-eyebrow::before,
.upton-pilot::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 6px;
	height: 6px;
	margin: 0 0.75em 0 0;
	border-radius: 50%;
	background: var(--upton-heat-3, #CE2029);
	box-shadow: 0 0 0 3px rgba(206, 32, 41, 0.12);
	vertical-align: 0.12em;
}

/* ============================================================
 * Products grid
 * ========================================================= */
.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: clamp(20px, 2.5vw, 32px);
}

@media screen and (min-width: 768px) {
	.products-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	}
}

/* ============================================================
 * Product card — media and tiles bleed to the card edge by
 * cancelling the card padding (--card-pad, set on .kdl-card).
 * ========================================================= */
.product-card {
	position: relative;
	overflow: hidden;
}

/* Cards in a row stretch to the tallest; keep the spare height below the
 * text so titles line up across the row. */
.products-grid:not(.products-grid--bento) > .product-card {
	align-content: start;
}

.product-card .kdl-card__media {
	margin: calc(var(--card-pad, 24px) * -1) calc(var(--card-pad, 24px) * -1) 0;
	border-radius: var(--kdl-radius-sm, 4px) var(--kdl-radius-sm, 4px) 0 0;
}

.product-card .kdl-card__title {
	font-size: 20px;
	line-height: 1.3;
}

.product-card .kdl-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: none;
}

/* Stretched-link: the title anchor covers the whole card for click targets,
   but the visible focus ring stays on the actual text. */
.product-card .kdl-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.product-card .kdl-card__title a:focus-visible {
	outline: 2px solid var(--kdl-copper-500, #B66723);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Titles stay ink on hover: the card heats instead (below). */
.product-card .kdl-card__title a:hover {
	color: inherit;
}

/* Filter-hidden state */
.product-card.is-hidden {
	display: none !important;
}

/* ============================================================
 * Heat, not lift — every .product-card (catalog, bento, application
 * archives). Hovering or focusing the card's link heats it: a bar
 * along the bottom edge runs out along the heat ramp and glows, the
 * shadow warms, and it all cools more slowly than it heated
 * (--heat, style.css). Text contrast never depends on the glow.
 * ========================================================= */
.product-card {
	box-shadow:
		var(--kdl-elev-2, 0 1px 2px rgba(10, 13, 17, .06), 0 0 0 1px var(--kdl-border-subtle, #e7ebef)),
		0 14px 28px -18px color-mix(in srgb, var(--heat-c) calc(var(--heat) * 80%), transparent);
	transition: --heat var(--upton-heat-cool, 650ms) var(--upton-heat-cool-ease, ease-out);
}

.product-card:has(.product-card__link:focus-visible) {
	--heat: 1;
	transition-duration: var(--upton-heat-rise, 360ms);
	transition-timing-function: var(--upton-heat-rise-ease, ease-out);
}

@media (hover: hover) {
	.product-card:has(.product-card__link:hover) {
		--heat: 1;
		transition-duration: var(--upton-heat-rise, 360ms);
		transition-timing-function: var(--upton-heat-rise-ease, ease-out);
	}
}

/* The title link's ::after is the stretched click target, so the heat bar
 * lives on the card itself. */
.product-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	z-index: 2;
	pointer-events: none;
	background: var(--heat-c);
	box-shadow: 0 0 calc(var(--heat) * 12px) calc(var(--heat) * 1px) var(--heat-glow);
	transform: scaleX(var(--heat-len));
	transform-origin: left center;
}

.product-card .kdl-card__media img {
	transition: transform 400ms var(--kdl-ease-standard, cubic-bezier(.2, 0, .2, 1));
}

@media (hover: hover) {
	.product-card:has(.product-card__link:hover) .kdl-card__media img {
		transform: scale(1.03);
	}
}

/* ============================================================
 * Bento variant — homepage Equipment section
 * ========================================================= */
.products-grid--bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 2.5vw, 32px);
}

@media (min-width: 640px) {
	.products-grid--bento {
		grid-template-columns: repeat(2, 1fr);
	}

	.products-grid--bento .product-card--featured {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.products-grid--bento {
		grid-template-columns: repeat(3, 1fr);
	}

	.products-grid--bento .product-card--featured {
		grid-column: span 2;
	}
}

/* Featured card: more breathing room, larger title, body text upsized */
.product-card--featured {
	--card-pad: clamp(24px, 2.4vw, 32px);
	gap: clamp(14px, 1.4vw, 20px);
	padding: var(--card-pad);
}

.product-card--featured .kdl-card__title {
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.2;
}

.product-card--featured .kdl-card__body {
	font-size: 16px;
	line-height: 1.55;
}

/* ============================================================
 * Photo-less tiles — bento cards drop the image and use a
 * colored block with the title set in large type instead.
 * ========================================================= */
.products-grid--bento .product-card__tile {
	margin: calc(var(--card-pad, 24px) * -1) calc(var(--card-pad, 24px) * -1) 0;
	padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) calc(clamp(18px, 2vw, 26px) + 4px);
	/* The copper edge is the heating element: copper -> orange ->
	 * yellow-orange, with a warm wash spreading from it. */
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--upton-heat-6, #f5a13a) calc(var(--heat) * 17%), transparent), transparent 62%),
		var(--kdl-surface-raised, #f4f6f8);
	box-shadow:
		inset 4px 0 0 var(--heat-edge),
		inset calc(4px + var(--heat) * 10px) 0 calc(var(--heat) * 16px) calc(var(--heat) * -8px) color-mix(in srgb, var(--heat-edge) calc(var(--heat) * 35%), transparent);
	border-radius: var(--kdl-radius-sm, 4px) var(--kdl-radius-sm, 4px) 0 0;
	min-height: 128px;
	display: flex;
	align-items: flex-end;
}

.products-grid--bento .product-card__tile .kdl-card__title {
	margin: 0;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.2;
	color: var(--kdl-text-strong, #14181d);
	letter-spacing: -0.005em;
}

/* Featured tile: red gradient, white title, taller. Heated, a copper-red
 * hot spot follows the pointer (--hx/--hy, set by chrome.js; centred for
 * keyboard focus). It never runs hotter than copper, so the white title
 * keeps its contrast. */
.products-grid--bento .product-card--featured .product-card__tile {
	background:
		radial-gradient(circle 250px at var(--hx, 70%) var(--hy, 46%),
			color-mix(in srgb, var(--kdl-copper-500, #c2632a) calc(var(--heat) * 100%), transparent) 0,
			color-mix(in srgb, var(--kdl-copper-500, #c2632a) calc(var(--heat) * 70%), transparent) 16%,
			color-mix(in srgb, #d6402a calc(var(--heat) * 60%), transparent) 46%,
			transparent 100%),
		linear-gradient(135deg, var(--kdl-accent-500, #CE2029), var(--kdl-accent-600, #a01a22));
	box-shadow: none;
	min-height: clamp(180px, 22vw, 280px);
	padding: clamp(24px, 3vw, 40px);
}

.products-grid--bento .product-card--featured .product-card__tile .kdl-card__title {
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.05;
	color: #fff;
	letter-spacing: -0.015em;
}

.products-grid--bento .product-card--featured .product-card__tile .kdl-card__title a {
	color: inherit;
}

.products-grid--bento .product-card--featured .product-card__tile .kdl-card__title a:hover {
	color: #fff;
}

/* Copper would vanish on the red tile; white keeps the ring above 5:1. */
.products-grid--bento .product-card--featured .product-card__tile .kdl-card__title a:focus-visible {
	outline-color: #fff;
	outline-offset: 4px;
}

/* Tight mode (title + CTA only): let the tile grow to fill its card so a
   standard card next to the tall featured tile doesn't leave a big gap.
   The tile's existing 128px min-height stays as the floor when the card
   stands alone (e.g. in a row of all standards). */
.product-card--tight {
	grid-template-rows: 1fr auto;
}

/* Hover-reveal CTA inside cards (bento only — added by template) */
.product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	font-family: var(--kdl-font-mono, Lilex, monospace);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--kdl-gray-900, #0a0d11) calc(var(--heat) * 100%), var(--kdl-gray-500, #444c56));
}

/* The arrow rests muted and turns copper as the card heats. */
.product-card__cta-arrow {
	display: inline-block;
	color: color-mix(in oklab, var(--kdl-copper-500, #c2632a) calc(var(--heat) * 100%), var(--kdl-gray-400, #6c7682));
	transform: translateX(calc(var(--heat) * 4px));
}

/* ============================================================
 * Equipment CTA footer band — sits under the bento grid
 * ========================================================= */
.equipment-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: clamp(32px, 4vw, 48px);
	padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
	background: var(--kdl-surface-raised, #f4f6f8);
	border: 1px solid var(--kdl-border-subtle, #e7ebef);
	border-radius: var(--kdl-radius-sm, 4px);
}

.equipment-cta__text {
	margin: 0;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.5;
	color: var(--kdl-text-default, #3f4751);
}

.equipment-cta__btn {
	gap: 8px;
	white-space: nowrap;
}

.equipment-cta__arrow {
	display: inline-block;
	transition: transform var(--kdl-dur-base, 200ms) var(--kdl-ease-standard, cubic-bezier(.2, 0, .2, 1));
}

.equipment-cta__btn:hover .equipment-cta__arrow,
.equipment-cta__btn:focus-visible .equipment-cta__arrow {
	transform: translateX(3px);
}