/*
 * Event Catalog -- Figma 5700:53361.
 *
 * Ported booking-engine UI, so ui-muted, ui-foreground, danger and danger-soft
 * are the correct palette entries here. The scrim over each card photo is
 * Figma's black-to-transparent gradient, derived from ink with color-mix.
 */

.afters-event-catalog__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--32);
}

.afters-event-catalog__headline {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--normal);
	line-height: 1.3518;
}

.afters-event-catalog__controls {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
}

.afters-event-catalog__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.afters-event-catalog__tab-link {
	display: block;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--ui-muted);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.75;
	text-decoration: none;
	transition: background-color 120ms ease-out, color 120ms ease-out;
}

.afters-event-catalog__tab-link:hover,
.afters-event-catalog__tab-link:focus {
	background-color: var(--wp--preset--color--haze);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* The selected pill. aria-current is the state -- the view script toggles that
   one attribute and the paint follows, so there is no class to keep in sync. */
.afters-event-catalog__tab-link[aria-current="true"] {
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

.afters-event-catalog__inventory {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1-5);
	margin: 0;
	padding: var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--5) var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--1-5);
	border: 1px solid var(--wp--preset--color--ui-border);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--main);
	color: var(--wp--preset--color--ink);
	/* Drives the dot size: .afters-icon is 1em wide. */
	font-size: var(--wp--preset--font-size--title-lg);
}

.afters-event-catalog__inventory > span {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	line-height: 1.4285;
}

.afters-event-catalog__dot {
	color: var(--wp--preset--color--green);
}

/* ---- cards ---- */

/* Four equal columns, which is what the 1512px artboard draws: 4 x 324 + 3 x 16
   is the 1344px shell exactly.

   This was flex-wrap with flex: 1 1 22%, and a fifth pass broke it -- four
   filled row one, the fifth sat alone on row two and flex-grow stretched it to
   the full 1344px, which aspect-ratio then made 1637px tall. Nine passes only
   "looked fixed" because the last row happened to be full. A grid track cannot
   do that: the fifth card gets one column whatever the count is, so every tile
   is the same size at every length of catalog. */
.afters-event-catalog__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.afters-event-catalog__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	aspect-ratio: 324 / 395;
	border-radius: var(--wp--custom--radius--2-xl);
	background-color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--main);
}

/* Filtered-out passes stay in the DOM -- for the no-JS query-var path, for
   crawlers, and so the view script can restore them without a fetch. The
   attribute has to beat display:flex above. */
.afters-event-catalog__card[hidden] {
	display: none;
}

.afters-event-catalog__card-img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.afters-event-catalog__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--6);
	background-image: linear-gradient(
		to top,
		var(--wp--preset--color--ink) 0%,
		color-mix(in srgb, var(--wp--preset--color--ink) 0%, transparent) 100%
	);
	color: var(--wp--preset--color--white);
}

.afters-event-catalog__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.afters-event-catalog__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	line-height: 1.5;
}

.afters-event-catalog__badge--urgent {
	padding-inline-start: var(--wp--preset--spacing--1-5);
	background-color: var(--wp--preset--color--danger-soft);
	color: var(--wp--preset--color--danger);
	/* Drives the timer size: .afters-icon is 1em wide. */
	font-size: var(--wp--preset--font-size--body-sm);
}

.afters-event-catalog__detail {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.afters-event-catalog__title {
	margin: 0;
	color: var(--wp--preset--color--lime);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--normal);
	line-height: 1.5555;
}

.afters-event-catalog__copy {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
	line-height: 1.5;
}

.afters-event-catalog__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--3);
}

.afters-event-catalog__price {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
}

.afters-event-catalog__price-value {
	color: var(--wp--preset--color--lime);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1.5555;
}

.afters-event-catalog__foot .afters-btn--lime {
	color: var(--wp--preset--color--ui-foreground);
}

/* The design is fixed at 430px and 1512px, so these are the column steps in
   between -- not a redesign. 430px is one column, as drawn. */
@media (max-width: 71.25rem) {
	.afters-event-catalog__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 56rem) {
	.afters-event-catalog__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 34rem) {
	.afters-event-catalog__list {
		grid-template-columns: minmax(0, 1fr);
	}
}