/* =========================================================================
   Careers — hub (/careers) and role pages (/careers/<slug>). Loaded after
   styles.css, chrome.css, home.css and case-study-v2.css; reuses the case-study
   hero, narrative rows, numbered lists, CTA card, lightbox and pagination.
   ========================================================================= */

/* Hub hero: copy left, team photo right */
.careers-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5vw; align-items: stretch; }
.careers-hero-grid > :first-child { align-self: center; }
.careers-hero h1 { max-width: 13em; }
.careers-hero .lede { max-width: 34em; margin-bottom: 2rem; }
.careers-hero-photo { position: relative; min-height: 400px; border-radius: 20px; overflow: hidden; justify-self: end; width: 100%; }
.careers-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }

/* Why Waters: six numbered cards */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 4vmax 0 0; padding: 0; list-style: none; }
.why-card { padding: 2rem; border-radius: 20px; background: var(--white); border: 1px solid var(--rule); }
.why-card .gap-num { display: block; margin-bottom: 1.25rem; }
.why-card h3 { margin: 0 0 .6rem; font-size: var(--fs-h3-sm); font-weight: 600; color: var(--black); }
.why-card p { margin: 0; color: var(--grey); }

/* Values band */
.values-head { max-width: 30em; }
.values-head h2 { margin: 0; }
.values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 5vw; margin: 3vmax 0 0; padding: 0; list-style: none; }
.value { padding: 2rem 0; border-top: 1px solid var(--rule-dark); }
.value h3 { margin: 0 0 .6rem; font-size: var(--fs-h3-sm); font-weight: 600; color: var(--white); }
.value p { margin: 0; color: rgba(255, 255, 255, .78); }

/* Three pros: icon tile cards */
.pros-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.careers-pros .section-bg { background: var(--white); }
.careers-pros .content-wrapper { padding-top: 6vmax; }
.pro-card { padding: 3vw; background: var(--light); border-radius: 15px; }
.pro-card .icon { margin-bottom: 1.6vw; }
.pro-card .card-desc { margin-top: .6rem; }

.pros-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pros-note { margin: 2rem 0 0; color: var(--black); }
.roles-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 6vw; align-items: end; }
.roles-intro { margin: 0; color: var(--black); }
.roles-else { margin: 2.5rem 0 0; color: var(--black); }
.roles-else a { color: var(--black); }
.careers-culture .narrative-body p.large { color: rgba(255, 255, 255, .85); }
.careers-culture .narrative-body p.large + p.large { margin-top: 1.2rem; }
.careers-expect .gaps { margin-bottom: 1.5rem; }
.values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 5vw; margin: 3vmax 0 0; padding: 0; list-style: none; }
.value { padding: 2rem 0; border-top: 1px solid var(--rule-dark); }
.value h3 { margin: 0 0 .6rem; font-size: var(--fs-h3-sm); font-weight: 600; color: var(--white); }
.value p { margin: 0; color: rgba(255, 255, 255, .78); }

/* Open roles: Squarespace simple-list section (title, then cards with title / description / button), plus filter chips */
.list-section-title h2 { margin: 0; }
.roles-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 2rem 0 2.5rem; }
.chip { padding: .6em 1.1em; border: 1px solid rgba(38, 59, 80, .25); border-radius: 999px; background: transparent; color: var(--black); font: 500 .9rem/1 var(--body-font); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--black); }
.chip[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.roles-cards { max-width: none; padding: 0; list-style: none; }
.role-card { padding: 3vw; background: var(--white); border: 1px solid rgba(38, 59, 80, .1); border-radius: 15px; }
.role-card[hidden] { display: none; }
.role-card .card-desc { margin-top: .6rem; }
.role-card .btn-block { margin-top: 1.75rem; }
.roles-empty { margin: 2rem 0 0; }

/* Buttons inside text blocks are real buttons, not underlined links */
.careers .txt .btn, .careers .btn-block .btn, .funding .txt .btn, .funding .btn-block .btn { text-decoration: none; background-image: none; }

/* Role page */
.role-hero .cs-facts { max-width: none; }
.role-hero .lede { margin-bottom: 2rem; }
.role-body .cs-row:first-child { padding-top: 0; }
.apply-band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5vw; align-items: center; }
.apply-band h2 { margin: 0; }
.apply-band .lede, .apply-band p.large { margin: 0; color: rgba(255, 255, 255, .85); max-width: 32em; }
.apply-band .btn-block { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: flex-end; }
.apply-all { color: var(--white); font-weight: 500; }
.apply-all:hover { color: var(--accent); }

/* Application lightbox: the contact form's styling, plus a file field */
.field-grid input[type="file"] { padding: 10px 14px; cursor: pointer; }
.field-grid input[type="file"]::file-selector-button { margin-right: 12px; padding: .45em .9em; border: 0; border-radius: 999px; background: var(--black); color: var(--white); font: 500 .85rem/1 var(--body-font); cursor: pointer; }

@media (max-width: 991px) {
  .pros-grid, .pros-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles-head { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .careers-hero-grid { grid-template-columns: 1fr; }
  .careers-hero-photo { max-height: 380px; aspect-ratio: 4 / 3; }
  .why-grid, .values-grid { grid-template-columns: 1fr; }
  .why-card { padding: 1.5rem; }
  .pros-grid, .pros-grid--four, .values-grid { grid-template-columns: 1fr; }
  .pro-card, .role-card { padding: 7vw; }
  .apply-band { grid-template-columns: 1fr; }
  .apply-band .btn-block { justify-content: flex-start; }
}