/**
 * Agenda styling.
 *
 * Deliberately built for the no-picture case first. Most items arrive from the
 * feed with no image and no copy, so the typographic card is the design rather
 * than a fallback — a page of identical placeholder tiles reads worse than a
 * page with no images at all.
 *
 * Colours and type are taken from the theme's compiled app.css rather than
 * invented: #212d40 navy, #03c1ac brand teal, #0b6b5c the AA-contrast teal used
 * for text, #d14324 the AA coral, Montserrat throughout.
 *
 * Corners are square (Laurens, 2026-08-22). Buttons are the exception: they use
 * the theme's own `.button` class and keep its radius, so they stay identical to
 * every other button on the site.
 */

.ws42-agenda {
	--ws42-navy: #212d40;
	--ws42-teal: #03c1ac;
	--ws42-teal-ink: #0b6b5c;
	--ws42-coral: #d14324;
	--ws42-paper: #fefefe;
	--ws42-mist: #f2f2f4;
	--ws42-rule: rgba( 33, 45, 64, 0.12 );
}

.ws42-agenda__intro {
	max-width: 44rem;
	margin-bottom: 2.5rem;
}

.ws42-agenda__section-title {
	margin: 3rem 0 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var( --ws42-rule );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ws42-teal-ink );
}

.ws42-agenda__month {
	margin: 2rem 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba( 33, 45, 64, 0.55 );
}

/* The card. Three columns: date, body, action. The action sits in its own
   column rather than under the text — dropped into the flow it reads as a heavy
   block interrupting an otherwise typographic list, and it gets worse the moment
   two events are upcoming at once. */
.ws42-agenda__item {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto;
	gap: 1.25rem;
	align-items: center;
	padding: 1.5rem 0;
	border-bottom: 1px solid var( --ws42-rule );
}

.ws42-agenda__item:last-child {
	border-bottom: 0;
}

/* The date is the thing people scan for, so it gets the visual weight rather
   than a picture. */
.ws42-agenda__date {
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 0.3rem;
	background: var( --ws42-mist );
	color: var( --ws42-navy );
	line-height: 1.1;
	text-align: center;
}

.ws42-agenda__item--next .ws42-agenda__date {
	background: var( --ws42-navy );
	color: var( --ws42-paper );
}

.ws42-agenda__date-day {
	font-size: 1.65rem;
	font-weight: 700;
}

.ws42-agenda__date-month {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ws42-agenda__date-year {
	font-size: 0.65rem;
	opacity: 0.7;
}

.ws42-agenda__title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	line-height: 1.35;
}

.ws42-agenda .ws42-agenda__title a {
	color: var( --ws42-navy );
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease;
}

.ws42-agenda .ws42-agenda__title a:hover,
.ws42-agenda .ws42-agenda__title a:focus-visible {
	border-bottom-color: var( --ws42-teal );
}

.ws42-agenda__meta {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba( 33, 45, 64, 0.72 );
}

.ws42-agenda__meta span + span::before {
	content: "·";
	margin: 0 0.5rem;
	opacity: 0.5;
}

.ws42-agenda__actions {
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

/* Buttons use the theme's own `.button` class rather than anything invented
   here, so they inherit the site's shape, weight and the blue that its
   ::before pseudo-element paints — including the hover transition. The only
   thing this overrides is the 30px bottom margin `.button` carries, which is
   right for a page and wrong inside a tight list row. */
.ws42-agenda .ws42-agenda__actions .button {
	margin-bottom: 0;
	padding: 1em 1.75em;
}

.ws42-agenda__flag {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	background: rgba( 209, 67, 36, 0.1 );
	color: var( --ws42-coral );
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ws42-agenda__item--cancelled .ws42-agenda__title a {
	color: rgba( 33, 45, 64, 0.6 );
}

.ws42-agenda__empty {
	padding: 2rem;
	border: 1px dashed var( --ws42-rule );
	background: var( --ws42-mist );
	color: rgba( 33, 45, 64, 0.75 );
}

.ws42-agenda__more {
	margin: 2.5rem 0 0;
}

/* Item page ------------------------------------------------------------- */

/* The hero is the theme's `.cover.guide`; only the event-specific bits below
   are ours. A guide's stack is date/author/reviewer, an event's is when/where,
   so the spacing wants to be a touch tighter. */
.ws42-agenda-hero .date {
	margin-bottom: 0.15rem;
}

.ws42-agenda-hero .date + .date {
	margin-bottom: 1rem;
}

.ws42-agenda-hero__notice {
	margin: 0.75rem 0 1rem;
	padding: 0.75rem 1rem;
	background: rgba( 209, 67, 36, 0.1 );
	border-left: 3px solid var( --ws42-coral );
	font-size: 0.9rem;
	color: var( --ws42-navy );
}

.ws42-agenda-single__aside {
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba( 33, 45, 64, 0.72 );
}

.ws42-agenda-single__body {
	max-width: 42rem;
}

.ws42-agenda-single__back {
	display: inline-block;
	margin-top: 2.5rem;
	color: var( --ws42-teal-ink );
	font-size: 0.85rem;
	font-weight: 700;
}

@media screen and ( max-width: 39.9375em ) {

	/* No room for a third column on a phone: the action drops under the body,
	   spanning the text column so it lines up with the title rather than the
	   date badge. */
	.ws42-agenda__item {
		grid-template-columns: 4rem 1fr;
		gap: 0.5rem 1rem;
		align-items: start;
	}

	.ws42-agenda__actions {
		grid-column: 2;
		margin-top: 0.25rem;
		text-align: left;
	}

	.ws42-agenda__date-day {
		font-size: 1.35rem;
	}

	/* Inline labels force the value to wrap underneath them at this width,
	   which reads as a broken indent. Stack them instead. */
	.ws42-agenda-single__fact strong {
		display: block;
		min-width: 0;
		margin-bottom: 0.15rem;
	}

	.ws42-agenda-single__fact {
		margin-bottom: 0.75rem;
	}
}