/* =========================================================================
   PAGE: CAREERS — page-specific CSS. Linked from the Blade view's
   @section('css') as /css/new/careers.css. All rules scoped under
   .page-careers. Shared tokens, nav, footer, the page eyebrow, the
   overflow-x/min-width rules, and the blob all live in
   /public/css/new/global-2026.css — do NOT redeclare them here.

   Eyebrow, hero (intro + team photo), Explore positions (filters + the
   DYNAMIC jobs list), plus tablet + mobile responsive overrides.

   Breakpoints (project-wide):
     mobile  : width < 768
     tablet  : 768 .. 1023
     desktop : width >= 1024  (Figma artboard 1512, content 1296)
   ========================================================================= */

/* ---------- Anti-cascade overrides (defeat layout.min.css + bootstrap.min.css) ---------- */
.page-careers a:link,
.page-careers a:visited,
.page-careers a:hover,
.page-careers a:focus,
.page-careers a:active { color: inherit; text-decoration: none; }

.page-careers button {
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.page-careers img { display: block; max-width: 100%; }

.page-careers .container {
  width: 1320px;
  max-width: 1320px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Re-assert shared footer link colors (the link reset above beats the
   shared .footer__links rule on specificity, so links would inherit black
   and vanish on the dark footer card). */
.page-careers .footer__links a:link,
.page-careers .footer__links a:visited,
.page-careers .footer__links a:active { color: var(--color-neutral-lighter); }
.page-careers .footer__links a:hover,
.page-careers .footer__links a:focus { color: #ffffff; }

/* ---------- Sticky footer: footer sits at viewport bottom on short pages ---------- */
.page-careers {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-careers .careers-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 132px;       /* LOCKED eyebrow position — see web_designer conventions "Page eyebrow position" */
  padding-bottom: 0;
}
.page-careers .careers-main > div.container:first-of-type {
  margin-bottom: 64px;
}
/* The footer comes from @include('blocks.footer-2026') (a .footer-2026 wrapper),
   not the prototype's old .footer-wrap. margin-top:auto pushes it to the bottom. */
.page-careers .careers-main > .footer-2026 {
  margin-top: auto;
  margin-bottom: 30px;
}

/* Eyebrow uses the global .page-eyebrow class (global-2026.css) — do not fork. */

/* ===========================================================
   HERO — intro copy (left) + team photo w/ red gradient (right)
   =========================================================== */
.page-careers .careers-hero {
  display: flex;
  align-items: flex-start;
  gap: 27px;
  margin-bottom: 64px;
}
.page-careers .careers-hero__text {
  flex: 0 0 638px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.page-careers .careers-hero__title {
  margin: 0;
}
.page-careers .careers-hero__sub {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-large);        /* 22px */
  line-height: 1.5;
  color: var(--color-neutral-400);
}
/* Layered media block (mirrors about-us .team-card__photo): the container clips
   the B&W photo to the rounded corners, the ::after paints the red→pink glow.
   Aspect-ratio matches the Figma GradientCover instance at each breakpoint
   (desktop 634×422 / tablet 770×360 / mobile 370×220) — see ::after below. */
.page-careers .careers-hero__media {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  aspect-ratio: 634 / 422;
  border-radius: 32px;
  overflow: hidden;
}
.page-careers .careers-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Red→pink glow laid over the (black & white) photo via CSS — never baked into
   the file. Exact Figma gradient (Card/Media/GradientCover/Red): focal at
   82% / 106% of the box, radial red→magenta→pink→transparent ramp. Stop alphas
   are the Figma stop opacities folded with the layer's 0.88 opacity, so the
   wash matches the design 1:1 at full strength. */
.page-careers .careers-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(124% 128% at 86% 109%,
    rgba(228, 37, 33, 0.88)  0%,
    rgba(229, 44, 56, 0.82)  5.77%,
    rgba(229, 52, 79, 0.76)  11.54%,
    rgba(230, 66, 125, 0.64) 23.08%,
    rgba(232, 96, 216, 0.41) 46.15%,
    rgba(244, 175, 236, 0.20) 73.08%,
    rgba(255, 255, 255, 0)   100%);
}

/* ===========================================================
   EXPLORE POSITIONS — heading + filters + jobs list
   =========================================================== */
.page-careers .careers-positions__title {
  margin: 0 0 23px;
}

/* ---------- Filters ---------- */
.page-careers .job-filters {
  margin: 0 0 23px;
}
.page-careers .job-filters__row {
  display: flex;
  align-items: center;
  gap: 25px;
}

/* shadcn-style dropdown filter — Radix DropdownMenu behaviour reproduced in
   vanilla JS/CSS. The pill is the trigger; options live in an animated popover.
   Selecting an item sets .job-select[data-value], which the filter JS reads.
   `.job-select[data-state="open"|"closed"]` drives the open/close animation. */
.page-careers .job-select {
  position: relative;
  flex: 0 0 199px;
  width: 199px;
}
.page-careers .job-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 55px;
  padding: 10px 8px 10px 16px;
  background: var(--color-card-body-surface);   /* #f2f2f7 */
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutral-1000);
  text-align: left;
  cursor: pointer;
}
.page-careers .job-select__trigger:focus-visible {
  outline: 2px solid var(--color-blue-300);
  outline-offset: 2px;
}
.page-careers .job-select__value {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-careers .job-select__chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
}
.page-careers .job-select[data-state="open"] .job-select__chevron { transform: rotate(180deg); }

