/* Inlined component-base mixin */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:host {
	display: block;
	flex-grow: 1;
	/* Enable container queries for responsive card layouts */
	container-type: inline-size;
	container-name: card;
}

.card {
	display: flex;
	inline-size: 100%;
	min-block-size: 100%;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	background: var(--g-color-background-default);
	border-style: solid;
	border-width: var(--g-border-width-sm);
	border-color: var(--g-color-border-default);
	border-radius: var(--g-border-radius-md);
	box-shadow: var(--g-box-shadow-md);
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease;
}

/* Image support - images in header or content will be styled appropriately */
.card__header img,
.card__content img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: inherit;
}

.card__header {
	padding-inline: var(--g-spacing-md);
	padding-block: var(--g-spacing-sm);
	border-block-end: 1px solid var(--g-color-border-default);
}

.card__header:not([data-has-content]) {
	display: none;
}

.card__header ::slotted(*) {
	margin: 0;
	font: var(--g-typography-h5-font);
}

.card__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--g-spacing-md);
	padding-block: var(--g-spacing-md);
	padding-inline: var(--g-spacing-md);
}

.card__content:has(::slotted(:empty)) {
	display: none;
}

.card__content > * {
	margin: 0;
}

.card__footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: var(--g-spacing-sm);
	padding-inline: var(--g-spacing-md);
	padding-block: var(--g-spacing-sm);
	border-block-start: 1px solid var(--g-color-border-default);
	background: var(--g-color-background-default);
}

.card__footer:not([data-has-content]) {
	display: none;
}

.card__footer ::slotted(grantcodes-button-group) {
	width: 100%;
	justify-content: flex-end;
}

.card__meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--g-spacing-md);
	margin: 0;
	padding-inline: var(--g-spacing-md);
	padding-block: 1em;
	font-size: var(--g-typography-font-size-xs);
	/* Use color-mix() for modern color manipulation */
	background-color: color-mix(
		in srgb,
		var(--g-color-background-default) 90%,
		var(--g-color-primary-500) 10%
	);
	color: var(--g-color-content-default);
}

.card__meta__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.3em;
}

.card__meta__item dt,
.card__meta__item dd {
	display: block;
	margin: 0;
	padding: 0;
}

.card__meta__item dt::after {
	content: ":";
}

:host(.is-clickable) .card {
	cursor: pointer;
}

:host(.is-clickable:hover) .card {
	transform: translateY(-2px);
	box-shadow: var(--g-box-shadow-lg);
	border-color: var(--g-color-border-default);
}

:host(.is-clickable:active) .card {
	transform: translateY(-1px);
	border-color: var(--g-color-border-primary);
}