/* ==========================================================================
   CrysMed — career single page (career-vacancy.html) — 2026-10-27
   Linked ONLY from career-vacancy.html, after detail-page.css, so nothing here can reach the
   9 other detail pages that share detail-page.css.

   A. PC + iPad landscape (1024px and up): job details 60% | apply form 40% (client request
      2026-10-27). Sidebar stays sticky; a form taller than the screen scrolls until its
      Submit button is visible, then sticks (career-vacancy.js sets the sticky `top`).
   B. Apply form, all sizes: spaced fields, location + notice side by side, upload box,
      readable checkboxes, submit spinner (career-vacancy.js).
   C. Phones + tablets (+ touch tablets in landscape): compact facts, swipeable licence chips,
      48px / 16px fields (no iPhone zoom), touch feedback.
   D. Below 1024px: one column, wider form grid on tablets, fixed "Apply" bar above the
      bottom nav (career-vacancy.js adds it).
   ========================================================================== */

/* ---- A. 60 / 40 split ---- */
@media (min-width: 1024px) {
  .dp-body .dp-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--sp-6);
  }
  .dp-body .dp-sidebar { transition: none; }
  .cv-applybar { display: none !important; }   /* phone/tablet bar; touch tablets in landscape show .mobile-only */
}

/* ---- B. Apply form (all sizes) ---- */
#apply { scroll-margin-top: var(--sticky-top); }
#apply h3 { margin-bottom: 0; }

#apply form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
}
#apply form > * { grid-column: 1 / -1; min-width: 0; }
#apply form > .field:has(> input[name="currentLocation"]),
#apply form > .field:has(> input[name="noticePeriodNote"]) { grid-column: auto; }

#apply .field { gap: 6px; }
#apply .field input,
#apply .field select,
#apply .field textarea { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
#apply .field input:focus,
#apply .field select:focus,
#apply .field textarea:focus { box-shadow: 0 0 0 4px var(--brand-tint); }

/* phone: country list wide enough to read the country */
#apply .phone-input select.phone-input__prefix { flex: 0 0 auto; width: 128px; max-width: 42%; text-overflow: ellipsis; }
#apply .phone-input input { min-width: 0; }

/* CV upload: a proper drop-style box instead of the bare browser button */
#apply .field input[type="file"] {
  padding: var(--sp-3);
  border: 1.5px dashed var(--line-strong);
  background: var(--surface);
  color: var(--ink-500);
  cursor: pointer;
}
#apply .field input[type="file"]:hover { border-color: var(--brand-700); }
#apply .field input[type="file"]::file-selector-button {
  margin-right: var(--sp-3);
  padding: 8px 14px;
  border: 1px solid var(--brand-700);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--brand-900);
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
}

/* screening questions: the questions read as a soft note above the answer box */
#apply .field > .dp-infobox__meta {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-700);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

/* consent ticks: box on the first line, text wraps under itself */
#apply .checkbox-field { align-items: flex-start; line-height: 1.45; cursor: pointer; }
#apply .checkbox-field input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
#apply form > .checkbox-field + .checkbox-field { margin-top: calc(-1 * var(--sp-2)); }
#apply form > :not(.checkbox-field) + .checkbox-field { margin-top: var(--sp-1); }

#apply .btn-block { margin-top: var(--sp-1); }
#apply .dp-card__fine { margin-top: calc(-1 * var(--sp-2)); }
#apply > .dp-infobox__meta {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  line-height: var(--lh-relaxed);
}

/* submit spinner (career-vacancy.js adds .is-loading) */
#apply .btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
#apply .btn.is-loading::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: cv-spin .7s linear infinite;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }

