/*
 * NOOR Children's Academy
 *
 * Every selector here sits beneath an Academy wrapper — .iwa-academy for the
 * homepage section, .iwa-academy-lesson and .iwa-academy-archive for the two
 * views. Nothing in this file can reach the rest of the site, and no global
 * theme class (.btn, .section, .wrap, .iwa-sb-card) is redefined: the Academy's
 * own classes carry the styling, so the section still inherits every future
 * theme change instead of drifting away from it.
 *
 * Colours are taken from the theme's own custom properties, with a literal
 * fallback only so the section degrades sensibly if a property is ever renamed.
 */

/* -------------------------------------------------------------------------
   Section heading and introduction
   ---------------------------------------------------------------------- */

.iwa-academy .iwa-academy-head {
	max-width: none;
}

.iwa-academy .iwa-academy-intro {
	margin: 0.9rem 0 0;
	max-width: 52ch;
}

@media (min-width: 900px) {

	.iwa-academy .iwa-academy-head {
		align-items: end;
		display: grid;
		gap: 2.5rem;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}

	.iwa-academy .iwa-academy-intro {
		margin: 0 0 0.35rem;
	}
}

/* -------------------------------------------------------------------------
   The learning panel
   ---------------------------------------------------------------------- */

.iwa-academy .iwa-academy-panel {
	align-items: center;
	background: linear-gradient(90deg, rgba(241, 233, 216, 1) 0%, rgba(236, 240, 233, 1) 100%);
	border: 1px solid rgba(20, 107, 72, 0.1);
	border-radius: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: space-between;
	margin: 1.75rem 0 0;
	padding: 1.6rem 1.75rem;
}

.iwa-academy .iwa-academy-panel__text {
	flex: 1 1 20rem;
	min-width: 0;
}

