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

@media (prefers-reduced-motion: reduce) {
  .wu-cards__card,
  a.wu-cards__card:hover,
  .wu-cards__go,
  a.wu-cards__card:hover .wu-cards__go {
    transition: none;
    transform: none;
  }
}