/* components/product-card.css
   Product card and the grids it sits in.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.product-card:hover .btn-learn, .product-card:focus-within .btn-learn {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.product-card:hover .btn-learn::after, .product-card:focus-within .btn-learn::after {
	transform: translateX(4px);
}

.systems-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.system-card { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }

.system-card:hover { color: var(--ink); }

.system-card-media { position: relative; }

.product-grid {
	display: grid;
	/* auto-fill keeps every card the same size and adds columns when there is room,
	   instead of locking to three tracks. */
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 26px;
}

.product-grid-3 { grid-template-columns: repeat(3, 1fr); }

.product-card {
	position: relative;
	border: 1px solid var(--line);
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition:
		border-color 0.25s ease,
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* A brand bar wipes across the top, echoing the hero and closing banner. */
.product-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 2;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* focus-within so keyboard users get the same treatment as the mouse. */
.product-card:hover,
.product-card:focus-within {
	/* No shadow: the lift, the brand bar and the photo zoom carry the interaction.
	   The border stays put, because with no shadow it is the only thing holding the
	   card's edge. */
	transform: translateY(-5px);
}

.product-card:hover::before,
.product-card:focus-within::before { transform: scaleX(1); }

.product-card-media { display: block; overflow: hidden; }

.product-card-media .tile-img { transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }

.product-card:hover .tile-img,
.product-card:focus-within .tile-img { transform: scale(1.07); }

.product-card-body {
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.product-card-system { font-size: 10.5px; letter-spacing: 0.12em; font-weight: 600; text-transform: uppercase; color: var(--green-ink); }

.product-card-name { font-family: Poppins, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.35; }

.product-card-name a { color: var(--ink); transition: color 0.2s ease; }

.product-card:hover .product-card-name a,
.product-card:focus-within .product-card-name a,
.product-card-name a:hover { color: var(--navy); }

.product-card-short { font-size: 13.5px; font-weight: 300; color: var(--ink-3); line-height: 1.7; }

.product-card-short p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.product-card, .product-card .tile-img, .product-card::before {
		transition: none;
	}

	.product-card:hover,
		.product-card:focus-within { transform: none; }

	.product-card:hover .tile-img,
		.product-card:focus-within .tile-img { transform: none; }
}

@media (max-width: 980px) {
	.systems-grid, .product-grid, .product-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.product-grid, .product-grid-3, .systems-grid { grid-template-columns: 1fr; }
}