/* ==================================================================
   OZAVION — Careers page tweaks
   Small, additive layer on top of sections.css / components.css
   (which already ship .tile, .tile--step/.step-num, .panel,
   .brand-chips/.brand-chip, .list-check, .pill, .grid, .two-col).
   Nothing here redefines shared components — only page-specific polish.
   ================================================================== */

/* ------------------------------------------------------------------
   OPEN ROLE CARDS (built on the quiet elevated surface family)
   ------------------------------------------------------------------ */
.role-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.role-card:hover { transform: translateY(-4px); border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.role-card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

/* Meta row — department / location / type tags */
.role-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.role-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-soft);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.role-card__brand { margin-top: calc(-1 * var(--space-1, 0.25rem)); }
.role-card__desc { font-size: var(--fs-sm); color: var(--color-text-soft); }

/* Push the apply button to the bottom so cards align in the grid */
.role-card__apply { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------------------
   TEAMS — reuse .brand-chip but carry an icon glyph instead of a letter
   ------------------------------------------------------------------ */
.careers-teams { gap: var(--space-3); }
.careers-team { padding: 0.5rem 1rem 0.5rem 0.5rem; font-size: var(--fs-sm); }
.careers-team__glyph {
    width: 26px;
    height: 26px;
    background: var(--color-accent-soft);
    color: var(--color-accent-2);
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.careers-team__glyph .icon { width: 15px; height: 15px; }

/* ------------------------------------------------------------------
   CULTURE — give the check list a little breathing room in the panel
   ------------------------------------------------------------------ */
.careers-culture { gap: var(--space-3); align-self: center; }

/* ------------------------------------------------------------------
   TALENT CTA panel — centred, contained width
   ------------------------------------------------------------------ */
.careers-talent { max-width: 760px; margin-inline: auto; text-align: center; }
.careers-talent .pill,
.careers-talent .cluster { justify-content: center; }
.careers-talent .lead { margin-inline: auto; }