/* /hwy-50-brewery-construction-photos/ only */

/* "Construction Pics" title picture on the dark band (live: 30px down) */
.page-hwy-50-brewery-construction-photos .con-head {
  padding-top: 30px;
  padding-bottom: 40px;
}
.page-hwy-50-brewery-construction-photos .con-head__title {
  margin: 0;
  line-height: 0;
}
.page-hwy-50-brewery-construction-photos .con-head__title img {
  display: block;
  width: 100%;
  height: auto;
}

/* Gallery bands (live: brick, yellow, brick, each with 30px padding round the gallery) */
.page-hwy-50-brewery-construction-photos .con-band {
  padding-top: 30px;
  padding-bottom: 30px;
}
.page-hwy-50-brewery-construction-photos .con-gallery-wrap { padding: 0 30px; }
.page-hwy-50-brewery-construction-photos .con-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-hwy-50-brewery-construction-photos .con-item {
  position: relative;
  margin: 0;
}
.page-hwy-50-brewery-construction-photos .con-item:focus-within { z-index: 2; }
.page-hwy-50-brewery-construction-photos .con-figure {
  position: relative;
  margin: 0;
}
/* no frame: live sets a 2px #cfcfcf border but the theme cancels it (border:0 !important) */
.page-hwy-50-brewery-construction-photos .con-link {
  display: block;
  line-height: 0;
}
.page-hwy-50-brewery-construction-photos .con-link img {
  display: block;
  width: 100%;
  height: auto;
}
/* focus ring: a black inner ring so the band's focus colour shows against any photo */
.page-hwy-50-brewery-construction-photos .con-link:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #000;
}
/* Caption strip over the bottom of each picture (live: 15px in, rounded, dark).
   Live used 50% black under 70% white text; both are stronger here for 4.5:1 on any photo. */
.page-hwy-50-brewery-construction-photos .con-caption {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;
  padding: 5px 10px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: max(14px, .9em);
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;        /* the long facebook.com address must not spill out */
  pointer-events: none;           /* a click on the caption still opens the picture */
}

/* Masonry like live: pictures keep their shape and pack into three columns.
   Each column is 80 row units wide, so a 4:3 picture spans 60 units, 16:9 spans 45. */
@supports (width: 1cqw) {
  @media (min-width: 768px) {
    .page-hwy-50-brewery-construction-photos .con-gallery-wrap { container-type: inline-size; }
    .page-hwy-50-brewery-construction-photos .con-gallery {
      grid-auto-flow: row dense;
      grid-auto-rows: calc(100cqw / 240);
      align-items: stretch;
    }
    .page-hwy-50-brewery-construction-photos .con-item--landscape { grid-row: span 60; }
    .page-hwy-50-brewery-construction-photos .con-item--wide { grid-row: span 45; }
    .page-hwy-50-brewery-construction-photos .con-item--portrait { grid-row: span 107; }
    .page-hwy-50-brewery-construction-photos .con-item--tall { grid-row: span 142; }
    .page-hwy-50-brewery-construction-photos .con-figure,
    .page-hwy-50-brewery-construction-photos .con-link { height: 100%; }
    .page-hwy-50-brewery-construction-photos .con-link img {
      height: 100%;
      object-fit: cover;
    }
  }
}

/* Phones: two columns like live, captions under the pictures so they stay readable */
@media (max-width: 767px) {
  .page-hwy-50-brewery-construction-photos .con-head { padding-top: 20px; padding-bottom: 24px; }
  .page-hwy-50-brewery-construction-photos .con-band { padding-top: 24px; padding-bottom: 24px; }
  .page-hwy-50-brewery-construction-photos .con-gallery-wrap { padding: 0; }
  .page-hwy-50-brewery-construction-photos .con-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .page-hwy-50-brewery-construction-photos .con-caption {
    position: static;
    margin-top: 0;
    padding: 6px 8px 7px;
    border-radius: 0 0 3px 3px;
    background: rgba(0, 0, 0, .72);
  }
}