/**
 * UTPL Careers Portal — Enterprise Design System (Phase 33.6)
 * Presentation layer. Legacy class names preserved for compatibility.
 */

.careers-body {
    --careers-bg: var(--utpl-color-bg);
    --careers-surface: var(--utpl-color-surface);
    --careers-border: var(--utpl-color-border);
    --careers-text: var(--utpl-color-text);
    --careers-muted: var(--utpl-color-text-muted);
    --careers-primary: var(--utpl-color-primary);
    --careers-accent: var(--utpl-color-accent);
    --careers-cta: var(--utpl-color-cta);

    margin: 0;
    font-family: var(--utpl-font-sans);
    color: var(--careers-text);
    background: var(--careers-bg);
    line-height: var(--utpl-leading-relaxed);
    -webkit-font-smoothing: antialiased;
}

/* ── Header / nav ───────────────────────────────────────── */

.careers-header {
    position: sticky;
    top: 0;
    z-index: var(--utpl-z-sticky);
}

.careers-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--utpl-space-4);
    padding-block: var(--utpl-space-4);
}

.careers-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--utpl-space-3);
    text-decoration: none;
    color: var(--careers-text);
    font-weight: var(--utpl-font-bold);
    font-size: var(--utpl-text-lg);
}

.careers-brand__mark {
    width: 36px;
    height: 36px;
    border-radius: var(--utpl-radius);
    background: var(--utpl-gradient-brand);
    box-shadow: var(--utpl-shadow-brand);
    flex-shrink: 0;
}

.careers-brand__mark--footer {
    width: 40px;
    height: 40px;
    margin-bottom: var(--utpl-space-3);
}

.careers-nav {
    display: flex;
    align-items: center;
    gap: var(--utpl-space-1);
    flex-wrap: wrap;
}

.careers-nav__link {
    padding: var(--utpl-space-2) var(--utpl-space-3);
    border-radius: var(--utpl-radius-sm);
    color: var(--utpl-color-text-secondary);
    text-decoration: none;
    font-weight: var(--utpl-font-medium);
    font-size: var(--utpl-text-sm);
    transition: var(--utpl-transition-colors);
}

.careers-nav__link:hover,
.careers-nav__link:focus-visible {
    color: var(--careers-primary);
    background: var(--utpl-color-primary-soft);
    outline: none;
}

/* ── Main ──────────────────────────────────────────────── */

.careers-main {
    padding-bottom: var(--utpl-space-16);
}

.careers-section {
    padding-block: var(--utpl-space-12);
}

.careers-section--muted {
    background: var(--utpl-color-surface-muted);
}

.careers-page-header {
    margin-bottom: var(--utpl-space-8);
}

.careers-page-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: var(--utpl-font-bold);
    letter-spacing: var(--utpl-tracking-tight);
    margin: 0 0 var(--utpl-space-2);
    color: var(--careers-text);
}

.careers-page-subtitle {
    margin: 0;
    color: var(--careers-muted);
    font-size: var(--utpl-text-lg);
    max-width: 42rem;
}

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

.hero,
.careers-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--utpl-radius-2xl);
    padding: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: var(--utpl-space-10);
    color: var(--utpl-color-text-inverse);
    background:
        radial-gradient(ellipse 80% 80% at 100% 0%, rgba(124, 58, 237, 0.35), transparent 55%),
        radial-gradient(ellipse 60% 60% at 0% 100%, rgba(37, 99, 235, 0.4), transparent 50%),
        linear-gradient(135deg, var(--utpl-brand-navy) 0%, var(--utpl-blue-800) 50%, var(--utpl-purple-800) 100%);
    box-shadow: var(--utpl-shadow-xl);
}

.careers-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(15, 23, 42, 0.2));
    pointer-events: none;
}

.careers-hero__content {
    position: relative;
    z-index: 1;
    max-width: 40rem;
}

.careers-hero h1,
.hero h1 {
    margin-top: 0;
    margin-bottom: var(--utpl-space-4);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--utpl-font-bold);
    letter-spacing: var(--utpl-tracking-tight);
    line-height: var(--utpl-leading-tight);
}

.careers-hero p,
.hero p {
    font-size: var(--utpl-text-lg);
    opacity: 0.92;
    margin-bottom: var(--utpl-space-6);
    max-width: 36rem;
}

