/**
 * The Card Grid (inc/card-grid.php, widgets/card-grid.php): the card's one look, everywhere.
 *
 * As the Loop Grid's card (template 8139) looked: dark green, 20px corners and padding, a white centred
 * title in the site's h3 style, the excerpt, the green button; 30px between cards. Evened out: every image
 * is the same 4:3 crop, the cards of a grid stretch to the same height with their buttons in line, and an
 * excerpt shows 4 lines at most (the rest stays in the page for screen readers and search).
 *
 * The columns come from the widget (--kg-card-columns, per screen size): 3 / 2 / 1 unless set.
 */

.kg-card-grid__list {
	--kg-card-columns: 3;
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(var(--kg-card-columns), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* In the grid only: the Recent Posts widget has its own .kg-card (style.css). */
.kg-card-grid__list > .kg-card {
	background-color: #2a352f;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 20px;
	text-align: center;
}

.kg-card__media {
	aspect-ratio: 4 / 3;
	border-radius: 20px;
	overflow: hidden;
}

.kg-card .kg-card__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* The site's h3 (Elementor kit: size, weight, capitals), in white. */
body .kg-card .kg-card__title {
	color: #fff;
	margin: 0;
	overflow-wrap: anywhere;
}

body .kg-card .kg-card__title a {
	color: inherit;
	text-decoration: none;
}

body .kg-card .kg-card__title a:hover,
body .kg-card .kg-card__title a:focus-visible {
	text-decoration: underline;
}

.kg-card__excerpt {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	color: #fff;
	display: -webkit-box;
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
	overflow: hidden;
}

body .kg-card .kg-card__button {
	align-self: center;
	background-color: #93bd8a;
	border-radius: 3px;
	color: #2a352f;
	display: inline-block;
	font-family: "Ridley Grotesk", sans-serif;
	font-size: 12px;
	line-height: 1;
	margin-top: auto; /* the buttons of a row line up at the bottom */
	padding: 10px 30px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

body .kg-card .kg-card__button:hover,
body .kg-card .kg-card__button:focus-visible {
	background-color: #2a3530;
	box-shadow: inset 0 0 0 1px #93bd8b;
	color: #93bd8b;
}

body .kg-card-grid__list .kg-card a:focus-visible {
	outline: 2px solid #93bd8a;
	outline-offset: 3px;
}

.kg-card-grid__empty {
	opacity: 0.6;
}

/* A grid without Elementor's per-screen columns (the Loop Grid stand-in) uses the count on its list. */
@media (min-width: 1025px) {
	.kg-card-grid__list[data-kg-columns="1"] { --kg-card-columns: 1; }
	.kg-card-grid__list[data-kg-columns="2"] { --kg-card-columns: 2; }
	.kg-card-grid__list[data-kg-columns="4"] { --kg-card-columns: 4; }
}

@media (max-width: 1024px) {
	.kg-card-grid__list {
		--kg-card-columns: 2;
	}
}

@media (max-width: 767px) {
	.kg-card-grid__list {
		--kg-card-columns: 1;
	}
}