/**
 * Featured posts grid.
 *
 * The card shell itself (.tct-card, .tct-card__body, .tct-card__eyebrow) is styled
 * by the theme. Everything here is only the grid and the image, so the cards stay
 * in sync if the theme's card styling changes.
 */

.tct-featured {
	display: grid;
	grid-template-columns: repeat( var( --tct-featured-cols, 3 ), minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--40, 1.75rem );
	align-items: stretch;
}

.tct-featured--cols-1 { --tct-featured-cols: 1; }
.tct-featured--cols-2 { --tct-featured-cols: 2; }
.tct-featured--cols-3 { --tct-featured-cols: 3; }
.tct-featured--cols-4 { --tct-featured-cols: 4; }

@media ( max-width: 1023px ) {
	.tct-featured {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 781px ) {
	.tct-featured {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* The card is a flex column in the theme; make sure our article behaves the same. */
.tct-featured .tct-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tct-card__media {
	display: block;
	margin: 0;
	line-height: 0;
	overflow: hidden;
}

.tct-card__img,
.tct-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.4s ease;
}

@media ( hover: hover ) {
	.tct-card--post:hover .tct-card__img {
		transform: scale( 1.03 );
	}
}

/* Titles link to the post but should not look like body links. */
.tct-card__title a {
	color: inherit;
	text-decoration: none;
}

.tct-card__title a:hover,
.tct-card__title a:focus {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.tct-card__text {
	margin-top: 0;
}

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

	.tct-card--post:hover .tct-card__img {
		transform: none;
	}
}