/**
 * The post cards, and the category row above them.
 *
 * The design made a card one big link. It has two now — the article and its
 * category — so the title's link is stretched over the card instead, and the
 * category sits above it. Neither is something the compiled utilities cover.
 *
 * @package GermanyAssignment
 */

.gah-post { position: relative; }

/* the title's link covers the card, so the whole surface still opens the post */
.gah-post-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* everything the reader can click in its own right sits above that */
.gah-post-cat {
	position: relative;
	z-index: 2;
}

.gah-post-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var( --ease );
}

.gah-post:hover .gah-post-img { transform: scale( 1.06 ); }

/* the arrow nudge the design gave the footer link, now that it is not a link */
.gah-post:hover .gah-post-link { color: var( --rot-700 ); }

@media ( prefers-reduced-motion: reduce ) {
	.gah-post-img { transition: none; }
	.gah-post:hover .gah-post-img { transform: none; }
}

/* a featured image filling the panel the design drew an emoji in */
.gah-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* a photograph filling the disc the design drew initials in */
.gah-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* ------------------------------------------------------ the category row */

.gah-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
	margin-bottom: 36px;
}