/**
 * ICpEP-Qatar single event — the featured-image cover card + metadata
 * row from template-parts/single-event.php, inserted between the shared
 * page-header hero (css/page.css) and the prose column it also styles.
 *
 * Enqueued only for is_singular( 'icpep_event' ), after css/page.css —
 * see inc/scripts.php.
 */

/* ==========================================================
   Cover image card
   ========================================================== */

.icpep-event-cover {
	max-width: 1000px;
	margin: 0 auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
	/* Same overlap-into-the-hero treatment as the News article's
	   .icpep-article-banner — reads as a continuation of the mesh band
	   above rather than a second, disconnected section. */
	margin-top: clamp( -2rem, -4vw, -1.5rem );
	position: relative;
	z-index: 1;
}

.icpep-event-cover__image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var( --icpep-card-border );
	box-shadow: var( --icpep-shadow-lg );
	background-color: var( --icpep-mist );
}

.icpep-event-cover__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.icpep-event-cover__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-xs );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background-color: rgba( 11, 19, 43, 0.72 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	padding: 0.4em 0.95em;
	border-radius: 999px;
}

/* Category tints — same palette as the hub grid's badge variants
   (css/events.css .icpep-event-hub-card__badge--*) so a visitor
   recognizes the category color from the grid card they clicked. */
.icpep-event-cover__badge--events-calendar {
	background-color: rgba( 138, 21, 56, 0.82 );
}

.icpep-event-cover__badge--webinar {
	background-color: rgba( 11, 19, 43, 0.78 );
}

.icpep-event-cover__badge--techtalks {
	background-color: rgba( 0, 163, 224, 0.85 );
}

/* ==========================================================
   Metadata row — date / venue / CPD chips
   ========================================================== */

.icpep-event-cover__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.icpep-event-cover__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 34px;
	padding: 0.45em 0.95em;
	border-radius: 999px;
	border: 1px solid var( --icpep-card-border );
	background-color: #ffffff;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-xs );
	color: var( --e-global-color-text, #1f2937 );
}

.icpep-event-cover__icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	color: var( --icpep-cyan-deep );
}

.icpep-event-cover__chip--cpd {
	color: var( --icpep-cyan-deep );
	background-color: var( --icpep-mist );
	border-color: transparent;
}

/* ==========================================================
   Mobile (375–430px)
   ========================================================== */

@media ( max-width: 640px ) {
	.icpep-event-cover {
		margin-top: -1rem;
	}

	.icpep-event-cover__image {
		border-radius: 12px;
		aspect-ratio: 4 / 3;
	}
}