/* components/product-card.css
   The product card, the grids it sits in, and the system cards on the products page.

   One card everywhere - catalogue, brand, system, search, related products. The hover is
   deliberately edgeless: a lift and a colour bar that extends, no hard outline and no
   border that changes colour, because a 1px line snapping to a new colour is what made
   the old treatment look like a box being drawn around the card. The product card carries
   no hover shadow - client preference; the system card keeps its own.

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

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

.system-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition:
		box-shadow 0.32s ease,
		transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.system-card:hover,
.system-card:focus-visible {
	color: var(--ink);
	box-shadow: 0 14px 34px -20px rgba(20, 22, 60, 0.5);
	transform: translateY(-4px);
}

.system-card.is-active {
	box-shadow: 0 10px 26px -18px rgba(20, 22, 60, 0.4);
	transform: translateY(-2px);
}

.system-card.is-active .system-name,
.system-card:hover .system-name,
.system-card:focus-visible .system-name { color: var(--navy); }

.system-card-media { position: relative; display: block; overflow: hidden; }

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

.system-card:hover .tile-img,
.system-card:focus-visible .tile-img { transform: scale(1.05); }

/* An already-chosen system keeps its bar out, so the grid shows what is filtering. */
.system-card.is-active .system-bar { width: 100%; }

.system-card .system-name,
.system-card .system-count { padding: 0 15px; }

.system-card .system-name { padding-top: 14px; }

.system-card .system-count { padding-bottom: 16px; }

/* ---------- grids ---------- */
.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); }

/* ---------- the card ---------- */
.product-card {
	position: relative;
	height: 100%;
	border: 1px solid var(--line);
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition:
		box-shadow 0.32s ease,
		transform 0.36s 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 {
	transform: translateY(-4px);
}

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

.product-card-media .tile { background: #fff; }

.product-card-media .tile-img {
	object-fit: contain;
	/* Most product shots come on white already; the inset stops the ones that do not
	   from touching the card's edges. */
	padding: 12px;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Placeholder tiles have no photo to contain, so they keep filling the box. */
.product-card-media .tile.is-ph .tile-img,
.product-card-media .ph-label { object-fit: cover; padding: 0; }

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

.product-card-brand {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(3px);
	border: 1px solid var(--line-2);
	padding: 5px 9px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--navy);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

.product-card-body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}

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

.product-card-name { font-family: Poppins, sans-serif; font-size: 15.5px; font-weight: 500; line-height: 1.4; }

.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: 12.5px;
	font-weight: 300;
	color: var(--ink-3);
	line-height: 1.65;
	/* Three lines keeps every card in a row the same height whatever the blurb. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

.product-card-foot {
	margin-top: auto;
	padding-top: 14px;
	display: flex;
	align-items: stretch;
	gap: 8px;
}

/* Two even buttons rather than a text link beside a button - Read More was getting
   skipped in favour of Enquire Now, which is the click someone makes once they already
   know they want this product. Equal weight sends people to the product page first.
   Outlined rather than filled at rest, so a card full of these never looks like a wall
   of colour - each one fills in solid only once it is actually the one being hovered. */
.product-card-more,
.product-card-enquire {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 10px;
	border: 1.5px solid;
	background: transparent;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	transition: background 0.2s ease, color 0.2s ease;
}

.product-card-more { border-color: var(--blue); color: var(--blue); }

.product-card-more:hover,
.product-card-more:focus-visible { background: var(--blue); color: #fff; }

.product-card-enquire { border-color: var(--red); color: var(--red); }

.product-card-enquire:hover,
.product-card-enquire:focus-visible { background: var(--red); color: #fff; }

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

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

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

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

@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; }
}