/* Games index showcase: artwork carries the project identity without duplicate copy. */
body[data-projects-page="index"] .projects-showcase {
  width: 100%;
  max-width: 960px;
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-projects-page="index"] .projects-showcase__side {
  display: none !important;
}

body[data-projects-page="index"] :is(.projects-showcase__main, .projects-showcase__featured) {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

body[data-projects-page="index"] .projects-showcase__featured {
  display: block;
  grid-template-rows: none;
  background: transparent;
}

body[data-projects-page="index"] .projects-showcase__media {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
}

body[data-projects-page="index"] .projects-showcase__media :is(picture, img) {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
}

body[data-projects-page="index"] .projects-showcase__media img {
  padding: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

body[data-projects-page="index"] :is(.projects-showcase__shade, .projects-showcase__caption) {
  display: none !important;
}

body[data-projects-page="index"] .projects-showcase__dots {
  align-items: center;
  gap: 2px;
}

body[data-projects-page="index"] .projects-showcase__dots button,
body[data-projects-page="index"] .projects-showcase__dots button.is-active {
  position: relative;
  width: 38px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

body[data-projects-page="index"] .projects-showcase__dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: rgba(247, 247, 247, 0.34);
  transform: translate(-50%, -50%);
  transition: width 160ms ease, height 160ms ease, background-color 160ms ease, transform 160ms ease;
}

body[data-projects-page="index"] .projects-showcase__dots button.is-active::before {
  width: 30px;
  background: linear-gradient(90deg, #2be7d6, #f01433);
}

body[data-projects-page="index"] .projects-showcase__dots button:focus-visible {
  outline: 1px solid rgba(43, 231, 214, 0.9);
  outline-offset: -5px;
}

@media (hover: hover) and (pointer: fine) {
  body[data-projects-page="index"] .projects-showcase__dots button:hover::before {
    width: 34px;
    height: 4px;
    background-color: rgba(247, 247, 247, 0.72);
    transform: translate(-50%, -50%) scale(1.04);
  }

  body[data-projects-page="index"] .projects-showcase__dots button.is-active:hover::before {
    width: 36px;
  }
}

@media (max-width: 760px) {
  body[data-projects-page="index"] .projects-showcase {
    width: 100%;
  }

  body[data-projects-page="index"] .projects-showcase__dots button,
  body[data-projects-page="index"] .projects-showcase__dots button.is-active {
    width: 42px;
    height: 32px;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  body[data-projects-page="index"] .projects-showcase {
    max-width: min(100%, 640px);
  }
}

@media (max-height: 560px) and (min-width: 761px) {
  body[data-projects-page="index"] .projects-showcase {
    max-width: min(100%, 520px);
  }
}