/* A brand's or branch's photos: the mosaic, and the viewer it opens
   (`docs/gallery.md`). Loaded only on a page that has photos. */

/* One large tile and up to four small ones. The grid flows by column, so
   with three photos the two small ones stack beside the large, and with four
   the last stands full height at the end; the tiles crop in CSS, which is why
   a single `gallery_tile` size serves every layout. */
.gallery-mosaic {
  aspect-ratio: 2 / 1;
  display: grid;
  gap: var(--space-2);
  grid-auto-flow: column;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.gallery-mosaic[data-count="1"] {
  grid-template-columns: 1fr;
}

.gallery-mosaic[data-count="2"] {
  grid-template-columns: 1fr 1fr;
}

.gallery-mosaic[data-count="3"] {
  grid-template-columns: 2fr 1fr;
}

.gallery-tile {
  background: var(--color-surface-strong);
  border-radius: var(--radius-md);
  display: block;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.gallery-tile:first-child,
.gallery-mosaic[data-count="1"] .gallery-tile,
.gallery-mosaic[data-count="2"] .gallery-tile,
.gallery-mosaic[data-count="4"] .gallery-tile:last-child {
  grid-row: span 2;
}

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

.gallery-tile:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.gallery-tile__more {
  background: color-mix(in srgb, var(--color-text) 55%, transparent);
  color: var(--color-on-brand);
  display: grid;
  font-size: var(--text-heading);
  font-weight: 700;
  inset: 0;
  place-items: center;
  position: absolute;
}

/* The viewer fills the screen, dark and opaque, the photo letterboxed inside
   it: the page behind is not part of what is being looked at. */
.gallery-viewer {
  background: var(--color-text);
  border: 0;
  color: var(--color-on-brand);
  height: 100%;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.gallery-viewer[open] {
  display: flex;
  flex-direction: column;
}

.gallery-viewer::backdrop {
  background: transparent;
}

/* The page behind stays where it was. */
html:has(.gallery-viewer[open]) {
  overflow: hidden;
}

.gallery-viewer__bar {
  align-items: center;
  display: flex;
  flex: none;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.gallery-viewer__count {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0 var(--space-2);
}

.gallery-viewer__track {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  position: relative;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery-viewer__track::-webkit-scrollbar {
  display: none;
}

.gallery-viewer__track:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -3px;
}

.gallery-slide {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.gallery-slide img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  object-fit: contain;
  width: auto;
}

.gallery-slide figcaption {
  flex: none;
  font-size: var(--text-sm);
  max-width: 40rem;
  text-align: center;
}

.gallery-viewer__button {
  background: color-mix(in srgb, var(--color-surface) 14%, transparent);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-on-brand);
}

.gallery-viewer__button:hover,
.gallery-viewer__button:focus-visible {
  background: color-mix(in srgb, var(--color-surface) 26%, transparent);
  color: var(--color-on-brand);
}

.gallery-viewer__button[aria-disabled="true"] {
  opacity: 0.35;
}

.gallery-viewer__step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-viewer__step--prev {
  left: var(--space-3);
}

.gallery-viewer__step--next {
  right: var(--space-3);
}