/* ─── Post card (identical everywhere) + card grid ───────────────────────── */

.ha-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;

  &[aria-busy="true"] {
    opacity: 0.55;
    transition: opacity 0.3s;
  }

  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1200px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Full-width library (layout 4) gets a 3/4-column grid earlier. */
.ha-one .ha-grid {
  @media (min-width: 992px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (min-width: 1200px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ha-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ha-card-in 0.8s var(--timing) both;
  animation-delay: var(--d, 0ms);

  /* hover glow following the pointer (--gx/--gy set by fx.js) */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), color-mix(in srgb, var(--pastel-green) 22%, transparent), transparent 50%);
    opacity: 0;
    transition: opacity 0.8s;
    pointer-events: none;
  }

  > * {
    position: relative;
    z-index: 1;
  }

  &:hover::before {
    opacity: 1;
  }
}

/* fx.js animates library cards itself on the homepage */
.has-gsap .ha-library .ha-card {
  animation: none;
}

@keyframes ha-card-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.ha-card__media {
  aspect-ratio: 16 / 10;

  img,
  svg {
    transition: transform 1.4s var(--timing);
  }

  .ha-card:hover & img,
  .ha-card:hover & svg {
    transform: scale(1.05);
  }
}

.ha-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 22px;
}

.ha-card__title {
  font-size: 20px;
  line-height: 1.2;

  a:hover {
    color: var(--deep);
  }
}

.ha-card__excerpt {
  font-size: 14px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ha-card .ha-by {
  margin-top: auto;
}