/**
 * Department listing — shared by archive-coe.php (COE Listing 342:19431) and
 * archive-speciality.php (Speciality Listing 333:15940); the two designs share
 * one hero + alternating-row layout. archive-speciality.css @imports this file.
 * Row markup lives in template-parts/dept-row.php.
 */

/* ---- Hero ------------------------------------------------------------ */
.deptlist-hero {
	position: relative;
	background: var(--ne-primary-500);
	background-image: var(--dept-hero-img, none);
	background-size: cover;
	background-position: center;
}
.deptlist-hero::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(14,7,57,0.9) 0%, rgba(14,7,57,0.66) 48%, rgba(23,11,91,0.4) 100%);
}
.deptlist-hero__inner {
	position: relative;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--ne-space-m);
	padding-block: var(--ne-space-5xl);
}
.deptlist-hero__title { margin: 0; color: var(--ne-neutral-100); font-size: var(--ne-h1-size); line-height: 1.08; max-width: 16ch; }
.deptlist-hero__sub { margin: 0; color: var(--ne-neutral-200); font-size: var(--ne-h8-size); line-height: 1.6; max-width: 60ch; }

/* ---- Department rows ------------------------------------------------- */
.deptlist-row { padding-block: var(--ne-space-4xl); }
.deptlist-row--alt { background: var(--ne-secondary-a10); }
.deptlist-row__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ne-space-4xl);
	align-items: center;
}
/* Text left / image right by default; flip on alternate rows. */
.deptlist-row__body { order: 1; }
.deptlist-row__media { order: 2; }
.deptlist-row--alt .deptlist-row__body { order: 2; }
.deptlist-row--alt .deptlist-row__media { order: 1; }

.deptlist-row__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	box-shadow: var(--ne-shadow-deep);
}
.deptlist-row__title { margin: 0 0 var(--ne-space-s); font-size: var(--ne-h4-size); line-height: 1.15; }
.deptlist-row__title a { color: var(--ne-primary-500); text-decoration: none; }
.deptlist-row__title a:hover { color: var(--ne-secondary-400); }
.deptlist-row__text { margin: 0 0 var(--ne-space-l); color: var(--ne-neutral-900); font-size: var(--ne-b1-size); line-height: var(--ne-b1-line); max-width: 46ch; }

@media (max-width: 780px) {
	.deptlist-row__inner { grid-template-columns: 1fr; gap: var(--ne-space-l); }
	/* Image always above text on mobile, regardless of desktop side. */
	.deptlist-row__body, .deptlist-row--alt .deptlist-row__body { order: 2; }
	.deptlist-row__media, .deptlist-row--alt .deptlist-row__media { order: 1; }
	.deptlist-hero__inner { min-height: 300px; padding-block: var(--ne-space-4xl); }
}