/* ============================================================
   CAREERS — Page-specific styles
   Prefix: .careers-
   Uses: about-hero, about-sections, sarovyn-form, form-group,
         form-submit, field-error, form-spinner, btn-share-social,
         text-cta, text-cta-arrow, luxury-typography h2/h3 styles,
         Bootstrap d-flex / align-items-center / gap-* / mb-* utilities.
   Only rules that cannot be composed from Bootstrap or existing
   Sarovyn utilities are defined here. Each kept rule has a comment.
   ============================================================ */

/* ---- Page shell ---- */
/* Careers-specific background — not a global page default. */
.careers-page {
  background: var(--color-alabaster);
  min-height: 100vh;
}

/* Tighten the shared .about-hero when rendered inside a careers page.
   About defaults to 5rem/3rem; careers wants the same compact rhythm
   (~1.5rem) used across the rest of its sections, and no divider. */
.careers-page .about-hero {
  padding: var(--space-8) 0 var(--space-6);
  border-bottom: 0;
}
@media (max-width: 767.98px) {
  .careers-page .about-hero {
    padding: var(--space-6) 0 var(--space-4);
  }
}

/* ---- Category filter pills ----
   Matches the universal Sarovyn pill pattern used across Blog
   (.the-standard__drawer-pill) and FAQ (.faq-index__category-btn):
   transparent outline, subtle border, underline reveal on hover,
   solid charcoal fill with alabaster text when active.
   No global pill component exists; this IS the canonical pattern here.
*/
.careers-filters {
  background: var(--color-alabaster);
  padding: var(--space-8) 0;
}

.careers-filters__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.careers-filters__pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-surface-dark);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: color var(--transition-slow),
              border-color var(--transition-slow),
              background-color var(--transition-slow);
  position: relative;
  min-height: 44px;
}
.careers-filters__pill::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 16px;
  width: 0;
  height: 1px;
  background-color: var(--color-surface-dark);
  transition: width var(--transition-slow);
}
.careers-filters__pill:hover {
  color: var(--color-surface-dark);
  background-color: transparent;
  border-color: transparent;
  text-decoration: none;
}
.careers-filters__pill:hover::after {
  width: calc(100% - 32px);
}
.careers-filters__pill:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.careers-filters__pill--active {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-alabaster);
}
.careers-filters__pill--active::after {
  background-color: var(--color-alabaster);
}
.careers-filters__pill--active:hover {
  background: var(--color-surface-dark);
  border-color: var(--color-surface-dark);
  color: var(--color-alabaster);
}
.careers-filters__pill--active:hover::after {
  width: calc(100% - 32px);
}

/* ---- Role listing ---- */
/* Uses Bootstrap .container — no custom max-width wrapper needed. */
/* Tight careers rhythm: ~1.5rem top/bottom on each section,
   giving ~3rem total between adjacent sections. */
.careers-listing {
  padding: var(--space-6) 0;
}

/* ---- Role card ---- */
/* No global luxury card exists; this composition (full-height flex, border lift,
   gold hover) is careers-specific. */
.careers-role-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.careers-role-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}

.careers-role-card--paused {
  opacity: 0.75;
}

.careers-role-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  min-height: 1.5rem;
}

/* Uppercase gold eyebrow — no global eyebrow class exists. */
.careers-role-card__category {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-accent);
}

/* Bootstrap .badge variant override — sharp corners + no radius. */
.careers-role-card__badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-none);
}

/* h2 inside the card: global luxury-typography sets margin-bottom: 2rem which
   breaks the card layout. Reset to card-native spacing. */
.careers-role-card__title {
  font-size: var(--text-xl);
  color: var(--color-surface-dark);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-snug);
}

/* Summary paragraph — grows to fill card height before meta/CTA. */
.careers-role-card__summary {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-4);
  flex-grow: 1;
}

/* Meta row uses shared .sarovyn-meta-list (components/meta-list.css). */

/* Role card CTA chrome comes from global .text-cta / .text-cta-arrow */
.careers-role-card .text-cta {
  margin-top: auto;
}

/* ---- Culture section (index + detail) ---- */
/* Background color + padding are section-specific layout; not global. */
.careers-culture {
  background: var(--color-surface-secondary);
  padding: var(--space-6) 0;
}

/* Global luxury-typography h2 covers font-family / weight-light / color.
   Only keep this as a margin reset since global h2 has margin-bottom: 2rem
   which is appropriate here — no override needed; class removed from templates. */

/* Body prose — global <p> style covers this. Class removed from templates. */

/* ============================================================
   DETAIL PAGE
   ============================================================ */

/* Detail hero: section background + border + padding are page-specific. */
.careers-detail__hero {
  background: var(--color-alabaster);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-8) 0 var(--space-6);
}

/* Back link: global .text-cta arrow moves RIGHT on hover (translateX +4px).
   The breadcrumb link points LEFT, so we reverse the nudge direction. */
.careers-detail__breadcrumb .text-cta:hover .text-cta-arrow {
  transform: translateX(-4px);
}