/* ---- C. Phones + tablets + touch tablets in landscape ---- */
@media (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  /* facts: label small, value strong */
  .dp-head .dp-facts > div { background: var(--white); padding: 10px 12px; }
  .dp-head .dp-facts b {
    font-size: .6875rem; font-weight: var(--fw-semibold); color: var(--ink-500);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .dp-head .dp-facts span {
    display: block; margin-top: 2px;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900);
  }
  .dp-head .dp-facts span::first-letter { text-transform: uppercase; }
  .dp-head .dp-infobox__cta .btn { min-height: 48px; }

  /* licence ticks: one swipeable row of chips */
  .dp-trust-row ul {
    flex-wrap: nowrap; gap: var(--sp-2);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--m-gutter, 16px)); padding-inline: var(--m-gutter, 16px);
  }
  .dp-trust-row ul::-webkit-scrollbar { display: none; }
  .dp-trust-row li {
    flex: 0 0 auto; padding: 7px 12px; border-radius: 999px;
    background: var(--brand-tint); color: var(--brand-900); font-weight: var(--fw-semibold);
  }

  /* fields: 48px tall, 16px text so iPhones don't zoom on focus */
  #apply .field input:not([type="file"]),
  #apply .field select,
  #apply .field textarea { min-height: 48px; font-size: 16px; }
  #apply .phone-input select.phone-input__prefix { font-size: 15px; }
  #apply .field input[type="file"] { font-size: 15px; }
  #apply .checkbox-field { padding-block: 4px; font-size: var(--fs-sm); }
  #apply .checkbox-field input { width: 22px; height: 22px; }
  #apply .btn-block { min-height: 50px; font-size: var(--fs-sm); }

  /* touch feedback */
  .dp-infobox__cta .btn, #apply .btn, .cv-applybar__btn { -webkit-tap-highlight-color: transparent; transition: transform .12s var(--ease), filter .12s var(--ease); }
  .dp-infobox__cta .btn:active, #apply .btn:active, .cv-applybar__btn:active { transform: scale(.98); filter: brightness(.95); }
}

/* ---- D. Below 1024px: one column ---- */
@media (max-width: 1023.98px) {
  .dp-head .container { padding-block: var(--sp-4); }
  .dp-body { padding-block: var(--sp-5); }
  .dp-body .dp-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .dp-body .dp-sidebar { position: static; }
  #apply { padding: var(--sp-5) var(--sp-4); scroll-margin-top: calc(var(--m-header-h, 60px) + 12px); }

  /* tablets: name + email side by side too */
  #apply form > label.field:has(> input[name="fullName"]),
  #apply form > label.field:has(> input[name="email"]) { grid-column: auto; }

  /* fixed apply bar above the bottom nav */
  .cv-applybar {
    position: fixed; z-index: 60;
    left: 12px; right: 12px;
    bottom: calc(var(--m-tabbar-h, 64px) + var(--m-safe-bottom, 0px) + 10px);
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 8px 8px 8px 16px;
    border-radius: 16px; background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(10, 69, 80, .18);
    transition: transform .25s var(--ease), opacity .25s var(--ease), visibility .25s;
  }
  .cv-applybar.is-away { transform: translateY(16px); opacity: 0; visibility: hidden; pointer-events: none; }
  .cv-applybar__text { flex: 1; min-width: 0; line-height: 1.25; }
  .cv-applybar__text b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-sm); color: var(--ink-900); }
  .cv-applybar__text span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .6875rem; color: var(--ink-500); }
  .cv-applybar__btn { flex: 0 0 auto; min-height: 44px; padding-inline: 20px; }
  body.cv-bar-on .whatsapp-float { bottom: calc(var(--m-tabbar-h, 64px) + var(--m-safe-bottom, 0px) + 82px); transition: bottom .25s var(--ease); }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .cv-applybar { left: 50%; right: auto; width: min(560px, calc(100% - 32px)); transform: translateX(-50%); }
  .cv-applybar.is-away { transform: translate(-50%, 16px); }
}

/* ---- Phones ---- */
@media (max-width: 599.98px) {
  .dp-head .dp-infobox h1 { font-size: 1.625rem; }
  .dp-head .dp-facts.dp-facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .dp-head .dp-infobox__cta .btn { min-width: 0; }
  #apply form > label.field:has(> input[name]) { grid-column: 1 / -1; }   /* same weight as the pairing rules, later wins */
}

@media (prefers-reduced-motion: reduce) {
  .cv-applybar, #apply .field input, #apply .btn { transition: none; }
}