/* Bollards & Road Blockers — real-installation photo mosaic */
.bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.bl-tile { position: relative; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy-deep); box-shadow: var(--shadow-1); }
.bl-tile img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bl-tile:hover img { transform: scale(1.05); }
.bl-tile span { position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(10, 20, 44, .78); backdrop-filter: blur(6px); color: #fff; font-weight: 700; font-size: var(--fs-xs); }
.bl-gallery figcaption { margin-block-start: var(--sp-2); }
@media (max-width: 560px) { .bl-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bl-tile img { transition: none; } }

/* small "on site" strip */
.bl-strip { margin-block-start: var(--sp-3); padding: .9rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.bl-strip__h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-weight: 800; font-size: var(--fs-sm); color: var(--navy); text-transform: uppercase; letter-spacing: .06em; }
.bl-strip__h::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(224, 164, 58, .2); }
.bl-strip__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.bl-mini { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1; box-shadow: var(--shadow-1); outline-offset: 2px; }
.bl-mini img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .45s var(--ease), filter .3s; }
.bl-mini:hover img { transform: scale(1.08); filter: brightness(1.05); }
.bl-mini:focus-visible { outline: 3px solid var(--amber); }
.bl-tile[data-bl-zoom] { cursor: zoom-in; }
/* lightbox */
.bl-lb { border: 0; padding: 0; background: transparent; max-inline-size: min(92vw, 70rem); max-block-size: 90vh; }
.bl-lb::backdrop { background: rgba(8, 14, 30, .85); backdrop-filter: blur(4px); }
.bl-lb img { display: block; max-inline-size: 100%; max-block-size: 86vh; border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.bl-lb button { position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; border: 0; background: rgba(10,20,44,.8); color: #fff; font-size: 1.3rem; cursor: pointer; }
@media (max-width: 560px) { .bl-strip__row { gap: .4rem; } }
.bl-gallery { display: block; }
.bl-gallery > .bl-strip { align-self: start; block-size: auto; }
.bl-lb { position: fixed; inset: 0; margin: auto; inline-size: fit-content; block-size: fit-content; overflow: visible; }
/* keep the on-site strip compact */
.bl-strip { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; inline-size: fit-content; max-inline-size: 100%; }
.bl-strip__h { margin: 0; }
.bl-strip__row { display: flex; gap: .55rem; }
.bl-mini { inline-size: 7.5rem; flex: none; }
@media (max-width: 560px) { .bl-strip { gap: .7rem; } .bl-mini { inline-size: 6rem; } }
/* one compact card holding all installation photos */
.bl-gallery .bl-strip { margin-block-start: 0; inline-size: 100%; flex-direction: column; align-items: stretch; gap: .8rem; }
.bl-strip__row { flex-wrap: wrap; }
.bl-mini { position: relative; }
.bl-mini__tag { position: absolute; inset-inline: .3rem; inset-block-end: .3rem; padding: .15rem .4rem; border-radius: 6px; background: rgba(10, 20, 44, .78); color: #fff; font-size: .62rem; font-weight: 700; line-height: 1.25; text-align: center; }
.bl-lb figcaption { position: absolute; inset-block-end: .8rem; inset-inline-start: .8rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(10, 20, 44, .8); color: #fff; font-weight: 700; font-size: var(--fs-sm); }
.bl-lb figcaption:empty { display: none; }
/* fill the card edge to edge — no empty space after the last photo */
.bl-gallery .bl-strip__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .55rem; }
.bl-gallery .bl-mini { inline-size: auto; }
@media (max-width: 760px) {
  .bl-gallery .bl-strip__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: .3rem; scrollbar-width: thin; }
  .bl-gallery .bl-mini { scroll-snap-align: start; }
}
/* no white card frame — photos sit directly on the page */
.bl-gallery .bl-strip { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; gap: .6rem; }