/* ======================================================================
   Careers page (pages/careers.html). Loaded after style.css and only on this page.
   Restyles the existing PulseWave content to the Careers page on cadence.com (measured at 1920px):
   fonts, sizes, spacing and hovers. Colours follow the PulseWave theme. No content is added or removed.
   ====================================================================== */
[data-page="careers"] { --font-head: var(--font-nav); --font-body: var(--font-nav); --cr-col: min(1070px, calc(100% - 2 * var(--gutter))); }
[data-page="careers"] main { font-family: var(--font-nav); color: var(--nav-ink); }
[data-page="careers"] main .section { padding-block: 0; background: #fff; }
[data-page="careers"] main .section > .container { max-width: none; width: var(--cr-col); padding-inline: 0; }
[data-page="careers"] .deco--tri::after { content: none; }

/* shared type: 12px label, 36px Light heading, 18px Light body */
[data-page="careers"] main .eyebrow { display: block; margin: 0 0 16px; font: 400 12px/24px var(--font-nav); letter-spacing: 2.88px; text-transform: uppercase; color: #707070; }
[data-page="careers"] main .h2 { margin: 0 0 24px; font: 300 36px/43.2px var(--font-nav); letter-spacing: -0.72px; color: var(--nav-ink); }
[data-page="careers"] main .section p, [data-page="careers"] main .lead { font: 300 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: var(--nav-ink); }
[data-page="careers"] .section-head { display: block; margin: 0; }
[data-page="careers"] .section-head__text { max-width: none; }

/* shared buttons: 220px+, 47px, 14.4px Medium capitals; blue (primary) and dark (empties on hover) */
[data-page="careers"] main .btn:not(.btn--sm) { min-width: 220px; height: 47px; padding: 12px 30px 10px; justify-content: center;
  font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; }
[data-page="careers"] main .btn--dark { border: 1.6px solid var(--nav-ink); background: var(--nav-ink); color: #fff; transition: background-color .3s, color .3s; }
[data-page="careers"] main .btn--dark:hover { background: transparent; color: var(--nav-ink); }

/* ---------- top bars ---------- */
/* company row: white, 48px, 14px Medium links with a grey hover fill; the current page is dark */
[data-page="careers"] .subnav--family .container { height: 48px; justify-content: flex-start; }
[data-page="careers"] .subnav--family a { display: flex; align-items: center; height: 48px; margin: 0; padding: 0 15px; font: 500 14px/16px var(--font-nav);
  letter-spacing: normal; text-transform: none; color: #707070; transition: background-color .2s, color .2s; }
[data-page="careers"] .subnav--family a:first-child { margin-left: -15px; }
[data-page="careers"] .subnav--family a:hover { background: #f5f5f5; color: #707070; }
[data-page="careers"] .subnav--family a.is-active { color: var(--nav-ink); }
/* section row: grey, 50px, 14px Medium links (#707070), accent on hover, dark + 2px underline when current */
[data-page="careers"] .subnav--page { background: #f5f5f5; border-bottom: 0; }
[data-page="careers"] .subnav--page .container { height: 50px; min-height: 0; }
[data-page="careers"] .subnav--page .subnav__links { gap: 0; }
[data-page="careers"] .subnav--page .subnav__links a { position: relative; display: flex; align-items: center; height: 50px; margin: 0; padding: 0 15px;
  border: 0; font: 500 14px/16px var(--font-nav); letter-spacing: 0.72px; color: #707070; }
[data-page="careers"] .subnav--page .subnav__links a:first-child { margin-left: -15px; }
[data-page="careers"] .subnav--page .subnav__links a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transition: transform .25s; }
[data-page="careers"] .subnav--page .subnav__links a:hover { color: var(--accent); }
[data-page="careers"] .subnav--page .subnav__links a.is-active { color: var(--nav-ink); }
[data-page="careers"] .subnav--page .subnav__links a.is-active::after { transform: scaleX(1); }
[data-page="careers"] .subnav--page .btn--sm { min-width: 160px; height: 32px; padding: 6px 16px; justify-content: center;
  font: 500 14px/20px var(--font-nav); letter-spacing: 1.68px; text-transform: uppercase; }

/* ---------- hero: 560px, text bottom-left ---------- */
[data-page="careers"] .page-hero { display: flex; align-items: flex-end; min-height: 560px; padding: 0 0 80px; }
[data-page="careers"] .page-hero .h1 { margin: 0 0 14px; font: 300 48.6px/72.9px var(--font-nav); letter-spacing: -0.972px; color: #fff; }
[data-page="careers"] .page-hero .lead { margin: 0 0 12px; font: 300 18px/27px var(--font-nav); letter-spacing: 0.72px; color: #fff; }
[data-page="careers"] .page-hero .btn-row { margin: 0; }

/* ---------- accelerate innovation: centred intro, four 298px cards (1288px row) ---------- */
[data-page="careers"] #innovation { padding: 96px 0 73px; }
[data-page="careers"] #innovation .section-head__text { text-align: center; }
[data-page="careers"] #innovation .lead { margin: 0; }
[data-page="careers"] .work-cards { position: relative; left: 50%; width: min(1288px, calc(100vw - 2 * var(--gutter))); margin-top: 49px; transform: translateX(-50%);
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
[data-page="careers"] .work-card { border: 0.8px solid #d7dde0; background: #fff; }
[data-page="careers"] .work-card__media { aspect-ratio: auto; height: 195px; }
[data-page="careers"] .work-card__body { padding: 48px 32px 40px; }
[data-page="careers"] .work-card h3 { margin: 0 0 16px; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); }
[data-page="careers"] main .work-card p { margin: 0; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: #707070; }

/* ---------- find your role: 740px intro + button, 238px vertical tabs, 740px image ---------- */
[data-page="careers"] #roles { padding: 96px 0 88px; }
[data-page="careers"] .role-intro { grid-template-columns: 740px minmax(0, 1fr); gap: 30px; align-items: start; margin: 0; }
[data-page="careers"] .role-intro .btn { justify-self: start; width: auto; max-width: none; margin-top: 15px; }
[data-page="careers"] .apps { grid-template-columns: 238px minmax(0, 1fr); gap: 30px; margin-top: 61px; padding-left: 15px; }
[data-page="careers"] .apps__tabs { border-left: 1.6px solid #ebeef0; }
[data-page="careers"] .apps__tab { margin-left: -1.6px; padding: 10px 40px 12px 22px; border-left: 1.6px solid transparent;
  font: 400 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: #707070; transition: color .2s, border-color .2s; }
[data-page="careers"] .apps__tab:hover:not(.is-active) { color: var(--accent); border-left-color: var(--accent); }
[data-page="careers"] .apps__tab.is-active { font-weight: 400; color: var(--nav-ink); border-left-color: var(--nav-ink); }
[data-page="careers"] .apps__panel h3 { margin: 8px 0 25px; font: 400 28.8px/40.32px var(--font-nav); letter-spacing: -0.576px; color: var(--nav-ink); }
[data-page="careers"] .apps__media { width: 100%; max-width: 740px; margin: 0; aspect-ratio: 740 / 416; }
[data-page="careers"] main .apps__panel p { max-width: 773px; margin: 25px 0 0; color: var(--nav-ink); }

/* ---------- open positions (no Cadence equivalent): same type and card language ---------- */
[data-page="careers"] #positions { padding: 96px 0; background: #f5f7f8; }   /* sits where Cadence has its grey testimonial band */
[data-page="careers"] #positions .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
[data-page="careers"] #positions .h2 { margin-bottom: 0; }
[data-page="careers"] .filters { gap: 12px; }
[data-page="careers"] .filter { height: 40px; padding: 0 18px; border: 0.8px solid #d7dde0; background: #fff; font: 500 14.4px/20px var(--font-nav); letter-spacing: 1.728px; color: var(--nav-ink); transition: background-color .3s, color .3s, border-color .3s; }
[data-page="careers"] .filter:hover { border-color: var(--nav-ink); color: var(--nav-ink); }
[data-page="careers"] .filter.is-active { background: var(--nav-ink); border-color: var(--nav-ink); color: #fff; }
[data-page="careers"] .job { padding: 32px; border: 0.8px solid #d7dde0; border-radius: 0; background: #fff; transition: box-shadow .2s, border-color .2s; }
[data-page="careers"] .job + .job { margin-top: 30px; }
[data-page="careers"] a.job:hover { border-color: #d7dde0; box-shadow: 0 10px 12px rgba(34, 34, 34, .25), 0 4px 4px rgba(34, 34, 34, .25); }
[data-page="careers"] .job__team { font: 400 12px/24px var(--font-nav); letter-spacing: 2.88px; color: #707070; }
[data-page="careers"] .job h3 { margin: 4px 0 0; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); transition: color .2s; }
[data-page="careers"] a.job:hover h3 { color: var(--accent); }
[data-page="careers"] .job__meta { font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: #707070; }
[data-page="careers"] .job .btn--sm { height: 40px; padding: 0 18px; font: 500 14.4px/20px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; }

/* ---------- culture: 630px + 410px columns (image left, text right; flipped on the second row) ---------- */
[data-page="careers"] #culture { padding: 96px 0 97px; }
[data-page="careers"] .culture-rows { gap: 96px; }
[data-page="careers"] .culture-row { grid-template-columns: 630px 410px; gap: 30px; align-items: start; }
[data-page="careers"] .culture-row__media { width: 519px; max-width: 100%; aspect-ratio: 519 / 323; }
[data-page="careers"] .culture-row--flip { grid-template-columns: 630px 410px; }
[data-page="careers"] .culture-row--flip > div:not(.culture-row__media) { grid-column: 1; grid-row: 1; max-width: 410px; }
[data-page="careers"] .culture-row--flip .culture-row__media { grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 410 / 376; }
[data-page="careers"] .culture-row .h2 { margin: 8px 0 24px; }
[data-page="careers"] main .culture-row p { margin: 0 0 31px; }
[data-page="careers"] .culture-steps { gap: 12px; margin: 0 0 31px; }
[data-page="careers"] .culture-steps li { grid-template-columns: 34px 1fr; font: 300 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: var(--nav-ink); }
[data-page="careers"] .culture-steps b { font: 500 18px/28.8px var(--font-nav); color: var(--accent); }

/* ---------- logo band: light tint, 410px logo + 410px text 550px apart, 96px padding ---------- */
[data-page="careers"] .logo-band .container { width: var(--cr-col); max-width: none; padding: 96px 0; grid-template-columns: 520px 410px; gap: 30px; align-items: start; }
[data-page="careers"] .logo-band img { width: 410px; max-width: 100%; justify-self: start; }
[data-page="careers"] main .logo-band p { max-width: 410px; margin: 0 0 30px; font: 300 20.25px/32.4px var(--font-nav); letter-spacing: 0.81px; color: var(--nav-ink); }

/* ---------- closing band: light, 350px, dark 28.8px heading on the left ---------- */
[data-page="careers"] .band { min-height: 350px; }
[data-page="careers"] .band .container { width: min(1074px, calc(100% - 2 * var(--gutter))); max-width: none; padding: 77px 0 69px; }
[data-page="careers"] .band__content { max-width: 645px; }
[data-page="careers"] .band .h2 { margin: 0 0 38px; font: 400 28.8px/40.32px var(--font-nav); letter-spacing: -0.576px; color: #fff; }
[data-page="careers"] .band .btn { height: 45px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  [data-page="careers"] .work-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-page="careers"] .role-intro, [data-page="careers"] .culture-row, [data-page="careers"] .culture-row--flip,
  [data-page="careers"] .logo-band .container { grid-template-columns: minmax(0, 1fr); }
  [data-page="careers"] .culture-row--flip > div:not(.culture-row__media), [data-page="careers"] .culture-row--flip .culture-row__media { grid-column: auto; grid-row: auto; }
  [data-page="careers"] .culture-row--flip .culture-row__media { order: -1; aspect-ratio: 519 / 323; }
  [data-page="careers"] .culture-row__media { width: 100%; }
}
@media (max-width: 760px) {
  [data-page="careers"] #innovation, [data-page="careers"] #roles, [data-page="careers"] #positions, [data-page="careers"] #culture { padding: 56px 0; }
  [data-page="careers"] main .h2 { font-size: 28px; line-height: 36px; }
  [data-page="careers"] .page-hero { min-height: 420px; padding-bottom: 48px; }
  [data-page="careers"] .page-hero .h1 { font-size: 36px; line-height: 48px; }
  [data-page="careers"] .work-cards { grid-template-columns: minmax(0, 1fr); }
  [data-page="careers"] .apps { grid-template-columns: minmax(0, 1fr); padding-left: 0; margin-top: 32px; }
  [data-page="careers"] .apps__tabs { display: flex; overflow-x: auto; border-left: 0; border-bottom: 1.6px solid #ebeef0; scrollbar-width: none; }
  [data-page="careers"] .apps__tab { flex-shrink: 0; margin: 0 0 -1.6px; padding: 8px 16px; border-left: 0; border-bottom: 1.6px solid transparent; white-space: nowrap; }
  [data-page="careers"] .apps__tab.is-active { border-bottom-color: var(--nav-ink); }
  [data-page="careers"] #positions .section-head { flex-direction: column; align-items: flex-start; }
  [data-page="careers"] .logo-band .container, [data-page="careers"] .band .container { padding: 56px 0; }
}

/* full-width 420px photo strip between Accelerate Innovation and Find Your Role, 16px below the first section (as on Cadence) */
.cr-strip { height: 420px; margin-top: 16px; background-size: cover; background-position: center; }
@media (max-width: 760px) { .cr-strip { height: 220px; } }

/* card hover, as on cadence.com: 1px gradient border and gradient title (PulseWave blue to purple) */
[data-page="careers"] .work-card:hover { border: 0.8px solid transparent; border-image: linear-gradient(238.25deg, var(--accent-2) 0%, var(--accent) 103.82%) 1; }
[data-page="careers"] .work-card:hover h3 { background: linear-gradient(238.25deg, var(--accent-2) 0%, var(--accent) 103.82%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }