/* ==========================================================================
   Al-Azhar Academy — components.css
   Every reusable section that appears on a page: heroes, cards, tiles,
   testimonials, campus cards, FAQ, tables, notices, maps, prose.
   Appearance only — motion lives in animations.css.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Heroes
   ------------------------------------------------------------------------- */
.hero {
	padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}

.hero__inner {
	display: grid;
	gap: clamp(2.25rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 64em) {
	.hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}

.hero__title {
	max-width: 22ch;
}

.hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border);
	list-style: none;
}

.hero__facts li {
	font-size: var(--fs-300);
	color: var(--text-muted);
}

.hero__facts strong {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--font-heading);
	font-size: var(--fs-500);
	font-weight: 600;
	color: var(--text);
}

.hero__media {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48em) {
	.hero__media {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		align-items: start;
	}
}

.page-hero {
	padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--border);
}

.page-hero__inner {
	max-width: 46rem;
}

/* -------------------------------------------------------------------------
   Media frames
   ------------------------------------------------------------------------- */
.media-frame {
	position: relative;
	overflow: hidden;
	margin: 0;
	background-color: var(--surface-muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.media-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media-frame--hero {
	aspect-ratio: 4 / 3;
}

.media-frame--tall {
	aspect-ratio: 3 / 4;
}

.media-frame--square {
	aspect-ratio: 1 / 1;
}

.media-frame--wide {
	aspect-ratio: 16 / 9;
}

.media-frame__caption {
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-200);
	color: var(--text-subtle);
	background-color: var(--surface);
	border-top: 1px solid var(--border);
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
/* A card is no longer a box. It is a tone-coloured rule, a title and a line of
   copy: the rule does everything the floating panel used to do, and nothing has
   to be lifted off the page to be understood. */
.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: 3px solid var(--tone-fill);
}

/* A card that has to *contain* something — a form, a table, a map — is a real
   surface and gets the one panel treatment left on the site: a hairline edge,
   a tone rule on top and a flat fill. Split into two rules so a browser
   without `:has()` support still gets `.card--panel`. */
.card--panel {
	padding: var(--space-6);
	border: 1px solid var(--tone-edge);
	border-top: 3px solid var(--tone-fill);
	border-radius: var(--radius-md);
	background-color: var(--surface);
}

.card:has(.form),
.card:has(.table-wrap),
.card:has(.map-panel) {
	padding: var(--space-6);
	border: 1px solid var(--tone-edge);
	border-top: 3px solid var(--tone-fill);
	border-radius: var(--radius-md);
	background-color: var(--surface);
}

/* The glyph keeps its drawing and loses its chip. A tinted rounded square
   behind every icon is the most recognisable widget tell there is. */
.card__icon {
	display: block;
	width: auto;
	height: auto;
	margin-bottom: var(--space-1);
	color: var(--tone);
}

.card__icon svg {
	width: 1.6rem;
	height: 1.6rem;
}

.card__title {
	font-family: var(--font-heading);
	font-size: var(--fs-500);
	font-weight: 600;
	line-height: var(--lh-snug);
}

.card__text {
	font-size: var(--fs-300);
	color: var(--text-muted);
}

.card__link {
	margin-top: auto;
	padding-top: var(--space-2);
	font-size: var(--fs-300);
}

.card__meta {
	font-family: var(--font-label);
	font-size: var(--fs-100);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--tone);
}

/* -------------------------------------------------------------------------
   Tiles (media on top, body below)
   ------------------------------------------------------------------------- */
.tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.tile__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--tone-edge);
	border-radius: var(--radius-md);
	background-color: var(--surface-muted);
}

.tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding-top: var(--space-4);
	border-top: 3px solid var(--tone-fill);
}

.tile__title {
	font-family: var(--font-heading);
	font-size: var(--fs-500);
	font-weight: 600;
}

.tile__text {
	font-size: var(--fs-300);
	color: var(--text-muted);
}

