/* Card list for the iwsa/events-list block.
 *
 * Follows the legacy event list's design — filled badge on a timeline spine,
 * rows separated by a rule rather than boxed, solid buttons — with colours
 * taken from docs/design/design-system.html rather than sampled off
 * a screenshot. The one deliberate departure is the logo, pinned bottom-right
 * instead of sitting inline beside the meta rows.
 *
 * Tokens are declared locally rather than assumed: this stylesheet is enqueued
 * for a block that can be placed on any page, including themes that never load
 * the design system. A theme that does define them wins, since these are the
 * same custom properties. */
.acai-events-list {
	--wfr-green-900: #04322C;
	--wfr-green-700: #075B4F;
	--wfr-green-500: #0A7968;
	--wfr-green-50: #DCEFEA;
	--wfr-ink: #141A18;
	--wfr-ink-muted: #5C6B66;
	--wfr-rule: #E2E8E5;
	--wfr-white: #FFFFFF;
	--wfr-radius: 6px;

	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

/* Boxed cards were mine. The legacy list separates rows with a rule and lets
   the spine carry the grouping instead. */
.acai-event-card {
	position: relative;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0 0 2rem;
	border-bottom: 1px dotted var(--wfr-rule);
}

.acai-event-card + .acai-event-card {
	padding-top: 2rem;
}

.acai-event-card:last-child {
	border-bottom: 0;
}

/* The spine: one continuous line down the badge column, behind the badges,
   which is what makes the list read as a chronology rather than a stack. It
   starts at the badge's own centre so none of it shows above the first. */
.acai-event-aside {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 84px;
}

.acai-event-aside::before {
	content: "";
	position: absolute;
	top: 42px;
	bottom: -2.5rem;
	left: 50%;
	width: 1px;
	margin-left: -.5px;
	background: var(--wfr-rule);
}

.acai-event-card:last-child .acai-event-aside::before {
	content: none;
}

/* Filled rather than outlined, and ringed in the page colour so the spine
   appears to pass behind it instead of through it. */
.acai-event-badge {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--wfr-green-700);
	color: var(--wfr-white);
	/* Matches whatever is behind the card, not white specifically. The ring is
	   there to make the spine look like it passes behind the badge; hardcoded
	   white, it reads as a halo the moment the block sits on a dark section.
	   Overridable via --wfr-badge-ring for a section that sets neither. */
	box-shadow: 0 0 0 6px var(--wfr-badge-ring, var(--wp--preset--color--background, var(--wfr-white)));
	line-height: 1.1;
}

.acai-event-badge-day {
	font-size: 1.5rem;
	font-weight: 700;
}

.acai-event-badge-month,
.acai-event-badge-year {
	font-size: .8rem;
	opacity: .9;
}

.acai-event-body {
	min-width: 0;
}

/* Only where there is a chip to clear. Reserved on every card, this was 7rem
   of nothing on the ones with no status. */
.acai-event-body.has-status {
	padding-right: 7rem;
}

.acai-event-title {
	display: block;
	color: var(--wfr-ink);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.2;
	text-decoration: none;
	margin: 0 0 .35rem;
}

.acai-event-title:hover,
.acai-event-title:focus {
	color: var(--wfr-green-700);
}

/* Themes put generous block margins on <p>, which these meta rows are, and
   those margins won — the lines sat about as far apart as they were tall.

   The reset has to be scoped, not blanket: `.acai-event-body p` is 0-1-1 and
   out-specifies a bare `.acai-event-line` at 0-1-0, so a blanket version wins
   against the very rules it exists to make room for and every row ends up at
   margin 0. The rows below are qualified by the body for the same reason. */
.acai-event-body > p:not([class]) {
	margin-block: 0;
}

.acai-event-body .acai-event-line {
	margin: .2rem 0;
	color: var(--wfr-ink-muted);
	font-size: .95rem;
	line-height: 1.4;
	display: flex;
	gap: .4rem;
	align-items: baseline;
}

.acai-ico {
	flex: 0 0 auto;
	opacity: .75;
	transform: translateY(2px);
}

/* Class, ranking points and prize money sit as a block below the location, as
   they do on the legacy list. */
.acai-event-body .acai-event-class {
	margin-top: 1.1rem;
}

