/**
 * Arkendo solution-cards.
 * Source: migration/arkendo/hubspot-theme/css/arkendo.css
 */

.ak-reveal { transition: opacity 0.5s ease, transform 0.5s ease; }
.ak-reveal--hidden { opacity: 0; transform: translateY(16px); }
.ak-reveal--on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ak-reveal,
  .ak-reveal--hidden,
  .ak-reveal--on {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-3 > * { min-width: 0; }

.solution-card { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.solution-card__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #1D2D3A;
  border: 3px solid var(--color-accent);
  border-radius: 4px;
  overflow: hidden;
}
.solution-card__visual .wp-block-image,
.solution-card__visual figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.solution-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Klassen sitzen am figure (WP), nicht am img */
.solution-card__visual figure.icon-light { display: none; }
[data-theme="light"] .solution-card__visual { background: #FAF9F7; }
[data-theme="light"] .solution-card__visual figure.icon-dark { display: none; }
[data-theme="light"] .solution-card__visual figure.icon-light { display: block; }

@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 699px) {
  .grid-3 { grid-template-columns: 1fr; }
}