.iwa-academy .iwa-academy-panel__title {
	color: var(--emerald, #146b48);
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.iwa-academy .iwa-academy-panel__prompt {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0.85rem 0 0;
}

.iwa-academy .iwa-academy-panel__note {
	font-size: 0.82rem;
	margin: 0.3rem 0 0;
}

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

/*
 * The emerald treatment is applied to the Academy's own classes, not to a new
 * global button variant, so the theme keeps sole ownership of .btn.
 *
 * The gradient is built only from --emerald-light and --emerald and a darker
 * foot. Its lightest point is therefore well below the luminance at which an
 * ivory ring stops meeting 3:1, which is what lets the focus ring below be a
 * single inset tone rather than a two-tone band.
 */
.iwa-academy .iwa-academy-panel__action,
.iwa-academy a.iwa-academy-card__action {
	align-items: center;
	background: linear-gradient(180deg, var(--emerald-light, #2a8a5f) 0%, var(--emerald, #146b48) 55%, #0c4a31 100%);
	border-color: #0c4a31;
	color: var(--ivory, #fbf8f1);
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	text-shadow: rgba(0, 0, 0, 0.28) 0 1px 1px;
}

.iwa-academy .iwa-academy-panel__action {
	align-self: center;
}

.iwa-academy a.iwa-academy-card__action {
	width: 100%;
}

/*
 * Focus. The ring is drawn inside the control, so the only colour it sits
 * against is the control's own emerald surface, which it clears at better than
 * 4:1 at every point of the gradient. No outline is removed, no box-shadow is
 * touched, and no !important is used, so the Pass 20 treatment elsewhere on the
 * site is unaffected.
 */
.iwa-academy .iwa-academy-panel__action:focus-visible,
.iwa-academy a.iwa-academy-card__action:focus-visible {
	outline: 3px solid var(--ivory, #fbf8f1);
	outline-offset: -4px;
}

/* -------------------------------------------------------------------------
   Age stages. Until a stage has cleared content it is a label, never a
   control: no link, no button, nothing focusable, nothing preselected.
   ---------------------------------------------------------------------- */

.iwa-academy .iwa-academy-stages {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	justify-content: flex-start;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.iwa-academy .iwa-academy-stage {
	background: linear-gradient(180deg, #ffffff 0%, var(--ivory, #fbf8f1) 55%, #f0eadd 100%);
	border: 1px solid #d8e2d8;
	border-radius: 999px;
	box-shadow: #e1e7df 0 3px 0, rgba(20, 107, 72, 0.1) 0 6px 14px, rgba(255, 255, 255, 0.9) 0 1px 0 inset;
	color: #1f5b41;
	font-size: 0.85rem;
	line-height: 1.4;
	white-space: nowrap;
}

.iwa-academy .iwa-academy-stage a,
.iwa-academy .iwa-academy-stage > span:first-child {
	align-items: center;
	display: inline-flex;
	font-weight: 500;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.15rem;
	text-decoration: none;
}

.iwa-academy .iwa-academy-stage a {
	color: inherit;
}

.iwa-academy .iwa-academy-stage a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.iwa-academy .iwa-academy-stage--pending {
	cursor: default;
}

/* -------------------------------------------------------------------------
   Cards. Equal height, with the action held at the foot so the four cards
   line up whatever length the descriptions run to.
   ---------------------------------------------------------------------- */

.iwa-academy .iwa-academy-grid {
	align-items: stretch;
	margin-top: 1.6rem;
}

.iwa-academy .iwa-academy-card {
	background: linear-gradient(180deg, #ffffff 0%, #fdfbf6 100%);
	border: 1px solid #e6dfd1;
	border-radius: 18px;
	box-shadow: rgba(36, 31, 26, 0.05) 0 6px 18px;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem 1.4rem 1.35rem;
}

.iwa-academy .iwa-academy-card__pillar {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	margin: 0 0 0.35rem;
	text-transform: uppercase;
}

.iwa-academy .iwa-academy-card h3 {
	margin: 0 0 0.5rem;
}

.iwa-academy .iwa-academy-card__body {
	font-size: 0.82rem;
	line-height: 1.55;
	margin: 0;
}

.iwa-academy .iwa-academy-card__foot {
	margin-top: auto;
	padding-top: 1.25rem;
}

.iwa-academy .iwa-academy-card__pending {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

/*
 * An action with nothing behind it yet is a real disabled button. It is not a
 * link, it has no destination, and a disabled button is removed from the tab
 * order by the browser, so keyboard users are never sent to a dead end. The
 * status above it says why.
 */
.iwa-academy .iwa-academy-card__btn {
	background: linear-gradient(180deg, #ffffff 0%, #f3efe5 100%);
	border: 1px solid #ded7c8;
	border-radius: 999px;
	box-shadow: #e7e1d4 0 2px 0;
	color: #46534a;
	cursor: not-allowed;
	display: block;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	min-height: 44px;
	padding: 0.65rem 1rem;
	text-align: center;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Narrower screens
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {

	.iwa-academy .iwa-academy-stages {
		gap: 0.55rem;
	}

	.iwa-academy .iwa-academy-stage {
		font-size: 0.8rem;
	}

	.iwa-academy .iwa-academy-stage a,
	.iwa-academy .iwa-academy-stage > span:first-child {
		padding: 0.55rem 0.85rem;
	}
}

@media (max-width: 759px) {

	.iwa-academy .iwa-academy-panel {
		align-items: flex-start;
		flex-direction: column;
		padding: 1.25rem;
	}

	/*
	 * Once the panel stacks, flex-basis applies to height, so the text block
	 * must size to its content or it reserves a tall empty band above the
	 * button.
	 */
	.iwa-academy .iwa-academy-panel__text {
		flex: 0 0 auto;
		width: 100%;
	}

	.iwa-academy .iwa-academy-panel__action {
		align-self: stretch;
	}
}

@media (max-width: 560px) {

	.iwa-academy .iwa-academy-stages {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.iwa-academy .iwa-academy-stage {
		font-size: 0.78rem;
		white-space: normal;
	}

	.iwa-academy .iwa-academy-stage a,
	.iwa-academy .iwa-academy-stage > span:first-child {
		padding: 0.55rem 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.iwa-academy .iwa-academy-panel__action,
	.iwa-academy .iwa-academy-card__action,
	.iwa-academy .iwa-academy-stage a {
		transition: none;
	}
}

[dir="rtl"] .iwa-academy .iwa-academy-stages {
	justify-content: flex-end;
}

[dir="rtl"] .iwa-academy .iwa-academy-card__pillar {
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   The lesson and library views
   ---------------------------------------------------------------------- */

.iwa-academy-lesson .iwa-academy-card__stage {
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.iwa-academy-lesson .iwa-academy-lesson__objective,
.iwa-academy-lesson .iwa-academy-lesson__sources {
	max-width: 42rem;
}

.iwa-academy-lesson .iwa-academy-guardian-note {
	margin-top: 1.5rem;
}