/**
 * Career detail (single-job.php).
 * Culture-band + gallery rules are duplicated from archive-job.css because each
 * template loads only its own stylesheet.
 */

/* ---- Hero -------------------------------------------------------------- */
.job-hero {
	background: linear-gradient(180deg, var(--ne-secondary-a10) 0%, rgba(255, 255, 255, 0) 100%);
	padding-block: var(--ne-space-5xl) var(--ne-space-4xl);
}
.job-hero__tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ne-space-xs); margin-bottom: var(--ne-space-m); }
.job-card__loc {
	display: inline-flex;
	align-items: center;
	padding: 4px var(--ne-space-s);
	border-radius: 999px;
	background: var(--ne-neutral-200);
	color: var(--ne-neutral-900);
	font-size: var(--ne-b3-size);
	line-height: var(--ne-b3-line);
	font-weight: 600;
}
.job-hero__title { margin: 0 0 var(--ne-space-xs); font-size: var(--ne-h2-size); line-height: 1.15; color: var(--ne-primary-500); }
.job-hero__type { margin: 0 0 var(--ne-space-m); color: var(--ne-neutral-700); font-size: var(--ne-h7-size); font-weight: 600; }
.job-hero__intro { margin: 0; max-width: 720px; color: var(--ne-neutral-800); font-size: var(--ne-b1-size); line-height: var(--ne-b1-line); }

/* ---- Two-column body --------------------------------------------------- */
.job-body { padding-top: var(--ne-space-2xl); }
.job-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: var(--ne-space-5xl);
	align-items: start;
}
.job-body__aside { position: sticky; top: calc(var(--ne-header-h) + var(--ne-space-l)); }

.job-heading {
	position: relative;
	margin: var(--ne-space-3xl) 0 var(--ne-space-m);
	padding-left: var(--ne-space-m);
	font-size: var(--ne-h6-size);
	line-height: var(--ne-h6-line);
	color: var(--ne-primary-500);
}
.job-heading:first-child { margin-top: 0; }
.job-heading::before {
	content: "";
	position: absolute;
	left: 0; top: 6px; bottom: 6px;
	width: 4px;
	border-radius: 2px;
	background: var(--ne-secondary-400);
}
.job-prose { color: var(--ne-neutral-800); font-size: var(--ne-b1-size); line-height: var(--ne-b1-line); }
.job-prose p { margin: 0 0 var(--ne-space-m); }
.job-prose p:last-child { margin-bottom: 0; }

.job-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ne-space-s); }
.job-list li { position: relative; padding-left: var(--ne-space-l); color: var(--ne-neutral-900); font-size: var(--ne-b1-size); line-height: var(--ne-b1-line); }
.job-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ne-tertiary-400); }

/* ---- Apply Now card ---------------------------------------------------- */
.job-apply__title { margin: 0 0 var(--ne-space-l); font-size: var(--ne-h6-size); line-height: var(--ne-h6-line); color: var(--ne-primary-500); }

/* Form layout: name fields share a row, everything else is full width.
   The field order comes from the seeded CF7 form (first, last, email, phone,
   resume, submit). */
.job-apply .ne-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ne-space-m); }
.job-apply .ne-field { margin-bottom: 0; }
.job-apply .ne-field-full,
.job-apply .ne-form-grid > .ne-field:nth-child(3),
.job-apply .ne-form-grid > .ne-field:nth-child(4) { grid-column: 1 / -1; }

/* Resume upload — styled drag-drop dropzone (JS wraps the native CF7 file
   input in .job-dropzone; the input stays as a transparent overlay so both
   click-to-browse and native drag-drop keep working for a11y). */
.job-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ne-space-2xs);
	text-align: center;
	width: 100%;
	border: 1.5px dashed var(--ne-neutral-300);
	border-radius: 12px;
	padding: var(--ne-space-xl);
	background: var(--ne-neutral-100);
	transition: border-color .18s ease, background .18s ease;
}
.job-dropzone.is-dragover,
.job-dropzone:hover { border-color: var(--ne-secondary-300); background: var(--ne-secondary-a10); }
.job-dropzone__icon { display: inline-flex; color: var(--ne-secondary-400); }
.job-dropzone__icon .ne-icon { width: 28px; height: 28px; }
.job-dropzone__prompt { font-size: var(--ne-b2-size); font-weight: 600; color: var(--ne-neutral-900); }
.job-dropzone__prompt b { color: var(--ne-secondary-400); }
.job-dropzone__hint { font-size: var(--ne-b3-size); color: var(--ne-neutral-600); }
.job-dropzone__file { font-size: var(--ne-b3-size); font-weight: 600; color: var(--ne-secondary-500); word-break: break-all; }
.job-dropzone input[type="file"] {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	margin: 0; padding: 0; opacity: 0; cursor: pointer;
}

