/* ---------- Base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--auiii-font);
	color: var(--auiii-text);
	background: var(--auiii-page);
	line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--auiii-navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--auiii-navy); margin: 0 0 var(--auiii-sp-4); }
h1 { font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 var(--auiii-sp-4); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--auiii-container); margin: 0 auto; padding: 0 var(--auiii-sp-6); }
.section { padding: var(--auiii-sp-16) 0; }
.section--tint { background: var(--auiii-surface); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--auiii-sp-4); margin-bottom: var(--auiii-sp-8); flex-wrap: wrap; }
.grid { display: grid; gap: var(--auiii-sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ---------- Buttons (pill) ---------- */
.btn {
	display: inline-flex; align-items: center; gap: var(--auiii-sp-2);
	padding: 0.65rem 1.4rem; border-radius: var(--auiii-radius-pill);
	font-weight: 600; font-size: 0.95rem; line-height: 1; cursor: pointer;
	border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s;
	text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--auiii-navy); color: #fff; border-color: var(--auiii-navy); }
.btn--primary:hover { background: var(--auiii-navy-700); color: #fff; }
.btn--secondary { background: #fff; color: var(--auiii-navy); border-color: var(--auiii-navy); }
.btn--secondary:hover { background: var(--auiii-navy); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost:hover { background: #fff; color: var(--auiii-navy); }

/* ---------- Chips / tags ---------- */
.chip {
	display: inline-block; padding: 0.25rem 0.7rem; border-radius: var(--auiii-radius-sm);
	font-size: 0.78rem; font-weight: 600; background: rgba(72,144,120,.14); color: var(--auiii-teal);
}
.chip--blue { background: rgba(96,144,192,.16); color: var(--auiii-blue); }
.chip--navy { background: rgba(0,48,73,.1); color: var(--auiii-navy); }

/* ---------- Cards ---------- */
.card {
	background: var(--auiii-surface); border: 1px solid var(--auiii-border);
	border-radius: var(--auiii-radius); overflow: hidden; display: flex; flex-direction: column;
	box-shadow: var(--auiii-shadow-sm); transition: box-shadow .18s, transform .18s;
}
.card:hover { box-shadow: var(--auiii-shadow); transform: translateY(-2px); }
.card__media { aspect-ratio: 16 / 10; background: var(--auiii-page); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--auiii-sp-4); display: flex; flex-direction: column; gap: var(--auiii-sp-2); flex: 1; }
.card__title { font-size: 1.05rem; font-weight: 700; color: var(--auiii-navy); margin: 0; }
.card__meta { font-size: 0.82rem; color: var(--auiii-muted); }

/* ---------- Utilities ---------- */
.text-muted { color: var(--auiii-muted); }
.link-more { font-weight: 600; color: var(--auiii-teal); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- Generic page / entry content (page.php) ---------- */
.entry-content { max-width: 820px; }
.entry-content:has(.grid) { max-width: none; }
.entry-content h2 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); margin-top: var(--auiii-sp-12); }
.entry-content h2:first-child { margin-top: 0; }
.entry-content h3 { margin-top: var(--auiii-sp-8); }
.entry-content p { line-height: 1.7; }
.entry-content ul, .entry-content ol { margin: 0 0 var(--auiii-sp-4); padding-left: 1.4em; line-height: 1.7; }
.entry-content li { margin-bottom: var(--auiii-sp-2); }
.entry-content a { color: var(--auiii-teal); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--auiii-navy); }
.entry-content img { border-radius: var(--auiii-radius); }
.entry-content blockquote { margin: var(--auiii-sp-6) 0; padding: var(--auiii-sp-4) var(--auiii-sp-6); border-left: 3px solid var(--auiii-teal); background: var(--auiii-surface); color: var(--auiii-muted); }
.entry-content .grid { margin-top: var(--auiii-sp-6); }

/* ---------- Stat tiles (facts rows, e.g. About page) ---------- */
.stat-tile {
	background: var(--auiii-surface); border: 1px solid var(--auiii-border);
	border-radius: var(--auiii-radius); padding: var(--auiii-sp-6);
	text-align: center;
}
.stat-tile__number { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--auiii-navy); line-height: 1.1; margin-bottom: var(--auiii-sp-2); }
.stat-tile__label { display: block; font-size: 0.92rem; color: var(--auiii-muted); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { background: var(--auiii-surface); border-bottom: 1px solid var(--auiii-border); font-size: 0.85rem; }
.breadcrumbs .container { padding-top: var(--auiii-sp-3); padding-bottom: var(--auiii-sp-3); color: var(--auiii-muted); }
.breadcrumbs a { color: var(--auiii-muted); }
.breadcrumbs a:hover { color: var(--auiii-navy); }
.breadcrumbs [aria-current="page"] { color: var(--auiii-navy); font-weight: 600; }
.breadcrumbs__sep { color: var(--auiii-border); }
/* Guarantee comfortable breathing room between the breadcrumb bar and the
   first content below it (chips/title on single-program, single-news,
   single-activity, and the page templates all share this exact markup
   shape: <nav class="breadcrumbs"> immediately followed by <main
   class="site-main"><div class="container section">). The generic
   ".section" rule below carries a much larger top/bottom rhythm meant for
   homepage sections, so give this specific pairing its own smaller,
   deliberate top gap instead of stacking on top of it. Applies at every
   breakpoint (desktop + mobile) since the gap should stay comfortable,
   not excessive, everywhere. */
.breadcrumbs + .site-main > .container.section {
	padding-top: var(--auiii-sp-8);
}
.card__media-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,48,73,.08), rgba(96,144,192,.14)); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; }
.utility-bar { background: var(--auiii-navy); color: #fff; font-size: 0.82rem; }
.utility-bar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: var(--auiii-sp-4); }
/* gap is sp-3 (not sp-4) so all 7 quick links sit on one line from 820px up;
   nowrap keeps a squeezed label from breaking mid-name into two lines */