.acai-event-body .acai-event-class,
.acai-event-body .acai-event-fact {
	margin-bottom: .2rem;
	color: var(--wfr-ink-muted);
	font-size: .95rem;
	line-height: 1.4;
}

/* Filled and near-square, top right, as on the legacy list. Anchored to the
   card rather than the body: the body does not reach the card's right edge once
   the logo is in the corner, and a chip pinned to the body sat marooned. */
.acai-event-status {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--wfr-green-700);
	color: var(--wfr-white);
	font-size: .9rem;
	line-height: 1;
	padding: .7rem 1rem;
	border-radius: 3px;
}

.acai-event-card + .acai-event-card .acai-event-status {
	top: 2rem;
}

.acai-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
}

/* Solid, not outlined. Register and Details are green; the microsite button is
   ink, which is how the legacy list marks the one that leaves the site. */
.acai-event-btn {
	background: var(--wfr-green-700);
	color: var(--wfr-white);
	font-size: .95rem;
	padding: .6rem 1.1rem;
	border-radius: var(--wfr-radius);
	text-decoration: none;
	border: 0;
	transition: background-color .15s ease;
}

.acai-event-btn:hover,
.acai-event-btn:focus {
	background: var(--wfr-green-900);
	color: var(--wfr-white);
}

/* Register is the primary action, so it carries the weight the legacy list
   gives it. The class was being emitted with nothing defining it. */
.acai-event-btn.is-primary {
	font-weight: 700;
}

.acai-event-btn.is-external {
	background: var(--wfr-ink);
}

.acai-event-btn.is-external:hover,
.acai-event-btn.is-external:focus {
	background: #000;
}

/* Pinned to the card's bottom-right — the one departure from the legacy
   layout, where the logo sits inline to the left of the meta rows.

   Fixed box with the image pinned into its corner, so every logo presents the
   same footprint and its ink lands on the same point whatever its aspect ratio.
   Depends on fetch-event-logos.sh having trimmed the transparent margins:
   without that, object-position anchors the canvas rather than the mark. */
.acai-event-logo-cell {
	position: absolute;
	right: 0;
	bottom: 2rem;
	display: flex;
	align-items: flex-end;
	pointer-events: none;
}

.acai-event-logo {
	display: block;
	width: 150px;
	height: 100px;
	object-fit: contain;
	object-position: right bottom;
}

/* The buttons are the only row reaching the bottom of the card, so they are the
   only thing that has to keep out from under the logo. */
.acai-event-card.has-logo .acai-event-actions {
	padding-right: 175px;
}

/* A card with no buttons has nothing at the bottom to displace, so reserve the
   height instead. */
.acai-event-card.has-logo .acai-event-body {
	min-height: 150px;
}

/* No badge means the body is the only grid item, so it lands in the fixed 84px
   track while the 1fr track takes the rest of the width. */
.acai-event-card.has-no-badge {
	grid-template-columns: minmax(0, 1fr);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* Narrow: the badge shrinks, the chip rejoins the flow so it stops overlapping
   the title, and the logo drops below the buttons rather than onto them. */
@media (max-width: 700px) {
	.acai-event-card {
		grid-template-columns: 60px minmax(0, 1fr);
		gap: .9rem;
	}

	.acai-event-aside,
	.acai-event-badge {
		width: 60px;
	}

	.acai-event-badge {
		height: 60px;
	}

	.acai-event-aside::before {
		top: 30px;
	}

	.acai-event-badge-day {
		font-size: 1.15rem;
	}

	.acai-event-badge-month,
	.acai-event-badge-year {
		font-size: .62rem;
	}

	.acai-event-title {
		font-size: 1.25rem;
	}

	.acai-event-body {
		padding-right: 0;
	}

	.acai-event-status {
		position: static;
		display: inline-block;
		margin-bottom: .5rem;
	}

	.acai-event-card + .acai-event-card .acai-event-status {
		top: auto;
	}

	.acai-event-logo-cell {
		position: static;
		margin-top: 1rem;
		justify-content: flex-start;
	}

	.acai-event-card.has-logo .acai-event-actions {
		padding-right: 0;
	}

	.acai-event-card.has-logo .acai-event-body {
		min-height: 0;
	}
}