/*
 * Norah homepage event feed (#termine), version 1.5.0.
 *
 * v6 system (norah-h3-ds.css tokens): surface-raised band, square white
 * event cards with a hairline and shadow-sm, versal type label with the
 * teal rhombus, facts as a label/value list with the marine booking
 * button below them. Desktop: image, facts and booking in the left third;
 * title, subtitle and description in the rest, the
 * description always open. From 72rem the section has three columns:
 * eyebrow, headline and lead in the first, the cards (image, facts and
 * booking; then the details) in the second and third. Between 64rem and
 * 72rem the headline sits above the two-column card. Below 64rem the card
 * stacks to one column so the long description never sits in a slim column.
 */

body.page-h3 .norah-home .norah-events {
	background: var(--surface-raised);
	color: var(--ink);
	border-block: 1px solid var(--border);
}

body.page-h3 .norah-home #brxe-norah-events-title {
	max-width: 22ch;
	margin: 0;
	color: var(--ink);
	font-size: 28px;
	line-height: 34px;
	font-weight: 500;
}

body.page-h3 .norah-home #brxe-norah-events-lead {
	max-width: 31em;
	margin: var(--space-3) 0 0;
	color: var(--ink);
	font-size: 15px;
	line-height: 22px;
}

body.page-h3 .norah-home .norah-events__list {
	display: grid;
	gap: var(--space-6);
	margin-top: var(--space-8);
}

body.page-h3 .norah-home .norah-event {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--space-12);
	align-items: start;
	padding: var(--space-6);
	border: 1px solid var(--border);
	border-radius: var(--radius-none);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}

body.page-h3 .norah-home .norah-event__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
}

body.page-h3 .norah-home .norah-event__media {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
}

body.page-h3 .norah-home .norah-event__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-none);
}

body.page-h3 .norah-home .norah-event__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	min-width: 0;
}

body.page-h3 .norah-home .norah-event__type {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--ink-muted);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.page-h3 .norah-home .norah-event__type::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	background: var(--signet-teal);
	opacity: 0.8;
	transform: rotate(45deg);
}

body.page-h3 .norah-home .norah-event__title {
	margin: 0;
	color: var(--ink);
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
}

body.page-h3 .norah-home .norah-event__subtitle {
	margin: 0;
	max-width: 31em;
	color: var(--ink-muted);
	font-size: 15px;
	line-height: 22px;
}

body.page-h3 .norah-home .norah-event__meta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
	gap: var(--space-6);
	width: 100%;
}

body.page-h3 .norah-home .norah-event__facts {
	display: grid;
	width: 100%;
	margin: 0;
	border-top: 1px solid var(--border);
}

body.page-h3 .norah-home .norah-event__fact {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--space-4);
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--border);
}

body.page-h3 .norah-home .norah-event__fact-label {
	color: var(--ink-muted);
	font-size: 12px;
	line-height: 22px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.page-h3 .norah-home .norah-event__fact-value {
	margin: 0;
	color: var(--ink);
	font-size: 15px;
	line-height: 22px;
}

body.page-h3 .norah-home .norah-event__description {
	max-width: 31em;
	margin-top: var(--space-3);
	color: var(--ink);
	font-size: 15px;
	line-height: 22px;
}

body.page-h3 .norah-home .norah-event__description p {
	margin: 0 0 var(--space-3);
}

body.page-h3 .norah-home .norah-event__description p:last-child {
	margin-bottom: 0;
}

body.page-h3 .norah-home .norah-event .norah-event__cta {
	margin: 0;
}

/* From 72rem: headline column beside the cards. Every card of the loop
 * stacks in the same right-hand area. */
@media (min-width: 72rem) {
	body.page-h3 .norah-home .norah-events__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: var(--space-12);
		align-items: start;
	}

	body.page-h3 .norah-home .norah-events__inner > :not(.norah-events__list) {
		grid-column: 1;
		min-width: 0;
	}

	body.page-h3 .norah-home .norah-events__list {
		grid-column: 2;
		grid-row: 1 / -1;
		margin-top: 0;
	}
}

/* Below 64rem one column, read in order: image, type, title, subtitle,
 * facts with booking, description. */
@media (max-width: 63.999rem) {
	body.page-h3 .norah-home .norah-event {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}

	body.page-h3 .norah-home :is(.norah-event__aside, .norah-event__body) {
		display: contents;
	}

	body.page-h3 .norah-home .norah-event__media {
		order: 1;
		max-width: 480px;
		margin-bottom: var(--space-3);
	}

	body.page-h3 .norah-home .norah-event__type { order: 2; }
	body.page-h3 .norah-home .norah-event__title { order: 3; }
	body.page-h3 .norah-home .norah-event__subtitle { order: 4; }

	body.page-h3 .norah-home .norah-event__meta {
		order: 5;
		margin-top: var(--space-3);
	}

	body.page-h3 .norah-home .norah-event__description {
		order: 6;
	}
}

@media (max-width: 39.999rem) {
	body.page-h3 .norah-home .norah-event {
		padding: var(--space-4);
	}

	body.page-h3 .norah-home .norah-event__fact {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	body.page-h3 .norah-home .norah-event .norah-event__cta {
		white-space: normal;
	}
}