/* =========================================================
   RECRUITMENT DETAIL PAGE
   ========================================================= */

.recruitment-detail {
	padding: var(--space-8) 0 var(--space-12);
}

.recruitment-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--color-bg-elevated);
	margin-top: var(--space-6);
	margin-bottom: var(--space-6);
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 600;
	border: 1px solid var(--color-border);
}

.recruitment-back:hover {
	color: var(--color-accent);
	background-color: aliceblue;
}


/* Cover
--------------------------------------------------------- */

.recruitment-cover {
	width: 100%;
	max-height: 620px;

	overflow: hidden;

	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);

	background: var(--color-surface);

	margin-bottom: var(--space-8);
}

.recruitment-cover img {
	display: block;

	width: 100%;
	height: auto;

	max-height: 620px;

	object-fit: cover;
}


/* Header
--------------------------------------------------------- */

.recruitment-header {
	margin-bottom: var(--space-7);
}

.recruitment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);

	margin-bottom: var(--space-4);
}

.recruitment-department,
.recruitment-status {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.recruitment-department {
	color: var(--color-accent);
	background: var(--color-accent-soft);
}

.recruitment-status--open {
	color: var(--color-success);
	background: var(--color-success-soft);
}

.recruitment-status--upcoming {
	color: var(--color-warning);
	background: var(--color-warning-soft);
}

.recruitment-status--closed {
	color: var(--color-text-muted);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}

.recruitment-header h1 {
	font-size: var(--fs-2xl);
}

.recruitment-excerpt {
	max-width: 760px;

	margin-top: var(--space-4);

	color: var(--color-text-muted);

	font-size: var(--fs-md);
	line-height: 1.75;
}


/* Information
--------------------------------------------------------- */

.recruitment-info {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	gap: var(--space-4);

	margin-bottom: var(--space-9);
}

.recruitment-info-item {
	padding: var(--space-5);

	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);

	background: var(--color-bg-elevated);
}

.recruitment-info-item span {
	display: block;

	margin-bottom: 7px;

	color: var(--color-text-subtle);

	font-family: var(--font-mono);
	font-size: var(--fs-2xs);

	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.recruitment-info-item strong {
	font-size: var(--fs-sm);
}


/* Sections
--------------------------------------------------------- */

.recruitment-section {
	margin-top: var(--space-7);
}

.recruitment-section h2 {
	margin-bottom: var(--space-4);
}

.recruitment-section p {
	margin-bottom: var(--space-4);

	color: var(--color-text-muted);

	line-height: 1.8;
}


/* Bold points
--------------------------------------------------------- */

.recruitment-points {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding-left: 1.5rem;
}

.recruitment-points li {
	padding-left: 6px;

	line-height: 1.7;
}

.recruitment-points li::marker {
	color: var(--color-accent);
}


/* Gallery
--------------------------------------------------------- */

.recruitment-gallery {
	display: grid;

	grid-template-columns: repeat(2, 1fr);

	gap: var(--space-4);
}

.recruitment-gallery figure {
	margin: 0;

	overflow: hidden;

	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);

	background: var(--color-surface);

	aspect-ratio: 16 / 10;
}

.recruitment-gallery img {
	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;

	transition:
		transform var(--duration-slow) var(--ease-standard);
}

.recruitment-gallery figure:hover img {
	transform: scale(1.035);
}


/* Apply
--------------------------------------------------------- */

.recruitment-apply {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: var(--space-6);

	margin-top: var(--space-10);
	padding: var(--space-7);

	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);

	background: var(--color-bg-elevated);
}

.recruitment-apply-label {
	display: block;

	color: var(--color-accent);

	font-family: var(--font-mono);
	font-size: var(--fs-2xs);

	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.recruitment-apply h2 {
	margin-top: 6px;
}

.recruitment-apply p {
	margin-top: 7px;

	color: var(--color-text-muted);
}


/* Bottom
--------------------------------------------------------- */

.recruitment-bottom-back {
	margin-top: var(--space-7);
	margin-bottom: var(--space-7);
}


/* Loading / Not Found
--------------------------------------------------------- */

.recruitment-loading,
.recruitment-not-found {
	padding: var(--space-12) 0;

	text-align: center;
}

.recruitment-not-found p {
	max-width: 600px;

	margin: var(--space-4) auto var(--space-6);

	color: var(--color-text-muted);
}


/* Responsive
--------------------------------------------------------- */

@media (max-width: 760px) {

	.recruitment-info {
		grid-template-columns: 1fr;
	}

	.recruitment-gallery {
		grid-template-columns: 1fr;
	}

	.recruitment-apply {
		flex-direction: column;
		align-items: flex-start;
	}
}


@media (max-width: 520px) {

	.recruitment-detail {
		padding-top: var(--space-6);
	}

	.recruitment-cover {
		border-radius: var(--radius-lg);
	}

	.recruitment-apply {
		padding: var(--space-5);
	}
}