/* The "See also" cards are plain info boxes in the original, with no link on
   them. Wrapping each one in an anchor would otherwise pick up the theme's
   link colour and underline, so this keeps them looking exactly as they did
   and only adds the pointer. */
.see-also-link,
.see-also-link:hover,
.see-also-link:focus,
.see-also-link:active,
.see-also-link:visited {
  display: block;
  color: inherit;
  text-decoration: none;
}

.see-also-link .title,
.see-also-link p {
  color: inherit;
}

/* Matches the hover treatment the cards' own images already use. */
.see-also-link:focus-visible {
  outline: 2px solid #78be20;
  outline-offset: 4px;
}

/* ---- hover ----------------------------------------------------------------
   The theme already declares a 0.3s transition on the card background and on
   the card image, so it was clearly meant to react to hover and never did.
   This uses that same timing, and the brand green the Features headings use.

   The visible card surface is .elementor-widget-wrap, which is an ancestor of
   our anchor, hence :has(). The two rules keyed on .see-also-link:hover repeat
   the colour and brightness so the effect still works without :has().        */

.elementor-widget-wrap:has(a.see-also-link) {
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.elementor-widget-wrap:has(a.see-also-link):hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  /* Elementor generates per-element rules like
     `.elementor-2892 .elementor-element.elementor-element-5119cf2` for the card
     background and `… .eael-infobox .infobox-content .title` for the heading
     colour. Both outrank anything readable we can write here, so these two
     declarations — and only these two — are forced. */
  background-color: #2f3131 !important;
}

.see-also-link img {
  transition: filter 0.3s ease-in-out;
}

.elementor-widget-wrap:has(a.see-also-link):hover .title,
.see-also-link:hover .title {
  color: #78be20 !important;
}

.elementor-widget-wrap:has(a.see-also-link):hover img,
.see-also-link:hover img {
  filter: brightness(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .elementor-widget-wrap:has(a.see-also-link),
  .see-also-link img {
    transition: none;
  }
  .elementor-widget-wrap:has(a.see-also-link):hover {
    transform: none;
  }
}

/* ---- logo artwork ---------------------------------------------------------
   The cards used to hold 600x375 product screenshots, which all had the same
   shape. The supplied logos do not: the Navmatix wordmark is 504x92 (5.5:1),
   Glopos is square and GNSS Mission Planning is 571x352. Dropped in raw they
   would read as three different sizes, so each sits in a box of the original
   image height and is contained inside it.                                   */

.see-also-link .infobox-icon {
  height: 182px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.see-also-link .infobox-icon img {
  width: auto;
  height: auto;
  max-width: 76%;
  max-height: 68%;
  object-fit: contain;
}