/**
 * Component — Card
 *
 * Expected HTML:
 *   <div class="ec-card">
 *     <div class="ec-card__media"><img src="..." alt=""></div>
 *     <div class="ec-card__body">
 *       <h3 class="ec-card__title">Title</h3>
 *       <p class="ec-card__description">...</p>
 *       <div class="ec-card__footer">
 *         <span class="ec-badge ec-badge--info">Live</span>
 *         <button class="ec-button ec-button--primary ec-button--sm" data-material="water">Enter</button>
 *       </div>
 *     </div>
 *   </div>
 *
 * Generic surface + elevation + radius + optional media slot only —
 * content-specific cards (competition, winner) are Patterns tier, not
 * built here. Composes Badge/Button/Avatar as ordinary slotted
 * content; this file styles none of them.
 *
 * Deliberately stays material-agnostic (no data-material, no
 * --ec-material-* reference) — Card is generic chrome that hosts
 * material-coloured content, not a material surface itself. Its
 * "layered surface" quality (second material enrichment pass,
 * post-Competition-Page review) comes from a subtle surface-to-
 * surface-elevated gradient plus --ec-elevation-1's own inset
 * highlight (elevation.css) — both neutral, both already-existing
 * tokens, nothing new introduced here.
 *
 * Fourth pass: a flat gradient still reads as flat. ::before adds a
 * soft, static light-catching highlight in the upper-left, the same
 * "ambient light source" cue used elsewhere in this pass, via
 * mix-blend-mode rather than a second background layer so it reads as
 * a reflection, not a paint. It sits behind real DOM children in
 * paint order, so on cards with an opaque .ec-card__media it's mostly
 * hidden — visible on cards without a media slot (e.g. the Prize
 * Detail Card), a known, accepted limitation rather than an oversight.
 */

.ec-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--ec-color-surface);
	background-image: linear-gradient(180deg, var(--ec-color-surface), var(--ec-color-surface-elevated));
	border-radius: var(--ec-radius-lg);
	box-shadow: var(--ec-elevation-1);
	transition:
		box-shadow var(--ec-duration-base) var(--ec-ease-standard),
		transform var(--ec-duration-base) var(--ec-ease-standard);
}

.ec-card::before {
	content: '';
	position: absolute;
	top: -20%;
	left: -10%;
	width: 55%;
	height: 55%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

.ec-card--interactive {
	cursor: pointer;
}

.ec-card--interactive:hover {
	box-shadow: var(--ec-elevation-2);
	transform: translateY(-2px);
}

.ec-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--ec-color-surface-elevated);
}

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

.ec-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-3);
	padding: var(--ec-space-5);
}

.ec-card__title {
	font-family: var(--ec-font-family-base);
	font-weight: var(--ec-font-weight-semibold);
	font-size: var(--ec-font-size-h4);
	color: var(--ec-color-text-primary);
	margin: 0;
}

.ec-card__description {
	font-size: var(--ec-font-size-body-sm);
	line-height: var(--ec-line-height-base);
	color: var(--ec-color-text-secondary);
	margin: 0;
}

.ec-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-3);
	margin-top: var(--ec-space-2);
}