/*
 * Parent pair — a litter's sire and dam, side by side.
 *
 * Layout only. The eyebrow, status pill, spec rows and "Meet …" link are
 * the theme's own classes (style.css §2, §5, §6, §7), so a pair reads like
 * the rest of the site. Colours are theme.json presets.
 *
 * Heading rules carry .cz-pair as well: page content sits in .cz-prose
 * (style.css §13), whose "h2" and "h3" margins out-rank a single class.
 */

.cz-pair {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}

.cz-pair__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}

.cz-pair .cz-pair__title,
.cz-pair .cz-pill {
	margin: 0;
}

.cz-pair__about {
	max-width: 76ch;
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--muted);
}

.cz-pair__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--30);
}

.cz-pair__dog {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--char);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 3px;
	overflow: hidden;
}

.cz-pair__photo {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--night);
}

.cz-pair__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anchor the crop to the top: a centred crop of an upright photo takes
	   the dog's ears off. */
	object-position: 50% 0;
	transition: transform 1s cubic-bezier(0.16, 0.7, 0.2, 1);
}

.cz-pair__photo:hover img {
	transform: scale(1.04);
}

.cz-pair__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.6rem 1.75rem;
}

.cz-pair .cz-eyebrow {
	margin: 0 0 0.35rem;
}

.cz-pair .cz-pair__name {
	margin: 0 0 0.6rem;
	font-size: 1.3rem;
}

.cz-pair__name a {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
	transition: color 0.25s ease;
}

.cz-pair__name a:hover,
.cz-pair__name a:focus-visible {
	color: var(--wp--preset--color--gold);
}

.cz-pair__excerpt {
	margin: 0 0 1.4rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

/* Pushed to the foot of the card, so both "Meet" links line up whatever
   the length of the papers above them. */
.cz-pair__more {
	margin: auto 0 0;
}

.cz-pair__cta {
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.cz-pair__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cz-pair__photo img {
		transition: none;
	}

	.cz-pair__photo:hover img {
		transform: none;
	}
}