/* card-visuals.css — banner-visual layout for blog index cards.
   Sits above the h2 inside each .post-card. Inherits .is-read dim. */

.post-card {
  overflow: hidden; /* keep visual flush with card border */
}

.card-visual {
  display: block;
  width: 100%;
  height: 120px;
  margin: -28px -24px 18px;
  width: calc(100% + 48px);
  background: #000;
  border-bottom: 1px solid var(--border);
  /* canvas is decorative — pointer events still hit the link */
  pointer-events: none;
  /* don't let canvas crash layout while booting */
  min-height: 120px;
  image-rendering: optimizeSpeed;
}

/* fallback while runtime is booting */
.card-visual:not([data-mounted]) {
  background: #000;
}

/* on touch / small screens: shorter banner, less aggressive */
@media (max-width: 600px) {
  .card-visual {
    height: 96px;
    min-height: 96px;
  }
}

/* read-state inherits opacity from .post-card.is-read — nothing extra */

/* prefers-reduced-motion: runtime renders only the static frame.
   fallback styling already covered (canvas is just an image surface). */

/* keep read-badge + mark-unread-btn floating above the visual */
.post-card .read-badge { z-index: 2; }
.post-card .mark-unread-btn { z-index: 2; }