/* ==========================================================================
   Careers page only. Reads the shared semantic tokens from style.css.
   ========================================================================== */

/* Hero "at a glance" strip */
.careers-hero__meta { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); max-width: 560px; }
.careers-hero__meta li { display: grid; gap: .2rem; }
.careers-hero__meta strong { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem); letter-spacing: -0.03em; line-height: 1; }
.careers-hero__meta span { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }

/* Culture values row */
.careers-values { display: flex; flex-wrap: wrap; gap: .6rem; }
.careers-values li { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--card-bd); box-shadow: var(--shadow-soft); font-weight: 700; font-size: .92rem; }
.careers-values .px { width: 7px; height: 7px; background: var(--c-signal-btn); flex: none; }

/* Open roles layout: sticky intro + role list */
.careers-roles { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 1000px) {
  .careers-roles { grid-template-columns: 5fr 7fr; align-items: start; }
  .careers-roles__intro { position: sticky; top: var(--sticky-top); }
}
.careers-roles__intro { display: grid; gap: 2rem; }
.careers-roles__media .media-frame { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--shadow-depth); background: var(--c-bg-alt); }
.careers-roles__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 999px) { .careers-roles__media { display: none; } }

/* Role cards (extends shared .role) */
.role { transition: var(--t-reveal), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.role:has(.is-open) { border-color: rgba(196,34,26,.35); }
.role__head { position: relative; }
.role__head:hover .role__title { color: var(--c-accent); }
.role__title { transition: color var(--t-med); }
.role__num { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; color: var(--c-text-muted); flex: none; min-width: 2.6ch; }
.role__body p { max-width: 62ch; }
.role__meta { display: flex; flex-wrap: wrap; gap: .75rem 2rem; padding-block: .9rem; border-block: 1px solid var(--line); }
.role__meta div { display: grid; gap: .15rem; }
.role__meta dt { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.role__meta dd { margin: 0; color: var(--c-text); font-weight: 700; font-size: .95rem; }
.role__body .cluster { margin-top: .25rem; }
@media (max-width: 560px) {
  .role__head { display: grid; grid-template-columns: auto 1fr auto; padding: 1.2rem 1.1rem; }
  .role__num { grid-row: 1; grid-column: 1; }
  .role__title { grid-row: 1; grid-column: 2; }
  .role__toggle { grid-row: 1 / span 2; grid-column: 3; }
  .role__head .badge { grid-row: 2; grid-column: 2; justify-self: start; }
  .role__body > div > div { padding: 0 1.1rem 1.25rem; }
}

/* Spontaneous application note */
.spontaneous { display: grid; gap: 1rem 1.25rem; align-items: center; margin-top: 1.25rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--r-card); border: 1px dashed var(--line-input); background: color-mix(in srgb, var(--c-surface) 55%, transparent); }
@media (min-width: 720px) { .spontaneous { grid-template-columns: auto 1fr auto; } }
.spontaneous h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.spontaneous p { color: var(--c-text-muted); font-size: .95rem; max-width: 52ch; }
.spontaneous .btn { justify-self: start; }

/* Form extras */
.file-field.is-invalid .file-input { border-color: var(--c-error); border-style: solid; background: color-mix(in srgb, var(--c-error) 5%, var(--c-surface)); }
.file-field.is-valid .file-input { border-style: solid; border-color: var(--c-text-muted); }
.file-field.is-valid .file-input .icon-tile { color: var(--c-success); }
.careers-note { margin-top: 1.5rem; font-size: .85rem; color: var(--c-text-muted); max-width: 44ch; }
.field.is-flash .field__control { animation: careers-flash 1.4s var(--ease-out); }
@keyframes careers-flash {
  0%, 100% { box-shadow: inset 0 1px 2px rgba(10,10,12,.04); }
  25% { box-shadow: 0 0 0 4px rgba(224,40,28,.22), 0 10px 24px -12px rgba(224,40,28,.45); border-color: var(--c-signal-btn); }
}
@media (prefers-reduced-motion: reduce) { .field.is-flash .field__control { animation: none; } }

/* "What to expect" bento: closing full-width card */
@media (min-width: 720px) {
  .bento > .careers-bento__full { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.75rem; }
  .careers-bento__full h3 { margin-top: 0; margin-bottom: .4rem; }
}
.careers-bento__full .careers-bento__cta { justify-self: start; }
@media (min-width: 1024px) { .bento > .careers-bento__full { grid-auto-rows: auto; min-height: 0; } }