/* Photo gallery (fuel bowser page, Marcus's photos, 3 Nov 2026). Loaded only by pages with a
   gallery, so other pages and their cache are untouched. Works with no JavaScript: the photos sit
   in a row you can swipe or scroll, one at a time. gallery.js adds the arrows and dots. It never
   moves by itself. */
.trj-gal { margin: 0; width: 100%; }
.trj-gal-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); background: #1A1A1A;
}
.trj-gal-track::-webkit-scrollbar { display: none; }
.trj-gal-track:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 3px; }
.trj-gal-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.trj-gal-slide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.trj-gal-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.trj-gal-nav[hidden] { display: none; }
.trj-gal-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid var(--dm-line, #E6E1D8); border-radius: 50%;
  background: #FFFFFF; color: #1A1A1A; cursor: pointer;
}
.trj-gal-btn:hover { border-color: #1A1A1A; }
.trj-gal-btn:focus-visible, .trj-gal-dot:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; }
.trj-gal-btn svg { display: block; }
.trj-gal-dots { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* 24px tap target round a small dot; the current one is a longer red bar, not just a colour. */
.trj-gal-dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.trj-gal-dot::before { content: ""; display: block; width: 9px; height: 9px; border-radius: 5px; background: #B9B2A6; transition: background-color .2s; }
.trj-gal-dot[aria-current="true"]::before { width: 22px; background: var(--dm-red-btn, #C9261F); }
/* "Photo 2 of 5": for screen readers only (it announces each change); the dots show it on screen (Owen, 3 Nov 2026). */
.trj-gal-count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 768px) {
  .trj-dm-split-in > .trj-gal { width: min(520px, 46vw); justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .trj-gal-track { scroll-behavior: auto; }
  .trj-gal-dot::before { transition: none; }
}