/* staff-application.css — Staff Application page.
   Reuses tokens/components from style.css (nav, aurora, footer, section
   eyebrow, .form-group/.form-row/.error-msg/.tos-check/.btn-submit/
   .success-screen from the auth form) and only adds what's specific to
   this page: the hero, the two-column layout, the role chips, and a
   textarea style (style.css only styles <input>/<select>).

   Layout notes — built to hold up at any viewport ratio, not just the
   usual phone/tablet/desktop widths:
     - Nothing here depends on viewport HEIGHT (no 100vh sections), so
       short/landscape windows just scroll normally instead of clipping.
     - .staff-layout is a single column by default and only switches to
       two columns once there's genuinely room for both (see the
       min-width media query), so narrow-but-tall AND short-but-wide
       windows both get a layout that fits instead of a forced grid.
     - .content caps out at 1160px and stays centered, so ultra-wide
       monitors get a comfortable reading width instead of a stretched
       form running edge to edge.
     - Every fixed size below is either a min()/clamp() or paired with a
       narrower fallback in the max-width queries at the bottom. */

#staff-app { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }

.content {
  max-width: 1160px; width: 100%;
  margin: 0 auto;
  padding: 90px 24px 72px;
  flex: 1;
}

/* ---------- Page hero ---------- */
.staff-hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.staff-h1 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
  text-shadow: 0 0 20px rgba(124,58,237,0.2);
}
.staff-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--violet) 20%, var(--glow) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.staff-sub {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 480px;
}

/* ---------- Two-column layout ---------- */
/* Single column until there's real room for both panels side by side —
   using a min-width switch (rather than assuming "mobile vs desktop")
   means a narrow-but-tall window and a short-but-wide one both land on
   whichever layout actually fits their available width. */
.staff-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (min-width: 860px) {
  .staff-layout {
    grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.25fr);
    gap: 36px;
  }
  .staff-info {
    position: sticky;
    top: 96px;
  }
}

/* ---------- Info panel ---------- */
.staff-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.staff-info-card {
  background: #0c0a1c;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.staff-info-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.staff-info-card > p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.role-chip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.role-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.role-chip-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--glass);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.role-chip h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.15rem;
}
.role-chip p {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.5;
}

.staff-info-note ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.staff-info-note li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.55;
}
.staff-info-note li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
}

/* ---------- Form card ---------- */
.staff-form-card {
  background: #0c0a1c;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  min-width: 0; /* let the grid track shrink below the form's content width */
}

.optional-tag {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(139,122,168,0.7);
  font-size: 0.78rem;
}

/* textarea isn't styled in style.css (only input/select are) */
.form-group textarea {
  width: 100%;
  background: var(--glass2);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--white);
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.78rem 1rem;
  transition: border-color var(--tr);
  outline: none;
  resize: vertical;
  min-height: 5.5em;
}
.form-group textarea::placeholder {
  color: rgba(139,122,168,0.42);
}
.form-group textarea:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.13);
}
.form-group textarea.err {
  border-color: #f43f5e;
}

.staff-form-card .success-screen {
  min-height: 320px;
}

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
  .content { padding: 80px 16px 60px; }
}
@media (min-width: 860px) and (max-width: 1000px) {
  /* tight middle ground: two columns but info doesn't need to be as wide */
  .staff-layout { grid-template-columns: minmax(220px, 0.9fr) minmax(320px, 1.3fr); }
}