/* OMFC International | case.css: the case study overlay (#/case/<slug>).
   The markup comes from render() in case.js, so class names must match that template. */


/* === 1. Overlay shell and curtain ======================================= */

.case {
  --line: var(--line-on-light);
  --muted: var(--muted-on-light);
  position: fixed;
  inset: 0;
  z-index: var(--z-case);
  color: var(--ink);
}

/* Four dark bays that cover the screen while content is swapped (curtainIn / curtainOut in case.js) */
.case__curtain {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.case__curtain span {
  background: var(--graphite);
  box-shadow: inset -1px 0 0 rgba(245, 243, 238, 0.07);
  transform: scaleY(0);
  transform-origin: 50% 100%;
}

/* The scrolling page of the case study */
.case__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;     /* scrolling here never scrolls the page behind */
  background: var(--stone);
  scrollbar-width: thin;
  scrollbar-color: var(--steel) var(--stone-2);
}


/* === 2. Top bar ========================================================= */

.case__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--header-top) var(--margin);
  pointer-events: none;     /* the empty middle of the bar never blocks clicks */
}

.case__bar > * {
  pointer-events: auto;
}

/* "Case study 01 / 13" */
.case__count {
  padding: 0.55rem 0.75rem;
  background: var(--stone);
  box-shadow: inset 0 0 0 1px var(--line);
}

.case__nav {
  display: flex;
  gap: 0.4rem;
}

.case__nav .icon-btn {
  background: var(--stone);
}

@media (hover: hover) {
  .case__nav .icon-btn:hover {
    background: var(--ink);
  }

  .case__nav .icon-btn:hover svg {
    stroke: var(--bone);
  }
}

.case__content {
  padding-bottom: 0;
}


/* === 3. Head ============================================================ */

.case-head {
  row-gap: var(--s-6);
  padding-top: clamp(3rem, 10vh, 7rem);
  padding-bottom: var(--space-block);
}

/* Location and main discipline, shown as two labels side by side */
.case-head__no {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.5em;
  color: var(--muted);
}

.case-head__title {
  grid-column: 1 / span 10;
  font-family: var(--font-narrow);
  font-size: clamp(3.4rem, 11.5vw, 14rem);
  font-weight: 280;
  font-stretch: 62%;
  line-height: 0.84;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.case-head__sub {
  grid-column: 1 / span 5;
  font-size: var(--fs-lead);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Facts table: Client, Location, Our role, Disciplines */
.case-meta {
  grid-column: 7 / span 6;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gutter);
  border-top: 1px solid var(--ink);
}

.case-meta div {
  padding: 0.85rem 0 1rem;
  border-bottom: 1px solid var(--line);
}

.case-meta dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.case-meta dd {
  margin-top: 0.3rem;
  font-size: 1rem;
  line-height: 1.4;
}


/* === 4. Cover =========================================================== */

.case-cover {
  position: relative;
  max-width: calc(var(--max) + var(--margin) * 2);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* The cover is always a wide crop; portrait photographs get 3:2 instead of 16:9 */
.case-cover .case-fig__btn {
  width: 100%;
  max-height: 86vh;
  aspect-ratio: 16 / 9;
}

.case-cover.is-portrait .case-fig__btn {
  aspect-ratio: 3 / 2;
}

.case-cover figcaption {
  margin-top: 0.75rem;
}


/* === 5. Text blocks (Overview, Scope of works): label in columns 1 to 3, content from column 4 === */

.case-block {
  row-gap: var(--s-5);
  padding-block: var(--space-block);
}

.case-block__label {
  grid-column: 1 / span 3;
  padding-top: 0.5em;
  color: var(--muted);
}

.case-block__body {
  grid-column: 4 / span 7;
  display: grid;
  gap: 1.1em;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.008em;
}

/* The first paragraph is set larger, as a lead */
.case-block__body p:first-child {
  font-size: clamp(1.2rem, 1.9vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.018em;
}

/* Numbered scope list (01, 02, ...) using a CSS counter */
.case-scope {
  grid-column: 4 / span 8;
  border-top: 1px solid var(--ink);
  counter-reset: s;
}

.case-scope li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--gutter);
  padding: 0.95rem 0 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.5;
  counter-increment: s;
}

.case-scope li::before {
  content: counter(s, decimal-leading-zero);
  padding-top: 0.3em;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
}


/* === 6. Galleries ======================================================= */

.case-gallery {
  padding-block: var(--space-block);
}

.case-gallery__head {
  row-gap: var(--s-4);
  margin-bottom: var(--s-8);
}

.case-gallery__head .label {
  grid-column: 1 / span 3;
  padding-top: 0.4em;
  color: var(--muted);
}

.case-gallery__head p {
  grid-column: 4 / span 6;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.case-gallery__grid {
  align-items: start;
  row-gap: clamp(3rem, 7vw, 7rem);
}

/* One photograph with its numbered caption */
.case-fig {
  margin: 0;
}

.case-fig figcaption {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.5rem;
  max-width: 46ch;
  margin-top: 0.8rem;
}

.case-fig figcaption .label {
  color: var(--ink);
}

/* Every photograph is a button that opens the full-screen viewer */
.case-fig__btn {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--stone-2);
}

/* Images fade in once loaded (.is-loaded is added by case.js) */
.case-fig__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.8s var(--ease-out),
    transform 1.4s var(--ease-out);
}

