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

/* 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 results strip: portrait cards in one row, swiped sideways with the
   browser's own scroll and snapping to a card's edge. A certificate is read
   whole, so its image is contained, never cropped, on a quiet ground; nothing
   here moves on its own. */
.results-strip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block-end: var(--space-2);
  scroll-padding-inline: var(--space-1);
  scroll-snap-type: x mandatory;
}

.results-strip__item {
  flex: 0 0 11rem;
  scroll-snap-align: start;
}

.results-card {
  color: inherit;
  display: block;
  text-decoration: none;
}

.results-card__frame {
  aspect-ratio: 3 / 4;
  background: var(--color-surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: block;
  overflow: hidden;
}

.results-card__frame img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.results-card:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.results-card__caption {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: var(--text-sm);
  font-weight: 600;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin-block-start: var(--space-2);
  overflow: hidden;
}

/* 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);
}