/* Copyright (c) 2026 Web Upp Limited. Licensed under the GPL-2.0-or-later; see LICENSE. */
.wu-gallery__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wu-gallery-gap, 24px 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wu-gallery__item {
  min-width: 0;
}

.wu-gallery__fig {
  margin: 0;
}

.wu-gallery__link {
  display: block;
  overflow: hidden;
  border-radius: var(--wu-gallery-radius, var(--wu-image-radius, var(--wu-radius)));
  background: var(--wu-gallery-face, var(--wu-surface-2, var(--wu-surface)));
}

.wu-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s var(--wu-ease);
}

@media (hover: hover) {
  .wu-gallery__link:hover .wu-gallery__img {
    transform: var(--wu-gallery-hover, scale(1.03));
  }
}
.wu-gallery__caption,
.wu-gallery figcaption.wp-element-caption {
  margin: 10px 0 0;
  color: var(--wu-gallery-caption-colour, var(--wu-muted));
  font: var(--wu-gallery-caption-font, 400 15px/1.4 var(--wu-body));
  text-align: left;
}

/* The grid: every photograph cropped to one shape. */
.wu-gallery--grid .wu-gallery__img {
  aspect-ratio: var(--wu-gallery-ratio, 4/3);
}

@media (min-width: 768px) {
  .wu-gallery--grid .wu-gallery__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .wu-gallery--grid.wu-gallery--c3 .wu-gallery__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wu-gallery--grid.wu-gallery--c4 .wu-gallery__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* The masonry: columns, each photograph in its own shape. */
.wu-gallery--masonry .wu-gallery__list {
  display: block;
  columns: 1;
  column-gap: var(--wu-gallery-column-gap, 20px);
}

.wu-gallery--masonry .wu-gallery__item {
  break-inside: avoid;
  margin-bottom: var(--wu-gallery-row-gap, 24px);
}

@media (min-width: 768px) {
  .wu-gallery--masonry .wu-gallery__list {
    columns: 2;
  }
}
@media (min-width: 1025px) {
  .wu-gallery--masonry.wu-gallery--c3 .wu-gallery__list {
    columns: 3;
  }
  .wu-gallery--masonry.wu-gallery--c4 .wu-gallery__list {
    columns: 4;
  }
}
/* The strip (the Nelly's photo-row): one column on phones; two from 480px;
   a row of four (or more, in fours) from 1025px, or threes where fours
   would leave one photograph alone, and at two across an odd count's last
   spans the row; a row of three is one column until 768px and three
   across from there; a single photograph keeps a reading width. 3:2. */
.wu-gallery--strip .wu-gallery__img {
  aspect-ratio: var(--wu-gallery-strip-ratio, 3/2);
}

.wu-gallery__list--1 {
  max-width: var(--wu-gallery-single-max, 800px);
}

@media (min-width: 480px) {
  .wu-gallery__list--2,
  .wu-gallery__list--many {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .wu-gallery__list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .wu-gallery__list--many {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .wu-gallery__list--d3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 480px) and (max-width: 1024.98px) {
  .wu-gallery__list--odd > :last-child {
    grid-column: 1/-1;
  }
}
/* Joined (3.17.0, the Nelly's move N8): a gallery placed straight after
   another and named "joined" drops its space above and draws its own,
   --wu-gallery-joined-gap (half the section space), with a rule across the
   wrap's content at the top of it: --wu-gallery-joined-rule (its colour,
   the line colour; transparent for none) and -rule-width (1px). Drawn only
   with the field, so a gallery that does not name it is as before. */
.wu-gallery--joined {
  padding-top: 0;
}

.wu-gallery--joined > .wu-wrap {
  padding-top: var(--wu-gallery-joined-gap, calc(var(--wu-section-y, 64px) / 2));
  background-image: linear-gradient(var(--wu-gallery-joined-rule, var(--wu-line)), var(--wu-gallery-joined-rule, var(--wu-line)));
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 0 calc(-1 * var(--wu-gallery-joined-gap, calc(var(--wu-section-y, 64px) / 2)));
  background-size: 100% var(--wu-gallery-joined-rule-width, 1px);
}

/* The lightbox: the photograph is core's Image block (wp-block-image with
   its lightbox), so it carries the corners itself and core's trigger
   button sits on it; no hover zoom (the image is its own box). */
.wu-gallery--lightbox .wp-block-image {
  margin: 0;
}

.wu-gallery--lightbox .wu-gallery__img {
  border-radius: var(--wu-gallery-radius, var(--wu-image-radius, var(--wu-radius)));
  background: var(--wu-gallery-face, var(--wu-surface-2, var(--wu-surface)));
  transition: none;
}

.wu-gallery__head-link {
  color: inherit;
  text-decoration: none;
}

.wu-gallery__head-link:hover,
.wu-gallery__head-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The filter: shown once the motion runtime is ready, which filters in
   place; without it every photograph stands and the buttons stay away. */
.wu-gallery__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--wu-gallery-filter-gap, 32px);
}

html:not(.motion-ready) .wu-gallery__filter {
  display: none;
}

.wu-gallery__chip {
  padding: var(--wu-gallery-chip-pad, 8px 16px);
  border: 1px solid var(--wu-line-strong);
  border-radius: var(--wu-button-radius, 999px);
  background: var(--wu-ghost-face, transparent);
  color: inherit;
  font: var(--wu-gallery-chip-font, 600 15px/1.2 var(--wu-body));
  cursor: pointer;
}

.wu-gallery__chip:hover {
  border-color: var(--wu-ghost-border-hover, var(--wu-text));
}

.wu-gallery__chip[aria-pressed=true] {
  border-color: var(--wu-gallery-chip-on-face, var(--wu-text));
  background: var(--wu-gallery-chip-on-face, var(--wu-text));
  color: var(--wu-gallery-chip-on-text, var(--wu-ground));
}

.wu-gallery__chip:focus-visible {
  outline: 2px solid var(--wu-accent);
  outline-offset: 2px;
}

.wu-gallery__more {
  margin: var(--wu-gallery-foot-top, 40px) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .wu-gallery__img {
    transition: none;
  }
  .wu-gallery__link:hover .wu-gallery__img {
    transform: none;
  }
}
/* The inverse ground: the eyebrows and captions take the inverse text. */
.wu-gallery.wu-ground--inverse :is(.wu-eyebrow, .wu-label) {
  color: var(--wu-gallery-inverse-accent, var(--wu-inverse-text));
}

.wu-gallery.wu-ground--inverse :is(.wu-gallery__caption, figcaption.wp-element-caption) {
  color: var(--wu-gallery-inverse-muted, var(--wu-inverse-text));
}

/* The arrow after a button's or a text link's words (3.13.0): the slot
   --wu-button-arrow is its display, inline-block when unset. From
   3.16.1 every part but the svg is in :where(), so the rule weighs 0,0,1:
   a child's own rule on the arrow, written before 3.13.0 (Canine Sense's
   `.wu-ihero .wu-button svg`, 0,2,1), still wins, as it did when the
   parent set no display there (3.13.0 to 3.16.0 weighed 0,4,1). */
:where(.wu-gallery) :where(.wu-button:not(.wu-button--icon, .wu-contact__link), .wu-textlink:not(.wu-textlink--icon)) > svg:where(:last-child) {
  display: var(--wu-button-arrow, inline-block);
}

/* The eyebrow's slots (3.17.0): --wu-label-gap and the rule's
   --wu-label-rule-length, -width (its thickness), -radius, --wu-label-rule
   (its colour) and -opacity. sections.css reads them with the values drawn
   before; here, of no weight and with no fallback, they reach a site that
   dequeues sections.css and draws the eyebrow itself, wherever its own
   rules leave these properties unset (unset, each is as if absent; the
   rule's span is empty, so flex none changes no box). Every block
   stylesheet that draws an eyebrow carries this rule. */
:where(.wu-label) {
  gap: var(--wu-label-gap);
}

:where(.wu-label__rule) {
  flex: none;
  width: var(--wu-label-rule-length);
  height: var(--wu-label-rule-width);
  border-radius: var(--wu-label-rule-radius);
  background: var(--wu-label-rule);
  opacity: var(--wu-label-rule-opacity);
}