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

@media (min-width: 768px) {
  .wu-cards__grid {
    grid-template-columns: repeat(var(--wu-cards-columns-tablet, 2), minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .wu-cards--c2 .wu-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wu-cards--c3 .wu-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wu-cards--c4 .wu-cards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.wu-cards__item {
  min-width: 0;
}

/* One card: a link when it has one, else a box. Border-box, so the edge
   and the padding stay inside the cell (the 2.x steps cards' fault). */
.wu-cards__card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: var(--wu-cards-clip, hidden);
  border: var(--wu-cards-border, 1px solid var(--wu-line));
  border-top: var(--wu-cards-border-top, var(--wu-cards-border, 1px solid var(--wu-line)));
  border-radius: var(--wu-cards-radius, var(--wu-card-radius));
  background: var(--wu-cards-face, var(--wu-surface));
  box-shadow: var(--wu-cards-shadow, var(--wu-card-shadow, none));
  color: var(--wu-cards-text, var(--wu-text));
  text-decoration: none;
  transition: border-color 0.2s, transform 0.35s var(--wu-ease);
}

a.wu-cards__card:hover {
  border-color: var(--wu-cards-hover-border, var(--wu-line-strong));
  border-top-color: var(--wu-cards-hover-border-top, var(--wu-cards-hover-border, var(--wu-line-strong)));
  color: var(--wu-cards-text, var(--wu-text));
  text-decoration: none;
  transform: var(--wu-cards-hover-lift, translateY(-2px));
}

a.wu-cards__card:hover .wu-cards__name {
  text-decoration: var(--wu-cards-hover-title, none);
  text-underline-offset: 4px;
}

.wu-cards__media {
  position: relative;
  display: block;
}

/* The photograph carries its own corners and the face shown while it
   loads (the card clips it too, with the card's corners). */
.wu-cards__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--wu-cards-ratio, 4/3);
  border-radius: var(--wu-cards-image-radius, 0);
  background: var(--wu-cards-image-face, var(--wu-surface-2, var(--wu-surface)));
  object-fit: cover;
  object-position: var(--wu-cards-focus, 50% 50%);
}

/* The label on a photograph: the inverse text on the inverse ground,
   never on the picture itself. */
.wu-cards__caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: var(--wu-cards-caption-radius, 4px);
  background: var(--wu-cards-caption-face, var(--wu-inverse-ground));
  color: var(--wu-cards-caption-text, var(--wu-inverse-text));
  font: var(--wu-cards-caption-font, 600 13px/1.3 var(--wu-body));
}

.wu-cards__text {
  padding: var(--wu-cards-pad, 24px);
}

.wu-cards__text > * {
  margin: 0;
}

.wu-cards__text > * + * {
  margin-top: var(--wu-cards-text-gap, 8px);
}

.wu-cards__tag {
  color: var(--wu-cards-tag-colour, var(--wu-muted));
  font: var(--wu-cards-tag-font, 600 13px/1.3 var(--wu-body));
  letter-spacing: var(--wu-cards-tag-tracking, 0.06em);
  text-transform: var(--wu-cards-tag-case, uppercase);
}

.wu-cards__title {
  color: var(--wu-cards-title-colour, inherit);
  font-family: var(--wu-cards-title-face, var(--wu-display));
  font-size: var(--wu-cards-title-size, var(--wp--preset--font-size--heading-3));
  font-weight: var(--wu-cards-title-weight, var(--wu-heading-weight, 700));
  line-height: var(--wu-cards-title-line, 1.25);
  letter-spacing: var(--wu-cards-title-tracking, -0.01em);
}

/* A linked card: the arrow after the title, at the card's far edge. */
a.wu-cards__card .wu-cards__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wu-cards__go {
  flex: none;
  display: inline-flex;
  color: var(--wu-cards-arrow, var(--wu-muted));
  transition: transform 0.25s var(--wu-ease);
}

.wu-cards__go svg {
  width: 20px;
  height: 20px;
}

a.wu-cards__card:hover .wu-cards__go {
  transform: translateX(3px);
}

.wu-cards__body {
  color: var(--wu-cards-body-colour, var(--wu-muted));
  font-size: var(--wu-cards-body-size, 16px);
  line-height: var(--wu-cards-body-line, 1.5);
}

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

/* Overlay (3.4.0, the inspiration variant): a card with a photograph is the
   photograph, its words set on a shade at its foot, drawn from the inverse
   ground and its text. A card without one draws as plain. */
