/* Roof Nerds — "Built on real roofs" job cards, before/after slider, gallery, lightbox */
.job-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.job-card { overflow: hidden; display: flex; flex-direction: column; }
.job-body { padding: 20px 22px 24px; }
.job-body h3, .gallery-job h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 6px; }
.job-facts { color: #CDD5E0; margin: 0 0 16px; }
.jobs-note { text-align: center; margin: 28px auto 0; max-width: 60ch; font-size: .95rem; }

/* before/after slider */
.ba { --pos: 50%; position: relative; width: 100%; overflow: hidden; background: #121826; border-bottom: 3px solid var(--blue); touch-action: pan-y; user-select: none; }
.ba picture, .ba img { display: block; width: 100%; height: 100%; }
.ba img { object-fit: cover; }
.ba-after { position: absolute; inset: 0; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--orange); border: 3px solid #000; box-shadow: 3px 3px 0 #000; }
.ba-handle span::before, .ba-handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -7px; border: 7px solid transparent; }
.ba-handle span::before { left: 2px; border-right-color: #000; }
.ba-handle span::after { right: 2px; border-left-color: #000; }
.ba-tag { position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; background: rgba(10,13,20,.82); border: 2px solid var(--line); pointer-events: none; }
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; color: var(--orange-light); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; }
.ba-range::-moz-range-thumb { width: 48px; height: 100%; border: 0; }
.ba:has(.ba-range:focus-visible) { outline: 3px solid var(--orange); outline-offset: -3px; }

/* thumbnails */
.job-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.job-thumb { display: block; width: 100%; padding: 0; border: 2px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #121826; cursor: zoom-in; aspect-ratio: 1; transition: border-color .15s, transform .15s; }
.job-thumb picture, .job-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.job-thumb:hover { border-color: var(--orange); transform: translateY(-2px); }
.job-thumb:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* about gallery */
.gallery { display: grid; gap: clamp(28px, 4vw, 44px); margin-bottom: clamp(40px, 6vw, 64px); }
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* lightbox */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(5,7,12,.94); color: #fff; }
.lightbox::backdrop { background: rgba(5,7,12,.94); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; }
.lb-stage { position: relative; display: grid; place-items: center; padding: 56px 16px 8px; min-height: 0; touch-action: pan-y; }
.lb-stage img { max-width: min(100%, 1600px); max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); border: 3px solid var(--blue); }
.lb-cap { padding: 8px 16px 20px; text-align: center; color: #CDD5E0; font-size: .95rem; max-width: 70ch; margin: 0 auto; }
.lb-btn { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #000; background: var(--orange); color: #000; font: 700 1.4rem/1 var(--font-body); box-shadow: 3px 3px 0 #000; cursor: pointer; display: grid; place-items: center; }
.lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; top: 50%; margin-top: -24px; }
.lb-next { right: 12px; top: 50%; margin-top: -24px; }
.lb-count { position: absolute; top: 22px; left: 16px; font-weight: 700; color: var(--muted); }

@media (max-width: 860px) {
  .job-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .job-thumbs:not(.gallery-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-prev, .lb-next { top: auto; bottom: 64px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .job-thumb { transition: none; } }