/**
 * Layout: Vacancies (location chips or filter list).
 *
 * Rows are ruled, not boxed. Hover = soft purple wash that fades in from the
 * left and the arrow nudges right; nothing moves the layout. Everything is
 * visible without JavaScript (filters and paging are an enhancement).
 *
 * @package GagaMuller
 */

.gm-vacancies__app {
	display: flex;
	flex-direction: column;
	gap: var(--gm-space-24);
}

/* ---- Filters ------------------------------------------------------------ */

.gm-vf {
	display: flex;
	flex-direction: column;
	gap: var(--gm-space-16);
	padding: var(--gm-space-28);
	border-radius: var(--gm-radius-card);
	background: var(--gm-color-surface-subtle);
}

.gm-surface--subtle .gm-vf {
	background: var(--gm-color-white);
}

.gm-vf__title {
	margin: 0;
	font-weight: 600;
}

.gm-vf__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gm-space-12) var(--gm-space-16);
}

@media (min-width: 640px) {
	.gm-vf__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.gm-vf__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gm-vf__field {
	position: relative;
	min-width: 0;
}

@media (min-width: 1024px) {
	.gm-vf__field--wide {
		grid-column: span 1;
	}
}

.gm-vf__control {
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 3.25rem;
	padding: 0 var(--gm-space-20);
	border: 1.5px solid #8c8c99; /* 3.3:1 – WCAG 1.4.11 */
	border-radius: var(--gm-radius-pill);
	background: var(--gm-color-white);
	color: var(--gm-color-black);
	font: inherit;
	appearance: none;
	transition: border-color 200ms var(--gm-ease), box-shadow 200ms var(--gm-ease);
}

.gm-vf__control::placeholder {
	color: #6b6b78;
	opacity: 1;
}

.gm-vf select.gm-vf__control {
	padding-inline-end: 3rem;
	cursor: pointer;
}

.gm-vf .gm-field__select {
	position: relative;
	display: block;
}

.gm-vf .gm-field__select .gm-icon {
	position: absolute;
	inset-block: 0;
	inset-inline-end: var(--gm-space-20);
	margin-block: auto;
	inline-size: 1rem;
	block-size: 1rem;
	color: #6b6b78;
	pointer-events: none;
}

.gm-vf__control:hover {
	border-color: var(--gm-color-purple);
}

.gm-vf__control:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: 2px;
	border-color: var(--gm-color-purple);
}

.gm-vf__reset {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gm-color-purple);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.gm-vf__reset[hidden] {
	display: none;
}

.gm-vf__count {
	margin: 0;
	color: var(--gm-color-text-secondary);
	font-weight: 600;
}

/* ---- Location chips ----------------------------------------------------- */

.gm-vchips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gm-space-8) var(--gm-space-12);
}

.gm-vchips[hidden] {
	display: none;
}

.gm-vchips__label {
	margin-inline-end: var(--gm-space-8);
	font-weight: 600;
}

.gm-chip {
	min-block-size: 2.75rem;
	padding: 0 var(--gm-space-20);
	border: 1.5px solid #8c8c99;
	border-radius: var(--gm-radius-pill);
	background: var(--gm-color-white);
	color: var(--gm-color-black);
	font: inherit;
	cursor: pointer;
	transition: background-color 200ms var(--gm-ease), border-color 200ms var(--gm-ease), color 200ms var(--gm-ease);
}

.gm-chip:hover {
	border-color: var(--gm-color-purple);
	color: var(--gm-color-purple);
}

.gm-chip.is-active {
	border-color: var(--gm-color-purple);
	background: var(--gm-color-purple);
	color: var(--gm-color-white);
}

.gm-chip:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: 2px;
}

/* ---- Rows ---------------------------------------------------------------- */

.gm-vlist {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-end: 1px solid var(--gm-color-grey);
}

.gm-vac {
	border-block-start: 1px solid var(--gm-color-grey);
}

.gm-vac[hidden] {
	display: none;
}

