/* Component library. Built once here, consumed by plugin templates. */

/* ---------------------------------------------------------------- Layout */

.ata-container {
	width: 100%;
	max-width: var(--ata-container);
	margin-inline: auto;
	padding-inline: var(--ata-space-4);
}

@media (min-width: 768px) {
	.ata-container { padding-inline: var(--ata-space-8); }
}

/* --------------------------------------------------------------- Buttons */

.ata-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ata-space-2);
	min-height: 44px;
	padding: var(--ata-space-3) var(--ata-space-6);
	border: 1px solid transparent;
	border-radius: var(--ata-radius-button);
	font-family: var(--ata-font-body);
	font-size: var(--ata-text-base);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.ata-button--primary {
	background: var(--ata-indigo-600);
	color: var(--ata-white);
}

.ata-button--primary:hover { background: var(--ata-indigo-700); }

.ata-button--secondary {
	background: var(--ata-white);
	border-color: var(--ata-line);
	color: var(--ata-ink);
}

.ata-button--secondary:hover { border-color: var(--ata-slate-300); }

.ata-button--ghost {
	background: transparent;
	color: var(--ata-indigo-600);
	padding-inline: var(--ata-space-3);
}

.ata-button--destructive {
	background: var(--ata-error);
	color: var(--ata-white);
}

.ata-button--sm { min-height: 36px; padding: var(--ata-space-2) var(--ata-space-4); font-size: var(--ata-text-sm); }
.ata-button--lg { min-height: 52px; padding: var(--ata-space-4) var(--ata-space-8); font-size: var(--ata-text-lg); }

.ata-button[disabled],
.ata-button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ----------------------------------------------------------------- Forms */

.ata-field { margin-bottom: var(--ata-space-6); }

.ata-field__label {
	display: block;
	margin-bottom: var(--ata-space-2);
	font-weight: 600;
	font-size: var(--ata-text-sm);
}

.ata-field__hint {
	display: block;
	margin-top: var(--ata-space-2);
	color: var(--ata-slate-500);
	font-size: var(--ata-text-sm);
}

.ata-field__error {
	display: block;
	margin-top: var(--ata-space-2);
	color: var(--ata-error);
	font-size: var(--ata-text-sm);
	font-weight: 500;
}

.ata-input,
.ata-select,
.ata-textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--ata-space-3);
	border: 1px solid var(--ata-line);
	border-radius: var(--ata-radius-button);
	background: var(--ata-white);
	color: var(--ata-ink);
	/* 16px minimum stops iOS zooming on focus */
	font-size: var(--ata-text-base);
	font-family: inherit;
}

.ata-input:focus,
.ata-select:focus,
.ata-textarea:focus { border-color: var(--ata-indigo-600); }

.ata-input[aria-invalid="true"] { border-color: var(--ata-error); }

.ata-textarea { min-height: 120px; resize: vertical; }

/* ----------------------------------------------------------------- Cards */

.ata-card {
	background: var(--ata-white);
	border: 1px solid var(--ata-line);
	border-radius: var(--ata-radius-card);
	padding: var(--ata-space-6);
}

.ata-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--ata-space-4);
	margin-bottom: var(--ata-space-8);
}

.ata-stat {
	display: flex;
	flex-direction: column;
	gap: var(--ata-space-1);
	background: var(--ata-white);
	border: 1px solid var(--ata-line);
	border-radius: var(--ata-radius-card);
	padding: var(--ata-space-4) var(--ata-space-6);
}

.ata-stat__value {
	font-family: var(--ata-font-display);
	font-size: var(--ata-text-2xl);
	font-weight: 700;
	line-height: 1;
}

.ata-stat__label {
	color: var(--ata-slate-500);
	font-size: var(--ata-text-sm);
}

/* ------------------------------------------------------------- Status pill */

.ata-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--ata-space-3);
	border-radius: var(--ata-radius-pill);
	font-size: var(--ata-text-xs);
	font-weight: 600;
	background: var(--ata-neutral-bg);
	color: var(--ata-slate-700);
}

.ata-pill--available,
.ata-pill--success,
.ata-pill--released,
.ata-pill--paid { background: var(--ata-success-bg); color: var(--ata-success); }

.ata-pill--pending,
.ata-pill--coming-soon,
.ata-pill--partial,
.ata-pill--withheld { background: var(--ata-warning-bg); color: var(--ata-warning); }

