/* =============================================================
   Careers Page — page-specific overrides and extensions.
   Heavy lifting is done by mkt-* (marketing) and stripe-*
   (component) classes. This file handles layout scaffolding
   and any element not covered by those systems.
   ============================================================= */

/* ── Hero ───────────────────────────────────────────────── */

.careers-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Ambient radial glows to break up the flat dark bg */
.careers-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -5%;
    width: 55%;
    height: 160%;
    background: radial-gradient(circle at 30% 50%, rgba(169, 96, 238, 0.28) 0%, transparent 65%);
    pointer-events: none;
}

.careers-hero::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 55%;
    height: 160%;
    background: radial-gradient(circle at 70% 50%, rgba(0, 212, 255, 0.18) 0%, transparent 65%);
    pointer-events: none;
}

.careers-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.careers-hero-icon {
    margin: 0 auto var(--mkt-space-icon-margin);
}

/* ── Section header (eyebrow + heading + subtext, centered) ── */

.careers-section-header {
    max-width: 640px;
    margin: 0 auto var(--mkt-space-content);
    text-align: center;
}

/* ── Benefit card internals ─────────────────────────────── */

.careers-benefit-header {
    display: flex;
    align-items: center;
    gap: var(--stripe-space-3);
    margin-bottom: var(--stripe-space-5);
    padding-bottom: var(--stripe-space-4);
    border-bottom: 1px solid var(--stripe-border-light);
}

.careers-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--stripe-primary-light);
    border-radius: var(--stripe-radius-md);
    color: var(--stripe-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.careers-benefit-title {
    font-size: var(--stripe-fs-lg);
    font-weight: var(--stripe-fw-semibold);
    color: var(--stripe-text-primary);
    margin: 0;
}

.careers-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--stripe-space-2);
}

.careers-benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--stripe-space-2);
    font-size: var(--mkt-fs-caption);
    line-height: var(--mkt-lh-relaxed);
    color: var(--mkt-text-medium);
}

.careers-benefit-list li i {
    color: var(--mkt-success);
    font-size: var(--mkt-fs-caption);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Open Positions section ─────────────────────────────── */

.careers-openings {
    position: relative;
    overflow: hidden;
}

/* Subtle purple glow at the top of the dark section,
   acting as a visual "gateway" transition */
.careers-openings::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 300px;
    background: radial-gradient(ellipse at 50% 0%, rgba(99, 91, 255, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.careers-openings-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* Override mkt-heading-2 color for dark section context */
.careers-openings-inner .mkt-heading-2 {
    color: var(--mkt-text-white);
}

.careers-openings-inner .mkt-subheadline {
    color: var(--mkt-text-navy);
    margin-bottom: var(--stripe-space-10);
}

/* White card floated on the dark section — the contrast
   creates strong visual weight for the empty state */
.careers-openings-card {
    background: var(--stripe-bg-primary);
    border-radius: var(--mkt-radius-xlarge);
    padding: var(--mkt-space-card-padding);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.careers-openings-card .stripe-empty-state {
    padding: var(--stripe-space-8) 0 var(--stripe-space-4);
}

.careers-openings-card .stripe-empty-state-icon {
    color: var(--stripe-text-tertiary);
    margin-bottom: var(--stripe-space-5);
}

.careers-openings-card .stripe-empty-state-title {
    margin-bottom: var(--stripe-space-3);
}

.careers-openings-card .stripe-empty-state-text {
    margin-bottom: var(--stripe-space-6);
}