/* =======================================================================
 * ax-collection — REUSABLE filter / search / card-grid component
 * -----------------------------------------------------------------------
 * One shared stylesheet for every page of this type (Learning Corner, News,
 * Events, …). Pages differ by DATA (post type / taxonomy via the shortcode)
 * and by COLOUR (the three CSS variables below), never by duplicated CSS.
 *
 * Per-page theming — override on the root element (the shortcode sets these
 * from its accent / active / band attributes, or add a modifier class):
 *     --ax-purple : brand / headings / buttons / active filter
 *     --ax-green  : active topic pill + "Read" button
 *     --ax-grey   : hero band background
 *     --card-radius : corner radius of the cards
 *
 * First built for: Figma 985:8736 (desktop), 985:1524 (mobile),
 * 2273:53/57/58 (filter + search).
 * ==================================================================== */

#top .ax-collection {
	--ax-purple: #444192;
	--ax-green: #00bd87;
	--ax-grey: #f5f5f5;
	--card-radius: 25px;
	color: #111;
	font-family: "Montserrat",sans-serif;
}

#top .ax-collection * {
	box-sizing: border-box;
}

/* ---- hero (grey band) ---- */

#top .ax-collection__hero {
	background: var(--ax-grey);
	padding: 56px 0 40px;
}

#top .ax-collection__eyebrow {
	display: block;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1.95px;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 18px;
}

#top .ax-collection__hero-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
}

#top .ax-collection__hero-copy {
	max-width: 520px;
}

#top .ax-collection__title {
	margin: 0 0 18px;
	font-size: 45px;
	line-height: 1.11;
	font-weight: 700;
	color: var(--ax-purple);
}

#top .ax-collection__intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.74;
	color: #000;
	max-width: 494px;
}

#top .ax-collection__badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--ax-purple);
}

#top .ax-collection__badge b {
	font-size: 30px;
	line-height: 1;
}

#top .ax-collection__badge span {
	font-size: 15px;
	letter-spacing: 3px;
	color: #111;
	font-weight: 500;
}

/* ---- controls ---- */

#top .ax-collection__controls {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 40px;
	flex-wrap: wrap;
}

#top .ax-collection__filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 47px;
	padding: 0 22px;
	border: 1px solid #000 !important;
	border-radius: 77px;
	background: #fff;
	color: var(--ax-purple);
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: .18s;
}

#top .ax-collection__filter-btn svg {
	width: 18px;
	height: 18px;
}

#top .ax-collection__filter-btn.is-active {
	background: var(--ax-purple);
	border-color: var(--ax-purple) !important;
	color: #fff;
}

#top .ax-collection__filter-btn.is-active svg path {
	stroke: #fff;
	fill: #fff;
}

#top .ax-collection__search {
	position: relative;
	flex: 0 1 251px;
	min-width: 200px;
}

#top .ax-collection__search svg {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	pointer-events: none;
}

#top .ax-collection__search input {
	width: 100%;
	height: 47px;
	border: 1px solid #000 !important;
	border-radius: 77px;
	padding: 0 20px 0 44px;
	background: #fff !important;
	font-family: "Inter", sans-serif !important;
	font-size: 15px;
	color: var(--ax-purple) !important;
	outline: none;
	box-shadow: unset !important;
	margin-bottom: 0px !important;
}

#top .ax-collection__search input::placeholder {
	color: rgba(68, 65, 146, 0.50) !important;
}

#top .ax-collection__search-clear {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: none;
	cursor: pointer;
	display: none;
	color: var(--ax-purple);
	font-size: 18px;
	line-height: 1;
}

#top .ax-collection__search.is-active .ax-collection__search-clear {
	display: block;
}

#top .ax-collection__search.is-active input,
#top .ax-collection__search:focus-within input {
	background: var(--ax-purple) !important;
	color: #fff !important;
	border-color: var(--ax-purple) !important;
}

#top .ax-collection__search.is-active svg path,
#top .ax-collection__search:focus-within svg path {
	fill: #fff !important;
}

#top .ax-collection__search.is-active .ax-collection__search-clear,
#top .ax-collection__search:focus-within .ax-collection__search-clear {
	color: #fff !important;
}

/* ---- topics panel ---- */

#top .ax-collection__topics {
	margin-top: 30px;
}

#top .ax-collection__topics[hidden] {
	display: none;
}

#top .ax-collection__topics-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 16px;
}

#top .ax-collection__topics-head h3 {
	margin: 0;
	font-size: 29px;
	font-weight: 600;
	color: var(--ax-purple);
}

