/* ============================================
   Work With Us — full-bleed group hero +
   peppered staff polaroids along the body sides.
   ============================================ */

.hero--workwithus {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(640px, 86vh, 820px);
  padding-top: 160px;
  padding-bottom: var(--space-3xl);
  padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2));
  padding-right: max(var(--container-padding), calc((100vw - var(--container-max)) / 2));
}

/* Background photo — full bleed, slow ken-burns drift for editorial polish */
.hero__corkboard-bg {
  position: absolute;
  inset: -2%;
  z-index: 0;
  background-size: cover;
  /* Lower Y biases image downward in frame so heads sit at a comfortable height */
  background-position: center 20%;
  background-repeat: no-repeat;
  animation: corkboardBreathe 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes corkboardBreathe {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1%, 1%); }
}

/* Brand-aware scrim — clinic warm-dark, wellness cream-ivory */
.hero__corkboard-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

[data-brand="clinic"] .hero__corkboard-scrim {
  background:
    linear-gradient(
      95deg,
      rgba(20, 25, 18, 0.92) 0%,
      rgba(20, 25, 18, 0.76) 24%,
      rgba(20, 25, 18, 0.42) 44%,
      rgba(20, 25, 18, 0.12) 64%,
      rgba(20, 25, 18, 0) 82%
    ),
    linear-gradient(
      to bottom,
      rgba(20, 25, 18, 0.32) 0%,
      rgba(20, 25, 18, 0) 30%,
      rgba(20, 25, 18, 0) 65%,
      rgba(20, 25, 18, 0.5) 100%
    );
}

[data-brand="wellness"] .hero__corkboard-scrim {
  background:
    linear-gradient(
      95deg,
      rgba(241, 235, 223, 0.94) 0%,
      rgba(241, 235, 223, 0.82) 24%,
      rgba(241, 235, 223, 0.5) 44%,
      rgba(241, 235, 223, 0.18) 64%,
      rgba(241, 235, 223, 0) 82%
    ),
    linear-gradient(
      to bottom,
      rgba(241, 235, 223, 0.4) 0%,
      rgba(241, 235, 223, 0) 30%,
      rgba(241, 235, 223, 0) 65%,
      rgba(241, 235, 223, 0.55) 100%
    );
}

/* Subtle film grain — analog texture across the hero */
.hero__corkboard-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Content — anchored left, sits above scrim */
.hero--workwithus .hero__content {
  position: relative;
  z-index: 4;
  max-width: 560px;
  margin-right: auto;
}

.hero--workwithus .hero__title {
  text-shadow: 0 2px 24px rgba(20, 25, 18, 0.45);
}

[data-brand="wellness"] .hero--workwithus .hero__title {
  text-shadow: 0 2px 18px rgba(241, 235, 223, 0.6);
}

/* ============================================
   Body pepper — staff polaroids alternating left/right
   along the listings section margins. Position-anchored
   to the centered container so they always sit OUTSIDE
   the content area.
   ============================================ */

.work-section {
  position: relative;
  overflow: hidden;
}

.work-pepper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.work-section .container {
  position: relative;
  z-index: 1;
}

/* Polaroid base — applies to every pinned polaroid (hero variant removed) */
.polaroid--pinned {
  position: absolute;
  margin: 0;
  background: #fbf7ee;
  /* Top padding leaves the "head room" above each photo where the pin sits */
  padding: 22px 10px 38px 10px;
  width: clamp(110px, 10vw, 150px);
  box-shadow:
    0 4px 10px rgba(20, 25, 18, 0.3),
    0 18px 40px rgba(20, 25, 18, 0.3),
    0 36px 70px rgba(58, 69, 52, 0.22);
  pointer-events: auto;
  transition: transform var(--duration-base) var(--ease-out);
  will-change: transform;
}

[data-brand="wellness"] .polaroid--pinned {
  box-shadow:
    0 4px 10px rgba(88, 70, 50, 0.18),
    0 18px 40px rgba(88, 70, 50, 0.22),
    0 36px 70px rgba(120, 95, 65, 0.18);
}

.polaroid--pinned img {
  display: block;
  width: 100%;
  /* Staff photos are 2:3 portrait; preserve to avoid awkward crop */
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* Pin — sits at top-center, head extending above the polaroid frame.
   Needle visually "enters" the polaroid through the head-room padding. */
.polaroid__pin {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(20, 25, 18, 0.35));
  pointer-events: none;
}

/* Lift on hover — reads as "I can pick this up" */
.polaroid--pinned:hover {
  transform: rotate(0deg) translateY(-4px) !important;
  z-index: 5;
}

