/* Phase 5 test: native card links with restrained editorial interaction. */
.phase5-card {
  position: relative;
}

.phase5-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.phase5-card .article-category {
  position: relative;
  z-index: 3;
}

.phase5-card-link:focus-visible {
  outline: 1px solid #171717;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #f2cd00;
}

@media (hover: hover) and (pointer: fine) {
  .phase5-card {
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .phase5-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(23, 23, 23, 0.09);
  }

  .phase5-card .card-thumb {
    transition: transform 240ms ease, filter 240ms ease;
  }

  .phase5-card:hover .card-thumb,
  .phase5-card:focus-within .card-thumb {
    transform: scale(1.035);
    filter: saturate(1.03) contrast(1.02);
  }

  .phase5-card:hover .article-info > p,
  .phase5-card:focus-within .article-info > p {
    opacity: 0.94;
    filter: contrast(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase5-card,
  .phase5-card .card-thumb,
  .phase5-card .article-info > p {
    transition: none !important;
  }

  .phase5-card:hover,
  .phase5-card:hover .card-thumb,
  .phase5-card:focus-within .card-thumb {
    transform: none !important;
    filter: none !important;
  }
}