.tile__foot {
	margin-top: auto;
	padding-top: var(--space-2);
}

/* -------------------------------------------------------------------------
   Lists
   ------------------------------------------------------------------------- */
.bullets,
.checklist {
	display: grid;
	gap: var(--space-2);
	list-style: none;
}

.bullets li {
	position: relative;
	padding-left: 1.15rem;
	font-size: var(--fs-300);
	color: var(--text-muted);
}

.bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.58em;
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background-color: var(--tone-fill);
}

.checklist li {
	display: flex;
	gap: var(--space-3);
	font-size: var(--fs-300);
	color: var(--text-muted);
}

.checklist svg {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.22rem;
	color: var(--tone);
}

/* -------------------------------------------------------------------------
   Trust bar
   ------------------------------------------------------------------------- */
/* A full-width strip of the section's hue. It dissolves into the paper at both
   edges rather than ruling two lines across the page — and the strip is deep
   enough that the dissolve is a visible length of gradient, not a stripe. The
   wash above it has faded out by the time it arrives, so the two colours meet
   in paper rather than edge to edge. */
.trust-bar {
	padding-block: clamp(2.25rem, 5vw, 3rem);
	background-image: linear-gradient(
		to bottom,
		var(--bg) 0,
		var(--tone-soft) var(--band-fade-strip),
		var(--tone-soft) calc(100% - var(--band-fade-strip)),
		var(--bg) 100%
	);
}

.trust-list {
	display: grid;
	gap: var(--space-4);
	list-style: none;
}

@media (min-width: 48em) {
	.trust-list {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	}
}

.trust-list li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--fs-300);
	font-weight: 500;
	color: var(--text-muted);
}

.trust-list svg {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--tone);
}

/* -------------------------------------------------------------------------
   Stats
   ------------------------------------------------------------------------- */
.stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-top: var(--space-5);
	border-top: 3px solid var(--tone-fill);
}

.stat__value {
	font-family: var(--font-heading);
	font-size: var(--fs-700);
	font-weight: 600;
	line-height: 1;
	color: var(--tone);
}

.stat__label {
	font-size: var(--fs-300);
	color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------------------- */
/* Testimonials: a quotation mark drawn in CSS, so the block needs no extra
   markup and the copy stays selectable. The block is tinted in the section's
   hue rather than boxed in white. */
.quote {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-6);
	border: 1px solid var(--tone-edge);
	border-radius: var(--radius-md);
	background-color: var(--tone-soft);
}

.quote::before {
	content: '\201C';
	position: absolute;
	top: var(--space-2);
	right: var(--space-5);
	font-family: var(--font-display);
	font-size: 4.5rem;
	line-height: 1;
	color: var(--tone-edge);
	pointer-events: none;
}

.quote__text {
	font-size: var(--fs-450);
	line-height: var(--lh-relaxed);
	color: var(--text);
}

.quote__foot {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-2);
}

.quote__avatar {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	background-color: var(--surface);
	border: 1px solid var(--tone-edge);
	border-radius: 50%;
	font-family: var(--font-heading);
	font-size: var(--fs-300);
	font-weight: 600;
	color: var(--tone);
}

.quote__name {
	display: block;
	font-size: var(--fs-300);
	font-weight: 600;
}

.quote__role {
	display: block;
	font-size: var(--fs-200);
	color: var(--text-subtle);
}

/* -------------------------------------------------------------------------
   Campus cards
   ------------------------------------------------------------------------- */
.campus-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.campus-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--tone-edge);
	border-radius: var(--radius-md);
	background-color: var(--surface-muted);
}

.campus-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.campus-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-5);
	padding-top: var(--space-4);
	border-top: 3px solid var(--tone-fill);
}

.campus-card__meta {
	display: grid;
	gap: var(--space-3);
	list-style: none;
}

.campus-card__meta li {
	display: flex;
	gap: var(--space-3);
	font-size: var(--fs-300);
	color: var(--text-muted);
}

