/* Events — page-specific styles, enqueued only on
   page-templates/events.php (see ca_events_enqueue_assets() in
   functions.php). Ported from the Claude Design project's
   "All Events.dc.html" — that file's own <header>/<footer>/font-loading
   markup is intentionally not reproduced, this template uses the theme's
   shared get_header()/get_footer() + main.css instead (same convention as
   about-us.css / teams-tokens-offer.css). Relies on the --ca-teams-purple /
   --radius-* / --shadow-* tokens already declared in main.css. */

.ca-events * {
	box-sizing: border-box;
}

.ca-events a {
	text-decoration: none;
}

.ca-events-sec {
	display: flex;
	justify-content: center;
	padding: 88px 24px 96px;
	background: #252944;
	min-height: 100vh; /* dark background fills the viewport even when there are few/no events, instead of stopping short and showing the footer's white background right underneath */
}

.ca-events-wrap {
	width: 100%;
	max-width: 1080px;
}

/* Page H1 (SEO), styled as the small eyebrow it was designed as (was an h5).
   Matches the global h5 rule in main.css, which overrides with !important. */
.ca-events-heading {
	text-align: center;
	text-transform: uppercase;
	font-size: clamp(0.875rem, calc(0.6rem + 1vw), 1.125rem) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.2em;
	color: #fff;
	margin: 0 0 44px;
}

/* ---- Filter bar ---- */

.ca-events-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 36px;
}

.ca-events-filter-groups {
	display: flex;
	flex-direction: row;
	gap: 60px;
	flex-wrap: wrap;
}

.ca-events-filter-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ca-events-filter-label {
	font-size: 14px;
	color: #9b98b3;
	font-weight: 600;
}

.ca-events-pill-row {
	display: flex;
	gap: 12px;
}

/* .ca-events .ca-events-pill (double class, rather than the plain
   .ca-events-pill this started as) is needed to outrank Salient's
   theme-options-generated body[data-button-style="slightly_rounded"]
   button rule in salient-dynamic-styles.css — that selector has higher
   specificity than a single class, so it kept winning the border-radius
   even with !important on both sides (see main.css's .ca-home-seg rules
   for the same fight, fought there with !important alone because that
   element isn't a <button>). */
.ca-events .ca-events-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border-radius: var(--radius-pill, 999px) !important;
	font-weight: 600;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.18s;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	background: transparent;
	color: #fff;
}

.ca-events .ca-events-pill:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.ca-events .ca-events-pill.is-active {
	border-color: #ee486d;
	background: #ee486d;
}

.ca-events .ca-events-pill.is-active:hover {
	border-color: #cf2f53;
	background: #cf2f53;
}

.ca-events-type {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

.ca-events .ca-events-type-trigger {
	min-width: 200px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	color: #17182a;
	border: none;
	border-radius: var(--radius-pill, 999px) !important;
	padding: 12px 16px;
	font-weight: 600;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.15));
	transition: background 0.15s, color 0.15s;
}

.ca-events .ca-events-type-trigger:hover {
	background: #f4f2f7;
	color: #8e76c0;
}

.ca-events .ca-events-type.is-open .ca-events-type-trigger {
	border-radius: 10px 10px 0 0 !important;
	box-shadow: none;
}

.ca-events-type-menu {
	display: none;
	position: absolute;
	top: 74px;
	left: 0;
	right: 0;
	background: #ececec;
	border-radius: 0 0 10px 10px;
	box-shadow: var(--shadow-lg, 0 14px 34px rgba(0, 0, 0, 0.26));
	overflow: hidden;
	z-index: 20;
	padding: 4px 0 6px;
}

.ca-events-type.is-open .ca-events-type-menu {
	display: block;
}