/* Popover = shadcn DropdownMenuContent: rounded border, white bg, shadow-md,
   p-1; animates fade-in-0 + zoom-in-95 + slide-in-from-top-2 on open (reverse
   on close), transform-origin top. */
.page-careers .job-select__menu {
  position: absolute;
  top: calc(100% + 4px);   /* shadcn sideOffset */
  left: 0;
  z-index: 50;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
  transform-origin: top center;
  opacity: 0;
  transform: scale(0.95) translateY(-8px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.15s;
}
.page-careers .job-select[data-state="open"] .job-select__menu {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.15s ease,
    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}
.page-careers .job-select__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutral-1000);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.page-careers .job-select__item:hover,
.page-careers .job-select__item.is-active-key {     /* hover OR keyboard-highlighted */
  background: var(--color-neutral-100);              /* shadcn accent */
}
.page-careers .job-select__item[aria-checked="true"] { font-weight: 500; }
.page-careers .job-select__item[aria-checked="true"]::after {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 9px;
  margin-right: 2px;
  border: solid var(--color-neutral-1000);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .page-careers .job-select__menu,
  .page-careers .job-select[data-state="open"] .job-select__menu {
    transition: visibility 0s;
    transform: none;
  }
}

/* Search field — white box, neutral/300 border, dark "Search offers" button. */
.page-careers .job-search {
  flex: 1 1 0;
  min-width: 0;
  height: 55px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9.5px 8px 9.5px 16px;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-300);   /* #b5b3b3 */
  border-radius: var(--radius-sm);
}
.page-careers .job-search__icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.page-careers .job-search__input {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutral-1000);
}
.page-careers .job-search__input::placeholder { color: #737373; }
.page-careers .job-search__btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 16px;
  background: var(--color-neutral-600);   /* #544d4d — search button (not the primary black CTA) */
  color: var(--color-btn-primary-fg);     /* #fafafa */
  border: 0;
  border-radius: var(--radius-xs);
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.page-careers .job-search__btn:hover { background: var(--color-btn-primary-bg-hover); }

/* ---------- Jobs list (DYNAMIC) ---------- */
.page-careers .jobs-list {
  display: flex;
  flex-direction: column;
  /* Reset Bootstrap reboot's ul { padding-left: 2rem } which otherwise leaks a
     ~32px left gutter onto the openings list. */
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-careers .jobs-list__item { display: block; }
/* The filter sets [hidden] on non-matching rows. The .jobs-list__item rule
   above (specificity 0,2,1) would otherwise beat the UA `[hidden]{display:none}`
   (0,1,0) and keep them visible — so re-assert the hide at higher specificity. */
.page-careers .jobs-list__item[hidden],
.page-careers .jobs-list__empty[hidden] { display: none; }

.page-careers .job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border-bottom: 2px solid var(--color-neutral-200);   /* #dad9d9 */
}

.page-careers .job-row__info {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.page-careers .job-row__title {
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-medium);   /* 18px */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}
.page-careers .job-row__loc {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-careers .job-row__pin {
  flex: 0 0 auto;
  width: 16px;
  height: 20px;
}
.page-careers .job-row__loc-text {
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-small);    /* 16px */
  line-height: 1.3;
  color: var(--color-neutral-400);
}
.page-careers .job-row__arrow {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-careers .job-row__arrow img { width: 16px; height: 16px; }
/* On hover the arrow glides to the right edge of the row (the 32px padding is
   the exact travel distance, so it lands flush with the divider line end). */
.page-careers .job-row:hover .job-row__arrow { transform: translateX(32px); }

.page-careers .jobs-list__empty {
  padding: 32px;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);
  line-height: 1.4;
  color: var(--color-neutral-400);
}

/* =========================================================================
   TABLET — 768 .. 1023
   ========================================================================= */
@media (max-width: 1023px) {
  .page-careers .container {
    width: 100%;
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
  }

  .page-careers .careers-main { padding-top: 116px; }   /* LOCKED eyebrow position (tablet) */
  .page-careers .careers-main > div.container:first-of-type { margin-bottom: 48px; }

  /* Hero stacks: copy on top, full-width photo below. */
  .page-careers .careers-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin-bottom: 48px;
  }
  .page-careers .careers-hero__text { flex: 1 1 auto; }
  .page-careers .careers-hero__media { flex: 1 1 auto; aspect-ratio: 770 / 360; }

  .page-careers .careers-positions__title { margin-bottom: 24px; }

  /* 3 selects share the top row; search wraps to its own full-width row. */
  .page-careers .job-filters__row {
    flex-wrap: wrap;
    gap: 16px;
  }
  .page-careers .job-select {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .page-careers .job-search {
    flex: 1 1 100%;
  }

  .page-careers .job-row { padding: 24px; }
}

/* =========================================================================
   MOBILE — <768
   ========================================================================= */
@media (max-width: 767px) {
  .page-careers .container { padding-left: 16px; padding-right: 16px; }

  .page-careers .careers-main { padding-top: 96px; }    /* LOCKED eyebrow position (mobile) */
  .page-careers .careers-main > div.container:first-of-type { margin-bottom: 32px; }

  .page-careers .careers-hero {
    gap: 24px;
    margin-bottom: 40px;
  }
  .page-careers .careers-hero__sub {
    font-size: var(--fs-body-medium);       /* 16px on mobile via token */
  }
  .page-careers .careers-hero__media { border-radius: 20px; aspect-ratio: 370 / 220; }

  .page-careers .careers-positions__title {
    margin-bottom: 20px;
  }

  /* Stack every filter control full width. */
  .page-careers .job-filters__row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .page-careers .job-select,
  .page-careers .job-search {
    flex: 1 1 auto;
    width: 100%;
  }

  .page-careers .job-row {
    padding: 20px 16px;
    gap: 16px;
  }
  .page-careers .job-row__title { font-size: var(--fs-body-medium); }   /* 16px */
  .page-careers .job-row__loc-text { font-size: var(--fs-body-small); } /* 14px */
}

/* =========================================================================
   APPLY BLOCK — duplicated from the career-detail page (cd-apply) so the
   careers hub carries the same "Apply for this job" form above the footer.
   The `.cd-apply*` layout and the shared button/form/checkbox library below
   are copied VERBATIM from career-detail.css (the library is forked per page —
   see that file's header note; global-2026.css doesn't carry it yet). The form
   success message is the shared global-2026.css standard (`.form-success-msg*`).
   ⚠ Same form as the detail page: it POSTs to /careers/apply, which the backend
   has NOT wired yet — see the view's form comment.
   ========================================================================= */

/* Separate the apply card from the jobs list above (the detail page relies on
   .cd-body's margin-bottom instead; the hub has the jobs list directly above). */
.page-careers .cd-apply { margin-top: 64px; }

.cd-apply {
  background: var(--color-card-body-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  overflow: clip;
  scroll-margin-top: 120px;
}
.cd-apply__intro {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cd-apply__title {
  margin: 0;
}
.cd-apply__sub {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-title-small);       /* 28 */
  line-height: 1.5;
  color: var(--color-neutral-400);
}
.cd-apply__form-wrap {
  flex: 0 0 604px;
  max-width: 604px;
  background: var(--color-neutral-0);
  border-radius: var(--radius-md);
  padding: 32px;
}

/* ---- Buttons (primary CTA = black). Compound .btn.btn--dark (0,2,0) beats the
   page's anti-cascade `.page-careers button { background:transparent }` reset. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-family-body);
  border: 0;
  cursor: pointer;
}
.btn.btn--dark {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  font-weight: 500;
  font-size: var(--fs-body-extra-small);
  line-height: 20px;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, transform 0.05s;
}
.btn.btn--dark:link,
.btn.btn--dark:visited,
.btn.btn--dark:hover,
.btn.btn--dark:focus,
.btn.btn--dark:active { color: var(--color-btn-primary-fg); }
.btn.btn--dark:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn.btn--dark:active:not(:disabled) { transform: scale(0.99); }
.btn.btn--dark:disabled,
.btn.btn--dark[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--block { width: 100%; }

/* ---- Form controls (shadcn base). ---- */
.ui-form { display: flex; flex-direction: column; gap: 24px; }
/* Honeypot — hidden from real users; bots that fill it are rejected server-side
   (matches the contact-us input[name="surname"] spam trap). */
.ui-form input[name="surname"] { display: none; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field__label {
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-extra-small);   /* 14px */
  line-height: 20px;
  color: #0a0a0a;
}
.field__control {
  width: 100%;
  min-height: 36px;
  padding: 7.5px 12px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-extra-small);   /* 14px */
  line-height: 20px;
  color: #0a0a0a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field__control::placeholder { color: #737373; }
.field__control:focus {
  border-color: var(--color-blue-300);
  box-shadow: 0 0 0 3px rgba(106, 102, 228, 0.15);
}
.field__control:invalid:not(:placeholder-shown),
.field__control.is-invalid {
  border-color: var(--color-red-400);
  box-shadow: 0 0 0 3px rgba(228, 37, 33, 0.10);
}

/* File control — styled <label> wrapping a visually-hidden native input. */
.field__control--file {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
}
.field__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.field__file-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #737373;
}
.field__file-text strong { font-weight: 600; color: #737373; }
.field__file-icon { flex: 0 0 16px; width: 16px; height: 16px; }

/* Checkbox — 16px box, custom check, shadcn look. */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox__box {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid #d4d4d4;
  border-radius: var(--radius-xs);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.checkbox input:checked + .checkbox__box {
  background: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-bg);
}
.checkbox input:checked + .checkbox__box::after {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0, -1px);
}
.checkbox.is-invalid .checkbox__box { border-color: var(--color-red-400); }
.checkbox__label {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-extra-small);
  line-height: 20px;
  color: #404040;
}

/* Apply block responsive — mirrors career-detail.css. */
@media (max-width: 1023px) {
  .cd-apply { flex-direction: column; gap: 24px; }
  .cd-apply__form-wrap { flex: 0 0 auto; width: 100%; max-width: 100%; }
}
@media (max-width: 767px) {
  .cd-apply { padding: 16px; gap: 12px; }
  .cd-apply__form-wrap { padding: 16px; }
}