.ata-pill--unavailable,
.ata-pill--rejected,
.ata-pill--failed { background: var(--ata-error-bg); color: var(--ata-error); }

/* ------------------------------------------------------------------ Table */

.ata-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ata-text-sm);
}

.ata-table th {
	text-align: left;
	font-weight: 600;
	color: var(--ata-slate-500);
	padding: var(--ata-space-3);
	border-bottom: 1px solid var(--ata-line);
	white-space: nowrap;
}

.ata-table td {
	padding: var(--ata-space-3);
	border-bottom: 1px solid var(--ata-line);
	vertical-align: top;
}

/* Below 768px tables become stacked cards. A horizontal scrollbar on a phone
   is a failure, not a fallback. */
@media (max-width: 767px) {
	.ata-table thead { display: none; }
	.ata-table tr {
		display: block;
		background: var(--ata-white);
		border: 1px solid var(--ata-line);
		border-radius: var(--ata-radius-card);
		margin-bottom: var(--ata-space-3);
		padding: var(--ata-space-2);
	}
	.ata-table td {
		display: flex;
		justify-content: space-between;
		gap: var(--ata-space-4);
		border-bottom: none;
		padding: var(--ata-space-2);
	}
	.ata-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--ata-slate-500);
	}
}

/* ------------------------------------------------------- Alerts and states */

.ata-alert {
	padding: var(--ata-space-4);
	border-radius: var(--ata-radius-card);
	border: 1px solid transparent;
	margin-bottom: var(--ata-space-4);
}

.ata-alert p:last-child { margin-bottom: 0; }

.ata-alert--success { background: var(--ata-success-bg); border-color: var(--ata-success); }
.ata-alert--warning { background: var(--ata-warning-bg); border-color: var(--ata-warning); }
.ata-alert--error { background: var(--ata-error-bg); border-color: var(--ata-error); }

/* An empty screen is an invitation to act, not a shrug. */
.ata-empty {
	text-align: left;
	padding: var(--ata-space-12) var(--ata-space-6);
	background: var(--ata-white);
	border: 1px dashed var(--ata-line);
	border-radius: var(--ata-radius-card);
}

.ata-empty__title {
	font-family: var(--ata-font-display);
	font-size: var(--ata-text-lg);
	font-weight: 700;
	margin-bottom: var(--ata-space-2);
}

.ata-empty__body { color: var(--ata-slate-500); }

.ata-skeleton {
	background: linear-gradient(90deg, var(--ata-neutral-bg) 25%, #f4f5f8 50%, var(--ata-neutral-bg) 75%);
	background-size: 200% 100%;
	animation: ata-shimmer 1.4s ease-in-out infinite;
	border-radius: var(--ata-radius-button);
	min-height: 1em;
}

@keyframes ata-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ----------------------------------------------------------- Portal shell */

.ata-portal {
	max-width: var(--ata-container);
	margin-inline: auto;
	padding: var(--ata-space-6) var(--ata-space-4) var(--ata-space-24);
}

.ata-portal__greeting {
	color: var(--ata-slate-500);
	margin-bottom: var(--ata-space-1);
}

.ata-portal__title {
	font-size: var(--ata-text-2xl);
	margin-bottom: var(--ata-space-6);
}

/* Bottom tab bar on phones: that is where the thumb already is. */
.ata-tabbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: var(--ata-white);
	border-top: 1px solid var(--ata-line);
	padding-bottom: env(safe-area-inset-bottom);
}

.ata-tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
	color: var(--ata-slate-500);
	font-size: var(--ata-text-xs);
	text-decoration: none;
}

.ata-tabbar__item[aria-current="page"] { color: var(--ata-indigo-600); font-weight: 600; }

@media (min-width: 768px) {
	.ata-tabbar { display: none; }
}

/* --------------------------------------------------------- Verification */

.ata-verify {
	max-width: 640px;
	margin-inline: auto;
	padding: var(--ata-space-16) var(--ata-space-4);
}

.ata-verify__details {
	display: grid;
	grid-template-columns: minmax(120px, auto) 1fr;
	gap: var(--ata-space-3) var(--ata-space-6);
	margin: 0;
	padding: var(--ata-space-6);
	background: var(--ata-white);
	border: 1px solid var(--ata-line);
	border-radius: var(--ata-radius-card);
}