.campus-card__meta svg {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.22rem;
	color: var(--tone);
}

.campus-card__principal {
	padding: var(--space-4) var(--space-5);
	background-color: var(--tone-soft);
	border-left: 3px solid var(--tone-fill);
	border-radius: var(--radius-xs);
	font-size: var(--fs-300);
	color: var(--text-muted);
}

.campus-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: auto;
}

/* -------------------------------------------------------------------------
   Call to action band
   ------------------------------------------------------------------------- */
/* The closing band: the one deep surface that sits inside a section, bookended
   by the same six-hue stripe as the header and the footer. Flat — no gradient
   fill, no corner glow, no shadow. The stripe dissolves at both edges, and it
   sits entirely inside the band, so it melts into the deeper paper on both
   sides. */
.cta-band {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
	overflow: hidden;
	padding: clamp(2rem, 5vw, 3.5rem);
	background-color: var(--surface-inverse);
	color: var(--text-muted);
	border-radius: var(--radius-lg);
}

.cta-band::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: var(--edge-ramp);
	pointer-events: none;
	background-image: var(--joy-stripe);
	-webkit-mask-image: var(--stripe-dissolve);
	mask-image: var(--stripe-dissolve);
}

.cta-band h2 {
	color: var(--tone);
}

.cta-band__copy {
	max-width: 44rem;
}

@media (min-width: 64em) {
	.cta-band {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-10);
	}

	.cta-band__actions {
		flex: none;
	}
}

/* -------------------------------------------------------------------------
   Notices, callouts and steps
   ------------------------------------------------------------------------- */
/* A notice is a flat tinted strip with a tone bar down the left edge — the
   quiet, ruled version of a notification. */
.notice {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
	background-color: var(--tone-soft);
	border: 1px solid var(--tone-edge);
	border-left: 4px solid var(--tone-fill);
	border-radius: var(--radius-xs);
}

.notice__date {
	font-family: var(--font-label);
	font-size: var(--fs-100);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--tone);
}

.notice__title {
	font-family: var(--font-heading);
	font-size: var(--fs-450);
	font-weight: 600;
}

.notice__text {
	font-size: var(--fs-300);
	color: var(--text-muted);
}

.note {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-5);
	background-color: var(--tone-soft);
	border: 1px solid var(--tone-edge);
	border-radius: var(--radius-sm);
	font-size: var(--fs-300);
	color: var(--text-muted);
}

.note svg {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	color: var(--tone);
}

.steps {
	display: grid;
	gap: var(--space-8);
	list-style: none;
}

@media (min-width: 48em) {
	.steps {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		gap: var(--space-6);
	}
}

.step {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: 3px solid var(--tone-fill);
}

.step__num {
	font-family: var(--font-label);
	font-size: var(--fs-100);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--tone);
}

.step__title {
	font-family: var(--font-heading);
	font-size: var(--fs-500);
	font-weight: 600;
}

.step__text {
	font-size: var(--fs-300);
	color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   Timeline — the notices list and the academic calendar
   -------------------------------------------------------------------------
   A date column, a rail with a dot, and the entry beside it, with a hairline
   connector running dot to dot. It replaces the table on the calendar and the
   boxed list on the notices, and it is the site's one genuinely editorial
   component: the date sets at the left margin where a parent scanning for
   "when" will find it first.

   Each row is a `<li class="tl__item">` inside `<ol class="tl">`. Two date
   shapes are supported: `.tl__d` + `.tl__m` (a stacked day and month, for a
   confirmed date) and `.tl__when` (a word, a span, or the `[Date]`
   placeholder). A row may carry `.tl__item--lead` to mark the next thing to
   happen; its dot grows a halo in the section tone.
   ------------------------------------------------------------------------- */
.tl {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl__item {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem 1.5rem minmax(0, 1fr);
	padding-block: var(--space-5);
}

/* The connector. It is painted before the dot in the box tree, and the dot
   carries z-index: 1, so the line stops cleanly at the dot. */
.tl__item:not(:last-child)::after {
	content: '';
	position: absolute;
	z-index: 0;
	left: calc(4.5rem + 0.75rem - 1px);
	top: 2.5rem;
	bottom: 0.5rem;
	width: 2px;
	border-radius: var(--radius-pill);
	background-color: var(--tone-edge);
}

.tl__date {
	padding-right: var(--space-3);
	text-align: right;
}

.tl__d {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-600);
	font-weight: 600;
	line-height: 1;
	color: var(--tone);
}

.tl__m {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--font-label);
	font-size: var(--fs-100);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-subtle);
}

