.lightbox {
  position: fixed;
  z-index: 10001;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(24, 24, 36, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s;
  flex-direction: row;
}
.lightbox-image,
#lightbox-image {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 16px;
  box-shadow: 0 0 24px #9B4F9677;
  background: #000;
  object-fit: contain;
}

.lightbox-nav {
  background: #fff;
  border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.13);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; outline: none;
  position: relative; z-index: 1;
  margin: 0 18px;
  transition: border 0.3s, box-shadow 0.3s, transform 0.2s;
  user-select: none;
}
.lightbox-nav .arrow {
  display: inline-block;
  font-size: 2rem;
  filter: drop-shadow(0 0 4px #9B4F96aa);
  transition: transform 0.16s, filter 0.18s;
}
.lightbox-nav:hover, .lightbox-nav:focus {
  border: 3px solid #9B4F96;
  box-shadow: 0 0 24px 0 #D60270cc, 0 0 0 7px #0038A860;
}
.lightbox-nav:hover .arrow, .lightbox-nav:focus .arrow {
  filter: drop-shadow(0 0 8px #D60270cc);
}
.prev:hover .arrow, .prev:focus .arrow { transform: translateX(-5px) scale(1.1) rotate(-12deg);}
.next:hover .arrow, .next:focus .arrow { transform: translateX(5px) scale(1.1) rotate(12deg);}
.lightbox-nav:active {
  box-shadow: 0 0 0 10px #D6027040;
  transform: scale(0.94);
}
.lightbox-nav:focus-visible {
  box-shadow: 0 0 0 5px #0038A8, 0 0 24px 0 #D60270aa;
  border-color: #0038A8;
}

.close {
  position: absolute;
  top: 24px; right: 32px;
  font-size: 2.6rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 5;
  opacity: 0.8;
  transition: opacity 0.25s;
}
.close:hover { opacity: 1; color: #D60270; }


/* PORTFOLIO GRID – one big case-study card per row */
.portfolio-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1200px;
  margin: 40px auto 60px auto;
  padding: 0 5vw;
}

/* MAIN CARD LAYOUT: images left, text right */
.portfolio-item {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); /* left: images, right: text */
  gap: 24px;
  align-items: flex-start;
  background: #19191c;
  border-radius: 18px;
  border: 2px solid #202020;
  box-shadow: 0 4px 20px #000a;
  padding: 22px 24px 24px;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  transition:
    border 0.24s,
    box-shadow 0.24s,
    transform 0.24s;
}

/* Hover effect for the whole card */
.portfolio-item:hover,
.portfolio-item:focus-within {
  border-color: #e60000;
  box-shadow: 0 0 22px 2px #e6000099, 0 4px 24px #000c;
  transform: translateY(-4px) scale(1.005);
}

/* ========== IMAGE GRID (LEFT COLUMN) ========== */

.portfolio-images {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* large image spans full width on top */
.portfolio-image-large {
  grid-column: 1 / span 2;
}

.portfolio-image-large img,
.portfolio-image-small img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 14px;
  filter: grayscale(10%) contrast(1.06);
  transition: filter 0.24s, transform 0.24s;
}

/* hover brightens all images a little */
.portfolio-item:hover .portfolio-image-large img,
.portfolio-item:hover .portfolio-image-small img {
  filter: grayscale(0%) brightness(1.05) contrast(1.15);
  transform: scale(1.02);
}

/* hide empty small slots if no image source was output */
.portfolio-image-small img[src=""],
.portfolio-image-small img:not([src]) {
  display: none;
}

/* ========== TEXT BLOCK (RIGHT COLUMN) ========== */

.portfolio-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.portfolio-text h2,
.portfolio-text h3 {
  margin: 0 0 0.8rem 0;
  font-size: 1.6rem;
}

.portfolio-text p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
  color: #f7e4e4;
  max-width: 46rem; /* stops lines running too long */
}

/* ========== FEATURED RGB GLOW ========== */

.portfolio-item.featured {
  position: relative;
  animation: rgbGlow 3s infinite alternate ease-in-out;
}

@keyframes rgbGlow {
  0%   { box-shadow: 0 0 10px rgba(255, 0, 0, 0.8); }   /* Red */
  33%  { box-shadow: 0 0 15px rgba(0, 0, 255, 0.8); }   /* Blue */
  66%  { box-shadow: 0 0 15px rgba(128, 0, 128, 0.8); } /* Purple */
  100% { box-shadow: 0 0 10px rgba(255, 0, 0, 0.8); }   /* Back to Red */
}

/* ========== RESPONSIVE ========== */

@media (max-width: 900px) {
  .portfolio-item {
    grid-template-columns: 1fr;
  }

  .portfolio-text {
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .portfolio-images {
    grid-template-columns: 1fr;
  }

  .portfolio-image-large {
    grid-column: 1;
  }
}


/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  body.portfolio-page .portfolio-item {
    grid-template-columns: 1fr;
  }

  body.portfolio-page .portfolio-item .image-container {
    grid-row: 1;
  }

  body.portfolio-page .portfolio-item h1,
  body.portfolio-page .portfolio-item h2,
  body.portfolio-page .portfolio-item h3,
  body.portfolio-page .portfolio-item p {
    grid-column: 1;
  }
}


@media (max-width: 900px) {
  .portfolio-grid {
    padding: 0 4vw;
  }

  .portfolio-item {
    grid-template-columns: 1fr;
  }

  .portfolio-item img {
    grid-row: 1;
    grid-column: 1;
    aspect-ratio: 16 / 9;
  }

  .portfolio-item h2,
  .portfolio-item h3,
  .portfolio-item p {
    grid-column: 1;
  }
}