.utility-menu__list { list-style: none; display: flex; gap: var(--auiii-sp-3); margin: 0; padding: 0; white-space: nowrap; }
.utility-menu__list a { color: rgba(255,255,255,.85); }
.utility-menu__list a:hover { color: #fff; }
.utility-bar__login { padding: 0.3rem 1rem; font-size: 0.8rem; background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.utility-bar__login:hover { background: #fff; color: var(--auiii-navy); }
/* Narrow screens: hide utility quick-links (still in the footer's Explore column
   and the homepage Quick Links cards) so the bar doesn't overflow. The cutoff is
   820px, not the old 700px: the 7-item list needs ~812px of viewport to stay on
   one line, so at 700-820px (e.g. iPad portrait at 768px) it would wrap into a
   ragged two-line bar. Keep this in sync if quick links are added/removed. */
@media (max-width: 820px) {
	.utility-menu { display: none; }
	.utility-bar__inner { justify-content: flex-end; }
}

.main-bar { background: var(--auiii-surface); border-bottom: 1px solid var(--auiii-border); }
.main-bar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: var(--auiii-sp-6); }
.site-brand img, .custom-logo { max-height: 52px; width: auto; }
.site-brand__text { font-weight: 800; font-size: 1.2rem; color: var(--auiii-navy); }

.primary-nav__list { list-style: none; display: flex; gap: var(--auiii-sp-6); margin: 0; padding: 0; align-items: center; }
.primary-nav__list a { color: var(--auiii-text); font-weight: 600; padding: 0.5rem 0; }
.primary-nav__list a:hover, .primary-nav__list .current-menu-item > a { color: var(--auiii-navy); }
.primary-nav__list .sub-menu { list-style: none; margin: 0; padding: var(--auiii-sp-2); position: absolute; background: #fff; border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius-sm); box-shadow: var(--auiii-shadow); min-width: 240px; display: none; z-index: 10; }
.primary-nav__list .menu-item-has-children { position: relative; }
/* Desktop only: pointer hover / keyboard focus reveals the dropdown. On mobile
   (<=980px) submenus are driven solely by the ".is-expanded" class from nav.js
   — leaving :hover/:focus-within active there would keep a submenu stuck open
   after a tap (the link retains :focus), making the collapse tap unresponsive. */
@media (min-width: 981px) {
	.primary-nav__list .menu-item-has-children:hover > .sub-menu,
	.primary-nav__list .menu-item-has-children:focus-within > .sub-menu { display: block; }
}
.primary-nav__list .sub-menu a { display: block; padding: 0.5rem 0.7rem; font-weight: 500; }
/* Programs mega-menu: a bespoke panel rendered directly in header.php
   (see auiii_render_programs_mega() in inc/template-helpers.php) — real DOM
   structure (two <div> columns, a real <h4> heading each) instead of
   generated content + nth-child placement. The panel keeps the shared
   ".sub-menu" class so it reuses the existing mobile show/hide plumbing
   (".is-expanded" toggling from nav.js) and the base absolute-position /
   card styles already defined above for every dropdown; only the
   desktop (>=981px) layout is customized here. */
.mega-panel__col { min-width: 0; }
.mega-panel__heading {
	margin: 0 0 var(--auiii-sp-3);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--auiii-muted);
}
.mega-panel__grid,
.mega-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mega-panel__list { display: flex; flex-direction: column; gap: var(--auiii-sp-1); }
.mega-panel a {
	display: block;
	padding: 0.55rem 0.7rem;
	border-radius: var(--auiii-radius-sm);
	font-weight: 500;
	color: var(--auiii-text);
}
.mega-panel a:hover {
	background: rgba(0, 48, 73, .06);
	text-decoration: none;
}
/* Double Degree: emphasized accent link (teal dot + bold teal text) */
.mega-panel__list .mega-dd > a {
	color: var(--auiii-teal);
	font-weight: 700;
}
.mega-panel__list .mega-dd > a::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--auiii-teal);
	margin-right: 0.55em;
	vertical-align: middle;
}
.mega-panel__list .mega-dd > a:hover {
	background: rgba(72, 144, 120, .12);
}
@media (min-width: 981px) {
	.primary-nav__list .menu-mega:hover > .sub-menu.mega-panel,
	.primary-nav__list .menu-mega:focus-within > .sub-menu.mega-panel {
		display: flex;
		align-items: flex-start;
		gap: var(--auiii-sp-8);
		right: 0; left: auto;
		min-width: 620px;
		padding: var(--auiii-sp-6);
	}
	.mega-panel__col--faculties { flex: 1 1 auto; }
	.mega-panel__col--faculties .mega-panel__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(190px, 1fr));
		column-gap: var(--auiii-sp-6);
		row-gap: var(--auiii-sp-1);
	}
	.mega-panel__col--explore {
		flex: 0 0 210px;
		border-left: 1px solid var(--auiii-border);
		padding-left: var(--auiii-sp-6);
	}
}
.primary-nav__list li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em; height: 0.4em;
	margin-left: 0.4em; margin-bottom: 0.15em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s;
}
/* Expanded (mobile, .is-expanded) flips the chevron up at any width. */
.primary-nav__list li.menu-item-has-children.is-expanded > a::after {
	transform: rotate(-135deg);
}
/* Desktop-only hover/focus flip — kept out of mobile so a lingering :focus
   doesn't hold the chevron up after a collapse tap (see submenu note above). */
