/* Works list: collapsed by default; subtle hover preview; click to pin open */
#works .project-item {
  --works-reveal: 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

#works .project-item__shell {
  position: relative;
}

/* Even vertical padding on each row; gap opens only when details are shown */
#works .project-item__shell.item-box {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  row-gap: 0;
  transition: row-gap var(--works-reveal);
}

#works .project-item.is-hover .project-item__shell.item-box,
#works .project-item.is-pinned .project-item__shell.item-box,
#works .project-item:focus-within .project-item__shell.item-box {
  row-gap: 1rem;
}

#works .project-item__title-row {
  cursor: default;
  padding-top: 0;
  padding-bottom: 0;
}

#works .project-item__title-row:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

#works .oka-heading {
  margin: 0;
}

#works .project-item__details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--works-reveal);
}

#works .project-item.is-hover .project-item__details,
#works .project-item.is-pinned .project-item__details,
#works .project-item:focus-within .project-item__details {
  grid-template-rows: 1fr;
}

#works .project-item__details-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.32s ease,
    transform var(--works-reveal);
}

#works .project-item.is-hover .project-item__details-inner,
#works .project-item.is-pinned .project-item__details-inner,
#works .project-item:focus-within .project-item__details-inner {
  opacity: 1;
  transform: translateY(0);
}

#works .project-item__thumb-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

#works .project-item:not(.is-hover):not(.is-pinned):not(:focus-within) .image-7 {
  filter: grayscale(1);
}

#works .project-item.is-hover .image-7,
#works .project-item.is-pinned .image-7,
#works .project-item:focus-within .image-7 {
  filter: grayscale(0);
}

/* Override global .image-7:hover so hover-preview state stays subtle / consistent */
#works .project-item:not(.is-hover):not(.is-pinned):not(:focus-within) .image-7:hover {
  filter: grayscale(1);
}

#works .paragraph-6 {
  width: 60%;
  padding-top: 1rem;
  padding-bottom: 0;
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  #works .project-item,
  #works .project-item__details,
  #works .project-item__details-inner,
  #works .project-item__title-row,
  #works .project-item__shell.item-box {
    transition-duration: 0.01ms;
  }
}