/* ============================================================
   Shared "Future careers" hero + photo marquee — VERBATIM copy of
   ui_kits/site/future-careers.css in the export. The careers page CSS
   (ds/careers.css) deliberately does NOT contain these rules: the export
   split them out because the Job detail template reuses the same strip.
   Do not hand-edit: keep it diffable against a future export.

   NOTE FOR WIRING: fa2026n_enqueue_careers_assets() must enqueue this in
   ADDITION to ds/careers.css, or .cr-hero / .cr-stage / .cr-marquee have
   no rules at all -- and it must come BEFORE it, which is the order the
   export uses (a <link> in <head>, then the page's own inline <style>).
   Both files set .cr-hero padding and .cr-hero__title font-size inside
   media queries that overlap below 600px; with the order reversed the
   mobile hero comes out 73px short. Enqueue this one first, or make
   ds/careers.css depend on this handle.
   ============================================================ */
/* SHARED "Future careers" scrolling image section styles.
   Single source used by the Careers page and every Job detail page. */
.cr-hero{position:relative;min-height:100vh;background:var(--fa-white);overflow:hidden;padding:120px 0 48px;display:flex;flex-direction:column}
.cr-hero__inner{flex:1;display:flex;flex-direction:column}
.cr-hero__title{margin:0;font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:64px;line-height:.95;letter-spacing:-.03em;color:var(--fa-ink);text-align:center}
/* seamless horizontal photo marquee between title and sub */
.cr-stage{position:relative;flex:1;min-height:450px;margin:24px 0;overflow:hidden;display:flex;align-items:center;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.cr-marquee{display:flex;width:max-content;will-change:transform;animation:cr-scroll 140s linear infinite}
@media (prefers-reduced-motion:reduce){
  .cr-stage .cr-marquee{animation-play-state:paused}
}
.cr-marquee img{height:450px;width:auto;margin-right:20px;display:block;border-radius:0;object-fit:cover;flex:none}
@keyframes cr-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* strip-only variant (job detail template): no heading/paragraph, tight 80px gaps.
   Top gap = form section's 80px padding-bottom; bottom gap = this section's 80px padding-bottom. */
.cr-hero--strip{min-height:0;padding:0 0 80px;display:block}
.cr-hero--strip .cr-hero__inner{display:block}
.cr-hero--strip .cr-stage{margin-top:0;margin-bottom:0;min-height:0}
.cr-hero__sub{margin:0 auto;max-width:640px;font-family:"Epilogue",var(--font-body);font-weight:400;font-size:20px;line-height:1.4;letter-spacing:-.01em;color:var(--fa-ink);text-align:center}
@media (max-width:599px){
  .cr-hero{padding:100px 0 40px;min-height:auto}
  .cr-hero__title{font-size:40px}
  .cr-stage{min-height:300px}
  .cr-marquee img{height:300px}
}