@media (min-width: 981px) {
	.primary-nav__list li.menu-item-has-children:hover > a::after,
	.primary-nav__list li.menu-item-has-children:focus-within > a::after {
		transform: rotate(-135deg);
	}
}

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle__bar {
	width: 24px; height: 2px; background: var(--auiii-navy); display: block;
	transform-origin: center;
	transition: transform .2s ease, opacity .2s ease;
}
/* Hamburger -> X: the toggle button carries ".is-active" (set by nav.js)
   while the mobile menu is open, so it's visually obvious how to close it. */
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
	.nav-toggle { display: flex; }
	.primary-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--auiii-border); display: none; max-height: calc(100vh - 100%); overflow-y: auto; }
	.primary-nav.is-open { display: block; }
	.main-bar { position: relative; }
	.primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--auiii-sp-2) var(--auiii-sp-6) var(--auiii-sp-4); }
	/* Top-level items: comfortable tap targets + hairline dividers so the
	   stacked links read as a clear list instead of a cramped block. */
	.primary-nav__list > li { border-top: 1px solid var(--auiii-border); }
	.primary-nav__list > li:first-child { border-top: 0; }
	.primary-nav__list > li > a { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; font-size: 1.02rem; }
	.primary-nav__list .sub-menu { position: static; display: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 var(--auiii-sp-3) var(--auiii-sp-4); }
	.primary-nav__list li.menu-item-has-children.is-expanded > .sub-menu { display: block; }
	.primary-nav__list .sub-menu a { padding: 0.55rem 0; }
	/* chevron sits at the row's right edge via flex (no fragile float) */
	.primary-nav__list li.menu-item-has-children > a::after { float: none; margin-left: auto; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--auiii-navy); color: rgba(255,255,255,.82); margin-top: var(--auiii-sp-16); }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--auiii-sp-8); }
/* Footer vertical padding lives on a higher-specificity selector (.site-footer
   .site-footer__grid = 0,2,0) so the responsive `.container { padding: 0 20px }`
   shorthand (mobile, <=700px) can't reset padding-top/bottom to 0 — that zeroing
   is why the mobile footer hugged "UIII Academic" against the top edge. Kept off
   the base .site-footer__grid rule so the responsive grid-template-columns
   overrides (0,1,0) still win for column layout. */
.site-footer .site-footer__grid { padding-top: var(--auiii-sp-16); padding-bottom: var(--auiii-sp-12); }
.site-footer__logo { font-weight: 800; font-size: 1.15rem; color: #fff; margin-bottom: var(--auiii-sp-4); }
.site-footer__addr, .site-footer__contact { font-size: 0.9rem; line-height: 1.7; }
.site-footer__title { color: #fff; font-size: 1rem; margin-bottom: var(--auiii-sp-4); }
.site-footer__links, .site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--auiii-sp-2); font-size: 0.9rem; }
.site-footer__bar { border-top: 1px solid rgba(255,255,255,.12); font-size: 0.82rem; }
.site-footer__bar .container { padding-top: var(--auiii-sp-4); padding-bottom: var(--auiii-sp-4); }
@media (max-width: 960px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
	/* Single column, but structured: hairline dividers + even rhythm between
	   the stacked sections so the footer reads as tidy groups, not one long run. */
	.site-footer__grid { grid-template-columns: 1fr; gap: 0; }
	.site-footer__col + .site-footer__col {
		border-top: 1px solid rgba(255, 255, 255, .14);
		margin-top: var(--auiii-sp-6);
		padding-top: var(--auiii-sp-6);
	}
}

/* ---------- Hero slider ---------- */
.hero-slider { position: relative; overflow: hidden; background: var(--auiii-navy); }
.hero-slider__track { position: relative; min-height: clamp(460px, 62vh, 640px); }
.hero-slide {
	position: absolute; inset: 0; opacity: 0; pointer-events: none;
	transition: opacity .7s ease;
	background-size: cover; background-position: center;
	display: flex; align-items: center;
	min-height: clamp(460px, 62vh, 640px);
}
.hero-slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.hero-slide__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(0,48,73,.88) 0%, rgba(0,48,73,.62) 45%, rgba(0,48,73,.18) 100%),
		linear-gradient(0deg, rgba(0,32,49,.55) 0%, rgba(0,32,49,0) 35%);
}
.hero-slide--default { background: linear-gradient(120deg, var(--auiii-navy), var(--auiii-blue)); position: relative; opacity: 1; }
.hero-slide--default .hero-slide__scrim { display: none; }
.hero-slide__inner { position: relative; z-index: 2; color: #fff; max-width: 640px; padding: var(--auiii-sp-16) var(--auiii-sp-6); }
.hero-slide__eyebrow {
	margin: 0 0 var(--auiii-sp-3); text-transform: uppercase; letter-spacing: .12em;
	font-size: .78rem; font-weight: 700; color: #9fd7c1;
}
.hero-slide__title { color: #fff; margin-bottom: var(--auiii-sp-4); font-size: clamp(1.9rem, 3.6vw, 3rem); }
.hero-slide__sub { font-size: 1.1rem; color: rgba(255,255,255,.9); margin-bottom: var(--auiii-sp-6); max-width: 560px; }
.hero-slide__cta { background: #fff; color: var(--auiii-navy); border-color: #fff; }
.hero-slide__cta:hover { background: var(--auiii-teal); color: #fff; border-color: var(--auiii-teal); }
.hero-slider__dots { position: absolute; bottom: var(--auiii-sp-6); left: 50%; transform: translateX(-50%); display: flex; gap: var(--auiii-sp-2); z-index: 3; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.hero-dot.is-active { background: #fff; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(255,255,255,.2); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; }
.hero-arrow--prev { left: var(--auiii-sp-4); } .hero-arrow--next { right: var(--auiii-sp-4); }
.hero-arrow:hover { background: rgba(255,255,255,.35); }
@media (max-width: 600px) {
	.hero-slider__track, .hero-slide { min-height: 420px; }
	.hero-arrow { display: none; }
	.hero-slide__scrim {
		background:
			linear-gradient(90deg, rgba(0,48,73,.92) 0%, rgba(0,48,73,.8) 55%, rgba(0,48,73,.4) 100%),
			linear-gradient(0deg, rgba(0,32,49,.6) 0%, rgba(0,32,49,0) 45%);
	}
	.hero-slide__inner { padding-top: var(--auiii-sp-12); padding-bottom: var(--auiii-sp-12); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: none; }
}

/* ---------- Schedule preview table ---------- */
.schedule-preview { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius); overflow: hidden; }
.schedule-preview td { padding: var(--auiii-sp-3) var(--auiii-sp-4); border-bottom: 1px solid var(--auiii-border); }
.schedule-preview tr:last-child td { border-bottom: 0; }
.schedule-preview__date { white-space: nowrap; font-weight: 600; color: var(--auiii-teal); width: 160px; }
.card-news, .card-service { text-decoration: none; }
.card-news:hover, .card-service:hover { text-decoration: none; }

/* ---------- Tabs ---------- */
.tabs__nav { display: flex; gap: var(--auiii-sp-2); flex-wrap: wrap; margin-bottom: var(--auiii-sp-8); border-bottom: 1px solid var(--auiii-border); }
.tabs__btn { background: none; border: 0; border-bottom: 3px solid transparent; padding: var(--auiii-sp-3) var(--auiii-sp-4); font-weight: 600; color: var(--auiii-muted); cursor: pointer; font-size: 1rem; }
.tabs__btn.is-active { color: var(--auiii-navy); border-bottom-color: var(--auiii-teal); }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }

/* ---------- Program card ---------- */
.card-program__top { display: flex; gap: var(--auiii-sp-2); flex-wrap: wrap; margin-bottom: var(--auiii-sp-1); }

/* ---------- Admissions CTA ---------- */
.admissions-cta { background: linear-gradient(120deg, var(--auiii-navy), var(--auiii-teal)); color: #fff; }
.admissions-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--auiii-sp-8); flex-wrap: wrap; }
.admissions-cta__title { color: #fff; margin: 0 0 var(--auiii-sp-2); }
.admissions-cta__sub { color: rgba(255,255,255,.9); margin: 0; max-width: 640px; }

/* ---------- Activity / quicklink cards ---------- */
.card-activity, .card-quicklink { text-decoration: none; }
.card-activity:hover, .card-quicklink:hover { text-decoration: none; }

/* ---------- Archives / singles ---------- */
.search-form { display: flex; gap: var(--auiii-sp-2); }
.search-form input[type="search"] { padding: 0.55rem 0.9rem; border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius-pill); min-width: 220px; }
.pagination { display: flex; justify-content: center; gap: var(--auiii-sp-2); margin-top: var(--auiii-sp-12); }
.pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 0.6rem; border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius-sm); color: var(--auiii-navy); }
.pagination .page-numbers.current { background: var(--auiii-navy); color: #fff; border-color: var(--auiii-navy); }
.single-news__header { margin-bottom: var(--auiii-sp-6); }
.single-news__date { color: var(--auiii-muted); }
.single-news__media { border-radius: var(--auiii-radius); overflow: hidden; margin-bottom: var(--auiii-sp-6); }
.single-news__content { max-width: 760px; }
.entry-content img { border-radius: var(--auiii-radius-sm); }

/* ---------- Program directory ---------- */
.directory-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--auiii-sp-8); align-items: start; }
.directory-filters { background: #fff; border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius); padding: var(--auiii-sp-6); position: sticky; top: 120px; }
.filter-group { margin-bottom: var(--auiii-sp-4); display: flex; flex-direction: column; gap: var(--auiii-sp-2); }
.filter-group label { font-weight: 600; font-size: 0.85rem; }
.filter-group select { padding: 0.5rem 0.7rem; border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius-sm); }
.single-program__layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--auiii-sp-8); align-items: start; }
.single-program__aside { background: #fff; border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius); padding: var(--auiii-sp-6); position: sticky; top: 120px; }
.meta-table { width: 100%; border-collapse: collapse; margin-bottom: var(--auiii-sp-4); }
.meta-table th { text-align: left; color: var(--auiii-muted); font-weight: 600; padding: var(--auiii-sp-2) 0; width: 40%; vertical-align: top; }
.meta-table td { padding: var(--auiii-sp-2) 0; }
.single-program__fac { color: var(--auiii-teal); font-weight: 600; }
.single-program__fac a { color: inherit; }
.single-program__fac a:hover { text-decoration: underline; }
@media (max-width: 960px) { .directory-layout, .single-program__layout { grid-template-columns: 1fr; } .directory-filters, .single-program__aside { position: static; } }

/* ---------- Program content sections (single-uiii_program) ---------- */
.single-program__section { margin-bottom: var(--auiii-sp-12); }
.single-program__section:last-child { margin-bottom: 0; }
.single-program__section h2 { font-size: 1.3rem; margin-bottom: var(--auiii-sp-4); padding-bottom: var(--auiii-sp-2); border-bottom: 1px solid var(--auiii-border); }
.single-program__section p { color: var(--auiii-text); line-height: 1.7; }
.single-program__section ul, .single-program__section ol { margin: 0 0 var(--auiii-sp-4); padding-left: 1.4rem; color: var(--auiii-text); line-height: 1.7; }
.single-program__section li { margin-bottom: var(--auiii-sp-2); }
.single-program__aside-title { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--auiii-muted); margin-bottom: var(--auiii-sp-4); }