/* For a row whose "date" is a word rather than a day — "Term 1", or the
   `[Date]` placeholder the school still has to fill in. Once a real date
   exists, swap this for a `<time>` holding `.tl__d` + `.tl__m`. */
.tl__when {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-300);
	font-weight: 600;
	line-height: 1.25;
	color: var(--tone);
}

/* A placeholder inside the date column keeps the section's hue — the dashed
   underline is already the site's "we still need this" signal. */
.tl__when .placeholder {
	color: var(--tone);
}

.tl__rail {
	position: relative;
}

.tl__dot {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 0.45rem;
	transform: translateX(-50%);
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background-color: var(--tone-fill);
	box-shadow: 0 0 0 3px var(--tone-soft);
}

.tl__item--lead .tl__dot {
	box-shadow: 0 0 0 3px var(--tone-soft), 0 0 0 6px var(--tone-edge);
}

.tl__body {
	padding-left: var(--space-2);
}

.tl__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}

/* Who a notice is for. Same shape as the eyebrow rule: a tracked label in the
   section's hue, so it reads as metadata rather than as a chip. */
.tl__tag {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--tone-edge);
	border-radius: var(--radius-pill);
	background-color: var(--tone-soft);
	font-family: var(--font-label);
	font-size: var(--fs-100);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--tone);
}

.tl__rel {
	font-size: var(--fs-200);
	color: var(--text-subtle);
}

.tl__title {
	margin-bottom: var(--space-1);
	font-family: var(--font-heading);
	font-size: var(--fs-500);
	font-weight: 600;
	line-height: var(--lh-snug);
}

.tl__text {
	max-width: var(--measure);
	font-size: var(--fs-300);
	color: var(--text-muted);
}

@media (max-width: 37.49em) {
	.tl__item {
		grid-template-columns: 3.25rem 1.25rem minmax(0, 1fr);
		padding-block: var(--space-4);
	}

	.tl__item:not(:last-child)::after {
		left: calc(3.25rem + 0.625rem - 1px);
		top: 2.25rem;
	}

	.tl__d {
		font-size: var(--fs-500);
	}
}


/* -------------------------------------------------------------------------
   FAQ (native <details>, no JS required)
   ------------------------------------------------------------------------- */
.faq-list {
	display: grid;
	gap: var(--space-3);
}

/* The FAQ is a set of ruled rows. No box, no shadow, no gradient ring: the
   rule above each question is the whole structure. */
.faq-list {
	display: grid;
	gap: 0;
	border-bottom: 1px solid var(--border);
}

.faq {
	border: 0;
	border-top: 1px solid var(--border);
	border-radius: 0;
	background-color: transparent;
}

.faq[open] {
	border-top-color: var(--tone);
}

.faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 3.5rem;
	padding: var(--space-4) 0;
	font-family: var(--font-heading);
	font-size: var(--fs-450);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.faq__summary::-webkit-details-marker {
	display: none;
}

.faq__summary::marker {
	content: '';
}

.faq__icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--tone);
}

.faq[open] .faq__icon {
	transform: rotate(180deg);
	color: var(--tone);
}

.faq__panel {
	padding: 0 0 var(--space-5);
	font-size: var(--fs-400);
	color: var(--text-muted);
}

