/*
 * Project listing shortcodes ([ak_projekte_autor] / [ak_projekte_beratung]).
 * Flat cream cards that match the rest of the site: sharp corners, no borders,
 * warm #fff0d8 fill, display-face uppercase titles. Every card leads with a
 * 3:2 featured image. Each card carries a red
 * type kicker, an optional subheadline, and a bottom "Projekt ansehen →" cue.
 */
.ak-projekte {
	--ak-accent: #ff0035;
	--ak-cream: #fff0d8;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-projekte__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ak-cream);
}

/* Reserve the 3:2 frame even when a post has no image yet, so rows stay level. */
.ak-projekte__media {
	aspect-ratio: 3 / 2;
	/*background: rgba(0, 0, 0, .04);*/
	overflow: hidden;
}

.ak-projekte--beratung .ak-projekte__media {
	padding-top: 24px;
}

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

.ak-projekte__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 9px;
	padding: 22px 24px 24px;
}

.ak-projekte__kicker {
	font-family: var(--ak-font-display, inherit);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ak-accent);
}

.ak-projekte__title {
	margin: 0;
	font-family: var(--ak-font-display, inherit);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.25;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #222;
}
/*
 * :link/:visited raise specificity to (0,2,1) so they beat the theme's dynamic
 * `a, a:visited { color: <brand red> }` (be-themes-styles.php) regardless of
 * load order — otherwise a visited project title renders red.
 */
.ak-projekte__title a,
.ak-projekte__title a:link,
.ak-projekte__title a:visited {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}
/* Stretch the title link over the whole card — one clean tab stop per card. */
.ak-projekte__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ak-projekte__sub {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #4d4d4d;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ak-projekte__more {
	margin-top: auto;
	padding-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ak-font-display, inherit);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ak-accent);
}
.ak-projekte__arrow {
	display: inline-block;
	transition: transform .18s ease;
}

.ak-projekte__card:hover .ak-projekte__title a,
.ak-projekte__title a:focus-visible {
	color: var(--ak-accent);
}
.ak-projekte__card:hover .ak-projekte__arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.ak-projekte__arrow,
	.ak-projekte__title a {
		transition: none;
	}
	.ak-projekte__card:hover .ak-projekte__arrow {
		transform: none;
	}
}

@media (max-width: 900px) {
	.ak-projekte {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ak-projekte {
		grid-template-columns: 1fr;
	}
}