/* ============================================
   FEATURED WORKS PAGE
   ============================================ */

.works-main {
  position: relative;
  z-index: 5;
}

/* Active nav link */
.nav-active {
  border-color: var(--pink) !important;
  color: var(--yellow) !important;
}

/* ---- Collage Grid ---- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 260px);
  gap: 3px;
  background: #000;
}

/* Grid placement — 3 tall vertical images anchoring the layout
   Row 1: [Daily Show tall] [Comic Con]      [Game Theory tall]
   Row 2: [   (cont'd)   ] [Gotti]           [   (cont'd)     ]
   Row 3: [Inside FBI]     [Plyr vs Plyr tall][Josh Johnson]
   Row 4: [Star Wars]      [   (cont'd)     ] [Super Heroes]
   Row 5: [The Ark — 2cols wide —]            [A Day in Life]
*/
.wi-1  { grid-column: 1;     grid-row: 1 / 3; }   /* The Daily Show — tall hero */
.wi-2  { grid-column: 2;     grid-row: 1; }        /* Comic Con Ep IV */
.wi-3  { grid-column: 3;     grid-row: 1 / 3; }   /* Game Theory — tall */
.wi-4  { grid-column: 2;     grid-row: 2; }        /* Gotti */
.wi-5  { grid-column: 1;     grid-row: 3; }        /* Inside the FBI */
.wi-6  { grid-column: 3;     grid-row: 3; }        /* Josh Johnson */
.wi-7  { grid-column: 2;     grid-row: 3 / 5; }   /* Player vs Player — tall */
.wi-8  { grid-column: 1;     grid-row: 4; }        /* Star Wars */
.wi-9  { grid-column: 3;     grid-row: 4; }        /* Super Heroes Decoded */
.wi-10 { grid-column: 1 / 3; grid-row: 5; }       /* The Ark — wide to fill gap */
.wi-11 { grid-column: 3;     grid-row: 5; }        /* A Day in the Life */

/* ---- Work Item ---- */
.work-item {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: #111;
}

.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.5s ease;
}

/* Tall vertical images — anchor to top to favour faces/subjects */
.wi-1 img { object-position: center top; }  /* The Daily Show */
.wi-3 img { object-position: center top; }  /* Game Theory with Bomani Jones */
.wi-7 img { object-position: center top; }  /* Player vs Player */

.work-item:hover img {
  transform: scale(1.06);
}

/* ---- Hover Overlay ---- */
.work-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(155, 47, 235, 0.82) 0%,
    rgba(255, 45, 120, 0.78) 50%,
    rgba(0, 0, 0, 0.85) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.work-item:hover .work-overlay {
  opacity: 1;
}

.work-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  transform: translateY(8px);
  transition: transform 0.35s ease;
}

.work-item:hover .work-overlay-inner {
  transform: translateY(0);
}

.work-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.9rem);
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  line-height: 1.1;
}

.work-cta {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  padding: 4px 12px;
  text-transform: uppercase;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: 200px;
  }
  /* Reset all desktop placements to simple 2-col flow */
  .wi-1  { grid-column: 1 / 3; grid-row: auto; }
  .wi-2  { grid-column: 1;     grid-row: auto; }
  .wi-3  { grid-column: 2;     grid-row: auto; }
  .wi-4  { grid-column: 1;     grid-row: auto; }
  .wi-5  { grid-column: 2;     grid-row: auto; }
  .wi-6  { grid-column: 1;     grid-row: auto; }
  .wi-7  { grid-column: 2;     grid-row: auto; }
  .wi-8  { grid-column: 1;     grid-row: auto; }
  .wi-9  { grid-column: 2;     grid-row: auto; }
  .wi-10 { grid-column: 1 / 3; grid-row: auto; }
  .wi-11 { grid-column: 1;     grid-row: auto; }
  /* Reset tall-image anchoring */
  .wi-1 img, .wi-3 img, .wi-7 img { object-position: center center; }
}

@media (max-width: 480px) {
  /* Switch to flexbox — bypasses all grid placement conflicts */
  .works-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .wi-1, .wi-2, .wi-3, .wi-4, .wi-5, .wi-6,
  .wi-7, .wi-8, .wi-9, .wi-10, .wi-11 {
    width: 100%;
    height: 56vw;
  }
  .work-item img { height: 100%; }
}