/* ---------- Category Page (Seokheon-style row layout) ---------- */
.category-page {
  padding-top: 5.5rem;
  padding-bottom: 4rem;
  min-height: 100vh;
}

.project-row {
  display: grid;
  grid-template-columns: 260px 140px 180px minmax(0, 720px);
  gap: 2rem;
  padding: 2.5rem 2rem;
  border-top: 0.5px solid var(--border);
  align-items: start;
  justify-content: start;
}

.project-row:last-child {
  border-bottom: 0.5px solid var(--border);
}

.project-title h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  margin: 0 0 1.4rem;
  line-height: 1.2;
}

.project-credits {
  font-size: 0.85rem;
  line-height: 1.5;
}

.project-credits div {
  color: var(--ink);
}

.project-credits div.faded {
  color: var(--ink-soft);
}

.project-description-inline {
  margin-top: 1.5rem;
}

.project-description-inline p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}

.project-description-inline em {
  color: var(--ink);
  font-style: italic;
}

.project-description-inline .components {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.project-description-inline .components strong {
  color: var(--ink);
  font-weight: 500;
}

.project-category,
.project-meta {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.project-category strong {
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin-bottom: 0.3rem;
}

/* ---------- Standard project media (single image) ---------- */
.project-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--ink-soft);
  position: relative;
}

.project-media img,
.project-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Carousel variant ---------- */
.project-media.carousel {
  position: relative;
  border: none;
  background: transparent;
  aspect-ratio: 3 / 2;
}

.project-media.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.project-media.carousel img.active {
  opacity: 1;
}

@media (max-width: 800px) {
  .project-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 1.2rem;
  }
  .project-media {
    aspect-ratio: 16 / 10;
  }
  .project-media.carousel {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- Carousel rotation variants ---------- */
/* When source images are sideways and need to be displayed upright */
.project-media.carousel.rotate-ccw img,
.project-media.carousel.rotate-cw img {
  /* After 90deg rotation, width and height swap.
     We rotate the image around its center, then scale so that
     the rotated image's new "width" (which was the source height)
     matches the container's height. This gives edge-to-edge fit. */
  transform-origin: center center;
  width: auto;
  height: 100%;
  left: 50%;
  top: 0;
}

.project-media.carousel.rotate-ccw img {
  transform: translate(-50%, 0) rotate(-90deg);
}

.project-media.carousel.rotate-cw img {
  transform: translate(-50%, 0) rotate(90deg);
}

/* Ensure the frame is landscape/square so rotated portraits fit nicely */
.project-media.carousel.rotate-ccw,
.project-media.carousel.rotate-cw {
  aspect-ratio: 3 / 2;
}

/* Per-image rotation inside a normal (non-rotated) carousel */
.project-media.carousel img.rotate-ccw-single {
  transform-origin: center center;
  transform: rotate(-90deg) scale(1.5);
}

.project-media.carousel img.rotate-cw-single {
  transform-origin: center center;
  transform: rotate(90deg) scale(1.5);
}

/* ---------- Clickable carousel images ---------- */
.project-media.carousel {
  cursor: zoom-in;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  cursor: zoom-out;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.lightbox-close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.85);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  line-height: 1;
}

.lightbox-close:hover {
  color: #fff;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem;
  line-height: 1;
  padding: 1rem;
  cursor: pointer;
  user-select: none;
  z-index: 1;
}

.lightbox-nav:hover {
  color: #fff;
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

@media (max-width: 800px) {
  .lightbox {
    padding: 1.5rem;
  }
  .lightbox-close {
    top: 0.6rem;
    right: 1rem;
  }
  .lightbox-nav {
    font-size: 2.2rem;
    padding: 0.5rem;
  }
  .lightbox-prev { left: 0.2rem; }
  .lightbox-next { right: 0.2rem; }
}

/* ---------- Photography section: fixed 500x500 media boxes ---------- */
.category-page.photography .project-media.carousel {
  width: 500px;
  height: 500px;
  max-width: 100%;
  aspect-ratio: auto;
}

@media (min-width: 801px) {
  .category-page.photography .project-row {
    grid-template-columns: 260px 140px 180px 1fr;
  }
  .category-page.photography .project-media.carousel {
    justify-self: end;
  }
}

@media (max-width: 800px) {
  .category-page.photography .project-media.carousel {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ---------- Per-image object-position tweaks ---------- */
.project-media.carousel img.align-bottom {
  object-position: center bottom;
}

.project-media.carousel img.align-top {
  object-position: center top;
}