/* ============================================================
   GALLERY GRID — /photos/

   WHY THIS FILE EXISTS. The page shipped with 21 Webflow lightbox
   items that contained NO <img> at all — each one was an empty <a>
   wrapping a <script type="application/json"> that named an image
   URL. Browsers do not render script tags, so the gallery displayed
   nothing. Confirmed on the client's live site too: njindooroutdoor
   .com/photos is a heading, a blank space and a CTA. v2 inherited the
   fault rather than causing it.

   The 21 entries were also only 15 distinct photographs — grid1 and
   wqeqweqwe are the same frame at two resolutions (pixel-identical,
   verified), and four more files were listed twice or three times.
   The grid below carries the 15, each with a real <img>, written alt
   text, and an href pointing at the full-size file so the tile still
   opens if Webflow's lightbox JS fails to load.

   See v2/_audit/gallery.md for the full finding.
   ============================================================ */

/* ---- Undoing the Webflow shell ------------------------------------
   Three inherited rules made the gallery impossible to see even once
   real <img> tags were in place, and all three have to go:

     .section-25   { height: 1800px }   fixed-height dark band
     .div-responsive { height: 100px; min-height: 100px }
                                        a 100px box holding the grid
     .collection-list { display: grid; place-items: center }
                                        overrides the column layout below

   The 100px wrapper is why the original page could never have worked
   regardless of the missing images — there was nowhere for them to go.
   Heights become auto so the section grows to its content. */
.section-25 { height: auto !important; padding: 8px 0 64px; }

/* .section-24 is an empty 200px spacer between the heading and the
   grid. It was harmless while the gallery rendered nothing; with 15
   photographs under it, 200px of dead space reads as a broken page.
   Trimmed rather than removed — it is live's own markup. */
.section-24 { height: 40px !important; }
.div-responsive { width: 100% !important; height: auto !important; min-height: 0 !important; }

.gal__grid.collection-list {
  display: block;            /* beats .collection-list's display:grid   */
  grid-template-columns: none;
  place-items: initial;
}
.gal__grid .collection-item-4 {
  flex: none;                /* .collection-item-4 is flex: 0 25%       */
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Masonry by columns rather than a fixed-ratio grid. The set mixes
   1280x960 job photos with 559x218 before/after strips; forcing them
   into one aspect ratio would crop the before/after panels in half,
   which is the one thing these photographs exist to show. Columns let
   every frame keep its own shape. */
.gal__grid {
  columns: 3 300px;
  column-gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px 8px;
}

/* w-dyn-item is display:inline-block from Webflow's stylesheet, which
   fights the column flow — block plus break-inside is what keeps a
   tile from splitting across a column boundary. */
.gal__grid .w-dyn-item {
  display: block;
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 18px;
}

.gal__tile {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0F172A;
  box-shadow: 0 10px 30px rgba(4, 9, 20, .35);
  transition: transform .22s ease, box-shadow .22s ease;
}
.gal__tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(4, 9, 20, .5);
}
.gal__tile:focus-visible {
  outline: 3px solid #71B745;
  outline-offset: 3px;
}

/* height:auto overrides the width/height attributes on the tag, which
   are there to reserve the right box before the file arrives. */
.gal__img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 860px) {
  .gal__grid { columns: 2 240px; column-gap: 14px; }
  .gal__grid .w-dyn-item { margin-bottom: 14px; }
}

@media (max-width: 520px) {
  .gal__grid { columns: 1; padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gal__tile, .gal__tile:hover { transition: none; transform: none; }
}