/* ==========================================================================
   Section: Work With Us — shared by the Career and Contact pages via
   template-parts/section-work-with-us.php.

   2026-10-05: the 'contact' variant's LAYOUT moved here from
   pages/page-contact.css, which is now gated to /contact/ — rules for a shared
   partial must not sit in a conditionally loaded page file.

   NOTE: that variant currently has NO caller. page-career.php is the only
   consumer of the partial and it passes variant => 'career', which renders
   .career-work (styled in page-career.css). The .contact-workwithus rules are
   kept so the variant stays styled if it is used again; delete them together
   with the partial's contact branch if that variant is ever retired.
   ========================================================================== */

/* Shared blue curve (Figma "wwu"): centered + rotated, scroll-drawn by main.js
   (scrollCurves → .work-with-us__curve-path). Its offset parent is the section
   (.career-work / .contact-workwithus, both position:relative). */
.work-with-us__curve {
  position: absolute;
  left: calc(50% + 4.38px);   /* Figma: horizontally centered */
  top: 272.49px;              /* vertical centre of the Figma wrapper box */
  width: 100vw;
  transform: translate(-50%, -50%) rotate(-26.9deg);
  pointer-events: none;
  z-index: 0;
}
/* JS sets stroke-dasharray / -dashoffset for the scroll-draw. */
.work-with-us__curve-path {
  transition: stroke-dashoffset 0.1s linear;
}

/* ── Band layout ────────────────────────────────────────────────────────
   The partial hardcodes class="section about-text contact-workwithus
   work-with-us", so the single class is enough here; the old rules in
   page-contact.css were qualified with .about-text, which only added
   specificity. */
.contact-workwithus {
  position: relative;
  overflow: hidden;              /* clips the curve at the section edges */
  background: var(--bg-secondary);
  padding-block: var(--space-100);
}
/* Stage = the Figma wrapper box. A fixed 595px on desktop gives the curve a
   deterministic reference so its offsets match Figma however tall the copy
   runs. min-height (not height) so long copy can never overflow it. */
.contact-workwithus__stage {
  position: relative;
  min-height: 595px;
}
/* Match the text widget grid so the button lines up under the right column. */
.contact-workwithus .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 0;
}
.contact-workwithus .text-grid { grid-column: 1 / -1; }
.contact-workwithus .btn {
  grid-column: 3 / span 2;
  justify-self: start;
  margin-top: 32px;
}

@media (max-width: 1024px) {
  .contact-workwithus        { padding-block: 80px; }
  /* 595px is the desktop wrapper height — let content set it below that */
  .contact-workwithus__stage { min-height: 0; }
}

@media (max-width: 767px) {
  .contact-workwithus            { padding-block: 60px; }
  .contact-workwithus .container { display: block; }
  .contact-workwithus .btn       { grid-column: auto; margin-top: 32px; }
}