/* Double Degree callout box within single program */
.single-program__double-degree { background: rgba(72, 144, 120, 0.08); border-left: 4px solid var(--auiii-teal); border-radius: var(--auiii-radius-sm); padding: var(--auiii-sp-6); }
.single-program__double-degree h2 { border-bottom: 0; margin-bottom: var(--auiii-sp-3); color: var(--auiii-teal); }

/* ---------- Double Degree landing page ---------- */
.double-degree__intro { max-width: 760px; margin-bottom: var(--auiii-sp-12); }
.double-degree__partners { margin-bottom: var(--auiii-sp-16); }
.double-degree__partners-row { display: flex; flex-wrap: wrap; gap: var(--auiii-sp-6); margin-top: var(--auiii-sp-6); }
.partner-card { flex: 1 1 240px; background: var(--auiii-surface); border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius); padding: var(--auiii-sp-6); display: flex; flex-direction: column; gap: var(--auiii-sp-2); box-shadow: var(--auiii-shadow-sm); }
.partner-card__name { font-weight: 700; color: var(--auiii-navy); font-size: 1.05rem; }
.partner-card__location { color: var(--auiii-muted); font-size: 0.88rem; }
.double-degree__programs h2 { margin-bottom: var(--auiii-sp-6); }

/* ---------- Calendar table ---------- */
.calendar-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius); overflow: hidden; }
.calendar-table th, .calendar-table td { padding: var(--auiii-sp-3) var(--auiii-sp-4); text-align: left; border-bottom: 1px solid var(--auiii-border); }
.calendar-table thead th { background: var(--auiii-navy); color: #fff; font-weight: 600; }
.calendar-table tr:last-child td { border-bottom: 0; }
.calendar-table__date { white-space: nowrap; font-weight: 600; color: var(--auiii-teal); width: 240px; }
.calendar-table__no { width: 56px; color: var(--auiii-muted); text-align: left; }
.calendar-table thead th.calendar-table__no { color: #fff; }
.calendar-table__note { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--auiii-muted); }
.page-calendar__intro { max-width: 760px; margin-bottom: var(--auiii-sp-8); }

/* ---------- Academic Regulations (chaptered accordion) ---------- */
.regulations-header { max-width: 820px; margin-bottom: var(--auiii-sp-10); }
.regulations-header__intro { color: var(--auiii-muted); }
.regulations-header__meta {
	margin: var(--auiii-sp-4) 0 0;
	font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
	color: var(--auiii-teal);
}
.regulations-accordion {
	max-width: 900px; border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius);
	overflow: hidden; background: var(--auiii-surface); box-shadow: var(--auiii-shadow-sm);
}
.regulations-accordion__item { border-bottom: 1px solid var(--auiii-border); }
.regulations-accordion__item:last-child { border-bottom: 0; }
.regulations-accordion__summary {
	list-style: none; cursor: pointer; user-select: none;
	display: flex; align-items: center; justify-content: space-between; gap: var(--auiii-sp-4);
	padding: var(--auiii-sp-5) var(--auiii-sp-6);
	font-weight: 700; color: var(--auiii-navy); font-size: 1.02rem; line-height: 1.35;
	transition: background .15s;
}
.regulations-accordion__summary::-webkit-details-marker { display: none; }
.regulations-accordion__summary::marker { content: ""; }
.regulations-accordion__summary:hover { background: var(--auiii-page); }
.regulations-accordion__summary::after {
	content: "+";
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.6rem; height: 1.6rem; border-radius: var(--auiii-radius-pill);
	background: var(--auiii-page); color: var(--auiii-navy);
	font-size: 1.1rem; line-height: 1; font-weight: 600;
	transition: transform .18s ease, background .18s ease;
}
.regulations-accordion__item[open] > .regulations-accordion__summary::after {
	transform: rotate(45deg);
	background: var(--auiii-navy); color: #fff;
}
.regulations-accordion__panel {
	padding: var(--auiii-sp-5) var(--auiii-sp-6) var(--auiii-sp-6);
	border-top: 1px solid var(--auiii-border);
	color: var(--auiii-text); line-height: 1.7;
}
.regulations-accordion__panel p { margin: 0 0 var(--auiii-sp-3); }
.regulations-accordion__panel p:last-child { margin-bottom: 0; }
.regulations-accordion__list,
.regulations-accordion__panel ul,
.regulations-accordion__panel ol { margin: 0 0 var(--auiii-sp-3); padding-left: 1.25rem; }
.regulations-accordion__list li,
.regulations-accordion__panel ul li,
.regulations-accordion__panel ol li { margin-bottom: var(--auiii-sp-2); }
.regulations-accordion__list:last-child,
.regulations-accordion__panel ul:last-child,
.regulations-accordion__panel ol:last-child { margin-bottom: 0; }

