/* css/pages/about.css
   Styles unique to the About page. Shared pieces (hero, section-head,
   team grid, form portal) live in components/ — only the mission
   callout, the partner strip, and the section rhythm are page-local. */

/* ------------------------------------------------------------
   Mission — a dark blue callout quote, teal accent along the top.
   ------------------------------------------------------------ */
.mission {
  position: relative;
  overflow: hidden;
  padding: 64px 56px;
  border-radius: 4px;
  background: var(--blue-deep);
  /* Recolors both the eyebrow label and its dash for the dark ground
     (see the --eyebrow-color hook in layout.css). */
  --eyebrow-color: var(--on-dark-soft);
}
.mission::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), transparent 60%);
}
.mission-quote {
  max-width: 820px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.35;
  color: var(--white);
}
.mission-attribution {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* ------------------------------------------------------------
   Partnerships — centered composition: eyebrow + title + blurb sit
   above the logo wall (the shared .client-wall component, 3-up) that
   anchors the section.
   ------------------------------------------------------------ */
.partner-blurb {
  max-width: 620px;
  margin: 0 auto;              /* centered under the centered section head */
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  color: var(--muted);
}

/* ------------------------------------------------------------
   Join Us — the open-roles list.

   Same hover-lift as .news-item on the newsroom index, so the two
   lists read as one pattern. Restated rather than shared: .news-item
   is scoped to that page's stylesheet, and these rows have no date
   column and a mono meta line instead of a teaser.

   Roles come from BambooHR, so the list can be any length.
   It has to look right at one row.
   ------------------------------------------------------------ */
/* Landing point for the hero chip and the footer's Join Us link — a
   little air above the heading so the section doesn't start hard against
   the top of the window. */
#join-us {
  scroll-margin-top: 24px;
}

.job-list {
  display: flex;
  flex-direction: column;
  max-width: 860px;
  margin: 0 auto;
}

.job-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 18px;
  margin: 0 -18px;
  border-radius: 14px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  transition: background 0.2s ease, box-shadow 0.2s ease,
              transform 0.2s ease, border-color 0.2s ease;
}
.job-item:first-child {
  border-top: 1px solid var(--line);
}
.job-item:hover {
  position: relative;   /* sit above neighbouring rows' borders */
  z-index: 1;
  border-color: transparent;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(32, 38, 94, 0.1);
  transform: translateY(-1px);
}

.job-main {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.job-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--blue-deep);
}

/* Department / location / type on one mono line.

   Any of the three can be missing: a remote role has no city, some
   postings have no department.

   so the dots are drawn in CSS, attached to the item after them,
   where they can never strand at the start or end of the line. */
.job-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.job-meta > * + *::before {
  content: "\00b7";
  margin-right: 8px;
  /* --line is too pale to read at this size on the blue tint.
     Muted, lightened, separates without competing with the words. */
  color: var(--muted);
  opacity: 0.5;
}
/* The one piece worth picking out of the line. Teal, the same accent
   the newsroom's default category tag uses. */
.job-dept {
  color: var(--teal);
  text-transform: uppercase;
}

.job-go {
  color: var(--muted);
  transition: transform 0.15s ease, color 0.15s ease;
}
.job-item:hover .job-go {
  transform: translateX(3px);
  color: var(--blue);
}

/* Closing line under the list, where applications actually go. */
.job-foot {
  max-width: 860px;
  margin: 26px auto 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--muted);
}
.job-foot a {
  font-weight: 600;
  color: var(--blue);
}
.job-foot a:hover {
  color: var(--blue-deep);
}

/* The no-openings and ATS-unreachable fallback, on the shared dark
   .order-panel. Width only, so it lines up with the list it replaces. */
.order-panel.job-panel {
  max-width: 860px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .mission { padding: 40px 26px; }
  .mission-quote { font-size: 23px; }

  /* A hover affordance with nothing to say on touch.
     Dropping it gives the title the full row width. */
  .job-item {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .job-go { display: none; }
}