/**
 * Courses landing page + single course template — decorative/layout touches
 * theme.json cannot express. Color, type, and spacing all come from
 * theme.json global styles; this file only handles grid/media mechanics.
 */

/* Catalogue cards */
.almagzal-course-card,
.almagzal-course-card__media {
	min-width: 0; /* prevents an intrinsic image size from overflowing the grid track (same class of bug fixed on the homepage hero) */
}

.almagzal-course-card__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.almagzal-course-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.almagzal-course-card__meta {
	gap: 4px !important;
}

/* Enrollment CTA. get_course_cta_html() renders one of three things:
     - available + enrollment_url  -> solid button, external, target="_blank"
     - available, no enrollment_url -> outline button, internal "اعرفي المزيد"
     - coming_soon / closed         -> plain non-clickable status text (a
       <span>, not a link at all — see .almagzal-course-status below) */
.almagzal-course-card .wp-block-button__link[target="_blank"]::after,
.almagzal-course-detail-cta .wp-block-button__link[target="_blank"]::after {
	content: " ↗";
}

.almagzal-course-cta-slot {
	margin-bottom: 0;
}

/* Secondary "اعرفي المزيد" internal link (available, no enrollment_url yet).
   Styled directly rather than via the theme's is-style-outline button
   variation, since that variation's CSS is scoped to a two-level
   <div class="wp-block-button is-style-outline"><a> structure that this
   raw HTML-bound CTA (rendered inside a single <p>) doesn't have. */
.almagzal-course-cta--secondary {
	background-color: transparent !important;
	color: var(--wp--preset--color--terracotta) !important;
	border: 1px solid var(--wp--preset--color--terracotta);
}

.almagzal-course-cta--secondary:hover {
	background-color: var(--wp--preset--color--beige) !important;
}

