@charset "UTF-8";
/* Pracovní pozice – Figma 826:1349: section +78 / −127, heading 32/500 + text 16/24 centred, filter 68px
   (#F1F4F8, border #CDD9E9, radius 8, chips 36px), cards 212px with gap 40. No hover on cards in the design; the
   filter uses the hover of the Novinky filter (not in the design for this one, 2026-11-09). */
.job-list {
	padding-block: 56px;
	scroll-margin-top: 24px;
}

.job-list__header {
	margin-bottom: 28px;
	text-align: center;
}

.job-list__title {
	margin: 0;
	color: var(--color-navy);
	font-size: clamp(26px, 1.25rem + 1.2vw, var(--font-size-h2));
	font-weight: 500;
	line-height: 1.22;
}

.job-list__text {
	margin: 26px 0 0;
	color: var(--color-text);
}

.job-filter {
	box-sizing: border-box;
	padding: 15px 19px; /* + border = Figma 16 / 20, stroke inside */
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius);
	background: var(--color-surface-light);
}

.job-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.job-filter__item {
	box-sizing: border-box;
	display: block;
	padding: 6px 14px;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--color-navy);
	background: var(--color-chip);
	font-size: var(--font-size-small);
	line-height: 22px;
	text-decoration: none;
	transition: background-color var(--transition);
}

.job-filter__item:hover,
.job-filter__item:focus-visible {
	background: var(--color-white);
}

.job-filter__item.is-active {
	padding-inline: 18px;
	border-color: var(--color-blue);
	color: var(--color-white);
	background: var(--color-blue);
	font-weight: 600;
}

.job-list__items {
	display: grid;
	gap: 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.job-list__empty {
	margin: 32px 0 0;
	color: var(--color-text);
	text-align: center;
}

.job-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
	border-radius: var(--radius);
	background: var(--color-surface-light);
}

.job-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.job-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	font-size: var(--font-size-more);
	line-height: 19.5px;
	letter-spacing: 0.65px;
}

.job-tag {
	display: inline-flex;
	align-items: center;
	min-height: 29px;
	padding: 0 8px;
	border-radius: 6px;
	font-size: var(--font-size-more);
	font-weight: 700;
	line-height: 19.5px;
	letter-spacing: 0.65px;
	text-transform: uppercase;
}

/* Category colour of the position (Barva štítku): tag, employment type with its icon on the card and the icons of
   the detail header (Figma export 2026-11-11 – 828:1773, 828:1824, 886:940; before all purple). Default grey (not
   in the design, decision 2026-11-11): as the place and reading time – text #595C65, icons #CDD9E9, tag on #DFE5ED. */
.job-color--gray {
	--job-accent: var(--color-text);
	--job-icon: var(--color-card-border);
}

.job-color--red {
	--job-accent: var(--color-theme-red);
}

.job-color--orange {
	--job-accent: var(--color-orange);
}

.job-color--purple {
	--job-accent: var(--color-theme-purple);
}

.job-tag--gray {
	color: var(--color-text);
	background: var(--color-divider-light);
}

.job-tag--red {
	color: var(--color-theme-red);
	background: var(--color-badge-red);
}

.job-tag--orange {
	color: var(--color-orange);
	background: var(--color-badge-orange);
}

.job-tag--purple {
	color: var(--color-theme-purple);
	background: var(--color-badge-purple);
}

.job-card__employment,
.job-card__place {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.job-card__employment .icon,
.job-card__place .icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.job-card__employment {
	color: var(--job-accent, var(--color-text));
	font-weight: 700;
	text-transform: uppercase;
}

.job-card__employment .icon {
	color: var(--job-icon, currentColor);
}

.job-card__place {
	color: var(--color-text);
}

.job-card__place .icon {
	color: var(--color-card-border);
}

.job-card__title {
	margin: 0;
	color: var(--color-navy);
	font-size: clamp(20px, 1rem + 0.5vw, var(--font-size-card-title));
	font-weight: 700;
	line-height: 1.2;
}

.job-card__summary {
	margin: 0;
	color: var(--color-text);
}

@media (max-width: 767px) {
	.job-card__button {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.job-card {
		flex-direction: row;
		align-items: center;
		gap: 32px;
		min-height: 212px;
	}

	.job-card__body {
		gap: 24px;
	}

	.job-card__button {
		flex-shrink: 0;
	}
}

@media (min-width: 1024px) {
	.job-list {
		padding-block: 78px 127px;
	}

	.job-list__header {
		margin-bottom: 36px;
	}

	.job-list__items {
		gap: 40px;
		margin-top: 41px;
	}

	.job-card {
		padding-right: 38px;
	}

	.job-card__button {
		padding-inline: 23px; /* + border = Figma 264 */
	}
}