.gm-vac__link {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--gm-space-8) var(--gm-space-20);
	padding: var(--gm-space-24) var(--gm-space-16);
	color: inherit;
	text-decoration: none;
	isolation: isolate;
}

.gm-vac__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--gm-radius-panel);
	background: linear-gradient(90deg, rgb(114 21 244 / 0.09), rgb(114 21 244 / 0));
	opacity: 0;
	transition: opacity 300ms var(--gm-ease);
}

.gm-vac__link:hover::before,
.gm-vac__link:focus-visible::before {
	opacity: 1;
}

.gm-vac__link:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: -2px;
	border-radius: var(--gm-radius-panel);
}

.gm-vac__main,
.gm-vac__side {
	display: flex;
	flex-direction: column;
	gap: var(--gm-space-4);
	min-width: 0;
}

.gm-vac__title {
	font-size: var(--gm-text-h3);
	font-weight: 600;
	line-height: 1.2;
	transition: color 200ms var(--gm-ease);
}

.gm-vac__link:hover .gm-vac__title {
	color: var(--gm-color-purple);
}

.gm-vac__summary,
.gm-vac__meta {
	color: var(--gm-color-text-secondary);
	font-size: var(--gm-text-sm);
}

.gm-vac__tag {
	font-weight: 600;
	font-size: var(--gm-text-sm);
}

.gm-vac__arrow .gm-icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	color: var(--gm-color-purple);
	transition: transform 250ms var(--gm-ease);
}

.gm-vac__link:hover .gm-vac__arrow .gm-icon {
	transform: translate(3px, -3px);
}

@media (min-width: 900px) {
	.gm-vacancies--chips .gm-vac__link {
		grid-template-columns: minmax(0, 1fr) minmax(0, 18rem) auto;
	}

	.gm-vacancies--chips .gm-vac__side {
		text-align: end;
	}
}

@media (max-width: 899px) {
	.gm-vacancies--chips .gm-vac__link {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.gm-vacancies--chips .gm-vac__side {
		grid-column: 1;
		grid-row: 2;
	}

	.gm-vacancies--chips .gm-vac__arrow {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

.gm-vacancies__empty {
	margin: var(--gm-space-24) 0;
	color: var(--gm-color-text-secondary);
}

.gm-vacancies__empty[hidden] {
	display: none;
}

.gm-vacancies__all {
	margin: 0;
	text-align: end;
}

/* ---- Pagination ----------------------------------------------------------- */

.gm-vpager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gm-space-8);
}

.gm-vpager[hidden] {
	display: none;
}

.gm-vpager__btn {
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding: 0 var(--gm-space-16);
	border: 1.5px solid transparent;
	border-radius: var(--gm-radius-pill);
	background: transparent;
	color: var(--gm-color-black);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 200ms var(--gm-ease), color 200ms var(--gm-ease), border-color 200ms var(--gm-ease);
}

.gm-vpager__btn:hover {
	border-color: var(--gm-color-purple);
	color: var(--gm-color-purple);
}

.gm-vpager__btn[aria-current="page"] {
	background: var(--gm-color-purple);
	color: var(--gm-color-white);
}

.gm-vpager__btn:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gm-vac__link::before,
	.gm-vac__title,
	.gm-vac__arrow .gm-icon,
	.gm-chip,
	.gm-vpager__btn,
	.gm-vf__control {
		transition: none;
	}

	.gm-vac__link:hover .gm-vac__arrow .gm-icon {
		transform: none;
	}
}

/* ---- Inverse surface ---------------------------------------------------- */

.gm-surface--inverse .gm-vlist,
.gm-surface--inverse .gm-vac {
	border-color: var(--gm-color-nav-pill-border);
}

.gm-surface--inverse .gm-vac__summary,
.gm-surface--inverse .gm-vac__meta,
.gm-surface--inverse .gm-vf__count {
	color: var(--gm-color-on-dark-muted);
}

.gm-surface--inverse .gm-vf {
	background: var(--gm-color-nav-pill);
}

.gm-surface--inverse .gm-vpager__btn {
	color: var(--gm-color-white);
}