/* ============================================================
   Careers hub — layout on top of _shared/career.css.
   The hub hero is centered (home style) instead of the opening
   pages' two-column copy+ticket split, and openings render as
   mini ticket cards that inherit each role's --tk-* theme via
   the [data-tk] preset selectors in career.css.
   ============================================================ */

/* centered hero (overrides nothing — its own inner class) */
.hub-inner {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
.hub-inner .tagline {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1.4rem;
}
.hub-inner h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.hub-inner h1 em {
  font-style: normal;
  color: var(--amber-deep);
}
.hub-inner .hero-sub { margin-inline: auto; max-width: 62ch; }
.hub-inner .cta-group { justify-content: center; }
.hub-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 2.2rem;
}
.hub-inner > * { animation: hero-rise 0.9s var(--ease-out) both; }
.hub-inner h1 { animation-delay: 0.07s; }
.hub-inner .hero-sub { animation-delay: 0.14s; }
.hub-inner .cta-group { animation-delay: 0.21s; }
.hub-pills { animation-delay: 0.28s; }

/* ---------- openings grid — mini ticket cards ---------- */
.openings-hub { background: var(--surface); border-block: 1px solid var(--line); }
.openings-hub .section-head { margin-bottom: 2.8rem; }
.tickets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}
.ticket-card {
  display: flex;
  flex-direction: column;
  background: var(--tk-bg);
  color: var(--tk-text);
  border: 1px solid var(--tk-line-strong);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: 0 22px 50px -30px rgba(20, 36, 48, 0.4);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  overflow: hidden;
}
.ticket-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -30px rgba(20, 36, 48, 0.5);
}
.tc-main { padding: 1.5rem 1.6rem 1.4rem; flex: 1; }
.tc-team {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tk-accent);
}
.tc-main h3 {
  font-size: 1.45rem;
  margin: 0.45rem 0 0.65rem;
}
.tc-main p { color: var(--tk-dim); font-size: 0.94rem; max-width: 52ch; }
.tc-meta {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--tk-faint);
}
.ticket-card .ticket-stub { padding: 1rem 1.6rem 1.1rem; }
.ticket-card .go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tk-accent);
  white-space: nowrap;
}
.ticket-card .go svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease-out); }
.ticket-card:hover .go svg { transform: translateX(4px); }
/* hub tickets sit on the --surface band, so punch holes match it */
.ticket-card .ticket-tear::before,
.ticket-card .ticket-tear::after { background: var(--surface); }

/* ---------- how we hire — three promise cards ---------- */
.hire .section-head { margin-bottom: 2.8rem; }
.hire-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .tickets-grid { grid-template-columns: 1fr; }
  .hire-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hub-inner h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
}