/*
 * Careers page.
 *
 * Hero and contact-cta reuse the SHARED .a3-hero / .a3-contact-cta classes
 * from service.css, also used by Home, Contact, Core Team, Guides, and
 * every service page. This page's Figma frame (773:1003) matches that
 * shared component almost exactly - description, button, and contact-cta
 * all check out - except the hero heading, which ships at 60px/700 but
 * this design specifies 72px/400. Scoped to .a3-careers-page rather than
 * edited in service.css, so this doesn't change the hero on every other
 * page reusing the same class (same approach used for the Awards page).
 *
 * No FAQ section exists in this Figma frame at all - the FAQ block already
 * on this page was added on request, not from the design; left as-is.
 */

/* ---------- Hero override (Figma 773:1305-1311) ---------- */

/* The hero photo (corporate-office.jpg, attachment 915 - shared with CSR
   and Our Journey) is a corridor/kitchen shot with a floor across its
   bottom third. desktop-refinements.css forces a two-layer background-size
   of `cover, 104% 98.47%` (tuned for a DIFFERENT hero's crop, node 78:5773)
   at (min-width:992px) with !important - same specificity class-count as a
   single `.a3-hero` override, so it wins over a plain one-class override
   here too. Re-stated with an extra selector segment for unambiguously
   higher specificity (same fix as the Awards page). Without this, the crop
   lands on the image's plain floor area and reads as a flat grey band right
   at the bottom edge of the hero. */
.a3-careers-page .a3-hero.a3-hero {
  background-size: cover !important;
  background-position: center 25% !important;
}

.a3-careers-page .a3-hero__heading {
  font-weight: 400;
  font-size: 72px;
  line-height: 91.2px;
  letter-spacing: -2px;
}

/* ---------- Why join us (icon-card grid) ---------- */

.a3-why-join {
  padding: 96px 0;
  background: #fff;
  border-bottom: 1px solid #e4e4e7;
}

.a3-why-join__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.a3-why-join__heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  color: #18181b;
  margin: 0 0 16px;
}

.a3-why-join__description {
  font-size: 18px;
  line-height: 28px;
  color: #52525b;
  margin: 0;
}

.a3-why-join__card {
  height: 100%;
  background: #fafafa;
  border: 1px solid #f4f4f5;
  border-radius: 16px;
  padding: 24px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.a3-why-join__card:hover {
  border-color: rgba(255, 105, 0, 0.45);
  box-shadow: 0 8px 20px -6px rgba(228, 228, 231, 0.9);
}

.a3-why-join__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e4e4e7;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  color: #ff6900;
}

.a3-why-join__icon img,
.a3-why-join__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.a3-why-join__card-heading {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #18181b;
  margin: 0 0 12px;
}

.a3-why-join__card-description {
  font-size: 16px;
  line-height: 26px;
  color: #52525b;
  margin: 0;
}

/* ---------- Open roles (live job_opening list + client-side filter) ----------
 * The cards are all server-rendered; careers.js only toggles [hidden] on
 * them, so the list works with JS off and the filter is purely additive.
 */

.a3-roles {
  padding: 96px 0;
  background: #fff;
}

.a3-roles__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.a3-roles__heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  color: #18181b;
  margin: 0 0 10px;
}

.a3-roles__description {
  font-size: 18px;
  line-height: 28px;
  color: #52525b;
  margin: 0;
}

/* Figma keeps the roles column narrower than the page container
   (1440 - 268px gutters). */
.a3-roles__inner {
  max-width: 904px;
  margin: 0 auto;
}

.a3-roles__filters {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid rgba(228, 228, 231, 0.6);
  border-radius: 16px;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  padding: 25px 24px;
  margin-bottom: 32px;
}

/* Now that the search box is fixed-width instead of flex-growing, the two
   dropdowns need to be pushed to the right as their own group (Figma: they
   sit together at the right edge, close to each other, with the empty
   space landing between them and the search box - not spread evenly
   across all three controls, which is what justify-content:space-between
   would do). margin-left:auto on the first select-wrap pulls both it and
   its normal-flow sibling (the second select-wrap) to the right together.
   NOTE: this used to be `.a3-roles__select-wrap:first-of-type`, which
   never matched anything - :first-of-type matches by TAG NAME among
   siblings, and .a3-roles__search is also a <div> that comes first, so it
   "wins" first-of-type and no .a3-roles__select-wrap div can ever satisfy
   it. An adjacent-sibling selector off the search box is unambiguous. */
