/*
 * Career Gateway grid — filter buttons, message boxes, tiles.
 * Loaded only on the Career Gateway template (inc/load_scripts.php).
 *
 * Tiles follow the Faculty Hub look: solid navy, centred light text,
 * inverted on hover. Sizes in px on purpose (the parent's root font size is
 * 10px). Everything is scoped under .gw so the parent's .content rules
 * (list bullets, paragraph margins, h2 line-height) do not leak in.
 */

.gw {
	--gw-navy: #17436b;
	--gw-navy-text: #ebf6ff;
	--gw-blue: #0055b7;
	--gw-ink: #1f2d3d;
	--gw-muted: #51606f;
	--gw-tint: #eef3f9;
	--gw-gap: 16px;

	container-type: inline-size;
	clear: both;
	margin: 0 0 16px;
}

/* Space above only when something comes before the grid (page text, a header image). */
* + .gw {
	margin-top: 32px;
}

/* Screen-reader-only text. The parent's .screen-reader-text is display:none,
   which hides it from screen readers too, so this theme has its own. */
.gw .gw-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -- Filter buttons: space kept but hidden until the script is running ------ */

.gw .gw-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	visibility: hidden;
}

.gw.gw-ready .gw-filters {
	visibility: visible;
}

.gw .gw-filters-label {
	margin-right: 4px;
	font-size: 14px;
	color: var(--gw-muted);
}

.gw .gw-filter {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 9px 18px;
	border: 1px solid var(--gw-navy);
	border-radius: 0;
	background: #fff;
	color: var(--gw-navy);
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.gw .gw-filter:hover {
	background: var(--gw-tint);
}

.gw .gw-filter[aria-pressed="true"] {
	background: var(--gw-navy);
	color: #fff;
}

.gw .gw-filter:focus-visible {
	outline: 3px solid var(--gw-blue);
	outline-offset: 2px;
}

/* Phones: label on its own line, the buttons together under it. */
@container (max-width: 479px) {
	.gw .gw-filters-label {
		flex-basis: 100%;
		margin: 0;
		text-align: center;
	}

	.gw .gw-filter {
		padding: 8px 12px;
		font-size: 14px;
	}
}

/* -- Grid: flex rows before (and without) the script; Isotope places items after -- */

.gw .gw-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 calc(var(--gw-gap) / -2);
	padding: 0;
}

.gw .gw-item {
	box-sizing: border-box;
	width: 100%;
	padding: calc(var(--gw-gap) / 2);
}

@container (min-width: 540px) {
	.gw .gw-tile {
		width: 50%;
	}
}

@container (min-width: 860px) {
	.gw .gw-tile {
		width: 33.3333%;
	}
}

.gw .gw-card {
	position: relative;
	box-sizing: border-box;
	height: 100%;
}

.gw .gw-title {
	clear: none;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	font-family: "DM Serif Text", Georgia, serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0;
	color: inherit;
	text-wrap: balance;
}

.gw .gw-title a {
	color: inherit;
	text-decoration: none;
}

.gw .gw-ext {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 6px;
	vertical-align: 3px;
	opacity: 0.8;
}

.gw .gw-desc,
.gw .gw-desc p {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: inherit;
}

.gw .gw-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.gw .gw-tags li {
	margin: 0;
	padding: 3px 8px;
	border: 1px solid currentColor;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	list-style: none;
	opacity: 0.85;
}

/* -- Tile ------------------------------------------------------------------- */

.gw .gw-tile .gw-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 180px;
	padding: 32px 24px 28px;
	background: var(--gw-navy);
	color: var(--gw-navy-text);
	text-align: center;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.gw .gw-tile .gw-card:hover,
.gw .gw-tile .gw-card:focus-within {
	background: #fff;
	color: var(--gw-navy);
	box-shadow: inset 0 0 0 2px var(--gw-navy);
}

/* The whole tile is the link: the title link stretches over the card. */
.gw .gw-tile .gw-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.gw .gw-tile .gw-link:focus {
	outline: none;
}

.gw .gw-tile .gw-link:focus-visible::after {
	outline: 3px solid var(--gw-blue);
	outline-offset: 2px;
}

/* "Opens in a new tab" arrow: top-right corner of the tile, never alone on a line. */
.gw .gw-tile .gw-ext {
	position: absolute;
	top: 14px;
	right: 14px;
	margin: 0;
}

.gw .gw-tile .gw-desc {
	max-width: 34ch;
	opacity: 0.92;
	text-align: center !important; /* the parent forces .content p to the left */
	text-wrap: balance;
}

/* -- Message box -------------------------------------------------------------- */

.gw .gw-message .gw-card {
	padding: 20px 24px;
	background: var(--gw-tint);
	border-left: 4px solid var(--gw-blue);
	color: var(--gw-ink);
	text-align: left;
}

.gw .gw-label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gw-blue);
}

.gw .gw-message .gw-title {
	font-family: inherit;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: #002f6e;
}

.gw .gw-message .gw-title a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gw .gw-message .gw-desc p + p {
	margin-top: 8px;
}

.gw .gw-message .gw-tags {
	justify-content: flex-start;
	margin-top: 12px;
}

.gw .gw-message .gw-tags li {
	color: var(--gw-navy);
}

/* -- Logged-in editors ------------------------------------------------------- */

.gw .gw-edit {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 3px 8px;
	font-size: 11px;
	line-height: 1.4;
	background: #fff;
	color: var(--gw-navy);
	text-decoration: none;
}

.gw .gw-tile .gw-card:hover .gw-edit {
	background: var(--gw-navy);
	color: #fff;
}

.gw-empty {
	clear: both;
	padding: 12px 16px;
	background: #fff6c0;
}

@media (prefers-reduced-motion: reduce) {
	.gw .gw-card,
	.gw .gw-filter {
		transition: none;
	}
}