/* career-detail.css - position pages (Velvet Cinema)
   Reuses .careers-chip from careers.css? NO - templates load only their own
   sheet, so the chip is duplicated here deliberately. */

/* ── Hero ───────────────────────────────────────────────────────────── */
.cd-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-xl);
  background: var(--color-bg);
}

.cd-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
}

.cd-crumbs a {
  position: relative;
  color: var(--color-muted);
  text-decoration: none;
  /* The expander below is height-only, and "Home" renders just 33px WIDE at 390
     (36px at 768), so the target failed on the horizontal axis where no
     ::after can help it. inline-block + a min-width floor fixes the axis the
     expander cannot reach; the crumbs sit on their own line with the nearest
     other control 640px+ away, so widening steals nothing. */
  display: inline-block;
  min-width: 44px;
}
/* Invisible vertical hit-expander -> 44px tap target; crumb text stays compact */
.cd-crumbs a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
.cd-crumbs a:hover { color: var(--color-link); }
.cd-crumbs [aria-current] { color: var(--color-accent); }

.cd-status { gap: 0.45em; }
.cd-status__icon { width: 1.1em; height: 1.1em; }
.cd-status--open { color: var(--color-success); }
.cd-status--waitlist { color: var(--color-rose-deep); }
.cd-status--closed { color: var(--color-muted); }

.cd-title {
  /* Velvet Cinema editorial serif hero (matches .svcs-hero__title). */
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 350;
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-wrap: balance;
  margin-top: var(--space-sm);
}
.cd-title em {
  font-style: italic;
  font-weight: 480;
  color: var(--color-rose-deep);
}

.cd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.careers-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.35em 0.8em;
}

.careers-chip__icon { width: 1em; height: 1em; color: var(--color-accent); }

/* ── Notices ────────────────────────────────────────────────────────── */
.cd-notice {
  display: flex;
  gap: 0.8em;
  align-items: flex-start;
  max-width: var(--container-narrow);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2xl);
}

.cd-notice__icon { width: 1.5em; height: 1.5em; flex-shrink: 0; margin-top: 0.1em; }
.cd-notice--waitlist .cd-notice__icon { color: var(--color-rose-deep); }
.cd-notice--closed .cd-notice__icon { color: var(--color-muted); }

/* ── Layout ─────────────────────────────────────────────────────────── */
.cd-grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
}

