/* ==========================================================================
   Galvitech — live job gallery
   Photos come from /gallery/ via /gallery-index.php.
   Upload a photo to /gallery/, run gallery-optimise.php, it appears.
   ========================================================================== */

.g-gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px) { .g-gal { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .g-gal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .g-gal { grid-template-columns: 1fr; } }

.g-gal__item {
  position: relative;
  display: block;
  border-radius: 13px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--g-line);
  background: var(--g-navy-700);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .9, .3, 1),
              border-color .2s ease, transform .2s ease;
}
.g-gal__item.in { opacity: 1; transform: none; }
.g-gal__item:hover {
  border-color: rgba(34, 211, 238, .45);
  transform: translateY(-3px);
}
.g-gal__item:focus-visible { outline: 3px solid var(--g-cyan); outline-offset: 3px; }

.g-gal__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.g-gal__item:hover img { transform: scale(1.05); }

/* caption fades up on hover */
.g-gal__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 13px 11px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgba(4, 7, 15, .92));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.g-gal__item:hover .g-gal__cap,
.g-gal__item:focus-visible .g-gal__cap { opacity: 1; transform: none; }

.g-gal__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--g-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, .35);
  padding-bottom: 2px;
}
.g-gal__more:hover { border-bottom-color: var(--g-cyan); }

@media (prefers-reduced-motion: reduce) {
  .g-gal__item { opacity: 1; transform: none; transition: none; }
  .g-gal__item:hover img { transform: none; }
}

/* Job captions carry information - "PS5 liquid metal treatment" tells a
   visitor what the bench actually does. The homepage portfolio keeps its
   hover reveal; the latest-work galleries always show these, because on a
   phone hover never happens at all. */
#latest-work .g-gal__cap { opacity: 1; transform: none; }

/* ==========================================================================
   Homepage projects strip (js/projects-gallery.js)
   --------------------------------------------------------------------------
   Scoped to #portfolio so the seven service-page galleries keep the square
   crop and hover reveal above. These tiles are built in JS, so they need a
   link wrapper rather than being an <a> themselves - an <a> nested inside
   another <a> is invalid HTML.
   ========================================================================== */

/* Six photos sit as a clean 3 + 3. The shared grid above is four across,
   which would leave a lopsided 4 + 2 on the second row. */
#portfolio .g-gal { gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { #portfolio .g-gal { gap: 12px; } }
@media (max-width: 680px) { #portfolio .g-gal { gap: 10px; grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { #portfolio .g-gal { grid-template-columns: 1fr; } }

/* 4:3 rather than the square above - several of these photos are very wide
   (600x270) and a square crop would throw away most of the workbench. */
#portfolio .g-gal__item img { aspect-ratio: 4 / 3; }

#portfolio .g-gal__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Captions here carry information ("PS5 Liquid Metal Treatment" tells a
   visitor what the bench actually does) and hover never fires on a phone,
   so they stay put on every screen size. */
#portfolio .g-gal__cap {
  opacity: 1;
  transform: none;
  font-size: 12.5px;
  padding: 26px 13px 11px;
}

/* Full-size view. Sibling of the link, not a child of it. */
#portfolio .g-gal__zoom {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(6, 10, 22, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease, background-color .2s ease;
}
#portfolio .g-gal__zoom::before,
#portfolio .g-gal__zoom::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 2px;
}
#portfolio .g-gal__zoom::before { width: 11px; height: 2px; top: 13px; left: 9px; }
#portfolio .g-gal__zoom::after  { width: 2px; height: 11px; top: 8.5px; left: 13.5px; }
#portfolio .g-gal__item:hover .g-gal__zoom,
#portfolio .g-gal__zoom:focus-visible { opacity: 1; }
#portfolio .g-gal__zoom:hover { background: var(--g-cyan); }
#portfolio .g-gal__zoom:hover::before,
#portfolio .g-gal__zoom:hover::after { background: #06101a; }
#portfolio .g-gal__zoom:focus-visible { outline: 3px solid var(--g-cyan); outline-offset: 3px; }

/* Touch devices never hover, so the zoom button would stay invisible. */
@media (hover: none) {
  #portfolio .g-gal__zoom { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  #portfolio .g-gal__zoom { transition: none; }
}

/* Line under the strip. */
.g-gal__note {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--g-muted, #93a0bd);
}
.g-gal__note a {
  color: var(--g-cyan);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, .35);
}
.g-gal__note a:hover { border-bottom-color: var(--g-cyan); }