.faq__panel > * + * {
	margin-top: var(--space-3);
}

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
.table-wrap {
	overflow-x: auto;
	background-color: var(--surface);
	border: 1px solid var(--tone-edge);
	border-radius: var(--radius-md);
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-300);
}

.table caption {
	padding: var(--space-4) var(--space-5) 0;
	text-align: left;
	font-size: var(--fs-300);
	color: var(--text-subtle);
}

.table th,
.table td {
	padding: var(--space-4) var(--space-5);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--border);
}

.table th {
	background-color: var(--tone-soft);
	font-family: var(--font-label);
	font-size: var(--fs-100);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--tone);
	white-space: nowrap;
}

.table tbody tr:last-child td {
	border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
	.table tbody tr:hover {
		background-color: var(--tone-soft);
	}
}

/* -------------------------------------------------------------------------
   Tables — the playful pill rows (opt-in)
   `.table--pills` turns a ruled table into a stack of row pills: the wrapper
   becomes a rounded panel, each row sits in the gutter above the next, and a
   dashed tone-coloured rule splits the columns. The wrapper follows the table
   with `:has()`, so a page carries one extra class, not two.

   Every colour is a tone name, so the panel, the rules and the accent column
   take the hue of the band they sit in — never one flat fill across the whole
   table. The three local names exist so the panel can be lifted off a band
   that is already tinted `--tone-soft`: set --pills-ground to var(--bg) for a
   paper panel instead.
   ------------------------------------------------------------------------- */
.table-wrap:has(> .table--pills) {
	--pills-ground: var(--tone-soft);
	--pills-row: var(--surface);
	--pills-row-hover: var(--bg);

	padding: var(--space-6);
	background-color: var(--pills-ground);
	border: 1px solid var(--tone-edge);
	border-radius: var(--radius-2xl);
}

.table--pills {
	border-collapse: separate;
	border-spacing: 0 var(--space-2);
}

/* The caption now sits in the panel, so it reads as the panel's own note. */
.table--pills caption {
	padding: 0 0 var(--space-3);
	color: var(--tone);
}

/* The header has no band of its own — the panel behind it is the band. */
.table--pills thead th {
	background-color: transparent;
	border-bottom: 0;
	border-right: 2px dashed var(--tone-edge);
}

.table--pills tbody tr > * {
	background-color: var(--pills-row);
	border-bottom: 0;
	border-right: 2px dashed var(--tone-edge);
}

.table--pills thead th:last-child,
.table--pills tbody tr > :last-child {
	border-right: 0;
}

.table--pills tbody tr > :first-child {
	border-radius: var(--radius-pill) 0 0 var(--radius-pill);
	font-weight: 600;
	color: var(--tone);
}

.table--pills tbody tr > :last-child {
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* Column 2 carries a value — "3 years", "14–16 years", "Pre-Primary" — not
   prose, so it takes the width of its own content and hands the slack back to
   the label and the notes. Letting the header break over two lines is what
   makes that narrowing possible at all: "USUAL AGE" is wider than any value
   beneath it, so a no-wrap header would set the floor for the column. */
.table--pills thead th:nth-child(2) {
	white-space: normal;
}

.table--pills tbody tr > :nth-child(2) {
	width: 1px;
	white-space: nowrap;
}

/* Row labels are <th scope="row"> here, so undo what the ruled table does to
   every `th`: the caps, the tracking, the no-wrap and the tone band. */
.table--pills tbody th {
	background-color: var(--pills-row);
	font-family: var(--font-sans);
	font-size: var(--fs-300);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
	color: var(--tone);
}

@media (hover: hover) and (pointer: fine) {
	.table--pills tbody tr:hover {
		background-color: transparent;
	}

	.table--pills tbody tr:hover > * {
		background-color: var(--pills-row-hover);
	}
}

/* The sample's own breakpoint — a smaller pill on a phone. A row is two or
   three lines tall here, so the ends soften to --radius-xl instead of staying
   fully round, and the copy centres in the taller cell. */
@media (max-width: 37.49em) {
	.table--pills th,
	.table--pills td {
		padding: var(--space-3) var(--space-4);
		vertical-align: middle;
	}

	.table--pills tbody tr > :first-child {
		border-radius: var(--radius-xl) 0 0 var(--radius-xl);
	}

	.table--pills tbody tr > :last-child {
		border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
	}
}

/* -------------------------------------------------------------------------
   Contact details
   ------------------------------------------------------------------------- */
.contact-list {
	display: grid;
	gap: var(--space-5);
	list-style: none;
}

.contact-list li {
	display: flex;
	gap: var(--space-4);
}

.contact-list svg {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.25rem;
	color: var(--tone);
}

.contact-list__label {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--font-label);
	font-size: var(--fs-100);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--tone);
}

