/* Copyright (c) 2026 Web Upp Limited. Licensed under the GPL-2.0-or-later; see LICENSE. */
.wu-work__grid {
  display: grid;
  gap: 56px 40px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.wu-work-grid .wu-wrap > .wu-work__grid:first-child {
  margin-top: 0;
}

@media (min-width: 768px) {
  .wu-work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wu-work-grid--one .wu-work__grid {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }
}
@media (min-width: 1025px) {
  .wu-work__grid {
    gap: 80px 56px;
  }
  .wu-work-grid--three .wu-work__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
  }
}
.wu-work-grid--own .upp-card__title {
  font-size: 20px;
}

.wu-work__grid--photo {
  gap: var(--wu-work-photo-gap, 24px);
  margin-top: var(--wu-work-row-top, 56px);
}
@media (min-width: 600px) {
  .wu-work__grid--photo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .wu-work__grid--photo {
    gap: var(--wu-work-photo-gap-wide, var(--wu-work-photo-gap, 24px));
    grid-template-columns: repeat(var(--wu-work-photo-columns, 3), minmax(0, 1fr));
  }
}

.wu-work-grid--photo .wu-work__cell {
  min-width: 0;
}

.wu-work__photo {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--wu-work-text, var(--wu-text));
  text-decoration: none;
}

.wu-work__media {
  display: block;
}

.wu-work__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--wu-work-photo-ratio, 3/2);
  object-fit: cover;
  border-radius: var(--wu-work-photo-radius, var(--wu-image-radius, var(--wu-radius)));
  background: var(--wu-work-photo-face, var(--wu-surface));
}

.wu-work__text {
  display: flex;
  flex-direction: column;
  gap: var(--wu-work-text-gap, 4px);
  padding-top: var(--wu-work-text-top, 12px);
}

.wu-work__title {
  font: var(--wu-work-title-font, 700 19px/1.25 var(--wu-display));
  letter-spacing: var(--wu-work-title-tracking, normal);
}

a.wu-work__photo:hover .wu-work__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.wu-work__where {
  color: var(--wu-work-where-colour, var(--wu-muted));
  font: var(--wu-work-where-font, 400 16px/1.5 var(--wu-body));
}

.wu-work__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--wu-work-go-colour, var(--wu-accent));
  font: var(--wu-work-go-font, 600 16px/1.3 var(--wu-body));
}
.wu-work__go svg {
  width: 18px;
  height: 18px;
}

:where(.wu-work__photo:focus-visible) {
  outline: 2px solid var(--wu-accent);
  outline-offset: 4px;
  border-radius: var(--wu-radius);
}

.wu-work-grid--photo .wu-work__more {
  margin: var(--wu-work-foot-top, 32px) 0 0;
}

.wu-work-grid.wu-ground--inverse .wu-work__photo,
.wu-work-grid.wu-ground--inverse .wu-work__go,
.wu-work-grid.wu-ground--inverse .wu-work__more .wu-textlink {
  color: var(--wu-inverse-text);
}
.wu-work-grid.wu-ground--inverse .wu-work__where {
  color: var(--wu-work-inverse-muted, var(--wu-inverse-text));
}

.wu-work-grid.wu-ground--inverse :is(.wu-eyebrow, .wu-label),
.wu-work-grid.wu-ground--inverse .wu-standfirst {
  color: var(--wu-work-inverse-muted, var(--wu-inverse-text));
}
.wu-work-grid.wu-ground--inverse .wu-button--ghost {
  border-color: color-mix(in srgb, var(--wu-inverse-text) 40%, transparent);
  color: var(--wu-inverse-text);
}

/* Hover (3.13.0, the `hover` field; working rule 12), both cards. lift
   (the default): the portfolio card's frame lifts as its own stylesheet
   draws it, the photograph card underlines its title. zoom: nothing
   lifts, the photograph scales 1.03 over 0.6s inside its own box. none:
   nothing moves. Still under reduced motion. */
.wu-work-grid--hover-zoom .upp-card__link:hover .upp-card__frame,
.wu-work-grid--hover-none .upp-card__link:hover .upp-card__frame,
.wu-work-grid--hover-zoom .upp-card:not(.upp-card--framed):hover,
.wu-work-grid--hover-none .upp-card:not(.upp-card--framed):hover {
  transform: none;
}

.wu-work-grid--hover-zoom .wu-work__media {
  overflow: hidden;
  border-radius: var(--wu-work-photo-radius, var(--wu-image-radius, var(--wu-radius)));
}

.wu-work-grid--hover-zoom :is(.wu-work__img, .upp-frame__screen img, .upp-card__image) {
  transition: transform 0.6s var(--wu-ease);
}

.wu-work-grid--hover-zoom :is(a.wu-work__photo:hover .wu-work__img, .upp-card__link:hover .upp-frame__screen img, .upp-card__link:hover .upp-card__image) {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .wu-work-grid--hover-zoom :is(.wu-work__img, .upp-frame__screen img, .upp-card__image) {
    transition: none;
    transform: none;
  }
}
/* The arrow after a button's or a text link's words (3.13.0, working rule
   12): the slot --wu-button-arrow is its display, inline-block when unset;
   none hides every arrow the parent draws on buttons and text links. In
   each block's own stylesheet, so it holds where a child dequeues the
   parent's sections.css. An icon before the words is not an arrow. 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-work-grid) :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);
}