.ata-verify__details dt { color: var(--ata-slate-500); font-size: var(--ata-text-sm); }
.ata-verify__details dd { margin: 0; font-weight: 600; }

/* ------------------------------------------------------------------ Header */

.ata-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ata-indigo-900);
	color: var(--ata-white);
	padding: var(--ata-space-3) var(--ata-space-4);
}

.ata-skip-link:focus { left: var(--ata-space-4); }

.ata-header {
	background: var(--ata-white);
	border-bottom: 1px solid var(--ata-line);
	position: sticky;
	top: 0;
	z-index: 30;
}

.ata-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ata-space-6);
	min-height: 64px;
}

.ata-header__brand { text-decoration: none; color: inherit; }

.ata-header__wordmark {
	font-family: var(--ata-font-display);
	font-weight: 700;
	font-size: var(--ata-text-lg);
	font-stretch: 108%;
	letter-spacing: -0.01em;
}

.ata-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--ata-line);
	border-radius: var(--ata-radius-button);
	cursor: pointer;
}

.ata-header__toggle-bars,
.ata-header__toggle-bars::before,
.ata-header__toggle-bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--ata-ink);
	content: "";
	position: relative;
}

.ata-header__toggle-bars::before { top: -6px; }
.ata-header__toggle-bars::after { top: 4px; }

.ata-header__nav { display: none; }
.ata-header__nav.is-open {
	display: block;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: var(--ata-white);
	border-bottom: 1px solid var(--ata-line);
	padding: var(--ata-space-4);
}

.ata-nav {
	list-style: none;
	margin: 0 0 var(--ata-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ata-space-1);
}

.ata-nav a {
	display: block;
	padding: var(--ata-space-3) 0;
	color: var(--ata-ink);
	text-decoration: none;
	font-weight: 500;
}

.ata-nav .current-menu-item > a {
	color: var(--ata-indigo-600);
	font-weight: 600;
}

.ata-header__actions {
	display: flex;
	gap: var(--ata-space-2);
	flex-wrap: wrap;
}

@media (min-width: 900px) {
	.ata-header__toggle { display: none; }

	.ata-header__nav {
		display: flex;
		align-items: center;
		gap: var(--ata-space-8);
		position: static;
		padding: 0;
		border: none;
	}

	.ata-nav {
		flex-direction: row;
		align-items: center;
		gap: var(--ata-space-6);
		margin: 0;
	}

	.ata-nav a { padding: 0; }
}

/* ------------------------------------------------------------------ Footer */

.ata-footer {
	background: var(--ata-indigo-900);
	color: var(--ata-white);
	margin-top: var(--ata-space-24);
	padding: var(--ata-space-12) 0 var(--ata-space-6);
}

.ata-footer__inner {
	display: grid;
	gap: var(--ata-space-8);
}

@media (min-width: 768px) {
	.ata-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
}

.ata-footer__name {
	font-family: var(--ata-font-display);
	font-weight: 700;
	font-size: var(--ata-text-lg);
	margin-bottom: var(--ata-space-2);
}

.ata-footer__meta,
.ata-footer p { color: var(--ata-indigo-300); }

.ata-footer a { color: var(--ata-white); text-decoration: none; }
.ata-footer a:hover { text-decoration: underline; }

.ata-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ata-space-2);
}

.ata-footer__legal {
	margin-top: var(--ata-space-8);
	padding-top: var(--ata-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--ata-text-sm);
}

.ata-footer__legal p { margin: 0; color: var(--ata-indigo-300); }

/* -------------------------------------------------------------------- Page */

.ata-page { padding-block: var(--ata-space-12); }
.ata-page--narrow { max-width: 720px; }

.ata-prose h2 { font-size: var(--ata-text-xl); margin-top: var(--ata-space-8); }
.ata-prose h3 { font-size: var(--ata-text-lg); margin-top: var(--ata-space-6); }
.ata-prose ul, .ata-prose ol { max-width: var(--ata-measure); padding-left: var(--ata-space-6); }
.ata-prose li { margin-bottom: var(--ata-space-2); }

.ata-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ata-space-3);
	max-width: 420px;
}

.ata-linklist a {
	display: block;
	padding: var(--ata-space-4);
	background: var(--ata-white);
	border: 1px solid var(--ata-line);
	border-radius: var(--ata-radius-card);
	text-decoration: none;
	font-weight: 600;
}