.careers-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--utpl-space-3);
}

/* ── Buttons (legacy + design system) ──────────────────── */

.btn,
.careers-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--utpl-space-2);
    background: var(--careers-primary);
    color: var(--utpl-color-text-inverse);
    padding: 0.65rem 1.25rem;
    border-radius: var(--utpl-radius);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-weight: var(--utpl-font-semibold);
    font-size: var(--utpl-text-sm);
    font-family: inherit;
    transition: var(--utpl-transition-all);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
}

.btn:hover,
.careers-btn:hover {
    background: var(--utpl-blue-600);
    color: var(--utpl-color-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}

.btn:focus-visible,
.careers-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

.btn-secondary {
    background: var(--careers-surface);
    color: var(--careers-primary);
    border: 1px solid var(--careers-border);
    box-shadow: var(--utpl-shadow-xs);
}

.btn-secondary:hover {
    background: var(--utpl-color-primary-soft);
    color: var(--utpl-blue-700);
    border-color: var(--utpl-blue-200);
}

/* ── Stats ─────────────────────────────────────────────── */

.careers-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--utpl-space-4);
    margin-bottom: var(--utpl-space-10);
}

.careers-stat {
    text-align: center;
    padding: var(--utpl-space-5);
    background: var(--careers-surface);
    border: 1px solid var(--utpl-color-border-light);
    border-radius: var(--utpl-radius-xl);
    box-shadow: var(--utpl-shadow-sm);
    transition: transform var(--utpl-duration-moderate) var(--utpl-ease-default),
                box-shadow var(--utpl-duration-moderate) var(--utpl-ease-default);
}

.careers-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--utpl-shadow-md);
}

.careers-stat__value {
    font-size: var(--utpl-text-3xl);
    font-weight: var(--utpl-font-bold);
    color: var(--careers-primary);
    line-height: 1.1;
}

.careers-stat__label {
    font-size: var(--utpl-text-sm);
    color: var(--careers-muted);
    margin-top: var(--utpl-space-1);
}

/* ── Section headings ──────────────────────────────────── */

.careers-section__title {
    font-size: var(--utpl-text-2xl);
    font-weight: var(--utpl-font-bold);
    margin: 0 0 var(--utpl-space-2);
    letter-spacing: var(--utpl-tracking-tight);
}

.careers-section__lead {
    color: var(--careers-muted);
    margin: 0 0 var(--utpl-space-8);
    max-width: 36rem;
}

/* ── Cards / job grid ──────────────────────────────────── */

.job-grid,
.careers-card-grid {
    display: grid;
    gap: var(--utpl-space-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.job-card,
.careers-value-card {
    background: var(--careers-surface);
    border: 1px solid var(--utpl-color-border-light);
    border-radius: var(--utpl-radius-xl);
    padding: var(--utpl-space-5);
    box-shadow: var(--utpl-shadow-sm);
    transition: transform var(--utpl-duration-moderate) var(--utpl-ease-default),
                box-shadow var(--utpl-duration-moderate) var(--utpl-ease-default),
                border-color var(--utpl-duration-moderate) var(--utpl-ease-default);
}

.job-card:hover,
.careers-value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--utpl-shadow-lg);
    border-color: var(--utpl-blue-200);
}

.job-card--featured {
    border-color: var(--utpl-blue-200);
    background: linear-gradient(180deg, var(--careers-surface), var(--utpl-blue-50));
}

.job-card h2,
.job-card h3 {
    margin: 0 0 var(--utpl-space-2);
    font-size: var(--utpl-text-lg);
    font-weight: var(--utpl-font-bold);
}

.job-card h2 a {
    color: var(--careers-text);
    text-decoration: none;
    transition: color var(--utpl-duration-fast) var(--utpl-ease-default);
}

.job-card h2 a:hover {
    color: var(--careers-primary);
}

.job-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--utpl-space-3);
    margin-top: var(--utpl-space-4);
    flex-wrap: wrap;
}

.job-meta {
    color: var(--careers-muted);
    font-size: var(--utpl-text-sm);
    margin: 0 0 var(--utpl-space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--utpl-space-2);
    align-items: center;
}

