/* Unified modern card UI (no palette changes, no new frameworks) */

:root {
  --hb-card-radius: 18px;
  --hb-card-border: rgba(0, 0, 0, 0.05);
  --hb-card-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  --hb-card-shadow-hover: 0 18px 46px rgba(0, 0, 0, 0.12);
}

.hb-card {
  border-radius: var(--hb-card-radius);
  border: 1px solid var(--hb-card-border);
  background: #ffffff;
  box-shadow: var(--hb-card-shadow);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Non-hover cards: use hb-card without hb-card--hover */
.hb-card--hover {
  will-change: transform, box-shadow;
}

.hb-card--hover:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--hb-card-shadow-hover);
}

.hb-card--hover:focus-within {
  box-shadow: 0 0 0 4px rgba(0, 128, 128, 0.14), var(--hb-card-shadow-hover);
}

/* Keep media clipped to rounded corners */
.hb-card .service-card-image,
.hb-card .campaign-image-wrapper,
.hb-card .event-image-wrapper,
.hb-card .event-card-image {
  overflow: hidden;
}

.hb-card .service-card-image img,
.hb-card .campaign-image-wrapper img,
.hb-card .event-image-wrapper img,
.hb-card .event-card-image img,
.hb-card img.domain-card-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Subtle image motion on hover where applicable */
.hb-card--hover .service-card-image img,
.hb-card--hover .campaign-image-wrapper img,
.hb-card--hover .event-image-wrapper img,
.hb-card--hover .event-card-image img,
.hb-card--hover img.domain-card-img {
  transition: transform 260ms ease;
}

.hb-card--hover:hover .service-card-image img,
.hb-card--hover:hover .campaign-image-wrapper img,
.hb-card--hover:hover .event-image-wrapper img,
.hb-card--hover:hover .event-card-image img,
.hb-card--hover:hover img.domain-card-img {
  transform: scale(1.03);
}

/* Consistent inner spacing for Bootstrap cards when hb-card is applied */
.hb-card .card-body {
  padding: 1.25rem;
}

/* Better icon/image alignment helpers */
.hb-card .hb-card-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hb-card .hb-card-icon {
  flex: 0 0 auto;
  line-height: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hb-card,
  .hb-card--hover,
  .hb-card--hover:hover {
    transition: none !important;
    transform: none !important;
  }

  .hb-card--hover .service-card-image img,
  .hb-card--hover .campaign-image-wrapper img,
  .hb-card--hover .event-image-wrapper img,
  .hb-card--hover .event-card-image img,
  .hb-card--hover img.domain-card-img {
    transition: none !important;
    transform: none !important;
  }
}