/* ============================================================
   work.css — Work page styles
   ============================================================ */


/* ----------------------------------------------------------
   Intro
   ---------------------------------------------------------- */

.work-intro {
  background: var(--color-cream);
  padding-bottom: var(--space-lg);
}

.work-intro__text {
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.7;
  max-width: 56ch;
  opacity: 0.75;
}


/* ----------------------------------------------------------
   Work grid
   ---------------------------------------------------------- */

.work-grid-section {
  background: var(--color-cream);
  padding-bottom: var(--space-2xl);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

/* Each tile — portrait aspect ratio (movie poster) */
.work-grid .work-tile {
  aspect-ratio: 2 / 3;
}

/* Wide tiles (landscape content) — add data-wide="true" in JSON if needed */
.work-grid .work-tile[data-wide="true"] {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 767px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  /* All tiles revert to portrait on mobile */
  .work-grid .work-tile[data-wide="true"] {
    grid-column: span 1;
    aspect-ratio: 2 / 3;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}