.almagzal-course-status {
	display: inline-block;
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Levels progression path */
@media (max-width: 700px) {
	.almagzal-levels-path {
		grid-template-columns: 1fr !important;
		gap: var(--wp--preset--spacing--sm) !important;
	}

	.almagzal-level-step {
		padding-top: var(--wp--preset--spacing--xs) !important;
	}

	.almagzal-level-step .wp-block-heading {
		font-size: var(--wp--preset--font-size--large) !important;
	}
}

/* Learning-experience horizontal row: dashed dividers between items, own
   composition distinct from Home's "Why Almagzal" 2x2 grid. */
.almagzal-experience-item {
	flex: 1 1 12rem;
	max-width: 16rem;
	padding-inline-start: var(--wp--preset--spacing--sm);
	border-inline-start: 1px dashed var(--wp--preset--color--border);
}

.almagzal-experience-item:first-child {
	border-inline-start: none;
	padding-inline-start: 0;
}

@media (max-width: 700px) {
	.almagzal-experience-item {
		flex-basis: 100%;
		max-width: none;
		border-inline-start: none;
		border-top: 1px dashed var(--wp--preset--color--border);
		padding-inline-start: 0;
		padding-top: var(--wp--preset--spacing--sm);
	}

	.almagzal-experience-item:first-child {
		border-top: none;
		padding-top: 0;
	}
}

/* Decorative image pause between the catalogue and the levels section —
   a real Media Library attachment (TEMP — Courses Textile), brand imagery
   only, never a course photo. Capped aspect-ratio keeps it compact on
   phones so it doesn't push the levels section further down. */
.almagzal-courses-visual-break {
	margin-top: var(--wp--preset--spacing--md);
	margin-bottom: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.almagzal-courses-visual-break img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

@media (max-width: 700px) {
	.almagzal-courses-visual-break {
		aspect-ratio: 12 / 5;
	}
}

/* Catalogue section: slightly tighter vertical padding while the empty
   state is showing. The wp:group block's own declared padding stays fixed
   at "md" always (so its saved markup matches what it renders — varying it
   inline caused a real block-validation mismatch in the editor); this
   plain wrapper + modifier class carries the empty-state adjustment
   instead, outside of any block's tracked attributes. */
.almagzal-catalogue-shell.is-empty > .wp-block-group.alignwide {
	padding-top: var(--wp--preset--spacing--sm) !important;
	padding-bottom: var(--wp--preset--spacing--sm) !important;
}

/* Single course template media box */
.almagzal-media-placeholder {
	max-width: 100%;
}

/* Three explicit learning steps with supporting artwork, not course imagery. */
.almagzal-courses-levels { padding-block: clamp(2.5rem, 5vw, 4.5rem) !important; }
.almagzal-courses-levels .wp-block-columns { gap: clamp(2rem, 5vw, 4rem); }
.almagzal-courses-levels .wp-block-column { min-width: 0; }
.almagzal-courses-levels .almagzal-levels-path { grid-template-columns: 1fr !important; gap: 1.5rem; }
.almagzal-courses-levels .almagzal-level-step {
 display: grid;
 grid-template-columns: 3rem minmax(0, 1fr);
 column-gap: 1.25rem;
 padding-block-start: 1.5rem !important;
 border-top-style: solid !important;
}
.almagzal-courses-levels .almagzal-level-step > :first-child {
 grid-column: 1; grid-row: 1 / span 2;
 display: grid; place-items: center; align-self: start;
 width: 3rem; height: 3rem; margin: 0;
 border: 1px solid var(--wp--preset--color--text-primary);
 border-radius: 50%;
}
.almagzal-courses-levels .almagzal-level-step > :not(:first-child) {
 grid-column: 2; max-width: 34rem; margin-inline: 0;
}
.almagzal-courses-levels .almagzal-level-step > h3 { margin-top: 0 !important; }
.almagzal-levels-image {
 position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: 0;
}
.almagzal-levels-image img {
 position: absolute; inset: 0; width: 100%; height: 100% !important;
 object-fit: cover; display: block;
}
@media (max-width: 781px) {
 .almagzal-courses-levels .wp-block-columns { gap: 2rem; }
}

/* --------------------------------------------------------------------------
 * Learning Hub — the theme-owned Courses page presentation.
 * ----------------------------------------------------------------------- */

.almagzal-learning-hub {
	--learning-max: 1200px;
	--learning-gutter: 24px;
	color: var(--wp--preset--color--text-primary, #252321);
	overflow: clip;
}

.almagzal-learning-hub > * {
	margin-block-start: 0;
}

.almagzal-learning-hub *,
.almagzal-learning-hub *::before,
.almagzal-learning-hub *::after {
	box-sizing: border-box;
}

.almagzal-learning-hub .alignwide {
	width: min(calc(100% - (2 * var(--learning-gutter))), var(--learning-max));
	max-width: var(--learning-max);
	margin-inline: auto;
}

.learning-section {
	padding-block: clamp(3.75rem, 7vw, 6.5rem);
}

.learning-section__heading {
	max-width: 44rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.learning-section__heading h2,
.learning-hero h1,
.learning-final h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	line-height: 1.2;
}

.learning-section__heading h2,
.learning-final h2 {
	font-size: clamp(2rem, 4vw, 3.35rem);
}

.learning-section__heading > p:last-child,
.learning-hero__copy > p:last-child,
.learning-final > div:last-child > p {
	max-width: 42rem;
	margin: .9rem 0 0;
	color: var(--wp--preset--color--text-secondary, #5e5a55);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.8;
}

.learning-kicker {
	margin: 0 0 .75rem;
	color: var(--wp--preset--color--terracotta, #965535);
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.learning-hero {
	display: grid;
	grid-template-columns: minmax(12rem, .72fr) minmax(0, 1.28fr);
	align-items: stretch;
	width: min(calc(100% - (2 * var(--learning-gutter, 24px))), var(--learning-max, 1200px));
	max-width: var(--learning-max, 1200px);
	margin-inline: auto;
	min-height: 31rem;
	padding-block: clamp(2.25rem, 5vw, 4.5rem);
}

.learning-hero__visual {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 23rem;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--beige, #dacbb8);
}

.learning-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
}

.learning-hero__image,
.learning-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% center;
}

.learning-hero__visual.is-placeholder {
	background: linear-gradient(135deg, var(--wp--preset--color--beige, #dacbb8) 0 50%, var(--wp--preset--color--dusty-blue, #8d9d9c) 50%);
}

.learning-hero__patch {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline-start: 1.25rem;
	display: grid;
	grid-template-columns: repeat(2, 1.5rem);
	grid-template-rows: repeat(2, 1.5rem);
	box-shadow: 0 0 0 1px rgba(244, 239, 236, .65);
	gap: 0 !important;
}

.learning-hero__patch > * { width: 1.5rem; height: 1.5rem; margin: 0 !important; }
.learning-hero__patch i:nth-child(1), .learning-hero__patch .patch-a { background: var(--wp--preset--color--terracotta, #965535); }
.learning-hero__patch i:nth-child(2), .learning-hero__patch .patch-b { background: var(--wp--preset--color--sage, #b7b8a6); }
.learning-hero__patch i:nth-child(3), .learning-hero__patch .patch-c { background: var(--wp--preset--color--dusty-blue, #8d9d9c); }
.learning-hero__patch i:nth-child(4), .learning-hero__patch .patch-d { background: var(--wp--preset--color--beige, #dacbb8); }

.learning-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 6vw, 6rem);
	background: color-mix(in srgb, var(--wp--preset--color--background, #f4efec) 86%, white);
	border-block: 1px solid var(--wp--preset--color--border, #d7cec4);
	border-inline-end: 1px solid var(--wp--preset--color--border, #d7cec4);
}

.learning-hero h1 {
	font-size: clamp(2.65rem, 6vw, 5rem);
}

.learning-quick-links {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.25rem);
	margin-block: clamp(1.25rem, 2.5vw, 2rem);
	padding-block: .85rem;
	border-block: 1px dashed var(--wp--preset--color--border, #d7cec4);
}

.learning-quick-links > p {
	flex: 0 0 auto;
	margin: 0;
	color: var(--wp--preset--color--terracotta, #965535);
	font-size: .84rem;
	font-weight: 600;
}

.learning-quick-links > div {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: .45rem;
}

.learning-quick-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .55rem .9rem;
	color: inherit;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--border, #d7cec4);
}

.learning-quick-link .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--border, #d7cec4);
	border-radius: 0;
	color: inherit;
}

.learning-quick-links a:hover,
.learning-quick-link .wp-block-button__link:hover {
	background: var(--wp--preset--color--beige, #dacbb8);
	border-color: color-mix(in srgb, var(--wp--preset--color--terracotta, #965535) 44%, transparent);
	color: inherit;
}

.learning-quick-links a:focus-visible {
	outline: 3px solid var(--wp--preset--color--dusty-blue, #8d9d9c);
	outline-offset: 2px;
}

#learning-paths,
#learning-methods,
#recorded-courses,
#patterns-catalogue,
#learning-level-one {
	scroll-margin-top: 2rem;
}

.learning-levels {
	background: color-mix(in srgb, var(--wp--preset--color--dusty-blue, #8d9d9c) 20%, var(--wp--preset--color--background, #f4efec));
}

.learning-levels__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.75rem, 1.5vw, 1.25rem);
	align-items: start;
}

.learning-levels__track::before {
	content: "";
	position: absolute;
	top: 3.35rem;
	inset-inline: 3rem;
	border-top: 1px dashed var(--wp--preset--color--text-muted, #7a756f);
}

.learning-level {
	position: relative;
	z-index: 1;
	min-width: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--background, #f4efec);
	border: 1px solid var(--wp--preset--color--border, #d7cec4);
}

.learning-level--practitioner { margin-top: 2.25rem; background: color-mix(in srgb, var(--wp--preset--color--sage, #b7b8a6) 42%, #fff); }
.learning-level--advanced { margin-top: 4.5rem; background: var(--wp--preset--color--text-primary, #252321); color: var(--wp--preset--color--background, #f4efec); }

.learning-level__topline {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .85rem;
	font-weight: 600;
}

.learning-level__topline > * { margin: 0 !important; }

.learning-level__number {
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.learning-level h3 {
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 1.25rem;
	font-size: clamp(1.65rem, 3vw, 2.3rem);
}

.learning-level ul {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.learning-level li {
	padding: .45rem .75rem;
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	font-size: .9rem;
}

.learning-level__close {
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px dashed color-mix(in srgb, currentColor 34%, transparent);
	font-weight: 600;
}

.learning-outcomes__quilt {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(12rem, auto);
	gap: clamp(.5rem, .8vw, .75rem);
}

.learning-outcome {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: clamp(1.35rem, 2.5vw, 2rem);
	border: 1px solid var(--wp--preset--color--border, #d7cec4);
}

.learning-outcome span,
.learning-outcome > p:first-child { margin: 0; color: var(--wp--preset--color--terracotta, #965535); font-size: .78rem; }
.learning-outcome h3 { max-width: 22rem; margin: 2rem 0 0; font-size: clamp(1.3rem, 1.7vw, 1.65rem); line-height: 1.45; }
.learning-outcome--1 { grid-column: 1 / span 5; background: var(--wp--preset--color--terracotta, #965535); color: var(--wp--preset--color--background, #f4efec); }
.learning-outcome--1 span,
.learning-outcome--1 > p:first-child { color: inherit; }
.learning-outcome--2 { grid-column: 6 / span 3; background: var(--wp--preset--color--beige, #dacbb8); }
.learning-outcome--3 { grid-column: 9 / span 4; background: color-mix(in srgb, var(--wp--preset--color--dusty-blue, #8d9d9c) 34%, white); }
.learning-outcome--4 { grid-column: 1 / span 3; background: color-mix(in srgb, var(--wp--preset--color--sage, #b7b8a6) 56%, white); }
.learning-outcome--5 { grid-column: 4 / span 5; background: color-mix(in srgb, var(--wp--preset--color--background, #f4efec) 65%, white); }
.learning-outcome--6 { grid-column: 9 / span 4; border-inline-start: .35rem solid var(--wp--preset--color--terracotta, #965535); }

.learning-visual-break {
	position: relative;
	margin-block: 0 clamp(3rem, 6vw, 5rem);
	aspect-ratio: 16 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--beige, #dacbb8);
}

.learning-visual-break__image,
.learning-visual-break img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 56%;
}

.learning-visual-break figcaption {
	position: absolute;
	inset-inline-end: 1.25rem;
	inset-block-end: 1.25rem;
	max-width: calc(100% - 2.5rem);
	padding: .65rem .9rem;
	background: rgba(37, 35, 33, .84);
	color: var(--wp--preset--color--background, #f4efec);
	font-size: .8rem;
}

.learning-methods {
	background: var(--wp--preset--color--text-primary, #252321);
	color: var(--wp--preset--color--background, #f4efec);
}

.learning-methods .learning-kicker { color: var(--wp--preset--color--beige, #dacbb8); }

.learning-methods__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
}

.learning-method {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 25rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--background, #f4efec);
	color: var(--wp--preset--color--text-primary, #252321);
}

.learning-method--courses { grid-column: span 7; }
.learning-method--patterns { grid-column: span 5; background: var(--wp--preset--color--beige, #dacbb8); }
.learning-method--future { grid-column: 4 / span 6; min-height: 21rem; background: color-mix(in srgb, var(--wp--preset--color--dusty-blue, #8d9d9c) 70%, white); }
.learning-method__index { margin: 0; font-size: .82rem; color: var(--wp--preset--color--terracotta, #965535); }
.learning-method h3 { margin: 2.5rem 0 0; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.learning-method > p:not(.learning-method__index) { max-width: 34rem; margin: 1.25rem 0 0; color: var(--wp--preset--color--text-secondary, #5e5a55); line-height: 1.75; }
.learning-method__future-head { display: flex; align-items: center; justify-content: space-between; }
.learning-method__future-head p { margin: 0; }
.learning-method__future-head span,
.learning-method__future-head > p:last-child { margin: 0; padding: .4rem .8rem; border: 1px solid currentColor; border-radius: 999px; font-size: .8rem; font-weight: 600; }

.learning-flow {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.7rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.learning-flow li { position: relative; font-weight: 600; }
.learning-flow li:not(:last-child)::after { content: "←"; position: absolute; inset-inline-start: calc(100% + .55rem); color: var(--wp--preset--color--terracotta, #965535); }

.learning-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 48px;
	margin-top: auto;
	padding: .78rem 1.4rem;
	background: var(--wp--preset--color--terracotta, #965535);
	border: 1px solid var(--wp--preset--color--terracotta, #965535);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.learning-button.wp-block-button {
	display: block;
	align-self: auto;
	min-height: 0;
	margin-top: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.learning-method > .wp-block-buttons {
	margin-top: auto;
}

.learning-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .78rem 1.4rem;
	background: var(--wp--preset--color--terracotta, #965535);
	border: 1px solid var(--wp--preset--color--terracotta, #965535);
	border-radius: 0;
	color: #fff;
	font-weight: 600;
}

.learning-button .wp-block-button__link:hover { background: #7f452b; color: #fff; }
.learning-button--outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--text-primary, #252321); border-color: currentColor; }
.learning-button--outline .wp-block-button__link:hover { background: var(--wp--preset--color--text-primary, #252321); color: #fff; }

.learning-button:hover { background: #7f452b; color: #fff; }
.learning-button--outline { background: transparent; color: var(--wp--preset--color--text-primary, #252321); border-color: currentColor; }
.learning-button--outline:hover { background: var(--wp--preset--color--text-primary, #252321); color: #fff; }
.learning-button:focus-visible,
.learning-filters a:focus-visible,
.learning-card-link:focus-visible,
.learning-product-card h3 a:focus-visible { outline: 3px solid var(--wp--preset--color--dusty-blue, #8d9d9c); outline-offset: 3px; }

.learning-catalogue__header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.learning-catalogue__header .learning-section__heading { margin: 0; }
.learning-courses-dynamic .learning-filters { justify-content: flex-end; margin: -5.25rem 0 2.5rem; }
.learning-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.learning-filters a { min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--wp--preset--color--border, #d7cec4); color: inherit; text-decoration: none; }
.learning-filters a:hover,
.learning-filters a.is-active { background: var(--wp--preset--color--text-primary, #252321); border-color: var(--wp--preset--color--text-primary, #252321); color: var(--wp--preset--color--background, #f4efec); }

.learning-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.learning-product-card { min-width: 0; background: color-mix(in srgb, var(--wp--preset--color--background, #f4efec) 72%, white); border: 1px solid var(--wp--preset--color--border, #d7cec4); }
.learning-product-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--beige, #dacbb8); }
.learning-product-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.learning-product-card:hover .learning-product-card__media img { transform: scale(1.025); }
.learning-media-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--wp--preset--color--beige, #dacbb8) 0 49.5%, var(--wp--preset--color--sage, #b7b8a6) 50%); }
.learning-product-card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.learning-product-card__meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.learning-product-card__meta span,
.learning-product-card__type { margin: 0; color: var(--wp--preset--color--text-muted, #7a756f); font-size: .8rem; }
.learning-product-card__meta span + span::before { content: "·"; margin-inline-end: .5rem; }
.learning-product-card h3 { margin: .85rem 0 0; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; }
.learning-product-card h3 a { color: inherit; text-decoration: none; }
.learning-product-card__body > p:not(.learning-product-card__type) { margin: .75rem 0 0; color: var(--wp--preset--color--text-secondary, #5e5a55); font-size: .92rem; line-height: 1.7; }
.learning-card-link { display: inline-block; margin-top: 1.35rem; color: var(--wp--preset--color--terracotta, #965535); font-weight: 600; text-underline-offset: .25rem; }
.learning-card-status { display: inline-block; margin-top: 1.35rem; color: var(--wp--preset--color--text-muted, #7a756f); font-weight: 600; }

.learning-patterns { background: color-mix(in srgb, var(--wp--preset--color--sage, #b7b8a6) 30%, var(--wp--preset--color--background, #f4efec)); }
.learning-pattern-card__footer { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.35rem; }
.learning-pattern-card__footer .learning-card-link { margin-top: 0; }
.learning-price { font-weight: 600; }

.learning-empty-state {
	position: relative;
	max-width: 47rem;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 4rem);
	text-align: center;
	background: color-mix(in srgb, var(--wp--preset--color--background, #f4efec) 72%, white);
	border: 1px solid var(--wp--preset--color--border, #d7cec4);
}

.learning-empty-state__mark { width: 4rem; height: 4rem; margin: 0 auto 1.5rem; background: conic-gradient(var(--wp--preset--color--terracotta, #965535) 0 25%, var(--wp--preset--color--beige, #dacbb8) 0 50%, var(--wp--preset--color--dusty-blue, #8d9d9c) 0 75%, var(--wp--preset--color--sage, #b7b8a6) 0); transform: rotate(45deg); }
.learning-empty-state h3 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.learning-empty-state > p:last-child { margin: .8rem 0 0; color: var(--wp--preset--color--text-secondary, #5e5a55); line-height: 1.8; }

.learning-final {
	display: grid;
	grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr);
	margin-block: clamp(3rem, 7vw, 6rem);
	background: var(--wp--preset--color--beige, #dacbb8);
}

.learning-final > div:last-child { padding: clamp(2rem, 5vw, 4.5rem); }
.learning-final .learning-button { margin-top: 2rem; }
.learning-final__patch { display: grid; grid-template-columns: repeat(2, 1fr); min-height: 20rem; }
.learning-final__patch { gap: 0 !important; }
.learning-final__patch > * { min-height: 10rem; margin: 0 !important; }
.learning-final__patch span:nth-child(1), .learning-final__patch span:nth-child(4), .learning-final__patch .patch-a, .learning-final__patch .patch-d { background: var(--wp--preset--color--terracotta, #965535); }
.learning-final__patch span:nth-child(2), .learning-final__patch .patch-b { background: var(--wp--preset--color--dusty-blue, #8d9d9c); }
.learning-final__patch span:nth-child(3), .learning-final__patch .patch-c { background: var(--wp--preset--color--sage, #b7b8a6); }

@media (max-width: 900px) {
	.learning-levels__track { grid-template-columns: 1fr; }
	.learning-levels__track::before { top: 2rem; bottom: 2rem; inset-inline-start: 2.9rem; inset-inline-end: auto; border-top: 0; border-inline-start: 1px dashed var(--wp--preset--color--text-muted, #7a756f); }
	.learning-level--practitioner,
	.learning-level--advanced { margin-top: 0; margin-inline-start: 2rem; }
	.learning-outcomes__quilt { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(10.5rem, auto); }
	.learning-outcome { grid-column: auto; }
	.learning-method--courses,
	.learning-method--patterns { grid-column: span 6; }
	.learning-method--future { grid-column: 3 / span 8; }
	.learning-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.almagzal-learning-hub { --learning-gutter: 20px; }
	.almagzal-learning-hub .alignwide,
	.learning-hero.alignwide {
		width: calc(100% - 40px) !important;
		max-width: calc(100% - 40px);
		margin-inline: auto !important;
	}
	.learning-section { padding-block: 3rem; }
	.learning-hero { grid-template-columns: 1fr; padding-block: 1.5rem 3rem; }
	.learning-hero__visual { min-height: 13rem; aspect-ratio: 16 / 9; }
	.learning-hero__image { object-position: center 47%; }
	.learning-hero__copy { padding: 2rem 1.5rem; border-inline-start: 1px solid var(--wp--preset--color--border, #d7cec4); }
	.learning-hero h1 { font-size: clamp(2.3rem, 12vw, 3.25rem); }
	.learning-quick-links { display: block; }
	.learning-quick-links > div { margin-top: .7rem; }
	.learning-visual-break { aspect-ratio: 16 / 7; margin-bottom: 3rem; }
	.learning-methods__grid { grid-template-columns: 1fr; }
	.learning-method--courses,
	.learning-method--patterns,
	.learning-method--future { grid-column: auto; min-height: 22rem; }
	.learning-catalogue__header { display: block; }
	.learning-courses-dynamic .learning-filters { justify-content: flex-start; margin: 0 0 1.5rem; }
	.learning-filters { margin-top: 1.5rem; }
	.learning-final { grid-template-columns: 1fr; }
	.learning-final__patch { min-height: 8rem; grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 520px) {
	.learning-outcomes__quilt,
	.learning-card-grid { grid-template-columns: 1fr; }
	.learning-outcome { min-height: 9.5rem; }
	.learning-outcome h3 { font-size: 1.22rem; }
	.learning-quick-links a { flex: 1 1 calc(50% - .45rem); text-align: center; }
	.learning-visual-break { aspect-ratio: 4 / 3; }
	.learning-visual-break figcaption { inset-inline: 1rem; inset-block-end: 1rem; max-width: none; }
	.learning-level--practitioner,
	.learning-level--advanced { margin-inline-start: .75rem; }
	.learning-levels__track::before { inset-inline-start: 2.35rem; }
	.learning-level { padding: 1.4rem; }
	.learning-flow { gap: .55rem 1.35rem; }
	.learning-flow li:not(:last-child)::after { inset-inline-start: calc(100% + .35rem); }
	.learning-filters a { flex: 1 1 calc(50% - .5rem); text-align: center; }
	.learning-pattern-card__footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.learning-product-card__media img { transition: none; }
}