/* ---------- Contact page (template-contact.php) ---------- */
.page-contact__intro { max-width: 640px; color: var(--auiii-muted); font-size: 1.05rem; }
.page-contact__cards { margin-bottom: var(--auiii-sp-12); }
.contact-card .card__title { margin-bottom: var(--auiii-sp-2); }
.contact-card .card__meta { font-size: 0.98rem; line-height: 1.5; }
.contact-card .card__meta a { color: var(--auiii-teal); font-weight: 600; }
.contact-card .card__meta a:hover { color: var(--auiii-navy); }
.page-contact__office { margin-bottom: var(--auiii-sp-12); }
.page-contact__office p { line-height: 1.7; }
.page-contact__map { margin-bottom: var(--auiii-sp-12); }
.page-contact__map iframe {
	width: 100%; aspect-ratio: 16 / 7; border: 1px solid var(--auiii-border);
	border-radius: var(--auiii-radius); display: block;
}
.page-contact__social-list {
	list-style: none; margin: var(--auiii-sp-4) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--auiii-sp-3);
}
.page-contact__social-list a {
	display: inline-flex; align-items: center; padding: 0.55rem 1.2rem;
	border: 1px solid var(--auiii-border); border-radius: var(--auiii-radius-pill);
	color: var(--auiii-navy); font-weight: 600; font-size: 0.92rem;
	text-decoration: none; transition: background .15s, color .15s;
}
.page-contact__social-list a:hover { background: var(--auiii-navy); color: #fff; }
.page-contact__body { margin-top: var(--auiii-sp-12); }

/* ==========================================================================
   Mobile / tablet spacing polish — additive only, desktop look unchanged.
   ========================================================================== */
@media (max-width: 980px) {
	/* Single-program & directory: once the layout collapses to one column,
	   give the (now-stacked) sidebar/filters card clear separation instead
	   of relying on the row-gap that only reads well side-by-side. */
	.single-program__layout { gap: var(--auiii-sp-8); }
	.single-program__aside { margin-top: var(--auiii-sp-4); }
	.directory-layout { gap: var(--auiii-sp-8); }
	.directory-filters { margin-bottom: var(--auiii-sp-2); }
}

@media (max-width: 700px) {
	/* Comfortable horizontal gutter so content never touches the edge */
	.container { padding: 0 20px; }

	/* More generous vertical rhythm between headings, stacked cards, and
	   section heads once columns collapse to one on small screens */
	.section__head { margin-bottom: var(--auiii-sp-6); }
	h1 { margin-bottom: var(--auiii-sp-5); }
	h2 { margin-bottom: var(--auiii-sp-5); }
	.grid { gap: var(--auiii-sp-8); }
	.card__body { padding: var(--auiii-sp-6); }

	/* Single-program page: clear gaps between Overview / Why Choose / Course
	   Details / Entry Requirements, header-to-content, and the sidebar card */
	.single-program__header { margin-bottom: var(--auiii-sp-6); }
	.single-program__section { margin-bottom: var(--auiii-sp-12); }
	.single-program__aside { margin-top: var(--auiii-sp-8); padding: var(--auiii-sp-8) var(--auiii-sp-6); }

	/* Program directory: filters card gets breathing room above the results */
	.directory-filters { padding: var(--auiii-sp-6); margin-bottom: var(--auiii-sp-4); }

	/* Double Degree: partner cards take the full row instead of a cramped
	   fixed min-basis that leaves ragged, tight edges on narrow screens */
	.double-degree__intro { margin-bottom: var(--auiii-sp-8); }
	.double-degree__partners { margin-bottom: var(--auiii-sp-8); }
	.double-degree__partners-row { gap: var(--auiii-sp-4); }
	.partner-card { flex: 1 1 100%; }

	/* Calendar / schedule tables: scroll horizontally inside their own box
	   rather than overflowing the page, with slimmer fixed date columns */
	.calendar-table, .schedule-preview { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.calendar-table__date { width: 160px; }
	.calendar-table__no { width: 40px; }
	.schedule-preview__date { width: 120px; }

	/* Academic Regulations accordion: comfortable padding on small screens */
	.regulations-accordion__summary { padding: var(--auiii-sp-4) var(--auiii-sp-4); font-size: 0.98rem; }
	.regulations-accordion__panel { padding: var(--auiii-sp-4) var(--auiii-sp-4) var(--auiii-sp-4); }
}