/*
 * Recent jobs: the photo viewer, and the small fixes that go with it (Nick and Wesly, 2026-10-19).
 *
 * ONE FILE, COPIED INTO EACH SITE (NearMe's template, Foreshore, Mr Paint) beside assets/js/job-viewer.js, and linked from
 * the page's <head> so nothing jumps after the page has drawn. Every rule is written to win over a site's own job-card
 * rules without changing them: two class names (`.job-card .x`) beat a site's one (`.x`).
 */

/* ── every clickable thing in the section shows the hand (Wesly, 2026-10-19) ───────────────────────────── */
.job-gallery img,
.job-card summary,
.job-card-summary,
.jobs-more > summary,
.job-nav,
.job-slider button,
.job-controls button,
.job-body a {
  cursor: pointer;
}
.job-nav:disabled { cursor: not-allowed; }
.job-gallery img:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }


/* ── hover: a card, its photo and its gallery photos respond when the pointer is over them (Wesly, 2026-10-19: "static") ──
   ⚠️ ONLY WHERE A REAL POINTER EXISTS. On a phone a finger "hovers" after a tap and the effect would stick on the last card
   touched, so these are for a mouse or trackpad only. And they are off for anybody who asked the system for less motion. */
@media (hover: hover) and (pointer: fine) {
  /* ⚠️ NO LIFT (no translateY): Mr Paint's jobs sit in a scrolling strip, which clips anything that moves past its top edge, and the
     top 2px of a lifted card was cut off (measured 2026-10-20). A shadow, a darker border and the tinted title bar say the same thing. */
  .job-card { transition: box-shadow .18s ease, border-color .18s ease; }
  .job-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); border-color: rgba(0, 0, 0, .25); }
  .job-card > summary:hover { background: rgba(0, 0, 0, .03); }
  .job-thumb img, .job-thumb video { transition: transform .35s ease; }
  .job-card > summary:hover .job-thumb img,
  .job-card > summary:hover .job-thumb video { transform: scale(1.07); }
  .job-card > summary:hover .jv-play { transform: scale(1.12); }
  .jv-play { transition: transform .2s ease; }
  .job-card > summary:hover .job-more,
  .job-card > summary:hover .job-expand,
  .job-card > summary:hover .job-expand-hint { text-decoration: underline; }
  .job-gallery img { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
  .job-gallery img:hover { position: relative; z-index: 1; transform: scale(1.035); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); filter: brightness(1.06); }
  .jobs-more > summary:hover { filter: brightness(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .job-card, .job-thumb img, .job-thumb video, .jv-play, .job-gallery img { transition: none !important; }
  .job-card > summary:hover .job-thumb img, .job-card > summary:hover .job-thumb video,
  .job-card > summary:hover .jv-play, .job-gallery img:hover { transform: none !important; }
}

/* ── the "read more" hint was too faint to read (4.1 to 1 against a minimum of 4.5): a darker gold ──────── */
.job-card .job-expand-hint,
.job-card .job-expand { color: #7a5a00; }

/* ── photos on a phone: two to a row instead of one very tall column ───────────────────────────────────── */
@media (max-width: 640px) {
  .job-card .job-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* A video, a lone photo, and an odd last photo each take the whole row, so no half-empty gaps. */
  .job-card .job-gallery > video,
  .job-card .job-gallery > :only-child,
  .job-card .job-gallery > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── a card says what is in it: a play button on a video thumbnail, and a line naming the contents ──────── */
.job-thumb { position: relative; }
.jv-play {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; background: rgba(0, 0, 0, .62); pointer-events: none;
}
.jv-play::after {
  content: ""; position: absolute; left: 14px; top: 10px;
  border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff;
}
.jv-pill {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff;
  font: 700 10.5px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .06em; text-transform: uppercase; pointer-events: none;
}
.jv-media { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #4b5563; }

/* ── the full screen photo viewer ───────────────────────────────────────────────────────────────────────── */
.jv {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; display: none; background: rgba(8, 8, 8, .98); color: #fff;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: pan-y pinch-zoom;
}
.jv.jv-open { display: block; }
.jv [hidden] { display: none !important; }
/* ⚠️ THE REST OF THE PAGE IS HIDDEN WHILE THE VIEWER IS OPEN (visibility, so nothing moves and the scroll spot is kept).
   Mr Paint's Google reviews pop-up is a fixed box with a huge z-index that otherwise sat in FRONT of the viewer and
   covered its buttons; hiding the page also keeps Tab and screen readers out of what is behind. */
html.jv-lock body > *:not(.jv) { visibility: hidden !important; }
.jv-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; padding: 56px 12px 64px; }
.jv-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px;
  background: #222; user-select: none; -webkit-user-select: none;
}
.jv-btn {
  position: absolute; width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16);
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.jv-btn:hover { background: rgba(255, 255, 255, .28); }
.jv-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.jv-close { top: 8px; right: 8px; }
.jv-prev { left: 8px; top: 50%; margin-top: -24px; }
.jv-next { right: 8px; top: 50%; margin-top: -24px; }
/* ⚠️ pointer-events:none, or the bar (drawn after the buttons) covers the phone's next and previous buttons and
   swallows every tap on them. Found in a real browser 2026-10-19. */
.jv-bar {
  pointer-events: none; position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 64px 14px; text-align: center;
  font-size: 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
.jv-count { font-variant-numeric: tabular-nums; opacity: .85; }
.jv-cap { margin-top: 2px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-note { position: absolute; left: 0; right: 0; top: 50%; text-align: center; padding: 0 24px; margin-top: -12px; }
@media (max-width: 640px) {
  .jv-prev, .jv-next { top: auto; bottom: 10px; margin-top: 0; }
  .jv-bar { padding: 10px 64px 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .jv.jv-open { animation: jvfade .15s ease-out; }
  @keyframes jvfade { from { opacity: 0 } to { opacity: 1 } }
}