/*
 * Scrum Inc. Luma Events - front-end styles.
 *
 * These values are copied from the corrected /events/ wireframe, which in turn
 * took them from scruminc-reference-v2.md. They duplicate the Tailwind classes
 * on the Bricks elements ON PURPOSE: WindPress builds its Tailwind file by
 * scanning saved content, so a class printed by PHP at render time, or a class
 * on a page that is still a draft, may not exist in that file yet. With both in
 * place the section is correct either way.
 */

/* ---- section chrome --------------------------------------------------- */
.luma-eyebrow {
	display: block;
	color: var(--primary, #b12945);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 14px;
	margin-bottom: 24px;
}

/* ---- filter chips ------------------------------------------------------
 * .ref-filter-btn carries the shared behaviour and the active state, which
 * are defined site-wide and shared with the Reference Library. .luma-chip
 * only supplies the sizing this page's design asks for, so the two pages
 * keep their own look while sharing one script.
 */
.luma-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin-top: 28px;
}

.luma-chip {
	font-size: 16px;
	font-weight: 500;
	padding: 11px 26px;
	line-height: 1.2;
}

/* ---- rows ------------------------------------------------------------- */
.luma-rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.luma-row {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	background: var(--light, #f4f4f4);
	border-radius: 8px;
	padding: 24px;
}

@media (min-width: 1024px) {
	.luma-row {
		flex-direction: row;
		gap: 40px;
		padding: 32px;
	}
}

.luma-row__date {
	width: 100%;
	flex: none;
}

@media (min-width: 1024px) {
	.luma-row__date {
		width: 250px;
	}
}

.luma-row__body {
	flex: 1;
	min-width: 0;
}

.luma-row__cta {
	width: 100%;
	flex: none;
	display: flex;
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.luma-row__cta {
		width: 190px;
		justify-content: flex-end;
	}
}

/* ---- the date column -------------------------------------------------- */
.luma-row__date-line {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.luma-row__day {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: rgba(23, 22, 22, 0.55);
}

.luma-row__meta {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	color: rgba(23, 22, 22, 0.55);
}

/* ---- the body column -------------------------------------------------- */
.luma-row__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.luma-row__title {
		font-size: 26px;
	}
}

.luma-row__excerpt {
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(23, 22, 22, 0.62);
	max-width: 62ch;
	width: 100%;
}

.luma-row__audience {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(23, 22, 22, 0.55);
	max-width: 62ch;
	width: 100%;
}

/* ---- pills ------------------------------------------------------------ */
.luma-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	width: -moz-fit-content;
	width: fit-content;
}

.luma-tag {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	border: 1px solid var(--primary, #b12945);
	padding: 6px 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dark, #171616);
	background: transparent;
	line-height: 1.2;
}

.luma-tag--person {
	background: var(--primary, #b12945);
	color: #fff;
	border-color: var(--primary, #b12945);
}

.luma-tag--invite {
	background: var(--dark, #171616);
	color: #fff;
	border-color: var(--dark, #171616);
}

/* ---- group headings --------------------------------------------------- */
.luma-grouphead {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(23, 22, 22, 0.55);
	margin: 40px 0 4px;
}

.luma-group:first-of-type .luma-grouphead {
	margin-top: 32px;
}

/* ---- empty state ------------------------------------------------------ */
.luma-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	background: var(--light, #f4f4f4);
	border-radius: 8px;
	padding: 32px;
	margin-top: 32px;
}

.luma-empty p {
	font-size: 17px;
	line-height: 1.65;
	color: rgba(23, 22, 22, 0.62);
	max-width: 52ch;
	margin: 0;
}