/*
 * Product cards and the screenshots inside them.
 *
 * Loaded from functions.php, after the styles core prints inline. That order
 * matters: our selectors and core's layout selectors have the same specificity,
 * so the later one wins, and every grid on the site depends on ours winning.
 */

/* ------------------------------------------------------------- product cards */

/*
 * A card that is a link in its entirety, without nesting a link around block
 * content: the whole surface is clickable through the pseudo element, and the
 * real anchor stays the only thing in the tab order.
 */
.ghizo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	overflow: hidden;
	transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.ghizo-card:hover,
.ghizo-card:focus-within {
	border-color: var(--wp--preset--color--blue-soft);
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.ghizo-card {
		transition: none;
	}

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

.ghizo-card__media {
	display: block;
	aspect-ratio: 1544 / 500;
	background: var(--wp--preset--color--navy);
	overflow: hidden;
}

.ghizo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ghizo-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
	flex: 1;
}

.ghizo-card__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 650;
	letter-spacing: -0.015em;
	margin: 0;
}

.ghizo-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The link covers the card, so a click anywhere lands on it. */
.ghizo-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ghizo-card__text {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.ghizo-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

.ghizo-card__price {
	font-weight: 650;
	color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------- cards */

/*
 * The whole card is the link target, with the heading's anchor stretched over
 * it. That gives a 100% wide hit area without nesting anything inside an anchor.
 */
.ghizo-card {
	transition: border-color var(--ghizo-fast) var(--ghizo-ease),
		box-shadow var(--ghizo-slow) var(--ghizo-ease),
		transform var(--ghizo-slow) var(--ghizo-ease);
}

.ghizo-card:hover,
.ghizo-card:focus-within {
	transform: translateY(-2px);
}

.ghizo-card__media img {
	transition: transform var(--ghizo-slow) var(--ghizo-ease);
}

.ghizo-card:hover .ghizo-card__media img {
	transform: scale(1.02);
}

/* The arrow after the card title, which is the affordance saying it opens. */
.ghizo-card__title a::after {
	transition: transform var(--ghizo-fast) var(--ghizo-ease);
}

.ghizo-card:hover .ghizo-card__title a::after {
	transform: translateX(3px);
}

/* --------------------------------------------------------------- screenshots */

/*
 * A screenshot with its caption. Bordered rather than shadowed: these are
 * pictures of a WordPress admin screen on a white background, so a shadow makes
 * them float while a border makes them read as a window.
 */
.ghizo-shot {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.ghizo-shot:last-child {
	margin-bottom: 0;
}

.ghizo-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--wash);
}

.ghizo-shot figcaption {
	margin-top: var(--wp--preset--spacing--10);
	max-width: 70ch;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}