/* Role ID badge — Bootstrap .badge exists but defaults to colored background.
   This variant is transparent with subtle border + monospace-lite sizing.
   No global badge/pill pattern matches this treatment. */
.careers-detail__role-id {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-regular);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-tertiary);
  border-radius: var(--radius-none);
  padding: var(--space-1) var(--space-3);
}

/* Job title h1: global h1 is clamp(2.5rem, 5vw, 4rem) which is too large for
   a detail-page header sitting above a dense meta row. Careers uses a tighter
   clamp starting at 2rem. Keep the size + tracking delta only. */
.careers-detail__title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-surface-dark);
  margin: 0 0 var(--space-5);
  letter-spacing: var(--tracking-tight);
}

/* Meta row uses shared .sarovyn-meta-list (components/meta-list.css). */

/* Copy-confirm "Copied!" text after clipboard button click. */
.careers-share__copy-confirm {
  font-size: var(--text-xs);
  color: var(--color-sage);
}

/* ---- Body / content area ---- */
.careers-detail__body {
  padding: var(--space-6) 0 var(--space-20);
}

/* Override the global `section { padding: 110px 0 }` from sarovyn-app.css
   which otherwise stacks ~7rem of padding on every content section. */
.careers-detail__section {
  padding: 0;
  margin-bottom: var(--space-6);
}

/* Section heading h2: global luxury-typography sets font-family/weight-light/color.
   The only careers-specific delta is the bottom border divider. */
/* Section headings use shared .sarovyn-section-heading (components/section-heading.css). */

/* Rich text body prose — .rich-text-body exists globally but carries max-width:540px
   and animation opacity:0 inside rich-text-media-block context. Using it here would
   import unwanted layout constraints. This is a standalone prose wrapper. */
.careers-detail__rich-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.careers-detail__rich-text p { margin-bottom: 1em; }
.careers-detail__rich-text p:last-child { margin-bottom: 0; }

/* ---- Responsibilities/Requirements/NiceToHave lists ---- */
/* Custom "+" bullet list — mirrors .rich-text-body ul li::before but these items
   are individual <li> elements (not inside .rich-text-body), so the global rule
   does not apply. */
.careers-detail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.careers-detail__list-item {
  padding-left: var(--space-5);
  position: relative;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* "+" bullet — same pattern as .rich-text-body ul li::before */
.careers-detail__list-item::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--color-text-accent);
}

/* Strip richtext <p> margin inside list items */
.careers-detail__list-item p { margin: 0; }

/* ---- Benefits list ---- */
/* Icon-text layout: no global icon-list pattern exists.
   Careers-specific combination of image icon + title + description prose. */
.careers-detail__benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.careers-detail__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.careers-detail__benefit-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  object-fit: contain;
}

/* <strong> inside benefit item — global <strong> has no font-size or block display. */
.careers-detail__benefit-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  display: block;
  margin-bottom: var(--space-1);
}

.careers-detail__benefit-desc {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Culture block inset on detail page — tinted bg box, not a global component. */
.careers-detail__culture {
  background: var(--color-surface-secondary);
  padding: var(--space-8);
  margin-top: var(--space-4);
}

/* ---- Application panel (sidebar) ---- */
/* Sticky positioning is the main reason this class must exist. */
.careers-apply-panel {
  background: var(--color-alabaster);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-8);
  position: sticky;
  top: 150px;
}

/* Panel heading h2: global luxury-typography sets font-family/weight-light/color.
   The only careers-specific delta is the bottom border + padding. */
/* Apply panel heading uses shared .sarovyn-section-heading. */

.careers-apply-panel__status {
  margin-bottom: var(--space-4);
}

/* Status alerts — no global Sarovyn alert pattern; Bootstrap .alert has rounded
   corners and different visual language. These left-border variants are the
   Sarovyn standard. */
.careers-apply-panel__status.status--success {
  background: rgba(119, 129, 92, 0.08);
  border-left: 3px solid var(--color-sage);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-sage-dark);
}

.careers-apply-panel__status.status--error {
  background: rgba(128, 0, 32, 0.06);
  border-left: 3px solid var(--color-burgundy);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-burgundy);
}

/* Paused notice — gold left-border variant; no global equivalent. */
.careers-apply-panel__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(212, 175, 55, 0.06);
  border-left: 3px solid var(--color-gold);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.careers-apply-panel__notice svg {
  flex-shrink: 0;
  color: var(--color-gold);
  margin-top: 0.1rem;
}

.careers-apply-panel__notice p {
  margin: 0;
  line-height: var(--leading-snug);
}

/* File input inherits underline + padding from forms-base.css
   via .form-group input selector — no local override needed. */

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  /* Sticky panel must go static on tablet/mobile — layout-specific. */
  .careers-apply-panel {
    position: static;
    margin-top: var(--space-10);
  }
}

@media (max-width: 767.98px) {
  .careers-detail__hero {
    padding: var(--space-6) 0 var(--space-4);
  }

  /* Title size clamp floor is 2rem; on small screens drop further. */
  .careers-detail__title {
    font-size: var(--text-xl);
  }

  .careers-detail__meta {
    gap: var(--space-2);
  }
}