/* The link is the cover's box (sized in project-list.css), so the hover
   details cover the image, not the whole grid cell */
.project-card-cover {
  position: relative;
  display: block;
}

/* Hover details: in the markup, hidden until hover/focus */
.project-card-details {
  position: absolute;
  inset: 0 0 0 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);

  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  opacity: 0;
  transition: opacity var(--transition);

  .project-card-cover:is(:hover, :focus-visible) & {
    opacity: 1;
  }

  /* Grid view: title, year, location in one column, top left */
  [data-view="grid"] & {
    flex-direction: column;
    gap: 0;
    font-size: 11px;
    line-height: 10px;
  }
}

.project-card-facts {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 10px;
  text-align: center;
  margin: 0 auto;

  /* Grid view: the facts join the details column, so they can be reordered */
  [data-view="grid"] & {
    display: contents;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
  }
}

.project-card-location {
  [data-view="grid"] & {
    order: 1;
  }
}

.project-card-detail,
.project-card-label {
  [data-view="grid"] & {
    display: none;
  }
}

.project-card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;

  [data-view="grid"] & {
    position: static;
    transform: none;
    font-size: inherit;
  }
}

/* Title above and link below the cover: mobile row view only */
.project-card-heading,
.project-card-more {
  display: block;
  font-size: 20px;

  [data-view="grid"] & {
    display: none;
  }

  @media (min-width: 768px) {
    display: none;
  }
}

/* Starts at the cover's edge like the link. A longer title stays on one line and
   grows past the cover into the free column, away from the cover's side
   (project-list.css sets the side). */
.project-card-heading {
  min-width: max-content;
  white-space: nowrap;
  margin-block-end: var(--spacing-2);
}

/* Without JS: always visible. With JS, project-card-more.js sets .is-in-view
   while the link is in the centre 70% of the viewport. */
.project-card-more {
  margin-block-start: var(--spacing-1);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;

  .js & {
    opacity: 0;
    transition: opacity 900ms ease-in-out; /* --transition-slow × 1.5 */
  }

  .js &.is-in-view {
    opacity: 1;
    transition-delay: 300ms; /* delay on appear only; fading out stays immediate */
  }
}