/* Past-work gallery - a grid of job photos, above the FAQ band.
 *
 * The photos are placeholders for now. They use the same grey box and drawn
 * camera glyph as the process band, deliberately: two different kinds of
 * "picture missing" on one page would read as a bug, one repeated treatment
 * reads as a decision.
 *
 * Grey band. The page body above it is white and the FAQ band below it is white
 * with a hairline top border, so grey is what makes this read as its own block
 * between them.
 *
 * Loaded after faq.css. Same reason as every light band before it:
 * sections.css paints `.sos-band h2` white for the dark bands, and source order
 * is what lets this restate the colour without !important.
 */

.sos-gallery {
  background: #f5f5f5;
  padding: 64px 0;
}

/* ---- head --------------------------------------------------------------- */

.sos-gallery .sos-gl-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}

/* The eyebrow carries a short rule to its left, as in the reference. Drawn with
   a pseudo-element rather than a separate span - it is decoration, and it
   should not land in the accessibility tree or in a text selection. */
.sos-gallery .sos-gl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dd5c26;
  margin-bottom: 12px;
}

.sos-gallery .sos-gl-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #dd5c26;
}

/* sections.css sets .sos-band h2 to #fff for the dark bands. Restated, not
   fought - this sheet loads later, so source order settles it. */
.sos-gallery h2 {
  color: #1a1a1a;
  margin: 0;
}

.sos-gallery .sos-gl-sub {
  color: #666;
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 14px 0 0;
  padding: 0;
}

/* ---- the grid ----------------------------------------------------------- */

.sos-gallery .sos-gl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Fewer than four photos. Silt fence has exactly two honest ones, and left-
   aligning them in a four-column grid leaves two empty cells that read as
   images that failed to load. Two columns at the width they would have had in
   the four-up grid ((1132 - 3*16) / 4 = 271, so 271*2 + 16 = 558), centred, so
   the tiles stay the same size as every other band on the site. */
.sos-gallery .sos-gl-grid.is-short {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 558px;
  margin-inline: auto;
}

/* ---- the placeholder tile ----------------------------------------------
   Still used, on the two service families with no honest photo of their own
   work - pond construction and silt fence. See photos/TAGS.md.

   A styled box rather than an <img> with no src, for the reason the review
   avatars taught us: an image that fails to load with alt="" renders as
   literally nothing, so a missing photo becomes an invisible hole in the grid
   rather than an obvious gap. */

.sos-gallery .sos-gl-tile {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: #ececec;
  border: 1px solid #e2e2e2;
  /* Drawn, not fetched - same glyph as the process band. No asset, no request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44px 44px;
}

/* Without this the tile collapses to nothing on a browser with no
   aspect-ratio support, and the grid looks like it lost its contents. */
@supports not (aspect-ratio: 4 / 3) {
  .sos-gallery .sos-gl-tile {
    min-height: 170px;
  }
}

/* ---- the tile with a photo in it ---------------------------------------
   The tile keeps its own 4/3 box and the photo fills it. 73 of the 94 photos
   are Instagram squares and the rest range from 4:3 to portrait, so cover is
   what makes a row of them line up - contain would letterbox every square and
   the grid would look broken.

   Grey underneath rather than the camera glyph: this is what shows for the
   fraction of a second before a lazy-loaded photo decodes, and a camera icon
   flashing behind every tile reads as a failure. */

.sos-gallery .sos-gl-tile.is-photo {
  background: #e2e2e2;
  background-image: none;
  border: 0;
  overflow: hidden;
}

.sos-gallery .sos-gl-tile.is-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- CTA ---------------------------------------------------------------- */

.sos-gallery .sos-gl-cta {
  text-align: center;
  margin-top: 36px;
}

.sos-gallery .sos-gl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  padding: 15px 32px;
  border-radius: 6px;
  background: #dd5c26;
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
}

.sos-gallery .sos-gl-btn:hover {
  background: #b8481b;
  color: #fff;
  transform: translateY(-1px);
}

/* ---- responsive ---------------------------------------------------------
   Two up on a phone, not one. Every other band collapses to a single column,
   but eight tiles stacked one per row is a very long scroll for what is
   decoration - the gallery is there to be glanced at, not read. */

@media all and (max-width: 980px) {
  .sos-gallery {
    padding: 48px 0;
  }
  .sos-gallery .sos-gl-head {
    margin-bottom: 28px;
  }
  .sos-gallery .sos-gl-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media all and (max-width: 620px) {
  .sos-gallery .sos-gl-grid {
    gap: 10px;
  }
  .sos-gallery .sos-gl-tile {
    background-size: 34px 34px;
  }
  .sos-gallery .sos-gl-btn {
    width: 100%;
  }
}