/* =================================================================
   v5 round-1 fixes — card clickability
   ================================================================= */

/* hp-pick: now <a class="hp-pick"> instead of <article>.
   Make sure it doesn't get default underlined-link styling. */
a.hp-pick,
a.hp-pick:hover,
a.hp-pick:focus,
a.hp-pick:visited {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}
a.hp-pick:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(14, 17, 22, 0.18);
  border-color: var(--ink) !important;
}
a.hp-pick h3 { transition: color 0.15s; }
a.hp-pick:hover h3 { color: var(--signal); }


/* pick-card: keep <article>, use link-overlay via .pick-title <a>::before
   so whole card is clickable but inner CTA still works. */
.pick-card {
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.pick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(14, 17, 22, 0.18);
}
.pick-card .pick-title a {
  text-decoration: none;
  color: inherit;
  position: static;
}
.pick-card .pick-title a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pick-card .pick-title a:hover { color: var(--signal); }
/* Inner CTA stays clickable above overlay */
.pick-card .btn,
.pick-card a.btn {
  position: relative;
  z-index: 2;
}
/* Make image not interfere with click */
.pick-card .pick-image,
.pick-card .pick-image img { pointer-events: none; }


/* best-card (already <a>) — make sure all hover works */
a.best-card { transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
a.best-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -14px rgba(14, 17, 22, 0.18);
}