@media (min-width: 920px) {
  .cd-grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

.cd-photo {
  margin: 0 0 var(--space-lg);
  border-radius: var(--radius-image);
  overflow: hidden;
}

.cd-photo img { width: 100%; height: auto; }

/* ── Application card ───────────────────────────────────────────────── */
.cd-formcard {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

@media (min-width: 920px) {
  /* --sticky-top, not --space-lg. At 24px this form card sat 133px behind the
     157px header with 12% hidden, measured on a live career detail page
     2026-08-05. Same family as reference_sticky_top_token. */
  .cd-formcard { position: sticky; top: var(--sticky-top); }
}

.cd-formcard__head {
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.cd-formcard__title { font-size: var(--text-xl); text-wrap: balance; }
.cd-formcard__note { font-size: var(--text-xs); color: var(--color-muted); margin-top: 0.4rem; }
.cd-req { color: var(--color-rose-deep); }

.cd-formcard__body { padding: var(--space-lg) var(--space-xl) var(--space-xl); }

/* ── FormBuilder restyle (Basic framework markup) ───────────────────── */
.cd-formcard .Inputfields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr 1fr;
}

.cd-formcard .Inputfield { grid-column: span 2; margin: 0; }

/* 50/50 rows (names + contact) from 420px up - mobile-first, full-width below */
@media (min-width: 420px) {
  .cd-formcard .Inputfield_first_name,
  .cd-formcard .Inputfield_last_name,
  .cd-formcard .Inputfield_email_address,
  .cd-formcard .Inputfield_phone_number { grid-column: span 1; }
}

/* Position is pre-filled via the render param; the card header already names
   the role, so the input is hidden (still posts its value). */
.cd-formcard .Inputfield_position { display: none; }

/* Honeypot: visually hidden + out-of-reach but MUST remain in DOM and reachable
   by bots (display:none or visibility:hidden would defeat the trap). Mirrors the
   svc-form honeypot pattern in style.css exactly. tabindex/aria-hidden are
   handled by FormBuilder's own output on this field; we only move it offscreen. */
.cd-formcard .Inputfield_website {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* FormBuilder renders a header label even for the hidden Turnstile token input;
   display:none is safe here (hidden inputs still post; the visible Turnstile
   widget is injected separately by FormBuilder/hooks.php). */
.cd-formcard .Inputfield_cf-turnstile-response { display: none; }

.cd-formcard .InputfieldHeader,
.cd-formcard .InputfieldHeader label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

.cd-formcard .Inputfield input[type="text"],
.cd-formcard .Inputfield input[type="email"],
.cd-formcard .Inputfield input[type="tel"],
.cd-formcard .Inputfield input[type="number"],
.cd-formcard .Inputfield input[type="file"],
.cd-formcard .Inputfield textarea,
.cd-formcard .Inputfield select {
  width: 100%;
  padding: 0.7em 0.9em;
  font-family: var(--font-body);
  font-size: 16px; /* >=16 prevents iOS zoom + meets mobile body floor */
  color: var(--color-heading);
  background: var(--color-bg-mid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

[data-theme="dark"] .cd-formcard .Inputfield input[type="text"],
[data-theme="dark"] .cd-formcard .Inputfield input[type="email"],
[data-theme="dark"] .cd-formcard .Inputfield input[type="tel"],
[data-theme="dark"] .cd-formcard .Inputfield input[type="number"],
[data-theme="dark"] .cd-formcard .Inputfield input[type="file"],
[data-theme="dark"] .cd-formcard .Inputfield textarea,
[data-theme="dark"] .cd-formcard .Inputfield select {
  background: rgba(255, 255, 255, 0.04);
}

.cd-formcard .Inputfield input:focus-visible,
.cd-formcard .Inputfield textarea:focus-visible,
.cd-formcard .Inputfield select:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 1px;
}

/* Resume upload reads as a drop-zone */
.cd-formcard .Inputfield_resume_cover_letter input[type="file"] {
  padding: var(--space-md);
  border: 1.5px dashed var(--color-border-hover);
  background: var(--color-bg-mid);
}

.cd-formcard .notes,
.cd-formcard .InputfieldContent .notes {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: 0.3rem;
}

/* Required-field asterisk. FormBuilder's own marker CSS lives in frBasic's
   stylesheet which we deliberately don't load; reproduce it scoped here.
   Mirrors the kb-intake precedent in style.css ~line 20128 (selector shape
   identical; dot indicator replaced with a plain " *" character to match the
   "* indicates a required field" note in the card header). */
.cd-formcard .InputfieldStateRequired > .InputfieldHeader::after {
  content: " *";
  color: var(--color-rose-deep);
}

/* File-list ul: FormBuilder wraps the file drop-zone in an unstyled <ul>;
   reset UA bullets/padding so the dashed-border drop-zone isn't indented. */
.cd-formcard .InputfieldFormBuilderFileList {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Form-level error box (FormBuilder renders <p class="alert alert-error error">
   at the top of the form on validation failure). */
.cd-formcard .alert-error {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
}

/* Field-level inline errors */
.cd-formcard .FormBuilderErrors,
.cd-formcard .input-error,
.cd-formcard .error {
  color: var(--color-error);
  font-size: var(--text-xs);
}

/* Submit = conversion-moment CTA pill */
.cd-formcard .InputfieldSubmit { margin-top: var(--space-sm); }

.cd-formcard .InputfieldSubmit button {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  /* Mirrors .btn--cta - this is the application submit, same AA case. */
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 32px -14px rgba(184, 128, 124, 0.6), 0 2px 6px rgba(58, 40, 40, 0.10);
}

[data-theme="dark"] .cd-formcard .InputfieldSubmit button {
  background: var(--color-accent);
  box-shadow: 0 14px 32px -14px rgba(15, 164, 182, 0.55), 0 2px 6px rgba(0, 0, 0, 0.20);
}

.cd-formcard .InputfieldSubmit button:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 3px;
}

@media (hover: hover) {
  @media (prefers-reduced-motion: no-preference) {
    .cd-formcard .InputfieldSubmit button { transition: transform 0.2s ease-out, background-color var(--transition-smooth), box-shadow var(--transition-smooth); }
    .cd-formcard .InputfieldSubmit button:hover { transform: translateY(-2px); }
  }
}

/* ── Prev / next ────────────────────────────────────────────────────── */
.cd-prevnext {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
  margin-top: var(--space-2xl);
}

.cd-prevnext__link {
  display: flex;
  flex-direction: column;
  font-size: var(--text-sm);
  color: var(--color-link);
  text-decoration: none;
  min-height: 48px;
  justify-content: center;
}

.cd-prevnext__link--next { text-align: right; }

.cd-prevnext__label {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Hover: color shift, mirrors .svc-nav__link-title pattern in style.css */
@media (prefers-reduced-motion: no-preference) {
  .cd-prevnext__link { transition: color 0.2s ease; }
}

@media (hover: hover) {
  .cd-prevnext__link:hover { color: var(--color-accent); }
}

/* ── Lead paragraph ─────────────────────────────────────────────────────
   Larger, lighter opening line so the body doesn't start as a flat wall. */
.cd-overview > p:first-child {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: 1.62;
  color: var(--color-heading);
}

/* ── Dark theme depth ───────────────────────────────────────────────────
   The hero + body were flat navy slabs. Anchor a soft accent glow to the
   hero and lift the sticky form card off the field. */
[data-theme="dark"] .cd-hero {
  position: relative;
  isolation: isolate;
}
[data-theme="dark"] .cd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 70% at 12% 0%, color-mix(in srgb, var(--color-accent-glow) 13%, transparent) 0%, transparent 60%);
}
[data-theme="dark"] .cd-formcard {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-color: color-mix(in srgb, var(--color-border) 55%, var(--color-heading) 14%);
}

/* ── Why build here (third composition: full-bleed alt-bg benefit band) ──────
   DOMINANT MOMENT: the oversized serif "2009" stat anchoring an asymmetric
   lead + benefit list - .cd-why__stat-num. Breaks the two-column form/prose
   monotony and gives the page background rhythm (alt surface between the body
   and the outro nav). */
.cd-why {
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  background:
    radial-gradient(120% 130% at 85% -15%, color-mix(in srgb, var(--color-rose-deep) 9%, transparent), transparent 55%),
    var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}
.cd-why__inner {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cd-why__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
}

.cd-why__title {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.85rem);
  margin: 0;
}

.cd-why__stat {
  margin: var(--space-lg) 0 0;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.cd-why__stat-label {
  order: -1; /* label sits above the numeral */
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.6rem;
}
.cd-why__stat-num {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(4.5rem, 3rem + 9vw, 7.5rem);
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.cd-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cd-why__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
}
.cd-why__item:last-child { border-bottom: 1px solid var(--color-border); }

.cd-why__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-rose-deep) 14%, transparent);
  color: var(--color-rose-deep);
}
.cd-why__icon svg { width: 1.4rem; height: 1.4rem; }

