/* ==========================================================================
   Careers  (/company/careers/)

   The fourth Company child. Shared, from product-family.css: the parts
   table (.pf-ptable, .pf-ptable__scroll), the filter bar (.pf-filter,
   .pf-empty) that js/collection-filter.js drives, the .pf-cap blocks and
   .pf-related. Page-local:
     .car-roles      the band: head, the filter bar, the table
     .car-table      column treatment for the roles table

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100. No two adjacent bands share a tint:

     §1  banner      white          §3  how to apply  white
     §2  open roles  neutral-2-100  §4  related       neutral-2-100
   ========================================================================== */

#open-roles,#how-to-apply{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   §2 The band
   -------------------------------------------------------------------------- */
.car-roles{padding-block:48px}
.car-roles__head,.car-roles__wrap{grid-column-end:span var(--ps-grid-columns)}
.car-roles__head{margin-bottom:28px}
.car-roles__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.car-roles__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
@media (min-width:640px){.car-roles{padding-block:64px}}
@media (min-width:1024px){.car-roles{padding-block:80px}}
@media (min-width:1350px){
  .car-roles__head,.car-roles__wrap{grid-column-start:2;grid-column-end:span 10}
}

/* two selects: two across from 480, never the shared bar's three or five */
@media (min-width:640px){
  .car-filter__selects{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .car-filter__selects{grid-template-columns:repeat(2,minmax(0,1fr));max-width:66%}
}

/* the table: the role reads as the row's heading, the date and link stay on
   one line; the rest wraps. Below 640px the shared scroll box takes over. */
/* the last column's visually hidden "Apply" header is position:absolute; with
   a static scroll box its containing block is the page, so it escaped the
   box's overflow clip and sat at the table's far edge, widening the page on
   phones by ~380px. The scroll box must be its containing block. */
.car-roles .pf-ptable__scroll{position:relative}
.car-table{min-width:880px}
.car-table tbody th{font-weight:500;text-align:left}
/* the shared sheet clears the last row's rule on td only; the row heading is a th */
.car-table tbody tr:last-of-type th{border-bottom:0}
.car-table__role a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.car-table__role a:hover{color:var(--ps-color-brand-500)}
.car-table__date,.car-table__apply{white-space:nowrap}
.car-table__apply{text-align:right}

/* --------------------------------------------------------------------------
   §3 How to apply: three blocks, three across from 1024 (two, then one,
   below that is the shared sheet's 640 rule)
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  .car-apply .pf-cap__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §4 Related: four tiles, two across from 640, four from 1024
   -------------------------------------------------------------------------- */
@media (min-width:640px){.pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media (min-width:1350px){
  .car-apply .pf-cap__head,.car-apply .pf-cap__grid,
  .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

/* phones: the large button can be wider than a 320px column; let it wrap */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.car-roles,.pf-related{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.pf-cap{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   The Careers round (2026-09-28)
   -------------------------------------------------------------------------- */
/* FIVE Related tiles once the Company hub moves into the list (CAREERS-02):
   three across from 1024, as on About, so the list closes 3 + 2. Keyed on
   the count, so switching the up-link back on (and dropping the tile)
   restores the four across. */
@media (min-width:1024px){
  .pf-related__list:has(> li:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
}