/* ============================================================
   Home page — hover-based project showcase, pointer overlay, bio
   Used by index.html.
   ============================================================ */

/* Projects section */
.portfolio__projects {
  grid-column: 1 / -1;
  grid-row: 2 / 7;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: var(--gutter);
  align-items: center;
  position: relative;
  overflow: visible;
}

.projects-container {
  grid-column: 1 / -1;
  display: contents;
}

.projects-media {
  grid-column: 4 / 11;
  width: 100%;
  height: 60svh;
  object-fit: contain;
  visibility: hidden;
}

.projects-info {
  grid-column: 1 / 4;
  font-size: var(--font-size);
  text-align: left;
  visibility: hidden;
}

.projects-year {
  grid-column: 12 / 13;
  font-size: var(--font-size);
  text-align: right;
  visibility: hidden;
}

.portfolio__projects:hover .projects-info,
.portfolio__projects:hover .projects-media,
.portfolio__projects:hover .projects-year {
  visibility: visible;
}

/* Projects pointers (hover navigation) */
.projects-pointers {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 0;
  pointer-events: auto;
  z-index: 20;
}

.project-pointer {
  height: 100%;
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
  transition: background-color var(--transition-speed) ease;
  position: relative;
  opacity: 0;
}

.project-pointer:hover {
  background-color: rgba(0, 0, 0, 0.03);
  opacity: 1;
}

.project-pointer.active {
  opacity: 0;
}

.project-pointer--has-media {
  display: flex;
  flex-direction: column;
}

.media-sub-pointer {
  flex: 1;
  width: 100%;
  cursor: pointer;
}

/* Bio (revealed on name hover) */
.portfolio__bio {
  grid-column: 5 / 10;
  grid-row: 2 / 7;
  align-self: center;
  text-align: center;
  display: none;
  z-index: 30;
  pointer-events: none;
}

@media (max-width: 768px) {
  /* Projects: fill remaining space, always show content */
  .portfolio__projects {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    grid-column: unset;
    grid-row: unset;
    grid-template-columns: none;
    align-items: unset;
  }

  /* Override display:contents so we can use grid inside */
  .projects-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--gutter);
    width: 100%;
    height: 100%;
  }

  .projects-info {
    grid-column: 1;
    grid-row: 1;
    visibility: visible;
    text-align: left;
    font-size: var(--font-size);
  }

  .projects-year {
    grid-column: 2;
    grid-row: 1;
    visibility: visible;
    text-align: right;
    font-size: var(--font-size);
  }

  .projects-media {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    visibility: visible;
  }

  /* Always visible on mobile (override hover-only rule) */
  .portfolio__projects .projects-info,
  .portfolio__projects .projects-media,
  .portfolio__projects .projects-year {
    visibility: visible;
  }

  /* Hide desktop pointer overlay */
  .projects-pointers {
    display: none;
  }

  /* Hide bio (shown on name hover on desktop) */
  .portfolio__bio {
    display: none;
  }
}