.cd-why__text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.cd-why__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}
.cd-why__note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-muted);
}

@media (hover: hover) {
  @media (prefers-reduced-motion: no-preference) {
    .cd-why__item { transition: transform var(--transition-base); }
    .cd-why__icon { transition: transform var(--transition-base), background var(--transition-base); }
  }
  .cd-why__item:hover { transform: translateX(4px); }
  .cd-why__item:hover .cd-why__icon {
    transform: scale(1.08);
    background: color-mix(in srgb, var(--color-rose-deep) 22%, transparent);
  }
}

/* Dark: teal-depth surface (not a flat navy slab) + teal accent glyphs, matching
   the page's existing dark-accent choice on the submit button. */
[data-theme="dark"] .cd-why {
  background:
    radial-gradient(120% 130% at 85% -15%, color-mix(in srgb, var(--color-accent-glow) 13%, transparent), transparent 55%),
    var(--color-bg-elevated);
}
[data-theme="dark"] .cd-why__icon {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent);
}
@media (hover: hover) {
  [data-theme="dark"] .cd-why__item:hover .cd-why__icon {
    background: color-mix(in srgb, var(--color-accent) 24%, transparent);
  }
}

/* Outro (prev/next): its own section after the full-bleed band. The band's
   bottom border is the divider, so drop the nav's own top rule/margin here. */
.cd-outro { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.cd-outro .cd-prevnext {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}