.contact-list__value {
	font-size: var(--fs-400);
	color: var(--text);
}

/* Placeholder panel shown where a Google Maps embed will be dropped in. */
.map-panel {
	display: grid;
	place-items: center;
	gap: var(--space-3);
	min-height: 18rem;
	padding: var(--space-8);
	text-align: center;
	background-color: var(--surface-muted);
	background-image:
		linear-gradient(to right, var(--tone-edge) 1px, transparent 1px),
		linear-gradient(to bottom, var(--tone-edge) 1px, transparent 1px);
	background-size: 2rem 2rem;
	border: 1px dashed var(--tone);
	border-radius: var(--radius-md);
	font-size: var(--fs-300);
	color: var(--text-subtle);
}

.map-panel svg {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--tone);
}

/* -------------------------------------------------------------------------
   Photo grid (campus life, life at Al-Azhar Academy)
   ------------------------------------------------------------------------- */
.photo-grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.photo-grid > :first-child {
	grid-column: auto;
}

@media (min-width: 64em) {
	.photo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.photo-grid > :first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* -------------------------------------------------------------------------
   Long-form prose (privacy, safeguarding)
   ------------------------------------------------------------------------- */
.prose {
	max-width: var(--measure);
	color: var(--text-muted);
}

.prose > * + * {
	margin-top: var(--space-5);
}

.prose h2 {
	margin-top: var(--space-12);
	font-size: var(--fs-600);
	color: var(--text);
}

.prose h3 {
	margin-top: var(--space-8);
	font-size: var(--fs-500);
	color: var(--text);
}

.prose ul {
	display: grid;
	gap: var(--space-2);
	padding-left: 1.25rem;
	list-style: disc;
}

.prose li::marker {
	color: var(--tone-fill);
}

.prose__updated {
	font-family: var(--font-label);
	font-size: var(--fs-100);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-subtle);
}

/* -------------------------------------------------------------------------
   Error page
   ------------------------------------------------------------------------- */
.error-page {
	display: grid;
	place-items: center;
	min-height: 60vh;
	padding-block: var(--section-y);
	text-align: center;
}

.error-page__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	max-width: 34rem;
}

.error-page__code {
	font-family: var(--font-label);
	font-size: var(--fs-100);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--tone);
}

.error-page__code--error {
	color: var(--danger);
}

.error-page__code--success {
	color: var(--success);
}





/* ==========================================================================
   Page canvas, display ink and the interactive pieces
   Nothing here animates on its own (motion lives in animations.css), and every
   control is a real button or link.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Ambient page canvas
   A soft wash behind the first screen, mixed from the joy set so the top of
   every page opens in colour. Purely decorative; the ::after layer is the one
   that drifts.
   ------------------------------------------------------------------------- */
