/* The site's profile card (src/Frontend/ProfileCard.php), in the homepage Feature Cards design. Dark by default; a
   section restyles its cards by setting the --aq-card-* properties (the Feature Cards block's light scheme does). Text
   rules use three classes so page styles for headings, paragraphs and links (up to two classes and two elements,
   such as body.aq-species-preview-theme .aq-preview h3) cannot reach into the card. */
.aq-profile-card {
  --card-surface: var(--aq-card-surface, var(--ug-surface-card-dark, #142a25));
  --card-line: var(--aq-card-line, var(--ug-border-dark, #28413b));
  --card-ink: var(--aq-card-ink, var(--ug-text-inverse, #fff));
  --card-muted: var(--aq-card-muted, var(--ug-text-inverse-muted, #b5c5c0));
  --card-label: var(--aq-card-label, var(--ug-plant, #baf598));
  --card-image-bg: var(--aq-card-image-bg, var(--ug-abyss, #071512));
  --card-cta-bg: var(--aq-card-cta-bg, var(--ug-aqua, #83dfca));
  --card-cta-ink: var(--aq-card-cta-ink, var(--ug-deep, #063f36));
  --card-cta-hover-bg: var(--aq-card-cta-hover-bg, var(--ug-plant, #baf598));
  --card-cta-hover-ink: var(--aq-card-cta-hover-ink, var(--ug-deep, #063f36));
  --card-shadow: var(--aq-card-shadow, var(--ug-shadow-floating, 0 18px 45px rgba(7, 21, 18, .2)));
  --card-pad: 1.1rem;
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--card-line);
  border-radius: var(--mero-radius, 16px);
  background: var(--card-surface);
  box-shadow: var(--card-shadow);
  color: var(--card-ink);
  font-family: var(--ug-font-body);
  font-size: var(--ug-text-base);
  line-height: 1.6;
  white-space: normal;
  transition: transform .2s ease, box-shadow .2s ease;
}
.aq-profile-card *,
.aq-profile-card *::before,
.aq-profile-card *::after {
  box-sizing: border-box;
}
.aq-profile-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(20, 57, 63, .14);
}
.aq-profile-card__image {
  position: relative;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--card-image-bg);
}
.aq-profile-card__image .aq-image-placeholder {
  filter: brightness(.62);
}
/* Filling the box absolutely crops every image around its centre, whatever its shape. */
.aq-profile-card__image > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.aq-profile-card:hover .aq-profile-card__image > img {
  transform: scale(1.03);
}
.aq-profile-card__content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--card-pad);
}
.aq-profile-card .aq-profile-card__content .aq-profile-card__title {
  display: -webkit-box;
  min-height: 3.66em;
  margin: .7rem 0 .2rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--card-ink);
  font-family: var(--ug-font-heading);
  font-size: var(--ug-type-card-title);
  font-weight: var(--ug-weight-h2);
  letter-spacing: normal;
  line-height: var(--ug-leading-h3);
  text-transform: none;
  text-wrap: pretty;
}
.aq-profile-card .aq-profile-card__title .aq-profile-card__link {
  color: inherit;
  text-decoration: none;
}
/* The title's link covers the whole card, and its focus ring outlines the card. */
.aq-profile-card .aq-profile-card__link::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  content: "";
}
.aq-profile-card .aq-profile-card__title .aq-profile-card__link:focus-visible {
  outline: none;
  box-shadow: none;
}
.aq-profile-card .aq-profile-card__link:focus-visible::after {
  outline: 3px solid var(--ug-focus-ring, #087861);
  outline-offset: -3px;
}
.aq-profile-card:focus-within {
  transform: translateY(-4px);
}
.aq-profile-card .aq-profile-card__content .aq-profile-card__subheading {
  display: -webkit-box;
  min-height: 2.8em;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--card-muted);
  font-size: var(--ug-text-base);
  font-style: italic;
  line-height: 1.4;
}
.aq-profile-card .aq-profile-card__content .aq-profile-card__subheading--summary {
  -webkit-line-clamp: 3;
  font-size: var(--ug-text-sm);
  font-style: normal;
}
.aq-profile-card .aq-profile-card__content .aq-profile-card__facts {
  display: grid;
  gap: .38rem;
  margin: 1rem 0;
  padding: 0;
}
.aq-profile-card__facts > div {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  color: var(--card-muted);
  font-size: var(--ug-text-sm);
  line-height: 1.45;
}
/* Labels are short and never wrap; long values (a plant's placements) wrap instead. */
.aq-profile-card .aq-profile-card__facts dt {
  flex: none;
  margin: 0;
  color: var(--card-label);
  font-weight: var(--ug-weight-bold);
  white-space: nowrap;
}
.aq-profile-card .aq-profile-card__facts dd {
  min-width: 0;
  margin: 0;
  text-align: right;
}
.aq-profile-card__cta {
  display: flex;
  min-height: var(--ug-button-height, 3rem);
  align-items: center;
  justify-content: center;
  margin: auto calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
  padding: var(--ug-button-padding-compact, 0 1rem);
  background: var(--card-cta-bg);
  color: var(--card-cta-ink);
  font: var(--ug-button-font-compact, 700 .9375rem/1.2 sans-serif);
  transition: background .2s ease, color .2s ease;
}
.aq-profile-card:is(:hover, :focus-within) .aq-profile-card__cta {
  background: var(--card-cta-hover-bg);
  color: var(--card-cta-hover-ink);
}
/* One card per row on phones: no reserved space for a long title or name, since nothing sits beside it to line up with. */
@media (max-width: 559px) {
  .aq-profile-card .aq-profile-card__content .aq-profile-card__title,
  .aq-profile-card .aq-profile-card__content .aq-profile-card__subheading {
    min-height: 0;
  }
  .aq-profile-card .aq-profile-card__content .aq-profile-card__facts {
    margin: .8rem 0 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aq-profile-card,
  .aq-profile-card__image > img,
  .aq-profile-card__cta {
    transition: none;
  }
  .aq-profile-card:is(:hover, :focus-within),
  .aq-profile-card:hover .aq-profile-card__image > img {
    transform: none;
  }
}