/* ---------- Careers page (careers/index.html), on top of site.css ---------- */

/* Hero: the intro on the gutter, the film on the photo margin (--bleed), like the homepage careers block */
.c-hero { padding: 160px 0 var(--bleed); }
.c-hero > .pad { padding-bottom: 96px; }
.c-hero-nofilm { padding-bottom: 160px; }
.c-hero-nofilm > .pad { padding-bottom: 0; }
.c-film {
  position: relative; display: block; overflow: hidden;
  margin: 0 var(--bleed); aspect-ratio: 16 / 9;
  background: #111; color: var(--on-dark);
}
.c-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.c-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.7) 100%); }
.c-film:hover img { transform: scale(1.02); }
.c-play {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: var(--bg-light);
  transition: transform .5s var(--ease-out);
}
.c-play::before {
  content: ""; position: absolute; left: 40px; top: 33px; width: 24px; height: 30px;
  background: var(--on-light); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.c-film:hover .c-play { transform: scale(1.06); }
.c-film-cap { position: absolute; z-index: 1; left: 48px; bottom: 48px; display: flex; flex-direction: column; gap: 4px; }

/* Field photo in the film's slot, on the photo margin */
.c-photo { position: relative; margin: 0 var(--bleed); aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.c-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* How we work: the Highlights rows, with a heading and a sentence instead of a figure */
.c-why .figure-body { white-space: normal; }
.c-why h2, .c-why h3, .c-roles h2, .c-pool h2, .c-hero h1 { font-weight: 400; }

/* Team photos */
.c-photos { padding: var(--bleed) 0; }

/* Open roles */
.c-roles { padding: 160px var(--gutter); display: flex; flex-direction: column; gap: 80px; }
/* The intro spans the 8 columns of the role list, so the team filters fit on one line; the sentence keeps the 6-column measure */
.c-roles-intro > .t-heading { max-width: calc((100% - 7 * var(--gap)) * 6 / 8 + 5 * var(--gap)); }
.c-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.c-filters[hidden] { display: none; }
.c-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--line-light); background: none; color: var(--on-light);
  font: inherit; font-size: 14px; line-height: 18px; letter-spacing: -0.2px;
  cursor: pointer; transition: border-color .4s var(--ease-out);
}
.c-chip:hover { border-color: var(--on-light); }
.c-chip .n { color: var(--on-light-2); }
.c-chip[aria-pressed="true"] { background: var(--on-light); border-color: var(--on-light); color: var(--bg-light); }
.c-chip[aria-pressed="true"] .n { color: rgba(255, 255, 255, 0.6); }

.c-list { display: flex; flex-direction: column; gap: 56px; }
.c-team { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.c-team[hidden] { display: none; }
.c-team-head { grid-column: 1 / span 4; padding-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.c-team-roles { grid-column: 5 / -1; }
.c-role { display: flex; align-items: center; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line-light); }
.c-role-title { flex: 1; min-width: 0; font-size: 20px; line-height: 24px; letter-spacing: -0.6px; }
.c-role-loc { text-align: right; }
.c-role .news-arrow { margin: 0; }
a.c-role:hover .news-arrow { transform: translateX(4px); }
.c-status { padding-top: 8px; }
.c-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; color: var(--on-light); }

/* Talent pool */
.c-pool { padding: 160px var(--gutter); }

@media (pointer: coarse) {
  .c-chip { height: 44px; }
}

@media (max-width: 900px) {
  .c-hero { padding-top: 96px; }
  .c-hero > .pad { padding-bottom: 56px; }
  .c-hero-nofilm { padding-bottom: 96px; }
  .c-hero-nofilm > .pad { padding-bottom: 0; }
  .c-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .c-play::before { left: 19px; top: 16px; width: 12px; height: 16px; }
  .c-film-cap { left: 16px; bottom: 16px; }
  .c-film-cap .t-heading { font-size: 20px; line-height: 24px; letter-spacing: -0.6px; }
  .c-roles, .c-pool { padding-block: 96px; }
  .c-roles { gap: 56px; }
  .c-list { gap: 48px; }
  .c-team { grid-template-columns: 1fr; }
  .c-team-head, .c-team-roles { grid-column: 1 / -1; }
  .c-team-head { padding-top: 0; padding-bottom: 12px; flex-direction: row; gap: 8px; }
  .c-role { flex-wrap: wrap; gap: 4px 16px; padding: 16px 0; }
  .c-role-title { flex-basis: 100%; font-size: 18px; line-height: 22px; letter-spacing: -0.5px; }
  .c-role-loc { text-align: left; }
  .c-role .news-arrow { display: none; }
}