.a3-roles__search + .a3-roles__select-wrap {
  margin-left: auto;
}

.a3-roles__search {
  position: relative;
  /* Figma: fixed 284.66px, same non-growing treatment as the two dropdowns
     - was flex:1 1 260px, which stretched it to fill all remaining space
     in the filter bar instead of sitting at its designed width. */
  flex: 0 0 284.66px;
  min-width: 0;
}

.a3-roles__search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #71717a;
  pointer-events: none;
}

.a3-roles__search-input {
  width: 100%;
  height: 42px;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 0;
  padding: 0 16px 0 44px;
  font-family: var(--a3-font-base);
  font-size: 14px;
  font-weight: 500;
  color: #3f3f46;
  appearance: none;
}

.a3-roles__search-input::placeholder {
  color: #52525b;
}

.a3-roles__select-wrap {
  flex: 0 0 192px;
  position: relative;
}

/* Exported chevron from node 773:1060, inlined so the select keeps a native
   control but renders the designed arrow. */
.a3-roles__select {
  width: 100%;
  height: 42px;
  background-color: #fafafa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.6654 6L7.9987 10.6667L3.33203 6' stroke='%2371717A' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  border: 1px solid #e4e4e7;
  border-radius: 0;
  padding: 0 38px 0 16px;
  font-family: var(--a3-font-base);
  font-size: 14px;
  font-weight: 500;
  color: #3f3f46;
  appearance: none;
  cursor: pointer;
}

.a3-roles__search-input:focus,
.a3-roles__select:focus {
  outline: none;
  border-color: #ff6900;
}

.a3-roles__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.a3-roles__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 126px;
  padding: 24px 32px;
  background: #fff;
  border: 1px solid rgba(228, 228, 231, 0.6);
  border-radius: 16px;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.a3-roles__card:hover,
.a3-roles__card:focus-visible {
  border-color: rgba(255, 105, 0, 0.45);
  background: linear-gradient(
    to right,
    rgba(255, 247, 237, 0.5),
    rgba(255, 247, 237, 0)
  );
}

.a3-roles__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.a3-roles__card-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #18181b;
  transition: color 0.2s ease;
}

.a3-roles__card:hover .a3-roles__card-title,
.a3-roles__card:focus-visible .a3-roles__card-title {
  color: #ff6900;
}

.a3-roles__card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: #52525b;
  margin-top: 4px;
}

.a3-roles__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.a3-roles__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #52525b;
}

.a3-roles__meta-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #71717a;
}

.a3-roles__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #fafafa;
  border: 1px solid #f4f4f5;
  color: #71717a;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.a3-roles__arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

.a3-roles__card:hover .a3-roles__arrow,
.a3-roles__card:focus-visible .a3-roles__arrow {
  background: rgba(255, 105, 0, 0.1);
  border-color: #ff6900;
  color: #ff6900;
}

.a3-roles__empty {
  margin: 32px 0 0;
  padding: 40px 24px;
  text-align: center;
  font-size: 16px;
  color: #52525b;
  background: #fafafa;
  border: 1px solid #f4f4f5;
  border-radius: 16px;
}

@media (max-width: 991px) {
  .a3-why-join,
  .a3-roles {
    padding: 64px 0;
  }

  .a3-why-join__heading,
  .a3-roles__heading {
    font-size: 30px;
    line-height: 38px;
  }

  .a3-roles__select-wrap {
    flex: 1 1 160px;
  }
}

@media (max-width: 767px) {
  .a3-roles__filters {
    padding: 16px;
    gap: 12px;
  }

  .a3-roles__search,
  .a3-roles__select-wrap {
    flex: 1 1 100%;
  }

  .a3-roles__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    min-height: 0;
  }

  .a3-roles__meta {
    gap: 8px 16px;
  }
}