.ca-events-type-option {
	display: block;
	width: 100%;
	text-align: right;
	padding: 12px 22px;
	border: none;
	background: transparent;
	color: #17182a;
	font-weight: 600;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.ca-events-type-option:hover,
.ca-events-type-option.is-active {
	background: #ddd9ea;
	color: #8e76c0;
}

/* ---- Rows ---- */

.ca-events-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ca-events-row {
	background: #fff;
	border-radius: 14px;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	gap: 28px;
	/* backwards, not both/forwards: holding the "to" keyframe state after
	   the intro animation finishes would pin transform indefinitely, which
	   beats (and permanently blocks) the :hover transform below — CSS
	   animation output always wins the cascade over a plain declaration on
	   the same property. backwards still shows the "from" state during
	   each row's staggered animation-delay (no flash of unstyled content),
	   it just stops holding transform once the animation completes. */
	animation: ca-events-row-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
	cursor: pointer; /* whole card is clickable (events.js) — inherits to every text child */
	transition: box-shadow 0.18s, transform 0.18s;
}

.ca-events-row:hover,
.ca-events-row:focus-visible {
	box-shadow: var(--shadow-md, 0 8px 24px rgba(23, 24, 42, 0.08));
	transform: translateY(-3px);
}

.ca-events-row:focus-visible {
	outline: 2px solid #ee486d;
	outline-offset: 2px;
}

@keyframes ca-events-row-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* Stagger each row's entrance so they visibly cascade in rather than all
   fading in at once (which reads as "no animation" on a fast page load) —
   matches the nth-of-type delays in the source design's All Events.dc.html. */
.ca-events-row:nth-of-type(2)  { animation-delay: 0.09s; }
.ca-events-row:nth-of-type(3)  { animation-delay: 0.18s; }
.ca-events-row:nth-of-type(4)  { animation-delay: 0.27s; }
.ca-events-row:nth-of-type(5)  { animation-delay: 0.36s; }
.ca-events-row:nth-of-type(6)  { animation-delay: 0.45s; }
.ca-events-row:nth-of-type(7)  { animation-delay: 0.54s; }
.ca-events-row:nth-of-type(8)  { animation-delay: 0.63s; }
.ca-events-row:nth-of-type(9)  { animation-delay: 0.72s; }
.ca-events-row:nth-of-type(10) { animation-delay: 0.81s; }

@media (prefers-reduced-motion: reduce) {
	.ca-events-row {
		animation: none;
	}
}

.ca-events-row.is-hidden {
	display: none;
}

.ca-events-row__date {
	width: 96px;
	height: 96px;
	flex: none;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.ca-events-row__day {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.ca-events-row__month {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin-top: 4px;
}

.ca-events-row__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ca-events-row__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.ca-events-row__badge {
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: var(--radius-pill, 999px);
}

.ca-events-row__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #807e91;
	font-size: 14px;
	font-weight: 600;
}

.ca-events-row__meta-item a {
	color: inherit;
}

.ca-events-row__meta-item a:hover {
	color: #ee486d;
}

.ca-events-row__meta-item--locked {
	color: #17182a;
}

.ca-events-row__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 10px;
}

.ca-events-row__title {
	margin: 0;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #17182a;
	line-height: 1.25;
}

.ca-events-row__desc {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: #5f5d70;
	text-wrap: pretty;
}

.ca-events-row__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #ee486d;
	color: #fff;
	font-weight: 500;
	font-size: 14px;
	padding: 12px 20px;
	/* Teams-platform-gated rows render this as a <button> (opens a popup)
	   instead of an <a> (links out) — reset native button chrome so it's
	   visually identical either way. */
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/* Same double-class + !important fight as .ca-events .ca-events-pill and
   .ca-events .ca-events-btn below — a single-class border-radius here loses
   inconsistently (varies by <a> vs <button>, hover state, etc.) to Salient's
   own body[data-button-style="slightly_rounded"] button rule, which is
   exactly why "More info" and "Teams access" were rendering with different
   corner roundness even though this rule set the same value for both.
   Site-wide button convention: this is an inline/list-row CTA, which uses
   the 11px radius (same family as .ca-cert-date-card__cta and
   .ca-popup-cta); standalone/section CTAs like .ca-events-btn below use the
   full pill instead. */
.ca-events .ca-events-row__cta {
	border-radius: var(--radius-md, 11px) !important;
}

.ca-events-row__cta:hover {
	filter: brightness(.88);
}

/* Icons inside CTA buttons and meta-info items (arrow, lock, clock,
   location, ticket) sit a pixel or two off the text's vertical center by
   default — Font Awesome's glyphs aren't centered within their own em box.
   Forcing them into their own centered flex box neutralizes that, on top
   of the parent's align-items:center which only centers the icon's outer
   box, not the glyph within it. */
.ca-events-row__cta i,
.ca-events-row__meta-item i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ca-events-empty {
	text-align: center;
	color: #9b98b3;
	font-weight: 600;
	padding: 48px;
}

.ca-events-empty.is-hidden {
	display: none;
}

/* ---- View all / clear filters ---- */

.ca-events-view-all {
	display: flex;
	justify-content: center;
	margin-top: 44px;
}

.ca-events-view-all.is-hidden {
	display: none;
}

/* Standalone CTA (not part of an events row/list), so it uses the pill
   radius per the site-wide big-CTA convention, unlike .ca-events-row__cta
   above. !important for the same Salient body[data-button-style] specificity
   fight noted there. */
.ca-events .ca-events-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	font-family: inherit;
	padding: 14px 28px;
	border-radius: var(--radius-pill, 999px) !important;
	background-color: var(--ca-coral-pink, var(--ca-pink-600, #ee486d));
	border: none;
	cursor: pointer;
	text-decoration: none;
}

.ca-events .ca-events-btn:hover {
	filter: brightness(.88);
	color: #fff;
}

@media (max-width: 900px) {
	.ca-events-filter-groups {
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
		width: 100%;
	}
	.ca-events-filters {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}
	.ca-events-type {
		width: 100%;
	}
	.ca-events-type-trigger {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 720px) {
	.ca-events-sec {
		padding: 56px 18px 72px;
	}
	.ca-events-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 20px;
	}
	.ca-events-row__date {
		width: 100%;
		height: auto;
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
		padding: 10px 16px;
		align-items: baseline;
	}
	.ca-events-row__body {
		width: 100%;
	}
	.ca-events-row__cta {
		width: 100%;
		justify-content: center;
	}
}