/* ── Badges ────────────────────────────────────────────── */

.badge,
.careers-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--utpl-radius-full);
    font-size: var(--utpl-text-xs);
    font-weight: var(--utpl-font-semibold);
    background: var(--utpl-color-primary-soft);
    color: var(--utpl-blue-700);
}

.badge--remote {
    background: var(--utpl-color-success-soft);
    color: var(--utpl-color-success-text);
}

.badge--featured {
    background: var(--utpl-color-cta-soft);
    color: var(--utpl-orange-700);
}

/* ── Filters (sticky) ──────────────────────────────────── */

.careers-filters-wrap {
    position: sticky;
    top: calc(var(--utpl-topbar-height) + var(--utpl-space-2));
    z-index: var(--utpl-z-sticky);
    margin-bottom: var(--utpl-space-6);
}

.filters,
.careers-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--utpl-space-4);
    padding: var(--utpl-space-5);
    background: var(--utpl-glass-bg-strong);
    backdrop-filter: var(--utpl-glass-blur);
    -webkit-backdrop-filter: var(--utpl-glass-blur);
    border: var(--utpl-glass-border-light);
    border-radius: var(--utpl-radius-xl);
    box-shadow: var(--utpl-shadow-md);
}

.filters label,
.careers-filters label {
    display: block;
    font-size: var(--utpl-text-xs);
    font-weight: var(--utpl-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--utpl-tracking-wider);
    color: var(--careers-muted);
    margin-bottom: var(--utpl-space-2);
}

.filters .filters-submit,
.careers-filters__submit {
    align-self: end;
}

/* ── Forms ─────────────────────────────────────────────── */

input,
select,
textarea,
.careers-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--careers-border);
    border-radius: var(--utpl-radius);
    font: inherit;
    color: var(--careers-text);
    background: var(--careers-surface);
    transition: border-color var(--utpl-duration-fast) var(--utpl-ease-default),
                box-shadow var(--utpl-duration-fast) var(--utpl-ease-default);
}

input:focus,
select:focus,
textarea:focus,
.careers-input:focus {
    outline: none;
    border-color: var(--utpl-color-border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.apply-form,
.careers-apply-form {
    background: var(--careers-surface);
    border: 1px solid var(--utpl-color-border-light);
    border-radius: var(--utpl-radius-2xl);
    padding: var(--utpl-space-8);
    box-shadow: var(--utpl-shadow-lg);
}

.form-row,
.careers-form-row {
    margin-bottom: var(--utpl-space-5);
}

.form-row label,
.careers-form-row label {
    display: block;
    font-weight: var(--utpl-font-semibold);
    margin-bottom: var(--utpl-space-2);
    font-size: var(--utpl-text-sm);
}

.careers-file-upload {
    border: 2px dashed var(--careers-border);
    border-radius: var(--utpl-radius-lg);
    padding: var(--utpl-space-6);
    text-align: center;
    background: var(--utpl-color-surface-muted);
    transition: border-color var(--utpl-duration-moderate) var(--utpl-ease-default),
                background var(--utpl-duration-moderate) var(--utpl-ease-default);
}

.careers-file-upload:hover,
.careers-file-upload:focus-within {
    border-color: var(--careers-primary);
    background: var(--utpl-color-primary-soft);
}

.careers-file-upload input[type="file"] {
    margin-top: var(--utpl-space-3);
    cursor: pointer;
}

.careers-file-upload__hint {
    font-size: var(--utpl-text-sm);
    color: var(--careers-muted);
    margin-top: var(--utpl-space-2);
}

/* Application progress (visual) */
.careers-apply-progress {
    display: flex;
    gap: var(--utpl-space-2);
    margin-bottom: var(--utpl-space-8);
    list-style: none;
    padding: 0;
}

.careers-apply-progress__step {
    flex: 1;
    text-align: center;
    font-size: var(--utpl-text-xs);
    font-weight: var(--utpl-font-semibold);
    color: var(--careers-muted);
    padding-bottom: var(--utpl-space-2);
    border-bottom: 3px solid var(--utpl-slate-200);
}

.careers-apply-progress__step.is-active,
.careers-apply-progress__step.is-complete {
    color: var(--careers-primary);
    border-bottom-color: var(--careers-primary);
}

/* ── Job detail ────────────────────────────────────────── */

.job-detail,
.careers-job-detail {
    max-width: var(--utpl-container-lg);
}

.job-detail h1 {
    margin-top: var(--utpl-space-4);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--utpl-font-bold);
    letter-spacing: var(--utpl-tracking-tight);
}

.job-detail section,
.careers-job-detail section {
    margin-top: var(--utpl-space-8);
    padding: var(--utpl-space-6);
    background: var(--careers-surface);
    border: 1px solid var(--utpl-color-border-light);
    border-radius: var(--utpl-radius-xl);
    box-shadow: var(--utpl-shadow-sm);
}

.job-detail section h2 {
    font-size: var(--utpl-text-xl);
    margin-top: 0;
    margin-bottom: var(--utpl-space-4);
}

.careers-job-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--utpl-space-3);
    margin-top: var(--utpl-space-8);
}

