/* EssayHub illustrated landing cards — coordinated with the warm coral/violet brand.
   The assets have transparent backgrounds and do not hide live headings or descriptions. */
.hero-motif {
  opacity: 1;
  border-color: hsl(var(--brand) / .18);
  overflow: visible;
}
.hero-motif::before,
.hero-motif::after { display: none; content: none; }
.hero-illustration {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(85, 64, 85, .06));
}
.genre-card {
  min-height: 314px;
  padding: 15px 23px 23px;
  overflow: hidden;
}
.genre-illustration {
  display: block;
  flex: 0 0 150px;
  align-self: center;
  width: min(100%, 210px);
  height: 150px;
  margin: 0 auto 5px;
  object-fit: contain;
  pointer-events: none;
  transition: transform .28s var(--ease-ui);
}
.genre-card:hover .genre-illustration,
.genre-card:focus-visible .genre-illustration {
  transform: translateY(-3px) scale(1.035);
}
.genre-card p { max-width: none; }
@media (max-width: 720px) {
  .hero-inner { gap: 12px; }
  .hero-motif {
    display: grid;
    width: min(45vw, 186px);
    margin: 2px auto 0;
  }
  .genre-card { min-height: 296px; padding: 14px 16px 20px; }
  .genre-illustration {
    flex-basis: 110px;
    width: min(100%, 158px);
    height: 110px;
    margin-bottom: 4px;
  }
}
@media (max-width: 430px) {
  .hero-motif { width: min(43vw, 165px); }
  .genre-card { min-height: 245px; padding: 16px 21px 21px; }
  .genre-illustration { height: 118px; flex-basis: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .genre-illustration { transition: none; }
}