/* Gallery (library block, T32). Tokens only; written for phones first.
   Phones and tablets: a 2-column grid; the first photo spans both columns (and, when that leaves an odd
   number, the last photo too), so no photo is left alone on a row.
   From 1024 px: the prototype's 12-column bento with 240 px rows; the first photo is two rows tall.
   Each tile's column span comes from Code/Gallery/GalleryLayout.cs as a class (gallery__item--span-N).
   Captions sit on a Deep Blue layer behind the caption only (CC11: white text stays at least 4.5:1 over
   any photo) and wrap; nothing is clamped. Linked tiles: the caption link's hit area covers the tile. */

.gallery {
  --gallery-row: clamp(160px, 40vw, 240px);   /* prototype rows: 240 px */
  --gallery-gap: var(--space-4);
  --gallery-caption-layer: color-mix(in srgb, var(--c-deep-blue) 68%, transparent);
  --gallery-caption-fade: var(--space-6);     /* soft top edge of the caption layer */
}

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4) var(--space-10);
  margin-bottom: var(--space-8);
}
.gallery__heading { margin: 0; max-width: 100%; overflow-wrap: break-word; }
.gallery__intro {
  margin: 0;
  max-width: 380px;   /* prototype intro width */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  overflow-wrap: break-word;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--gallery-row);
  gap: var(--gallery-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  position: relative;
  isolation: isolate;   /* the photo sits at z-index -1 inside the tile, under the caption */
  min-width: 0;
  border-radius: var(--radius-media);
  background: var(--color-surface-quiet);
}
.gallery__item--full { grid-column: span 2; }

.gallery__figure {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.gallery__img {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-media);
}

.gallery__caption {
  padding: calc(var(--gallery-caption-fade) + var(--space-2)) var(--space-4) var(--space-4);
  border-radius: 0 0 var(--radius-media) var(--radius-media);
  background: linear-gradient(to bottom, transparent 0, var(--gallery-caption-layer) var(--gallery-caption-fade));
  color: var(--c-white);
  font-size: var(--fs-body-md);
  line-height: var(--lh-label);
  overflow-wrap: break-word;
}

.gallery__link {
  color: inherit;
  text-decoration: none;
}
/* The whole tile is the link's hit area (the tile is the nearest positioned box);
   the focus ring and the hover line go round the tile. */
.gallery__link::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: var(--radius-media);
}
/* BV-a: in the Visual tab's canvas the photo (under the figure's box and the link's hit area) is a field of its own:
   clicks reach it, and the caption stays the caption's field. Public pages never carry html.ve-canvas. */
html.ve-canvas .gallery__figure,
html.ve-canvas .gallery__link::after { pointer-events: none; }
html.ve-canvas .gallery__img,
html.ve-canvas .gallery__caption { pointer-events: auto; }
.gallery__item--link:hover .gallery__link { text-decoration: underline; text-underline-offset: 3px; }
.gallery__item--link:hover .gallery__link::after { box-shadow: inset 0 0 0 var(--border-width-heavy) var(--color-accent-line); }
.gallery__link:focus-visible { outline: none; }
.gallery__link:focus-visible::after {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.gallery__button { margin-top: var(--space-8); }

@media (min-width: 600px) {
  .gallery { --gallery-gap: var(--gutter); }
  .gallery__item:first-child { grid-row: span 2; }
  .gallery__caption { padding-inline: var(--space-5); padding-bottom: var(--space-5); }
}

@media (min-width: 1024px) {
  .gallery { --gallery-row: 240px; }
  .gallery__head { margin-bottom: var(--space-8); }
  .gallery__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gallery__item,
  .gallery__item--full { grid-column: span var(--gallery-span, 3); }
  .gallery__item:first-child { grid-row: auto; }
  .gallery__item.gallery__item--tall { grid-row: span 2; }
  .gallery__item--span-3 { --gallery-span: 3; }
  .gallery__item--span-4 { --gallery-span: 4; }
  .gallery__item--span-6 { --gallery-span: 6; }
  .gallery__item--span-8 { --gallery-span: 8; }
  .gallery__item--span-12 { --gallery-span: 12; }
}

@media (prefers-reduced-motion: no-preference) {
  .gallery__link::after { transition: box-shadow var(--duration-fast) var(--ease-brand); }
}