/* ── Timeline / hiring process ─────────────────────────── */

.careers-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--utpl-space-4);
}

@media (min-width: 768px) {
    .careers-timeline--process {
        grid-template-columns: repeat(4, 1fr);
    }
}

.careers-timeline__item {
    position: relative;
    padding: var(--utpl-space-5);
    background: var(--careers-surface);
    border: 1px solid var(--utpl-color-border-light);
    border-radius: var(--utpl-radius-xl);
    box-shadow: var(--utpl-shadow-sm);
    transition: transform var(--utpl-duration-moderate) var(--utpl-ease-default);
}

.careers-timeline__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--utpl-shadow-md);
}

.careers-timeline__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--utpl-gradient-brand);
    color: var(--utpl-color-text-inverse);
    font-weight: var(--utpl-font-bold);
    font-size: var(--utpl-text-sm);
    margin-bottom: var(--utpl-space-3);
}

.careers-timeline__title {
    font-weight: var(--utpl-font-bold);
    margin: 0 0 var(--utpl-space-2);
    font-size: var(--utpl-text-base);
}

.careers-timeline__text {
    margin: 0;
    font-size: var(--utpl-text-sm);
    color: var(--careers-muted);
}

/* ── Alerts ────────────────────────────────────────────── */

.alert {
    padding: var(--utpl-space-4) var(--utpl-space-5);
    border-radius: var(--utpl-radius-lg);
    margin-bottom: var(--utpl-space-4);
    border: none;
}

.alert-success,
.careers-success {
    background: var(--utpl-color-success-soft);
    color: var(--utpl-color-success-text);
}

.alert-danger,
.careers-alert--danger {
    background: var(--utpl-color-danger-soft);
    color: var(--utpl-color-danger-text);
}

.careers-success-panel {
    padding: var(--utpl-space-10);
    text-align: center;
    border-radius: var(--utpl-radius-2xl);
    background: var(--careers-surface);
    border: 1px solid var(--utpl-color-border-light);
    box-shadow: var(--utpl-shadow-xl);
}

.careers-success-panel__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--utpl-space-5);
    border-radius: 50%;
    background: var(--utpl-color-success-soft);
    color: var(--utpl-color-success-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

/* ── Pagination ────────────────────────────────────────── */

.careers-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--utpl-space-2);
    margin-top: var(--utpl-space-8);
    flex-wrap: wrap;
}

.careers-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--utpl-space-3);
    border-radius: var(--utpl-radius);
    border: 1px solid var(--careers-border);
    color: var(--utpl-color-text-secondary);
    text-decoration: none;
    font-weight: var(--utpl-font-medium);
    font-size: var(--utpl-text-sm);
    transition: var(--utpl-transition-colors);
}

.careers-pagination__link:hover {
    background: var(--utpl-color-primary-soft);
    border-color: var(--careers-primary);
    color: var(--careers-primary);
}

.careers-pagination__link.is-active {
    background: var(--careers-primary);
    border-color: var(--careers-primary);
    color: var(--utpl-color-text-inverse);
}

.careers-pagination__link.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Empty state ───────────────────────────────────────── */

.careers-empty {
    padding: var(--utpl-space-10) var(--utpl-space-4);
}

.careers-empty__icon {
    background: var(--utpl-color-primary-soft);
    color: var(--careers-primary);
}

/* ── Footer ────────────────────────────────────────────── */

