/* Card eye-catcher images (dev-only trial, 2026-06-13).
   Additive — remove this file + its <link> + the .card-media spans to revert.
   See deploy/revert-card-images.sh */

.card{overflow:hidden}                       /* clip media to the card's radius */

.card-media{
  position:relative;display:block;height:150px;
  margin:-26px -26px 18px;                    /* full-bleed past the 26px card padding */
  overflow:hidden;background:var(--panel-2);
  border-bottom:1px solid var(--amber-dim);  /* amber keyline */
}
.card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.card:hover .card-media img{transform:scale(1.06)}   /* gentle zoom = visual dynamics */
.card-media::after{                          /* blend image bottom into the panel */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 52%,rgba(20,23,28,.9));
}

/* About page principle cards use a slightly shorter media */
.about-media .card-media{height:128px}

@media (prefers-reduced-motion:reduce){
  .card-media img{transition:none}
  .card:hover .card-media img{transform:none}
}