.canvas {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.canvas::before,
.canvas::after {
	content: '';
	position: absolute;
	/* The wash starts above the top of the band, so colour still sits behind
	   the header, and stops at the bottom edge — where the mask has already
	   faded it out. That is what keeps the join with the next band a fade
	   instead of a hard change of colour. */
	inset: -10% -5% 0;
	z-index: -1;
	pointer-events: none;
	-webkit-mask-image: var(--wash-dissolve);
	mask-image: var(--wash-dissolve);
}

.canvas::before {
	background-image: var(--wash-hero);
}

.canvas::after {
	background-image: radial-gradient(42% 46% at 78% 66%, var(--tone-soft) 0%, transparent 72%);
}

/* -------------------------------------------------------------------------
   Display ink
   The largest type carries the colour of its section as flat ink. Solid
   colour, never a gradient clipped to the text: the words stay readable at
   every zoom level, and they stay selectable.
   ------------------------------------------------------------------------- */
.hero__title,
.page-hero__inner h1 {
	color: var(--tone);
}

/* -------------------------------------------------------------------------
   Flip cards
   Front and back share a single grid cell, so the card is always as tall as
   its longer face and nothing is clipped. The rotation is a transform on the
   face group and only ever happens on a real click or keypress — never on
   hover — so a stray pointer can never hide content.
   ------------------------------------------------------------------------- */
.flip-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	perspective: 1200px;
}

.flip-card__group {
	flex: 1;
	display: grid;
	transform-style: preserve-3d;
}

.flip-card__face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	border: 1px solid var(--tone-edge);
	border-top: 3px solid var(--tone-fill);
	border-radius: var(--radius-md);
	background-color: var(--surface);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.flip-card__face--back {
	transform: rotateY(180deg);
	border-top-color: var(--tone);
	background-color: var(--tone-soft);
}

.flip-card.is-flipped .flip-card__group {
	transform: rotateY(180deg);
}

.flip-card__toggle {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.25rem;
	padding: 0.4rem 0.95rem 0.4rem 0.75rem;
	background-color: var(--tone-soft);
	border: 1px solid var(--tone-edge);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: var(--fs-200);
	font-weight: 600;
	color: var(--tone);
	cursor: pointer;
}


/* -------------------------------------------------------------------------
   Quick-action button (the floating menu)
   Fixed to the bottom-right corner on every page. Closed by default, so it is
   never in the way; each action is a labelled pill that springs out of the
   trigger with a short stagger. Hidden while the mobile nav sheet is open and
   when printing.
   ------------------------------------------------------------------------- */
/* The menu does nothing without JavaScript, so it is only laid out once the
   document is known to be scripted — the same gate the reveal animations use. */
.fab {
	position: fixed;
	right: max(var(--space-5), env(safe-area-inset-right));
	bottom: max(var(--space-5), env(safe-area-inset-bottom));
	z-index: var(--z-fab);
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-3);
}

html.js .fab {
	display: flex;
}

.fab__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-2);
}

.fab__action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-target);
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	background-color: var(--surface);
	border: 1px solid var(--tone-edge);
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-size: var(--fs-200);
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.85rem) scale(0.82);
	transform-origin: 100% 50%;
}

.fab.is-open .fab__action {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.fab__action:hover {
	border-color: var(--tone);
	color: var(--tone);
}

.fab__action-icon {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	border-radius: 50%;
	background-color: var(--tone-fill);
	color: var(--white);
}

.fab__action-icon svg {
	width: 1rem;
	height: 1rem;
}

.fab__trigger {
	display: inline-grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	background-color: var(--tone-fill);
	border: 2px solid var(--surface);
	border-radius: 50%;
	color: var(--white);
	cursor: pointer;
}

.fab__trigger svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* The sheet's own backdrop sits above this, so getting out of the way is the
   least confusing behaviour. */
body.is-nav-open .fab {
	visibility: hidden;
	opacity: 0;
}

@media print {
	.fab,
	.screen-only {
		display: none;
	}
}

@media (min-width: 64em) {
	.fab {
		bottom: var(--space-8);
		right: var(--space-8);
	}
}

.flip-card__toggle:hover {
	background-color: var(--tone-edge);
}

.flip-card__toggle svg {
	width: 0.9rem;
	height: 0.9rem;
	flex: none;
}

.flip-card__face--back .card__text {
	color: var(--text-muted);
}