.case-fig__btn img.is-loaded {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .case-fig__btn img.is-loaded {
    transition:
      opacity 0.8s var(--ease-out),
      transform 0.9s var(--ease-out);
  }

  .case-fig__btn:hover img.is-loaded {
    transform: scale(1.03);
  }
}

/* Small "+" badge in the corner on hover and focus, hinting "enlarge" */
.case-fig__btn::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2rem;
  height: 2rem;
  background:
    linear-gradient(var(--bone), var(--bone)) 50% 50% / 12px 1.5px no-repeat,
    linear-gradient(var(--bone), var(--bone)) 50% 50% / 1.5px 12px no-repeat,
    var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-2),
    transform var(--dur-3) var(--ease-out);
}

.case-fig__btn:hover::after,
.case-fig__btn:focus-visible::after {
  opacity: 1;
  transform: none;
}

/* Layout rhythm: case.js gives landscape photos slot "e" (wide, centred);
   portrait and square ones cycle through a, b, f, g, h. */
.case-fig--a {
  grid-column: 1 / span 5;
}

.case-fig--b {
  grid-column: 7 / span 4;
  margin-top: clamp(4rem, 12vw, 12rem);
}

.case-fig--c {
  grid-column: 2 / span 4;
}

.case-fig--d {
  grid-column: 7 / span 6;
  margin-top: clamp(2rem, 5vw, 5rem);
}

.case-fig--e {
  grid-column: 3 / span 8;
}

.case-fig--f {
  grid-column: 1 / span 4;
}

.case-fig--g {
  grid-column: 5 / span 4;
  margin-top: clamp(3rem, 8vw, 8rem);
}

.case-fig--h {
  grid-column: 9 / span 4;
  margin-top: clamp(1rem, 3vw, 3rem);
}

/* Crop by photograph shape (also set by case.js) */
.case-fig--wide .case-fig__btn {
  aspect-ratio: 4 / 3;
}

.case-fig--tall .case-fig__btn {
  aspect-ratio: 3 / 4;
}

.case-fig--square .case-fig__btn {
  aspect-ratio: 1;
}

.case-fig--panorama .case-fig__btn {
  aspect-ratio: 2 / 1;
}


/* === 7. Next case study ================================================= */

.case-next {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--gutter);
  margin-top: var(--space-block);
  padding: var(--space-block) var(--margin) var(--margin);
  overflow: hidden;
  background: var(--graphite);
  color: var(--bone);
}

/* "Next case study" and "02 / 13", as two labels side by side */
.case-next__label {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.5em;
  margin-bottom: var(--s-5);
  color: var(--muted-on-dark);
}

.case-next__name {
  grid-column: 1 / span 8;
  font-family: var(--font-narrow);
  font-size: clamp(3rem, 9vw, 11rem);
  font-weight: 280;
  font-stretch: 62%;
  line-height: 0.84;
  text-transform: uppercase;
  transition: transform 0.8s var(--ease-roll);
}

.case-next__img {
  grid-column: 10 / span 3;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.case-next__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.case-next__arrow {
  position: absolute;
  top: var(--space-block);
  right: var(--margin);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
}

.case-next__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

@media (hover: hover) {
  .case-next:hover .case-next__name {
    transform: translateX(1.5rem);
  }

  .case-next:hover .case-next__img img {
    transform: scale(1.06);
  }

  .case-next:hover .case-next__arrow {
    background: var(--hivis);
    color: var(--ink);
    box-shadow: none;
  }
}


/* === 8. Tablet and mobile =============================================== */

@media (max-width: 1023px) {
  .case-head__title,
  .case-head__sub,
  .case-meta,
  .case-block__label,
  .case-block__body,
  .case-scope,
  .case-gallery__head .label,
  .case-gallery__head p {
    grid-column: 1 / -1;
  }

  /* Eight-column rhythm */
  .case-fig--a,
  .case-fig--c,
  .case-fig--f {
    grid-column: 1 / span 4;
  }

  .case-fig--b,
  .case-fig--g {
    grid-column: 5 / span 4;
  }

  .case-fig--d,
  .case-fig--e {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .case-fig--h {
    grid-column: 2 / span 5;
    margin-top: 0;
  }

  .case-next__name {
    grid-column: 1 / span 5;
  }

  .case-next__img {
    grid-column: 6 / span 3;
  }
}

@media (max-width: 767px) {
  .case-meta {
    grid-template-columns: 1fr;
  }

  /* One photograph per row; every second one is indented by a column */
  .case-fig--a,
  .case-fig--b,
  .case-fig--c,
  .case-fig--d,
  .case-fig--e,
  .case-fig--f,
  .case-fig--g,
  .case-fig--h {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .case-fig:nth-child(even) {
    grid-column: 2 / -1;
  }

  .case-cover .case-fig__btn,
  .case-cover.is-portrait .case-fig__btn {
    aspect-ratio: 4 / 5;
  }

  .case-next {
    grid-template-columns: 1fr 5.5rem;
  }

  .case-next__name {
    grid-column: 1;
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .case-next__img {
    grid-column: 2;
  }

  .case-next__arrow {
    display: none;
  }
}