.wu-cards--overlay .wu-cards__item--image .wu-cards__card {
  display: grid;
  border: 0;
  background: var(--wu-inverse-ground);
  color: var(--wu-cards-overlay-text, var(--wu-inverse-text));
}

.wu-cards--overlay .wu-cards__item--image .wu-cards__media,
.wu-cards--overlay .wu-cards__item--image .wu-cards__text {
  grid-area: 1/1;
}

.wu-cards--overlay .wu-cards__item--image .wu-cards__img {
  height: 100%;
  border-radius: 0;
  aspect-ratio: var(--wu-cards-overlay-ratio, var(--wu-cards-ratio, 4/3));
}

.wu-cards--overlay .wu-cards__item--image .wu-cards__text {
  position: relative;
  align-self: end;
  background: var(--wu-cards-scrim, linear-gradient(to top, color-mix(in srgb, var(--wu-inverse-ground) 85%, transparent) 0%, color-mix(in srgb, var(--wu-inverse-ground) 55%, transparent) 60%, transparent 100%));
  padding-top: calc(2 * var(--wu-cards-pad, 24px));
}

.wu-cards--overlay .wu-cards__item--image :is(.wu-cards__tag, .wu-cards__body, .wu-cards__go, .wu-cards__title) {
  color: inherit;
}

/* The label sits at the top of an overlay card, clear of the words. */
.wu-cards--overlay .wu-cards__item--image .wu-cards__caption {
  top: 10px;
  bottom: auto;
}

/* The inverse ground: the plain, rule and numbered eyebrows take the
   inverse text unless --wu-cards-inverse-accent is set (the pill keeps its
   own face); the cards keep their own face and text. */
.wu-cards.wu-ground--inverse :is(.wu-eyebrow, .wu-label) {
  color: var(--wu-cards-inverse-accent, var(--wu-inverse-text));
}

/* Hover (3.13.0, the `hover` field; working rule 12): lift is the rule
   above (the default). zoom holds the card still and scales its photograph
   1.03 over 0.6s inside its own box; none holds the card and its arrow
   still. Both still under reduced motion (below). */
.wu-cards--hover-zoom a.wu-cards__card:hover,
.wu-cards--hover-none a.wu-cards__card:hover,
.wu-cards--hover-none a.wu-cards__card:hover .wu-cards__go {
  transform: none;
}

.wu-cards--hover-zoom .wu-cards__media {
  overflow: hidden;
  border-radius: var(--wu-cards-image-radius, 0);
}

.wu-cards--hover-zoom .wu-cards__img {
  transition: transform 0.6s var(--wu-ease);
}

.wu-cards--hover-zoom a.wu-cards__card:hover .wu-cards__img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .wu-cards__card,
  a.wu-cards__card:hover,
  .wu-cards__go,
  a.wu-cards__card:hover .wu-cards__go,
  .wu-cards--hover-zoom .wu-cards__img,
  .wu-cards--hover-zoom a.wu-cards__card:hover .wu-cards__img {
    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-cards) :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);
}

/* Icon cards (3.15.0, `variant` icon): the card's icon above its title, by
   name from the child's assets/icons then the parent's. iconStyle plain
   draws the icon alone in the accent; badge on a round face, tile on a
   square face (the --wu-cards-icon-* slots). */
.wu-cards__icon {
  display: inline-grid;
  place-items: center;
  color: var(--wu-cards-icon-colour, var(--wu-accent));
}

.wu-cards__icon svg {
  display: block;
  width: var(--wu-cards-icon-size, 32px);
  height: var(--wu-cards-icon-size, 32px);
  stroke-width: var(--wu-cards-icon-stroke, 1.75);
}

.wu-cards--icon-badge .wu-cards__icon,
.wu-cards--icon-tile .wu-cards__icon {
  width: var(--wu-cards-icon-box, 56px);
  height: var(--wu-cards-icon-box, 56px);
  border-radius: var(--wu-cards-icon-radius, 50%);
  background: var(--wu-cards-icon-face, color-mix(in srgb, var(--wu-accent) 12%, transparent));
}

.wu-cards--icon-tile .wu-cards__icon {
  border-radius: var(--wu-cards-icon-tile-radius, var(--wu-radius));
}

.wu-cards--icon-badge .wu-cards__icon svg,
.wu-cards--icon-tile .wu-cards__icon svg {
  width: var(--wu-cards-icon-size, 26px);
  height: var(--wu-cards-icon-size, 26px);
}

.wu-cards--icon .wu-cards__text > .wu-cards__icon + * {
  margin-top: var(--wu-cards-icon-gap, 16px);
}

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