/* Our Work page: masonry gallery (images shown whole, no cropping) and lightbox viewer. */

.work-gallery-section {
  max-width: none; color: #fff;
  background:
    radial-gradient(1000px 520px at 15% 0%, rgba(0, 87, 255, 0.18), transparent 60%),
    linear-gradient(180deg, var(--night-900, #061521), var(--night-800, #081b28));
}
.work-gallery { list-style: none; margin: 0 auto; padding: 0; max-width: 1480px; column-count: 3; column-gap: 24px; }
.work-gallery-item { break-inside: avoid; margin: 0 0 24px; }
.work-gallery-open {
  position: relative; display: block; width: 100%; padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px;
  overflow: hidden; background: #0b1626; cursor: zoom-in; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.work-gallery-open img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; }
.work-gallery-open:hover { border-color: rgba(76, 157, 255, 0.55); box-shadow: 0 28px 60px -28px rgba(0, 87, 255, 0.45); }
.work-gallery-open:hover img { transform: scale(1.03); }
.work-gallery-open:focus-visible { outline: 3px solid var(--brand-cyan, #00b4ff); outline-offset: 3px; }
.work-gallery-zoom {
  position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(4, 18, 40, 0.65); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); opacity: 0; transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.work-gallery-open:hover .work-gallery-zoom, .work-gallery-open:focus-visible .work-gallery-zoom { opacity: 1; transform: none; }
.work-gallery-follow { margin-top: 20px; color: #fff; }
@media (prefers-reduced-motion: reduce) { .work-gallery-open img, .work-gallery-zoom { transition: none; } .work-gallery-open:hover img { transform: none; } }
@media (max-width: 1024px) { .work-gallery { column-count: 2; column-gap: 20px; } .work-gallery-item { margin-bottom: 20px; } }
@media (max-width: 600px) {
  .work-gallery { column-count: 1; }
  .work-gallery-item { margin-bottom: 16px; }
  .work-gallery-open { border-radius: 14px; }
  .work-gallery-zoom { opacity: 1; transform: none; width: 36px; height: 36px; }
}

/* ---------- Lightbox ---------- */
.work-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 64px 72px; }
.work-lightbox[hidden] { display: none; }
.work-lightbox-backdrop { position: absolute; inset: 0; background: rgba(3, 10, 22, 0.94); }
.work-lightbox-figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; touch-action: pan-y; }
.work-lightbox-figure img { display: block; max-width: min(1100px, 100%); max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); user-select: none; -webkit-user-drag: none; }
.work-lightbox-figure figcaption { color: #d7e2ee; font-size: 14px; text-align: center; }
.work-lightbox-count { color: #8fa3ba; margin-left: 8px; }
.work-lightbox-btn {
  position: absolute; z-index: 1; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease;
}
.work-lightbox-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.work-lightbox-btn:focus-visible { outline: 3px solid var(--brand-cyan, #00b4ff); outline-offset: 3px; }
.work-lightbox-close { top: 18px; right: 18px; font-size: 28px; }
.work-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.work-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
body.work-lightbox-open { overflow: hidden; }
body.work-lightbox-open .whatsapp-float, body.work-lightbox-open .mobile-conversion { visibility: hidden; }
@media (max-width: 600px) {
  .work-lightbox { padding: 64px 12px 88px; }
  .work-lightbox-figure img { max-height: calc(100dvh - 180px); }
  .work-lightbox-prev, .work-lightbox-next { top: auto; bottom: 18px; transform: none; }
  .work-lightbox-prev { left: calc(50% - 62px); }
  .work-lightbox-next { right: calc(50% - 62px); }
}

/* ---------- Service page project gallery (e.g. Painting Services) ---------- */
.service-gallery { padding-top: 20px; }
.service-gallery-head { max-width: 1100px; margin: 0 0 36px; }
.service-gallery-head h2 { margin: 0 0 12px; }
.service-gallery-head p { margin: 0; color: #526670; max-width: 620px; }
.service-gallery-grid { list-style: none; margin: 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.service-gallery-card.work-gallery-open {
  border: 1px solid rgba(10, 34, 72, 0.16); background: #e9eef5;
  box-shadow: 0 30px 60px -36px rgba(6, 21, 51, 0.55);
}
.service-gallery-card.work-gallery-open:hover { border-color: rgba(0, 87, 255, 0.45); box-shadow: 0 34px 70px -34px rgba(0, 87, 255, 0.4); }
@media (max-width: 700px) {
  .service-gallery-grid { grid-template-columns: 1fr; gap: 18px; }
  .service-gallery-head { margin-bottom: 24px; }
}