/*
 * Job detail page — Figma "Job details desktop" (262:3534).
 *
 * Three blocks: the split hero (geometry borrowed from sections/service-hero),
 * the "Co nabízíme / Co očekáváme" table, and the application CTA, which is the
 * shared navy panel with a wider form card.
 */

/* Hero — the meta chips that replace the eyebrow. */

.job-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * Figma sets 38px between the chips, the headline and the button, and 18px
 * inside the headline — tighter than the service hero this shares markup with.
 */
.job-hero .service-hero__content { gap: 38px; }
.job-hero .service-hero__headline { gap: 18px; }

/* Table */

.job-details__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: 988px;
	margin: 0 auto;
}

.job-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
}

.job-table__head {
	padding: 12px 16px;
	color: var(--color-white);
	font-size: var(--body-main-size);
	font-weight: 500;
	line-height: var(--body-main-lh);
	text-align: center;
}

/* A 1px sliver of the page shows between the two header cells. */
.job-table__head--offer {
	border-right: 1px solid var(--color-neutral-7);
	border-radius: 20px 0 0 0;
	background: var(--color-primary);
}

.job-table__head--expect {
	border-radius: 0 20px 0 0;
	background: var(--color-accent);
}

.job-table__cell {
	padding: 16px;
	border-right: 1px solid var(--color-neutral-4);
	border-bottom: 1px solid var(--color-neutral-4);
	color: var(--color-primary);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: var(--body-secondary-ls);
	vertical-align: middle;
}

.job-table__cell:first-child { border-left: 1px solid var(--color-neutral-4); }

.job-table tbody tr:last-child .job-table__cell:first-child { border-radius: 0 0 0 20px; }
.job-table tbody tr:last-child .job-table__cell:last-child { border-radius: 0 0 20px 0; }

/* Application CTA */

/*
 * The application panel drops the phone/e-mail row, so the copy sits at the top
 * of the panel instead of being spread over its height, and the form card is
 * 610px rather than 572px.
 */
.cta--job .cta__left { justify-content: flex-start; }

.form__file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Kept focusable and in the a11y tree; the label below is what is seen. */
.form__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.form__file-btn {
	padding: 8px 34px;
	border: 1px solid var(--color-neutral-3);
	border-radius: 6px;
	background: var(--color-neutral-4);
	color: var(--color-neutral-1);
	font-size: var(--body-small-size);
	line-height: 1.4;
	letter-spacing: -0.14px;
	cursor: pointer;
}

.form__file-btn:hover { background: var(--color-neutral-3); }

.form__file-input:focus-visible + .form__file-btn { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.form__file-name {
	min-width: 0;
	color: var(--color-neutral-1);
	font-size: var(--body-small-size);
	line-height: 1.4;
	overflow-wrap: anywhere;
}
@media (min-width: 768px) {
	.job-table__head { padding: 14px 20px; }
	.job-table__cell { padding: 23px; width: 50%; }
}

@media (min-width: 1024px) {
	.job-details { padding-block: 80px; }
	.job-details__container { gap: 60px; }
	.cta--job .cta__form-panel { flex: 0 1 610px; gap: 34px; }
	.cta--job .cta__left { flex: 0 1 578px; }
}