#top .ax-collection__clear {
	border: 0;
	background: none;
	color: var(--ax-purple);
	font-size: 15px;
	text-decoration: underline;
	cursor: pointer;
	font-family: "Montserrat",sans-serif;
	padding: 0px !important;
}

#top .ax-collection__topics-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

#top .ax-collection__pill {
	height: 47px;
	padding: 0 26px;
	border: 1px solid #000;
	border-radius: 77px;
	background: #fff;
	color: var(--ax-purple);
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: .18s;
}

#top .ax-collection__pill.is-active {
	background: var(--ax-green);
	border-color: var(--ax-green);
	color: #fff;
}

/* ---- body (white) ---- */

#top .ax-collection__body {
	background: #fff;
	padding: 40px 0 64px;
}

#top .ax-collection__count {
	margin: 0 0 26px;
	color: #444192 !important;
	font-family: Montserrat;
	font-size: 30px;
	font-weight: 700;
	line-height: 111.667%;
	text-transform: unset !important;
	letter-spacing: 0px !important;
}

/* ---- grid ---- */

#top .ax-collection__grid {
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap: 28px;
}

#top .ax-collection__card {
	position: relative;
	display: block;
	grid-column: span 2;
	min-height: 411px;
	border-radius: var(--card-radius);
	overflow: hidden;
	background: #c6c6c6;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: box-shadow .55s ease;
}

#top .ax-collection__card:hover {
	box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.38);
}

#top .ax-collection__card--wide {
	grid-column: span 3;
	min-height: 348px;
}

#top .ax-collection__card[hidden] {
	display: none;
}

#top .ax-collection__card-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform-origin: center;
	transition: transform .55s ease,filter .35s ease;
}

#top .ax-collection__card:focus-visible {
	outline: 2px solid var(--ax-purple);
	outline-offset: 3px;
}

/* hover/focus: keep tag, bar & title; gently zoom + brighten the image and
   morph the arrow button into the green READ pill (see card CTA below). */

#top .ax-collection__card:hover .ax-collection__card-media,
#top .ax-collection__card:focus-visible .ax-collection__card-media {
	transform: scale(1.04);
	filter: brightness(1.05);
}

#top .ax-collection__tag {
	position: absolute;
	top: 18px;
	left: 22px;
	z-index: 2;
	height: 27px;
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
	border-radius: 77px;
	background: rgba(255,255,255,.65);
	border: .6px solid rgba(0,0,0,.2);
	color: var(--ax-purple);
	font-family: "Inter",sans-serif;
	font-size: 13px;
	font-weight: 700;
	backdrop-filter: blur(4px);
}

#top .ax-collection__card-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 131px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 26px;
	background: rgba(0,0,0,.14);
	backdrop-filter: blur(11.95px);
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 0 0 var(--card-radius) var(--card-radius);
}

#top .ax-collection__card-title {
	margin: 0;
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	line-height: 27px;
	flex: 1 1 auto;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#top .ax-collection__card-title mark {
	background: #00BD87;
	color: #fff;
	padding: 0 2px;
}

/* ---- card CTA: arrow circle by default, green READ pill on hover ---- */

#top .ax-collection__card-cta {
	position: relative;
	flex: 0 0 116px;
	height: 44px;
	align-self: end;
}

#top .ax-collection__card-arrow {
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity .3s ease;
}

#top .ax-collection__card-arrow svg {
	width: 18px;
	height: 18px;
}

#top .ax-collection__card-read {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 16px 0 20px;
	border-radius: 77px;
	background: var(--ax-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

#top .ax-collection__card-read svg {
	width: 16px;
	height: 16px;
}

#top .ax-collection__card:hover .ax-collection__card-arrow,
#top .ax-collection__card:focus-visible .ax-collection__card-arrow {
	opacity: 0;
}

#top .ax-collection__card:hover .ax-collection__card-read,
#top .ax-collection__card:focus-visible .ax-collection__card-read {
	opacity: 1;
}

/* ---- load more ---- */

#top .ax-collection__more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

#top .ax-collection__more {
	height: 51px;
	padding: 0 34px;
	border: 0;
	border-radius: 77px;
	background: var(--ax-purple);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	font-family: "Montserrat",sans-serif;
}

#top .ax-collection__more[hidden] {
	display: none;
}

#top .ax-collection__empty {
	display: none;
	padding: 30px 0;
	color: #666;
	font-size: 16px;
}

#top .ax-collection__empty.is-shown {
	display: block;
}

