/*
 * en2x Content Card – module styles.
 *
 * Functional baseline, oriented at the mockup. Final visual polish comes later
 * with the custom CSS layer and the final Figma specs. Structured with BEM
 * (.en2x-card__*) so it stays easy to extend.
 *
 * Button roundness: all en2x buttons use var(--en2x-button-radius, 999px) for a
 * full pill. A large radius always caps at half the height, so buttons are
 * fully round at any height (Salient's fixed --nectar-border-radius px value is
 * not enough on taller buttons).
 */

.en2x-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: 360px;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(37, 15, 81, 0.08);
	font-family: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Subtle hover: a small lift + slightly deeper shadow. :focus-within mirrors it
 * for keyboard users when a link/button inside the card gains focus. */
.en2x-card:hover,
.en2x-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(37, 15, 81, 0.14);
}

/* Blue bar: editorial hint or publish date. Uses the headline colour. Also a
 * link to the post (rendered as <a>), so reset link styling. */
.en2x-card__bar {
	display: block;
	padding: 8px 16px;
	background: var(--en2x-color-headline);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.en2x-card__bar:hover,
.en2x-card__bar:focus {
	color: #fff;
}

/* Image – uniform 7:4 box, cover-cropped so every card matches. Also a link
 * to the post (rendered as <a>). */
.en2x-card__image {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 7 / 4;
	overflow: hidden;
}

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

/* Placeholder for the empty (no thumbnail) state, fills the same 7:4 box. */
.en2x-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		#ececf2,
		#ececf2 10px,
		#e3e3ec 10px,
		#e3e3ec 20px
	);
}

/* Body – flex column so the button can sit flush at the bottom. */
.en2x-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 16px;
}

/* Tags as small pills. */
.en2x-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.en2x-card__tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

/* Format tags: neutral grey background, primary-coloured text. */
.en2x-card__tag--format {
	background: #e2e4e7;
	color: var(--en2x-color-primary);
}

/* Thema and Kategorie tags: highlighted in the primary colour, white text. */
.en2x-card__tag--thema,
.en2x-card__tag--kategorie {
	background: var(--en2x-color-primary);
	color: #fff;
}

/* Title – clamped to 2 lines so cards in a row stay equal height.
 * Uppercase via CSS only (stored title is untouched). Uses the project
 * standard headline colour token. */
.en2x-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--en2x-color-headline);
}

/* Teaser – clamped to 3 lines. */
.en2x-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: #50575e;
}

/* Button – pinned to the bottom of the card. Primary colour (action). */
.en2x-card__button {
	align-self: flex-start;
	margin-top: auto;
	padding: 8px 18px;
	background: var(--en2x-color-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--en2x-button-radius, 999px);
	transition: background 0.15s ease;
}

.en2x-card__button:hover,
.en2x-card__button:focus {
	background: #190b63; /* darker variant of var(--en2x-color-primary) */
	color: #fff;
}

/* Standalone shortcode notice (invalid / missing id). */
.en2x-card-notice {
	padding: 8px 12px;
	background: #f6f7f7;
	border-left: 4px solid #c3c4c7;
	color: #50575e;
	font-size: 14px;
}