/* ============================================
   Pepper slot positions
   - Odd slots (1,3,5,7) anchor to LEFT margin
     via right: calc(50% + 600px + offset)
   - Even slots (2,4,6,8) anchor to RIGHT margin
     via left: calc(50% + 600px + offset)
   - Top values are fixed-px so they always cluster
     in the upper portion of the listings section,
     regardless of how many cards render.
   ============================================ */

.pep-1 { top: 40px;   right: calc(50% + 600px + 30px); z-index: 2; }
.pep-2 { top: 90px;   left:  calc(50% + 600px + 20px); z-index: 2; }
.pep-3 { top: 320px;  right: calc(50% + 600px + 60px); z-index: 2; }
.pep-4 { top: 380px;  left:  calc(50% + 600px + 50px); z-index: 2; }
.pep-5 { top: 640px;  right: calc(50% + 600px + 25px); z-index: 2; }
.pep-6 { top: 720px;  left:  calc(50% + 600px + 35px); z-index: 2; }
.pep-7 { top: 980px;  right: calc(50% + 600px + 55px); z-index: 2; }
.pep-8 { top: 1080px; left:  calc(50% + 600px + 15px); z-index: 2; }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .hero--workwithus {
    min-height: clamp(620px, 84vh, 760px);
  }
}

@media (max-width: 1280px) {
  /* On viewports where the centered container leaves <60px of side margin,
     polaroids would overlap content. Hide the gimmick — listings stay clean. */
  .work-pepper { display: none; }
}

@media (max-width: 768px) {
  .hero--workwithus {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: var(--space-2xl);
  }

  /* Stronger vertical scrim on mobile so text wins legibility */
  [data-brand="clinic"] .hero__corkboard-scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(20, 25, 18, 0.86) 0%,
        rgba(20, 25, 18, 0.6) 30%,
        rgba(20, 25, 18, 0.4) 55%,
        rgba(20, 25, 18, 0.78) 100%
      );
  }

  [data-brand="wellness"] .hero__corkboard-scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(241, 235, 223, 0.88) 0%,
        rgba(241, 235, 223, 0.65) 30%,
        rgba(241, 235, 223, 0.45) 55%,
        rgba(241, 235, 223, 0.82) 100%
      );
  }

  .hero--workwithus .hero__content {
    max-width: none;
  }
}

/* ============================================
   #open-roles — spotlight reveal
   When the user taps "View open roles", the page smooth-scrolls here
   and each card "ignites" in sequence: a warm diagonal light sweeps
   across the card while a brief olive halo flares around it, then both
   fade. Reads as a luxury showroom turning on its display lights.
   ============================================ */

#open-roles {
  /* Scroll target offset for the fixed header so the section title and
     first card are both visible after scrollIntoView. */
  scroll-margin-top: 96px;
}

.work-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Olive halo — sits just outside the card border, ramps in/out only
   during the spotlight animation. Pseudo-element keeps the card's
   own glass-card box-shadow intact between runs. */
.work-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 35%, transparent),
    0 18px 60px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Diagonal warm-light sweep — passes across the card surface once */
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    color-mix(in srgb, var(--accent) 22%, transparent) 46%,
    color-mix(in srgb, var(--text-primary) 18%, transparent) 50%,
    color-mix(in srgb, var(--accent) 22%, transparent) 54%,
    transparent 70%
  );
  background-size: 280% 280%;
  background-position: 100% 100%;
  mix-blend-mode: screen;
}

[data-brand="wellness"] .work-card::after {
  /* Ivory canvas — overlay reads better than screen */
  mix-blend-mode: overlay;
}

/* Keep card content above the sweep layer */
.work-card > * {
  position: relative;
  z-index: 2;
}

.work-grid.is-spotlight .work-card::after {
  animation: workCardSweep 1.5s var(--ease-out) calc(var(--i, 0) * 130ms);
}

.work-grid.is-spotlight .work-card::before {
  animation: workCardHalo 1.6s var(--ease-out) calc(var(--i, 0) * 130ms);
}

@keyframes workCardSweep {
  0%   { opacity: 0; background-position: 100% 100%; }
  15%  { opacity: 1; }
  100% { opacity: 0; background-position: 0% 0%; }
}

@keyframes workCardHalo {
  0%, 100% { opacity: 0; }
  35%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__corkboard-bg { animation: none; }
  .polaroid--pinned,
  .polaroid--pinned:hover { transition: none; }

  /* Replace the sweep with a single soft halo pulse — no motion, no
     gradient travel, just a brief acknowledgement. */
  .work-grid.is-spotlight .work-card::after { animation: none; }
  .work-grid.is-spotlight .work-card::before {
    animation: workCardHaloReduced 900ms ease-out calc(var(--i, 0) * 80ms);
  }

  @keyframes workCardHaloReduced {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
  }
}