/* =============================================================
   Section: Jobs (Open Positions accordion)
   Maps to: inc/jobs-feed.php  (shortcode: [aci_jobs_feed])
   Sits between Workforce and Unions on the Employment page.
   ============================================================= */

.jobs {
  background: var(--ink);
  color: var(--bone);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}

/* Subtle grain wash so the band reads as the same material as the
   Workforce hero above it but visually distinct enough to register
   as a new section. */
.jobs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../../img/textures/grain.svg");
  background-size: 320px 320px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.jobs__inner {
  display: grid;
  gap: var(--s-7);
}

.jobs__head {
  display: grid;
  gap: var(--s-3);
  max-width: 60ch;
}

.jobs__title {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.jobs__title .accent { color: var(--safety); }

.jobs__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted-dark);
  margin-top: var(--s-3);
}

.jobs__intro strong {
  color: var(--bone);
  font-weight: 600;
}

.jobs__list {
  display: grid;
  gap: var(--s-3);
}

/* ---- Single accordion card ---- */
.job-card {
  background: rgba(244, 241, 234, 0.04);
  border: 1px solid var(--rule-dark);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.job-card:hover { border-color: rgba(244, 241, 234, 0.22); }

.job-card[open] {
  border-color: var(--safety);
  background: rgba(244, 241, 234, 0.06);
}

/* Strip the native disclosure triangle in every browser. The chevron
   on the right is our own SVG that flips on [open]. */
.job-card > summary {
  list-style: none;
  cursor: pointer;
}
.job-card > summary::-webkit-details-marker { display: none; }
.job-card > summary::marker { display: none; }

.job-card__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) var(--s-6);
  position: relative;
}

@media (max-width: 640px) {
  .job-card__summary {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
  }
}

.job-card__summary-text {
  display: grid;
  gap: 6px;
  grid-template-areas:
    "idx title"
    "idx loc"
    "tease tease";
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--s-4);
}

@media (max-width: 480px) {
  .job-card__summary-text {
    grid-template-columns: 1fr;
    grid-template-areas:
      "idx"
      "title"
      "loc"
      "tease";
    gap: 6px;
  }
}

.job-card__index {
  grid-area: idx;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--safety);
  align-self: center;
}

.job-card__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}

.job-card__location {
  grid-area: loc;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.job-card__location svg { color: var(--safety); flex: 0 0 auto; }

.job-card__teaser {
  grid-area: tease;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted-dark);
  margin-top: 4px;
  max-width: 70ch;
}

.job-card__summary-aside {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .job-card__summary-aside {
    justify-content: space-between;
    width: 100%;
  }
}

/* The Apply button on the closed card goes straight to the ATS even
   when the visitor never expands the row. stopPropagation() in the
   shortcode keeps the click from also toggling the accordion. */
.job-card__apply {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  padding: 10px 18px;
}

.job-card__chev {
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.job-card[open] .job-card__chev {
  transform: rotate(180deg);
  color: var(--safety);
}

/* ---- Expanded body ---- */
.job-card__body {
  padding: 0 var(--s-6) var(--s-6);
  border-top: 1px solid var(--rule-dark);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .job-card__body { padding: 0 var(--s-5) var(--s-5); }
}

.job-card__details {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--bone);
  padding-top: var(--s-5);
}

.job-card__details p {
  color: rgba(244, 241, 234, 0.82);
  margin-bottom: var(--s-3);
  max-width: 78ch;
}

.job-card__details p:last-child { margin-bottom: 0; }

.job-card__details h3,
.job-card__details h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--safety);
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
}

.job-card__details h3:first-child,
.job-card__details h4:first-child { margin-top: 0; }

.job-card__details strong { color: var(--bone); font-weight: 600; }

.job-card__details ul,
.job-card__details ol {
  margin: var(--s-3) 0 var(--s-4);
  padding-left: 1.25rem;
  color: rgba(244, 241, 234, 0.82);
  max-width: 78ch;
}

.job-card__details li { margin-bottom: 6px; }
.job-card__details li::marker { color: var(--safety); }

.job-card__details a {
  color: var(--safety);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.job-card__details a:hover { border-bottom-color: var(--safety); }

.job-card__body-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-dark);
}

.job-card__body-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

/* ---- Open + close motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .job-card[open] > .job-card__body {
    animation: jobCardReveal var(--dur-base) var(--ease-out);
  }
}

@keyframes jobCardReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ---- Footer link below the list ---- */
.jobs__foot {
  margin-top: var(--s-3);
  text-align: right;
}

.jobs__foot-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.jobs__foot-link:hover {
  color: var(--bone);
  border-bottom-color: var(--safety);
}

/* ---- Fallback panel (feed unreachable) ---- */
.jobs__fallback {
  border: 1px solid var(--rule-dark);
  border-left: 3px solid var(--safety);
  background: rgba(244, 241, 234, 0.04);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-3);
  max-width: 60ch;
}

.jobs__fallback-title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--safety);
  margin: 0;
}

.jobs__fallback-copy {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bone);
  margin: 0;
}

.jobs__fallback .btn { justify-self: start; margin-top: var(--s-3); }