.ata-linklist a:hover { border-color: var(--ata-indigo-600); }

body.ata-nav-open { overflow: hidden; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ================================================== Phase 2-4 components */

.ata-section { padding-block: var(--ata-space-16); }

.ata-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ata-space-4);
	margin-bottom: var(--ata-space-8);
}

.ata-section__header h2 { margin: 0; }

.ata-page-header { margin-bottom: var(--ata-space-8); }
.ata-page-header__lede { font-size: var(--ata-text-lg); color: var(--ata-slate-500); }

.ata-grid-2, .ata-grid-3 { display: grid; gap: var(--ata-space-4); }

@media (min-width: 768px) {
	.ata-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.ata-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Hero: the intake panel carries concrete facts, which is what makes this
   read as an institution rather than a landing page template. */

.ata-hero {
	background: var(--ata-indigo-900);
	color: var(--ata-white);
	padding-block: var(--ata-space-16) var(--ata-space-24);
}

.ata-hero__inner { display: grid; gap: var(--ata-space-12); align-items: start; }

@media (min-width: 900px) {
	.ata-hero__inner { grid-template-columns: 1.6fr 1fr; gap: var(--ata-space-16); }
}

.ata-hero__title {
	color: var(--ata-white);
	font-size: var(--ata-text-4xl);
	max-width: 18ch;
	margin-bottom: var(--ata-space-6);
}

.ata-hero__lede {
	color: var(--ata-indigo-300);
	font-size: var(--ata-text-lg);
	max-width: 52ch;
	margin-bottom: var(--ata-space-8);
}

.ata-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ata-space-3); }

.ata-intake-panel {
	background: var(--ata-white);
	color: var(--ata-ink);
	border-radius: var(--ata-radius-card);
	padding: var(--ata-space-6);
	border-top: 4px solid var(--ata-brass-500);
}

.ata-intake-panel__eyebrow {
	margin: 0 0 var(--ata-space-1);
	font-size: var(--ata-text-sm);
	font-weight: 600;
	color: var(--ata-slate-500);
}

.ata-intake-panel__name {
	font-family: var(--ata-font-display);
	font-size: var(--ata-text-xl);
	font-weight: 700;
	margin: 0 0 var(--ata-space-1);
}

.ata-intake-panel__date { color: var(--ata-slate-500); margin-bottom: var(--ata-space-6); }

.ata-intake-panel__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ata-space-4);
	margin: 0 0 var(--ata-space-4);
	padding-top: var(--ata-space-4);
	border-top: 1px solid var(--ata-line);
}

.ata-intake-panel__stats dt { font-size: var(--ata-text-sm); color: var(--ata-slate-500); }

.ata-intake-panel__stats dd {
	margin: 0;
	font-family: var(--ata-font-display);
	font-size: var(--ata-text-2xl);
	font-weight: 700;
	line-height: 1;
}

.ata-intake-panel__note { font-size: var(--ata-text-sm); color: var(--ata-slate-500); margin: 0; }

/* Programme cards */

.ata-programme-grid {
	display: grid;
	gap: var(--ata-space-6);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.ata-programme-card {
	display: flex;
	flex-direction: column;
	background: var(--ata-white);
	border: 1px solid var(--ata-line);
	border-radius: var(--ata-radius-card);
	overflow: hidden;
}

.ata-programme-card__media img { display: block; width: 100%; height: 180px; object-fit: cover; }

.ata-programme-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ata-space-3);
	padding: var(--ata-space-6);
	flex: 1;
}

.ata-programme-card__title { font-size: var(--ata-text-lg); margin: 0; }
.ata-programme-card__title a { color: inherit; text-decoration: none; }
.ata-programme-card__title a:hover { color: var(--ata-indigo-600); }
.ata-programme-card__excerpt { color: var(--ata-slate-500); margin: 0; flex: 1; }

.ata-programme-card__meta {
	display: grid;
	gap: var(--ata-space-2);
	margin: 0;
	padding-top: var(--ata-space-3);
	border-top: 1px solid var(--ata-line);
	font-size: var(--ata-text-sm);
}

.ata-programme-card__meta div { display: flex; justify-content: space-between; gap: var(--ata-space-3); }
.ata-programme-card__meta dt { color: var(--ata-slate-500); }
.ata-programme-card__meta dd { margin: 0; font-weight: 600; }

