/* ==========================================================================
   Container, grid, section rhythm
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

/* readable measure for case study body copy */
.prose {
  max-width: var(--prose-max);
}

.prose > * + * {
  margin-top: var(--space-5);
}

.prose h2 {
  margin-top: var(--space-8);
}

.prose h3 {
  margin-top: var(--space-6);
}

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

/* a list semantically — three sibling projects — with the list styling off */
.grid-work {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding: 0;
  list-style: none;
}

/* Rows sit a step further apart than columns: vertically the gap has to
   separate one card's title from the next card's image, which is a group
   boundary; horizontally it only separates two images. */
@media (min-width: 768px) {
  .grid-work {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-7);
    row-gap: var(--space-8);
  }
}

/* ---------- Case study layout ------------------------------------------ */

/* Mobile: one column, nav above the body. Desktop: fixed nav column + body.
   The nav is sticky rather than fixed so it scrolls with the page until it
   reaches the header, then holds — no need to know the footer's position. */
.case__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--section-y);
}

@media (min-width: 768px) {
  .case__layout {
    grid-template-columns: var(--case-nav-w) 1fr;
    gap: var(--space-7);
    align-items: start;
  }
}

/* ---------- Scroll reveal ---------------------------------------------- */

/* only hide when JS is present, so content is visible if JS fails */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}