/* No-JS fallback: the bare file input keeps a dashed dropzone look. */
.job-apply input[type="file"] {
	width: 100%;
	border: 1.5px dashed var(--ne-neutral-300);
	border-radius: 12px;
	padding: var(--ne-space-l);
	background: var(--ne-neutral-100);
	color: var(--ne-neutral-700);
	font-family: var(--ne-font);
	font-size: var(--ne-b2-size);
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.job-apply input[type="file"]:hover { border-color: var(--ne-secondary-300); background: var(--ne-secondary-a10); }

.job-apply .wpcf7-submit,
.job-apply input[type="submit"] {
	width: 100%;
	margin-top: var(--ne-space-xs);
	font-family: var(--ne-font);
	font-size: var(--ne-h8-size);
	font-weight: 600;
	color: var(--ne-neutral-100);
	background: var(--ne-secondary-400);
	border: 2px solid var(--ne-secondary-400);
	border-radius: 999px;
	padding: 15px var(--ne-space-2xl);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}
.job-apply .wpcf7-submit:hover,
.job-apply input[type="submit"]:hover { background: var(--ne-secondary-500); border-color: var(--ne-secondary-500); }

.job-apply .wpcf7-response-output {
	margin: var(--ne-space-m) 0 0;
	padding: var(--ne-space-s) var(--ne-space-m);
	border-radius: 10px;
	font-size: var(--ne-b2-size);
	border: 1px solid var(--ne-neutral-300);
}
.job-apply .wpcf7-not-valid-tip { color: var(--ne-red-200); font-size: var(--ne-b3-size); }
.job-apply form.invalid .wpcf7-response-output,
.job-apply form.unaccepted .wpcf7-response-output { border-color: var(--ne-red-100); color: var(--ne-red-200); }
.job-apply form.sent .wpcf7-response-output { border-color: var(--ne-green-200); color: var(--ne-green-200); }
.job-apply .wpcf7-spinner { margin: 0 auto; display: block; }

/* ---- Related "Life at New Era" band (shared with the listing) ---------- */
.careers-culture__body { max-width: 900px; margin-bottom: var(--ne-space-3xl); color: var(--ne-neutral-800); }
.careers-culture__body p { margin: 0 0 var(--ne-space-m); }
.careers-culture__body p:last-child { margin-bottom: 0; }

.careers-culture__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ne-space-xl);
	margin-bottom: var(--ne-space-3xl);
}
.culture-card { display: flex; flex-direction: column; gap: var(--ne-space-s); padding: var(--ne-space-xl); background: var(--ne-secondary-a10); border-radius: 16px; }
.culture-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--ne-neutral-100); color: var(--ne-secondary-400);
}
.culture-card__icon .ne-icon { width: 22px; height: 22px; }
.culture-card__title { margin: 0; font-size: var(--ne-h8-size); font-weight: 700; color: var(--ne-primary-500); }
.culture-card__body { margin: 0; font-size: var(--ne-b3-size); line-height: var(--ne-b3-line); color: var(--ne-neutral-800); }

.careers-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: var(--ne-space-l); }
.careers-gallery__item { margin: 0; border-radius: 16px; overflow: hidden; background: var(--ne-neutral-200); }
.careers-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.careers-gallery__item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
.careers-gallery__item:nth-child(2) { grid-column: 2 / 4; grid-row: 1 / 3; }
.careers-gallery__item:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
.careers-gallery__item:nth-child(4) { grid-column: 4 / 5; grid-row: 2 / 3; }

.job-related__back { margin-top: var(--ne-space-3xl); }
.job-related__back .ne-icon { width: 18px; height: 18px; transform: scaleX(-1); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	.job-hero__title { font-size: 36px; }
	.job-body__grid { grid-template-columns: 1fr; gap: var(--ne-space-3xl); }
	.job-body__aside { position: static; }
	.careers-culture__cards { grid-template-columns: 1fr; }
	.careers-gallery { grid-auto-rows: 150px; }
}
@media (max-width: 640px) {
	.job-hero__title { font-size: 30px; }
	.job-apply .ne-form-grid { grid-template-columns: 1fr; }
	.job-apply .ne-form-grid > .ne-field:nth-child(3),
	.job-apply .ne-form-grid > .ne-field:nth-child(4) { grid-column: auto; }

	.careers-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
	.careers-gallery__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
	.careers-gallery__item:nth-child(2) { grid-column: 1 / 3; grid-row: 2 / 3; }
	.careers-gallery__item:nth-child(3) { grid-column: 1 / 2; grid-row: 3 / 4; }
	.careers-gallery__item:nth-child(4) { grid-column: 2 / 3; grid-row: 3 / 4; }
}