/* =======================================================================
 * Editable hero built from native Enfold elements.
 * Add these as the element's "Custom CSS Class" (Advanced tab) so the
 * Enfold Text Block / Special Heading match the design while staying editable.
 *   .ax-collection-eyebrow  -> Text Block (the small uppercase label)
 *   .ax-collection-title    -> Special Heading H1
 *   .ax-collection-intro    -> Text Block (the paragraph)
 *   .ax-collection-badge-img-> Image (optional AX·ACADEMY logo, top-right)
 * Used together with [ax_learning_corner hero='no'].
 * ==================================================================== */

#top .ax-collection-eyebrow,
#top .ax-collection-eyebrow p,
#top .alc-eyebrow,
#top .alc-eyebrow p {
	font-family: "Montserrat",sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1.95px;
	text-transform: uppercase;
	color: #000;
	margin: 0;
}

#top .ax-collection-title .av-special-heading-tag,
#top .ax-collection-title h1,
#top .ax-collection-title h2,
#top .alc-title .av-special-heading-tag,
#top .alc-title h1,
#top .alc-title h2 {
	font-family: "Montserrat",sans-serif;
	font-size: 45px;
	line-height: 1.11;
	font-weight: 700;
	color: var(--ax-purple,#444192);
	margin: 0;
}

#top .ax-collection-intro,
#top .ax-collection-intro p,
#top .alc-intro,
#top .alc-intro p {
	font-family: "Montserrat",sans-serif;
	font-size: 16px;
	line-height: 1.74;
	color: #000;
}

#top .ax-collection-intro,
#top .alc-intro {
	max-width: 494px;
}

#top .ax-collection-badge-img img,
#top .alc-badge-img img {
	max-width: 182px;
	height: auto;
}

/* when the built-in hero is omitted, tighten the controls band */

#top .ax-collection--no-hero .ax-collection__hero {
	padding-top: 24px;
}

#top .ax-collection--no-hero .ax-collection__controls {
	margin-top: 0;
}

/* standalone shortcodes: [ax_collection_filters] / [ax_collection_grid].
   These render bare (no grey/white band) so they inherit the Enfold section
   they're dropped into. */

#top .ax-collection--filters-only .ax-collection__controls {
	margin-top: 0;
}

/* ---- tablet ---- */

@media (max-width:1099px) {
	#top .ax-collection__grid {
		grid-template-columns: repeat(4,1fr);
	}

	#top .ax-collection__card {
		grid-column: span 2;
	}

	#top .ax-collection__card--wide {
		grid-column: span 4;
	}

	#top .ax-collection__title {
		font-size: 38px;
	}
}

/* ---- mobile ---- */

@media (max-width:760px) {
	#top .ax-collection__hero {
		padding: 36px 0 28px;
	}

	#top .ax-collection__hero-row {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 18px;
	}

	#top .ax-collection__title {
		font-size: 30px;
	}

	#top .ax-collection-title .av-special-heading-tag,
	#top .ax-collection-title h1,
	#top .ax-collection-title h2,
	#top .alc-title .av-special-heading-tag,
	#top .alc-title h1,
	#top .alc-title h2 {
		font-size: 30px;
	}

	#top .ax-collection__controls {
		margin-top: 26px;
		gap: 12px;
		flex-wrap: nowrap;
	}

	#top .ax-collection__filter-btn {
		width: 48px;
		height: 48px;
		padding: 0;
		justify-content: center;
		flex: 0 0 48px;
		border-radius: 50%;
		color: transparent;
		gap: 0;
	}

	#top .ax-collection__filter-btn span {
		display: none;
	}

	#top .ax-collection__search {
		flex: 1 1 auto;
	}

	#top .ax-collection__search.is-active input {
		background: var(--ax-purple);
		color: #fff;
		border-color: var(--ax-purple);
	}

	#top .ax-collection__search.is-active input::placeholder {
		color: rgba(255,255,255,.7);
	}

	#top .ax-collection__search.is-active svg path {
		stroke: #fff;
	}

	#top .ax-collection__search.is-active .ax-collection__search-clear {
		color: #fff;
	}

	#top .ax-collection__topics-head h3 {
		font-size: 16px;
	}

	#top .ax-collection__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	#top .ax-collection__card,
	#top .ax-collection__card--wide {
		grid-column: span 1;
		min-height: 434px;
	}

	#top .ax-collection__count {
		font-size: 16px;
	}
	
	#top .ax-collection__card-cta {
		flex: 0 0 84px !important;
	}
	
	#top .ax-collection__card-title {
		font-size: 18px !important;
	}
}