/* aieo/competition-status — an apple-glass status badge overlaid on the card
   image (top-right), plus the relevant date shown under the title.
   The badge is absolutely positioned, so the date is the only in-flow content
   in this block — it lands at the start of the line under the title. */

/* Positioning context so the badge can overlay the featured image's top-right
   (or the title's, when the card has no image). Harmless on image-less /
   non-competition cards — there's no absolute child to anchor. */
.roosterx-blog-archive__card { position: relative; }

.aieo-comp-status {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 6px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
}

/* Apple-glass status badge — frosted, translucent pill pinned to the card's
   top-right, tinted by state (green = active, red = ended, amber = coming).
   The base hue is a CSS variable so it can be themed or set from the admin:
   --aieo-comp-badge-live / --aieo-comp-badge-ended / --aieo-comp-badge-before.
   The `color-mix` adds the glass transparency to whatever base colour is set;
   the plain rgba line above it is the fallback for browsers without color-mix. */
.aieo-comp-status__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-block;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.7rem;
	line-height: 1.3;
	white-space: nowrap;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: blur(8px) saturate(160%);
	backdrop-filter: blur(8px) saturate(160%);
	background: rgba(245, 158, 11, 0.55);
	background: color-mix(in srgb, var(--aieo-comp-badge-before, #f59e0b) 55%, transparent);
}
.aieo-comp-status--live .aieo-comp-status__badge {
	background: rgba(34, 197, 94, 0.55);
	background: color-mix(in srgb, var(--aieo-comp-badge-live, #22c55e) 55%, transparent);
}
.aieo-comp-status--ended .aieo-comp-status__badge {
	background: rgba(239, 68, 68, 0.55);
	background: color-mix(in srgb, var(--aieo-comp-badge-ended, #ef4444) 55%, transparent);
}
.aieo-comp-status--before .aieo-comp-status__badge {
	background: rgba(245, 158, 11, 0.55);
	background: color-mix(in srgb, var(--aieo-comp-badge-before, #f59e0b) 55%, transparent);
}

/* Status date — first (and only in-flow) item, under the title. */
.aieo-comp-status__date { color: #6b7280; }