.ata-programme-card__actions { display: flex; gap: var(--ata-space-2); }

/* Filter chips */

.ata-filters-bar { display: flex; flex-wrap: wrap; gap: var(--ata-space-2); margin-bottom: var(--ata-space-8); }

.ata-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--ata-space-4);
	border: 1px solid var(--ata-line);
	border-radius: var(--ata-radius-pill);
	background: var(--ata-white);
	color: var(--ata-ink);
	text-decoration: none;
	font-size: var(--ata-text-sm);
	font-weight: 500;
}

.ata-chip.is-active { background: var(--ata-indigo-900); border-color: var(--ata-indigo-900); color: var(--ata-white); }

/* Programme detail */

.ata-programme { padding-block: var(--ata-space-12); }
.ata-programme__header { margin-bottom: var(--ata-space-8); }
.ata-programme__header h1 { margin-top: var(--ata-space-3); }
.ata-programme__lede { font-size: var(--ata-text-lg); color: var(--ata-slate-500); }

.ata-programme__layout { display: grid; gap: var(--ata-space-8); }

@media (min-width: 900px) {
	.ata-programme__layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ata-space-12); }
	.ata-programme__side { position: sticky; top: 88px; align-self: start; }
}

.ata-programme__media img { border-radius: var(--ata-radius-card); width: 100%; height: auto; }
.ata-programme__facts dl { display: grid; gap: var(--ata-space-3); margin: 0 0 var(--ata-space-6); }
.ata-programme__facts dt { font-size: var(--ata-text-sm); color: var(--ata-slate-500); }
.ata-programme__facts dd { margin: 0 0 var(--ata-space-2); font-weight: 600; }
.ata-programme__note { font-size: var(--ata-text-sm); color: var(--ata-slate-500); margin-top: var(--ata-space-3); }

.ata-button--block { width: 100%; }

/* Steps */

.ata-steps { display: grid; gap: var(--ata-space-4); padding-left: var(--ata-space-6); max-width: var(--ata-measure); }
.ata-steps--numbered { counter-reset: ata-step; list-style: none; padding-left: 0; gap: var(--ata-space-6); }

.ata-steps--numbered li {
	position: relative;
	padding-left: var(--ata-space-12);
	counter-increment: ata-step;
}

.ata-steps--numbered li::before {
	content: counter(ata-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ata-indigo-100);
	color: var(--ata-indigo-700);
	font-family: var(--ata-font-display);
	font-weight: 700;
}

.ata-steps--numbered h3 { font-size: var(--ata-text-lg); margin-bottom: var(--ata-space-1); }
.ata-steps--numbered p { margin: 0; color: var(--ata-slate-500); }

.ata-testimonial cite { display: block; margin-top: var(--ata-space-3); font-style: normal; font-weight: 600; }

/* Application form */

.ata-apply { max-width: 760px; padding-block: var(--ata-space-12) var(--ata-space-24); }
.ata-apply__header { margin-bottom: var(--ata-space-8); }
.ata-apply__lede { font-size: var(--ata-text-lg); color: var(--ata-slate-500); }

.ata-fieldset {
	border: 1px solid var(--ata-line);
	border-radius: var(--ata-radius-card);
	background: var(--ata-white);
	padding: var(--ata-space-6);
	margin: 0 0 var(--ata-space-6);
}

.ata-fieldset legend {
	padding-inline: var(--ata-space-2);
	font-family: var(--ata-font-display);
	font-weight: 700;
	font-size: var(--ata-text-lg);
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.ata-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ata-confirm { max-width: 640px; }
.ata-confirm__eyebrow { color: var(--ata-success); font-weight: 600; margin-bottom: var(--ata-space-2); }
.ata-confirm__lede { font-size: var(--ata-text-lg); color: var(--ata-slate-500); }

.ata-confirm__reference {
	display: flex;
	flex-direction: column;
	gap: var(--ata-space-1);
	padding: var(--ata-space-6);
	margin: var(--ata-space-6) 0 var(--ata-space-8);
	background: var(--ata-indigo-100);
	border-radius: var(--ata-radius-card);
}

.ata-confirm__label { font-size: var(--ata-text-sm); color: var(--ata-slate-500); }

.ata-confirm__reference strong {
	font-size: var(--ata-text-xl);
	cursor: pointer;
	letter-spacing: 0.02em;
}