/* Academy archive */

.ml-academy {
	background: #fff;
}

/* Hero */

.ml-academy-hero {
	overflow: hidden;
	background:
		radial-gradient(ellipse at 8% 20%, rgba(0, 95, 249, 0.08) 0%, rgba(0, 95, 249, 0) 48%),
		radial-gradient(ellipse at 92% 80%, rgba(150, 71, 219, 0.1) 0%, rgba(150, 71, 219, 0) 52%),
		#fff;
}

.ml-academy-hero .ml-landing-block__inner {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
	align-items: center;
	padding: 88px 0;
}

.ml-academy-hero__eyebrow {
	margin: 0 0 16px;
	color: var(--color-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ml-academy-hero__checklist {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.ml-academy-hero__checklist li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

.ml-academy-hero__check-icon {
	width: 20px;
	height: 20px;
	color: var(--color-primary);
}

.ml-academy-hero__media {
	width: 100%;
	min-height: 360px;
	border-radius: 16px;
}

/* Learn section */

.ml-academy-learn {
	padding: 72px 0;
}

.ml-academy-learn__inner {
	width: min(100% - 48px, var(--site-width));
	margin: 0 auto;
}

.ml-academy-learn__header {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.ml-academy-learn__title {
	margin: 0 0 12px;
	color: var(--color-text);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
}

.ml-academy-learn__copy {
	margin: 0;
	color: var(--color-muted);
	font-size: 18px;
	line-height: 1.5;
}

.ml-academy-learn__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.ml-academy-learn__card {
	margin: 0;
	padding: 24px;
	border: 1px solid #d6e4ff;
	border-radius: 16px;
	background: #fff;
}

.ml-academy-learn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
	color: var(--color-primary);
}

.ml-academy-learn__icon .icon {
	width: 28px;
	height: 28px;
}

.ml-academy-learn__label {
	margin: 0 0 8px;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.ml-academy-learn__card-title {
	margin: 0 0 8px;
	color: var(--color-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.ml-academy-learn__card-copy {
	margin: 0;
	color: var(--color-muted);
	font-size: 16px;
	line-height: 1.5;
}

/* Featured guide card */

.ml-academy-card--featured {
	width: min(100% - 48px, var(--site-width));
	margin: 0 auto 72px;
}

.ml-academy-card__featured-shell {
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 24px;
	background:
		linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
		linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%) border-box;
	transition: box-shadow 0.2s ease;
}

.ml-academy-card__featured-shell:hover {
	box-shadow: var(--shadow-panel);
}

/* The whole card is one link; everything inside is plain markup. */
.ml-academy-card--featured .ml-academy-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ml-academy-card__featured-inner {
	display: grid;
	grid-template-columns: minmax(0, 44.5%) minmax(0, 55.5%);
	min-height: 380px;
}

.ml-academy-card__featured-content {
	display: flex;
	flex-direction: column;
	padding: 32px 36px;
}

.ml-academy-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	min-height: 32px;
	margin-bottom: 24px;
	padding: 6px 14px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	color: var(--color-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.ml-academy-card__badge-icon {
	width: 18px;
	height: 18px;
}

.ml-academy-card--featured .ml-academy-card__title {
	margin: 0;
	color: var(--color-text);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.2;
}

.ml-academy-card--featured .ml-academy-card__link:hover .ml-academy-card__title {
	color: var(--color-primary);
}

.ml-academy-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: auto;
	padding-top: 24px;
}

.ml-academy-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.ml-academy-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
}

.ml-academy-card__meta-icon {
	width: 16px;
	height: 16px;
	color: var(--color-muted);
}

.ml-academy-card__read-more {
	color: var(--color-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}


.ml-academy-card__featured-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

/* Absolute so the image aspect ratio never drives the card height. */
.ml-academy-card__featured-media .ml-academy-card__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Guides listing */

.ml-academy-guides .ml-blog__body {
	padding-top: 0;
}

.ml-academy-guides__title {
	margin: 0 0 28px;
	color: var(--color-text);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

/* Listing guide cards use the shared .ml-blog-card component. */

/* Playbooks block */

.ml-academy-playbooks {
	padding: 72px 0;
	background: #fff;
}

.ml-academy-playbooks__inner {
	width: min(100% - 48px, var(--site-width));
	margin: 0 auto;
}

.ml-academy-playbooks__header {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.ml-academy-playbooks__eyebrow {
	margin: 0 0 12px;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.ml-academy-playbooks__title {
	margin: 0 0 12px;
	color: var(--color-text);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
}

.ml-academy-playbooks__copy {
	margin: 0;
	color: var(--color-muted);
	font-size: 18px;
	line-height: 1.5;
}

.ml-academy-playbooks__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.ml-academy-playbooks__empty {
	margin: 0;
	color: var(--color-muted);
	font-size: 16px;
	text-align: center;
}

.ml-academy-playbook-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 420px;
	margin: 0;
	padding: 24px;
	overflow: hidden;
	border-radius: 24px 8px 8px 24px;
	background:
		url('/wp-content/themes/multilogin/images/academy/ml-playbook-card-bg.svg') no-repeat center left / cover,
		radial-gradient(circle at 110% 10%, rgba(0, 95, 249, 0.35), transparent 42%),
		linear-gradient(165deg, #061433 0%, #0a1f4d 55%, #071536 100%);
	color: #fff;
}

.ml-academy-playbook-card__top {
	position: relative;
	z-index: 1;
}

.ml-academy-playbook-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 50%;
	background: #fff;
}

.ml-academy-playbook-card__icon img {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.ml-academy-playbook-card__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.ml-academy-playbook-card__desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	line-height: 1.45;
}

.ml-academy-playbook-card__actions {
	position: relative;
	z-index: 1;
	display: flex;
	margin-top: 24px;
}

.ml-academy-playbook-card__actions .wp-block-button,
.ml-academy-playbook-card__button .wp-block-button__link {
	width: 100%;
}

.ml-academy-playbook-card__button .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-direction: row-reverse;
	min-height: 64px;
	background: #fff !important;
	color: #101828 !important;
	box-shadow: none !important;
}

.ml-academy-playbook-card__button .wp-block-button__icon {
	width: 24px;
	height: 24px;
}

/* Responsive */

@media (max-width: 1024px) {
	.ml-academy-hero .ml-landing-block__inner {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		gap: 32px;
		min-height: 0;
		padding: 64px 0;
	}

	.ml-academy-hero__media {
		width: 100%;
		min-height: 300px;
	}

	.ml-academy-learn__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ml-academy-playbooks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ml-academy-card__featured-inner {
		grid-template-columns: 1fr;
	}

	.ml-academy-card__featured-media {
		min-height: 220px;
	}
}

@media (max-width: 767px) {
	.ml-academy-learn {
		padding: 48px 0;
	}

	.ml-academy-learn__title,
	.ml-academy-playbooks__title {
		font-size: 28px;
	}

	.ml-academy-guides__title {
		font-size: 28px;
	}

	.ml-academy-learn__grid,
	.ml-academy-playbooks__grid {
		grid-template-columns: 1fr;
	}

	.ml-academy-card--featured {
		margin-bottom: 48px;
	}

	.ml-academy-card__featured-content {
		padding: 24px;
	}

	.ml-academy-card--featured .ml-academy-card__title {
		font-size: 22px;
	}

	.ml-academy-hero .ml-landing-block__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 48px 0 56px;
	}

	.ml-academy-hero__media {
		width: 100%;
		min-height: 220px;
	}

	.ml-academy-hero__actions .wp-block-button,
	.ml-academy-hero__actions .wp-block-button__link {
		width: 100%;
	}

	.ml-academy-hero__checklist {
		flex-direction: column;
		gap: 12px;
	}

	.ml-academy-playbooks {
		padding: 48px 0;
	}

	.ml-academy-playbook-card {
		min-height: 360px;
		border-radius: 20px;
	}
}