/* ATX Wild Apricot — events & membership level cards.
   Inherits the theme's fonts/colors; only layout + accents are opinionated.
   Override --atx-wa-accent in Customizer > Additional CSS to match brand. */

.atx-wa {
	--atx-wa-accent: #06112a;      /* ATX brand navy; override as needed */
	--atx-wa-accent-2: #14315f;    /* lighter navy for hover/contrast */
	--atx-wa-radius: 12px;
	--atx-wa-border: rgba(0, 0, 0, 0.08);
	--atx-wa-muted: #6b7280;
	margin: 0 0 1.5rem;
}

.atx-wa__heading {
	margin: 0 0 1.25rem;
}

/* Responsive grid — auto-fits and stacks cleanly on mobile. */
.atx-wa__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.atx-wa__grid--cols-1 { grid-template-columns: 1fr; }
.atx-wa__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.atx-wa__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.atx-wa__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.atx-wa__grid--cols-3,
	.atx-wa__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.atx-wa__grid,
	.atx-wa__grid--cols-2,
	.atx-wa__grid--cols-3,
	.atx-wa__grid--cols-4 { grid-template-columns: 1fr; }
}

/* Card */
.atx-wa__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--atx-wa-border);
	border-radius: var(--atx-wa-radius);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.atx-wa__card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.atx-wa__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	flex: 1;
}

.atx-wa__title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.3;
}

.atx-wa__meta {
	margin: 0;
	color: var(--atx-wa-muted);
	font-size: 0.95rem;
}

.atx-wa__meta--location::before {
	content: "\1F4CD"; /* 📍 */
	margin-right: 0.35rem;
}

/* Event date badge */
.atx-wa__card--event .atx-wa__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 0;
	background: var(--atx-wa-accent);
	color: #fff;
	line-height: 1;
}

.atx-wa__date-day { font-size: 1.9rem; font-weight: 700; }
.atx-wa__date-month { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Membership price */
.atx-wa__price {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--atx-wa-accent);
}

.atx-wa__desc {
	color: var(--atx-wa-muted);
	font-size: 0.95rem;
}

.atx-wa__desc p { margin: 0 0 0.5rem; }

/* Button */
.atx-wa__btn {
	display: inline-block;
	margin-top: auto;
	align-self: flex-start;
	padding: 0.6rem 1.2rem;
	border-radius: 999px;
	background: var(--atx-wa-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.atx-wa__btn:hover,
.atx-wa__btn:focus {
	background: var(--atx-wa-accent-2);
	color: #fff;
}

/* Empty / error states */
.atx-wa--empty {
	padding: 1.5rem;
	border: 1px dashed var(--atx-wa-border);
	border-radius: var(--atx-wa-radius);
	text-align: center;
	color: var(--atx-wa-muted);
}

.atx-wa__admin-note {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: #b91c1c;
}

/* ---------------------------------------------------------------------------
   List view (atx-wa--list) — compact horizontal rows instead of a card grid.
   Reuses the same card markup; only layout changes.
--------------------------------------------------------------------------- */
.atx-wa--list .atx-wa__grid {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.atx-wa--list .atx-wa__card {
	flex-direction: row;
	align-items: stretch;
}

.atx-wa--list .atx-wa__card:hover {
	transform: none; /* rows shouldn't lift like cards */
}

.atx-wa--list .atx-wa__body {
	flex: 1;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 1.25rem;
	padding: 0.85rem 1.15rem;
}

.atx-wa--list .atx-wa__title {
	margin: 0;
	font-size: 1.1rem;
}

.atx-wa--list .atx-wa__meta {
	margin: 0;
}

.atx-wa--list .atx-wa__btn {
	margin: 0;
	margin-left: auto;
	align-self: center;
}

/* Events list: keep the navy date badge as a fixed left column. */
.atx-wa--list .atx-wa__card--event .atx-wa__date {
	flex: 0 0 78px;
	padding: 0;
}
.atx-wa--list .atx-wa__card--event .atx-wa__title {
	flex: 1 1 220px;
}

/* Memberships list: name + price on the row, description clamped below. */
.atx-wa--list .atx-wa__card--level .atx-wa__title { order: 1; flex: 0 1 auto; }
.atx-wa--list .atx-wa__card--level .atx-wa__price { order: 2; margin: 0; font-size: 1.25rem; }
.atx-wa--list .atx-wa__card--level .atx-wa__btn   { order: 3; }
.atx-wa--list .atx-wa__card--level .atx-wa__desc  {
	order: 4;
	flex: 1 1 100%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Stack list rows vertically on phones. */
@media (max-width: 640px) {
	.atx-wa--list .atx-wa__card {
		flex-direction: column;
	}
	.atx-wa--list .atx-wa__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}
	/* The row-layout flex bases become heights in a column — reset them so the
	   title/description don't blow up to a fixed height. */
	.atx-wa--list .atx-wa__card--event .atx-wa__title,
	.atx-wa--list .atx-wa__card--level .atx-wa__desc {
		flex: 0 0 auto;
	}
	/* Event date becomes a full-width strip with day + month inline. */
	.atx-wa--list .atx-wa__card--event .atx-wa__date {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 0.4rem;
		align-items: baseline;
		padding: 0.55rem 1.1rem;
	}
	/* Natural stacking order for membership rows (name, price, desc, button). */
	.atx-wa--list .atx-wa__card--level .atx-wa__title,
	.atx-wa--list .atx-wa__card--level .atx-wa__price,
	.atx-wa--list .atx-wa__card--level .atx-wa__desc,
	.atx-wa--list .atx-wa__card--level .atx-wa__btn {
		order: 0;
	}
	.atx-wa--list .atx-wa__btn {
		margin: 0.25rem 0 0;
		align-self: flex-start;
	}
}

/* ---------------------------------------------------------------------------
   Past events section (rendered below upcoming).
--------------------------------------------------------------------------- */
.atx-wa__subheading {
	margin: 2.25rem 0 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--atx-wa-border);
	font-size: 1.15rem;
	color: var(--atx-wa-muted);
}

.atx-wa__note {
	margin: 0 0 1rem;
	color: var(--atx-wa-muted);
}

.atx-wa__card--past {
	opacity: 0.9;
}

/* Muted slate date badge instead of brand navy, and an outline button. */
.atx-wa__card--past .atx-wa__date {
	background: #64748b;
}

.atx-wa__card--past .atx-wa__title {
	color: var(--atx-wa-muted);
}

.atx-wa__card--past .atx-wa__btn {
	background: transparent;
	color: var(--atx-wa-accent);
	border: 1px solid var(--atx-wa-border);
}

.atx-wa__card--past .atx-wa__btn:hover,
.atx-wa__card--past .atx-wa__btn:focus {
	background: var(--atx-wa-accent);
	color: #fff;
}