/*
 * GORILLA GARAGE — Card-Komponente
 *
 * Wiederverwendbares Card-Pattern für Services-Bento, Experts u.a.
 * Polygon-Cut (gg-card--clip / --clip-tl) ist optional.
 * Auf .section--dark Hintergrund werden die Card-Tokens automatisch invertiert
 * via Dark-Context-Override aus tokens.css.
 */

.gg-card {
	--card-bg:       var(--gg-white);
	--card-fg:       var(--gg-black);
	--card-fg-muted: var(--gg-grey-700);
	--card-border:   var(--gg-grey-300);
	--card-bg-image: var(--bg-light-fade);

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-8);
	background-color: var(--card-bg);
	background-image: var(--card-bg-image);
	color: var(--card-fg);
	border: 1px solid var(--card-border);
	box-shadow: var(--shadow-sm);
	transition:
		transform var(--dur-base) var(--ease-emphasis),
		box-shadow var(--dur-base) var(--ease-emphasis);
}

.gg-card:hover {
	transform: var(--hover-lift-card);
	box-shadow: var(--shadow-md);
}

.gg-card--clip {
	clip-path: var(--clip-card-corner);
	border: 0;
}

.gg-card--clip-tl {
	clip-path: var(--clip-card-corner-tl);
	border: 0;
}

.gg-card--clip-tr {
	clip-path: var(--clip-card-corner-tr);
	border: 0;
}

.gg-card--feature {
	padding: var(--space-10);
}

.section--dark .gg-card,
.section--dark-soft .gg-card {
	--card-bg:       var(--gg-black-soft);
	--card-fg:       var(--gg-off-white);
	--card-fg-muted: var(--gg-grey-300);
	--card-border:   var(--gg-grey-700);
	--card-bg-image: none;
}

.gg-card__eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--card-fg-muted);
	margin: 0;
}

.gg-card__title {
	font-size: var(--fs-xl);
	color: var(--card-fg);
	margin: 0;
}

.gg-card__body {
	font-size: var(--fs-base);
	color: var(--card-fg-muted);
	margin: 0;
}

.gg-card__list {
	list-style: none;
	padding: 0;
	margin: var(--space-2) 0 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.gg-card__list > li {
	position: relative;
	padding-left: var(--space-5);
	font-size: var(--fs-sm);
	color: var(--card-fg);
}

.gg-card__list > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--color-accent);
	transform: rotate(45deg);
}

.gg-card__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding-top: var(--space-4);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-accent);
}

.gg-card__link:hover {
	color: var(--color-accent-hover);
}

.gg-card__link-arrow {
	transition: transform var(--dur-fast) var(--ease-standard);
}

.gg-card__link:hover .gg-card__link-arrow {
	transform: var(--hover-nudge-arrow);
}

/* ────────────────────────────────────────────────────────────
 * Image-Slot innerhalb einer Card (Aspect reserviert)
 * ──────────────────────────────────────────────────────────── */

.gg-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--bento-card-aspect);
	overflow: hidden;
	background-color: var(--gg-black-soft);
	margin-bottom: var(--space-4);
}

.gg-card__media > img,
.gg-card__media > picture,
.gg-card__media > picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder, wenn noch kein Bild gesetzt ist */
.gg-card__media--empty {
	background: linear-gradient(135deg, var(--gg-grey-300), var(--gg-off-white));
}

.section--dark .gg-card__media--empty,
.section--dark-soft .gg-card__media--empty {
	background: linear-gradient(135deg, var(--gg-grey-700), var(--gg-black-soft));
}