/* ============================================================================
   Audiences — two cards, a photograph fading into each, an upright infinity.
   ========================================================================= */

/* `clip`, not `hidden`: the drifting mark can stray past the section's side
   edges at narrow widths, and `clip` contains that without making the section
   a scroll container. */
.audiences {
  background: linear-gradient(180deg, var(--bg) 0%, #EEF2F8 100%);
  overflow-x: clip;
}

/* Room above the cards for the marks, which stand clear of the card tops.
   The shared header caps titles at 22ch, which breaks this one-line heading
   into three; it is released to the header's own measure. */
.audiences__head { margin-bottom: clamp(3.75rem, 2.5rem + 3.5vw, 6rem); }
/* Heavy, to match the other homepage headings (the shared header sets 400). */
.audiences__head .sec-head__title { max-width: none; font-weight: 700; }

.aud__grid {
  display: grid;
  gap: clamp(4.5rem, 3rem + 4vw, 6rem) clamp(1.5rem, 0.5rem + 5vw, 6rem);
  max-width: 76rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .aud__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Both cards as tall as the taller one, with each CTA on the same line. */
.aud__item { display: flex; min-width: 0; }

/* --- Card ----------------------------------------------------------------- */

.aud-card {
  /* The colour the photograph fades into, and the one the card ends on. */
  --aud-top: #F7F9FC;
  --aud-end: #FBFBCF;
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--aud-top) 0%, var(--aud-top) 48%, var(--aud-end) 100%);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), var(--e-3);
  transition: transform var(--d-base) var(--ease-out-expo),
              box-shadow var(--d-base) var(--ease-out-soft);
}
.aud-card--blue { --aud-end: #DCE9FC; }
.aud-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), var(--e-4); }

/* The photograph. Clipped here rather than on the card, because the mark has
   to stand out past the card's top edge. The tint underneath is what shows
   until the photographs are supplied. */
.aud-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(135deg, var(--blue-200) 0%, var(--blue-100) 50%, var(--yellow-200) 100%);
}
/* 10% taller than the frame so the scroll drift never shows an edge. */
.aud-card__media img {
  position: absolute;
  top: -5%;
  left: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  transition: scale 0.9s var(--ease-out-expo);
}
.aud-card:hover .aud-card__media img { scale: 1.04; }
/* The fade the title sits on. */
.aud-card__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(180deg, rgba(247, 249, 252, 0) 0%, var(--aud-top) 92%);
  pointer-events: none;
}

/* --- The upright infinity ------------------------------------------------- */

/* The box is the mark's upright footprint (478 wide by 984 tall); the image
   inside is the horizontal mark turned a quarter anticlockwise, so its blue
   loop is on top. The mask keeps the top loop solid over the section and lets
   the lower one go translucent over the photograph, as in the design. */
.aud-card__loop {
  position: absolute;
  z-index: 1;
  top: clamp(-3.25rem, -1.25rem - 2vw, -2rem);
  right: 11%;
  width: clamp(5.5rem, 2.5rem + 7vw, 9.5rem);
  aspect-ratio: 478 / 984;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .5) 62%, rgba(0, 0, 0, .32) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .5) 62%, rgba(0, 0, 0, .32) 100%);
}
.aud-card__loop img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% * 984 / 478);
  max-width: none;
  height: auto;
  translate: -50% -50%;
  rotate: -90deg;
  transition: scale 0.9s var(--ease-out-expo);
}
.aud-card:hover .aud-card__loop img { scale: 1.05; }

/* --- Copy ----------------------------------------------------------------- */

/* Pulled up over the photograph's fade, as the design sets the title. */
.aud-card__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: clamp(-5rem, -2.5rem - 2.5vw, -3rem);
  padding: 0 clamp(1.4rem, 0.9rem + 1.8vw, 2.25rem) clamp(1.6rem, 1.1rem + 1.8vw, 2.25rem);
}
.aud-card__title { margin-bottom: 0.35rem; color: var(--ink-900); text-wrap: balance; }
.aud-card__text { max-width: 62ch; line-height: 1.6; color: var(--ink-700); text-wrap: pretty; }
/* Pinned to the foot, so the two CTAs line up across cards of unequal copy. */
.aud-card__cta { margin-top: auto; padding-top: 0.6rem; }
/* The design's labels are long ("Learn more about SmartRoots for
   municipalities"), and the shared button never wraps: on a 444px card at a
   1024 viewport, and on a phone, the pill ran out past the card's edge. Here
   it may wrap to two lines inside the card instead. The shared button sets a
   minimum height, not a fixed one, so it grows with the second line. */
.aud-card__cta .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  padding-block: 0.5rem;
}

@media (max-width: 599px) {
  .aud-card__loop { right: 7%; }
  .aud-card__cta .btn { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .aud-card, .aud-card:hover { transition: none; transform: none; }
  .aud-card__media img, .aud-card__loop img { transition: none; }
  .aud-card:hover .aud-card__media img, .aud-card:hover .aud-card__loop img { scale: 1; }
}