/* Project-specific layout. Shared navigation, typography tokens and utilities live in style.css. */

/* Case study layout */
.case-study {
  padding-top: clamp(1.5rem, 4vw, 4rem);
  font-family: var(--font-body);
}

/* Hero */
.case-study__hero img {
  width: 100%;
  aspect-ratio: 1.8;
  object-fit: cover;
  object-position: center 58%;
}

/* Introduction */
.case-study__intro {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.case-study__title {
  margin-block: .75rem 1.5rem;
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  letter-spacing: -.05em;
}

.case-study__title span { color: #05aff2; }

.case-study__roles {
  color: var(--color-muted);
  font-size: .875rem;
}

.case-study__copy { max-width: 65ch; }
.case-study__copy p + p { margin-top: 1.25rem; }

/* Project gallery */
/* Twelve invisible columns let each photo have its own width and alignment. */
.case-gallery {
  --gallery-column-gap: 2rem;
  --gallery-row-gap: 3.5rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gallery-column-gap);
  row-gap: var(--gallery-row-gap);
  align-items: start;
}

.case-gallery__item { min-width: 0; }

.case-gallery a,
.case-study__hero a {
  display: block;
  cursor: zoom-in;
}

.case-gallery img { width: 100%; }

.case-gallery figcaption {
  margin-top: .75rem;
  color: var(--color-muted);
  font-size: .8125rem;
}

/* Gallery positioning */
.case-gallery__item--interior { grid-column: 1 / 9; }

.case-gallery__item--office {
  grid-column: 9 / 13;
  margin-top: 6rem;
}

.case-gallery__item--office img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 40% 65%;
}

.case-gallery__item--proof { grid-column: 1/13; }

.case-gallery__item--before {
  grid-column: 1 / 5;
  margin-top: 3rem;
}

.case-gallery__item--before {
  grid-column: 1 / 5;
  grid-row: 3;
}

.case-gallery__item--door-proof {
  grid-column: 1 / 5;
  grid-row: 4;
}

.case-gallery__item--entrance {
  grid-column: 6 / 13;
  grid-row: 3 / 5;
}

.case-gallery__item--entrance { grid-column: 6 / 13; }

.case-gallery__item--entrance img {
  aspect-ratio: 1.1;
  object-fit: cover;
}

.case-gallery__item--installation { grid-column: 3 / 11; }

/* Navigation */
.case-study__navigation {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--color-rule);
}

/* Photo viewer */
.photo-viewer {
  max-width: 96vw;
  max-height: 96dvh;
  margin: auto;
  padding: 1rem;
  border: 0;
  background: #fff;
}

.photo-viewer::backdrop { background: rgb(0 0 0 / .85); }

.photo-viewer__close {
  display: block;
  min-height: 44px;
  margin: 0 0 1rem auto;
  padding: .5rem 1rem;
  border: 1px solid #ccc;
  background: #fff;
  color: #242424;
  font: inherit;
  cursor: pointer;
}

.photo-viewer__image {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 78dvh;
  object-fit: contain;
}

body:has(.photo-viewer[open]) { overflow: hidden; }

/* Responsive layout */
@media (max-width: 47.99rem) {
  .case-study__intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .case-study__roles br { display: none; }
  .case-study__roles { max-width: 30ch; }
  .case-study__roles br::after { content: ' · '; }

  .case-gallery {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .case-gallery .case-gallery__item {
    grid-column: 1;
    margin-top: 0;
    grid-row: auto;
  }

  .case-gallery__item--office {
    width: 85%;
    justify-self: end;
  }

  .case-gallery__item--before { width: 80%; }
  .case-study__hero img { aspect-ratio: 4 / 3; }
}

/* Tighter frame favors the entrance proof; the original stays intact. */
.case-gallery__item--door-proof img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 85% center;
}