/* Job Application page — dropzone + success transition.
   Loaded only on page-templates/template-job-application.php
   (see functions.php: hd_assets()). Reuses .field/.btn/.contact-note
   from style.css for visual consistency with the contact form. */

/* Two-column layout (intro left, letter-form right) — same shape as
   .contact-grid, so the form sits flush with the intro text instead of
   floating centered underneath it, and reads as a wider, more "horizontal"
   composition than a single centered column. */
.job-app-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 960px) { .job-app-grid { grid-template-columns: 1fr; } }
.job-app-intro { padding-top: 4px; }

/* "Letter" container — a bordered sheet holding the form, so the page
   reads like an application submitted on paper rather than a bare form. */
.job-app-wrap {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  padding: clamp(24px, 3.2vw, 36px);
}
.job-app-wrap::before {
  content: "";
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border: 1px solid var(--line);
  pointer-events: none;
}

/* Slightly tighter than .contact-form — this form has one more field
   (CV upload) than the contact form, so trimming row/field spacing keeps
   its overall height in check without cramping individual fields. */
.job-app-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.job-app-form .btn { grid-column: 1/-1; justify-self: start; margin-top: 4px; }
.job-app-form .field label { margin-bottom: 6px; }
.job-app-form .field textarea { min-height: 72px; }
.job-app-form .field-error { min-height: 0; }

.job-app-form,
.job-app-success {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.22, .8, .2, 1);
}
.job-app-form.is-leaving { opacity: 0; transform: translateY(-10px); pointer-events: none; }
/* .job-app-form sets its own `display: grid`, which — being an author
   rule — otherwise wins the cascade over the [hidden] attribute's
   user-agent `display: none`, leaving the (invisible) form still
   occupying its full grid height and pushing the success message down
   with a block of empty space above it. This reasserts the hide. */
.job-app-form[hidden] { display: none; }

.job-app-success {
  grid-column: 1/-1;
  opacity: 0;
  transform: translateY(10px);
  text-align: center;
  padding: clamp(40px, 8vh, 72px) 20px;
}
.job-app-success.is-entering { opacity: 1; transform: translateY(0); }
.job-app-success-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.job-app-success-sub {
  font-size: 15px;
  color: var(--fg-dim);
  max-width: 48ch;
  margin: 0 auto;
  line-height: 1.55;
}

.field-hint { font-size: 11.5px; color: var(--fg-faint); margin: 6px 0 0; }

.cv-dropzone {
  position: relative;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.cv-dropzone:hover { border-color: var(--fg-faint); background: var(--bg-3); }
.cv-dropzone.is-dragover { border-color: var(--accent); background: var(--bg-3); }
.cv-dropzone.has-file { border-style: solid; border-color: var(--accent); }
.cv-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.cv-dropzone input[type="file"]:focus-visible ~ .cv-dropzone-text {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cv-dropzone-text { font-size: 13.5px; color: var(--fg-dim); pointer-events: none; }
.cv-dropzone.has-file .cv-dropzone-text { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .job-app-form, .job-app-success { transition: none; }
}