/* Hover is a desktop-only affordance. It must not become a sticky state after a tap. */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover::after { opacity: .24; transform: translateY(0); }
  .project-card:hover .project-card__media { height: 50%; }
  .project-card:hover .project-card__content { padding-bottom: 170px; }
  .project-card:hover .details-link { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
}

@media (hover: none), (pointer: coarse) {
  .project-card:hover::after { opacity: 0; transform: translateY(80px); }
  .project-card:hover .project-card__media { height: 40%; }
  .project-card:hover .project-card__content { padding-bottom: 60px; }
  .project-card:hover .details-link { transform: translateX(-50%) translateY(120px); opacity: 0; pointer-events: none; }
}

@media (max-width: 900px) {
  .project-card:hover::after { opacity: .16; transform: none; }
  .project-card:hover .project-card__media { height: 330px; }
  .project-card:hover .project-card__content { padding: 50px 18px 18px; }
  .project-card:hover .details-link { position: static; transform: none; opacity: 1; pointer-events: auto; }
}

/* Explicit tap states win over browsers that retain :hover after a touch. */
@media (min-width: 901px) and (any-pointer: coarse) {
  .project-card.is-active::after { opacity: .24 !important; transform: translateY(0) !important; }
  .project-card.is-active .project-card__media { height: 50% !important; }
  .project-card.is-active .project-card__content { padding-bottom: 170px !important; }
  .project-card.is-active .details-link { width: 225px !important; transform: translateX(-50%) translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; }
  .project-card.is-active .details-link span { max-width: 100px !important; opacity: 1 !important; }
  .project-card.is-touch-dismissed::after { opacity: 0 !important; transform: translateY(80px) !important; }
  .project-card.is-touch-dismissed .project-card__media { height: 40% !important; }
  .project-card.is-touch-dismissed .project-card__content { padding-bottom: 60px !important; }
  .project-card.is-touch-dismissed .details-link { width: 60px !important; transform: translateX(-50%) translateY(120px) !important; opacity: 0 !important; pointer-events: none !important; }
}

/* A mouse click focuses the hidden detail link. Focus alone must not pin a desktop card open. */
@media (min-width: 901px) {
  .project-card:focus:not(:hover)::after,
  .project-card:focus-within:not(:hover)::after { opacity: 0; transform: translateY(80px); }
  .project-card:focus:not(:hover) .project-card__media,
  .project-card:focus-within:not(:hover) .project-card__media { height: 40%; }
  .project-card:focus:not(:hover) .project-card__content,
  .project-card:focus-within:not(:hover) .project-card__content { padding-bottom: 60px; }
  .project-card:focus:not(:hover) .details-link,
  .project-card:focus-within:not(:hover) .details-link { width: 60px; transform: translateX(-50%) translateY(120px); opacity: 0; pointer-events: none; }
}

/* Mobile cards always show the full square image. */
@media (max-width: 900px) {
  .project-card__media,
  .project-card:hover .project-card__media {
    height: 100cqw;
    margin-bottom: 0;
    clip-path: none;
  }

  .project-card.is-active .project-card__media {
    clip-path: none;
  }
}