.careers-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--utpl-space-8);
    margin-bottom: var(--utpl-space-8);
}

.careers-footer__heading {
    font-size: var(--utpl-text-sm);
    font-weight: var(--utpl-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--utpl-tracking-wider);
    color: var(--utpl-slate-400);
    margin: 0 0 var(--utpl-space-4);
}

.careers-footer__tagline {
    color: var(--utpl-slate-400);
    font-size: var(--utpl-text-sm);
    line-height: var(--utpl-leading-relaxed);
    margin: 0;
    max-width: 280px;
}

.careers-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.careers-footer__links a {
    color: var(--utpl-slate-300);
    text-decoration: none;
    font-size: var(--utpl-text-sm);
    display: block;
    padding: var(--utpl-space-1) 0;
    transition: color var(--utpl-duration-fast) var(--utpl-ease-default);
}

.careers-footer__links a:hover {
    color: var(--utpl-color-text-inverse);
}

.careers-footer__copy {
    margin: 0;
    padding-top: var(--utpl-space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--utpl-slate-500);
    font-size: var(--utpl-text-sm);
}

/* ── Skeleton ──────────────────────────────────────────── */

.careers-skeleton {
    background: linear-gradient(
        90deg,
        var(--utpl-slate-100) 25%,
        var(--utpl-slate-200) 50%,
        var(--utpl-slate-100) 75%
    );
    background-size: 200% 100%;
    animation: utpl-shimmer 1.2s infinite;
    border-radius: var(--utpl-radius);
}

/* ── Container legacy alias ────────────────────────────── */

.container {
    width: min(var(--utpl-container-xl), 92vw);
    margin: 0 auto;
    padding-inline: var(--utpl-space-4);
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .careers-header__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .careers-nav {
        width: 100%;
    }

    .careers-filters-wrap {
        top: 0;
    }

    .apply-form,
    .careers-apply-form {
        padding: var(--utpl-space-5);
    }

    .careers-apply-progress {
        flex-direction: column;
    }

    .careers-apply-progress__step {
        text-align: left;
        border-bottom: none;
        border-left: 3px solid var(--utpl-slate-200);
        padding-left: var(--utpl-space-3);
    }

    .careers-apply-progress__step.is-active,
    .careers-apply-progress__step.is-complete {
        border-left-color: var(--careers-primary);
    }
}

.careers-back-link {
    color: var(--careers-muted);
    text-decoration: none;
    font-weight: var(--utpl-font-medium);
}

.careers-back-link:hover {
    color: var(--careers-primary);
}

.careers-icon {
    color: var(--careers-primary);
    margin-right: var(--utpl-space-2);
}

.careers-cta-title {
    font-size: var(--utpl-text-xl);
    font-weight: var(--utpl-font-bold);
    margin: 0 0 var(--utpl-space-3);
}

.careers-cta-text {
    margin: 0 0 var(--utpl-space-5);
    opacity: 0.92;
}

.careers-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--utpl-space-3);
    justify-content: center;
    margin-top: var(--utpl-space-6);
}

.careers-file-upload__icon {
    font-size: 2rem;
    color: var(--careers-primary);
    display: block;
    margin-bottom: var(--utpl-space-2);
}

.careers-file-upload__label {
    margin: 0 0 var(--utpl-space-2);
    font-weight: var(--utpl-font-semibold);
}

.careers-job-html {
    line-height: var(--utpl-leading-relaxed);
}

.careers-job-html h1,
.careers-job-html h2,
.careers-job-html h3 {
    margin-top: var(--utpl-space-4);
    margin-bottom: var(--utpl-space-2);
}

.mb-2 { margin-bottom: var(--utpl-space-2); }

@media (prefers-color-scheme: dark) {
    .careers-body[data-utpl-theme="auto"] {
        color-scheme: dark;
    }
}

/* ═══════════════════════════════════════════════════════════
   Phase 33.7 — Enterprise UX polish (careers portal)
   ═══════════════════════════════════════════════════════════ */

.careers-hero {
    will-change: transform;
}

.careers-filters {
    box-shadow: var(--utpl-elevation-3);
}

.job-grid.utpl-stagger,
.careers-stats {
    margin-bottom: var(--utpl-space-10);
}