/* Shared layout for all case-study / project pages (Amour & Mer, Blossom
   Beauty, Crown Resorts, Freelance, Normal). Each page frame in Figma is
   1512x829 with a big project title top-left and a horizontal strip of
   labelled image cards. Several source frames are wider than 1512px, so
   the strip scrolls horizontally rather than being cropped. */

.page-case {
  height: 829px;
}

.page-case .page-title {
  position: absolute;
  left: 31px;
  top: 14px;
  max-width: 900px;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 94px;
  line-height: 1;
  letter-spacing: -1.89px;
  color: var(--color-black);
  white-space: nowrap;
}

.page-case .site-nav {
  left: auto;
  right: 68px;
}

.page-case .work-strip {
  position: absolute;
  left: 31px;
  /* top is raised by the same amount as padding-top below, so the visible
     row position is unchanged but there's headroom for the hover zoom
     (overflow-x: auto forces overflow-y to auto too, so without this
     padding the zoomed image would get clipped at the box's top edge). */
  top: 237px;
  right: 0;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  overflow-x: auto;
  padding-top: 165px;
  padding-bottom: 8px;
}

.page-case .work-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  /* JS (work-hover.js) translates this on hover of an earlier sibling, to
     push it out of the way of that card's enlarging image. Cards never
     scale themselves, only move. */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-case .work-card__label {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: -0.28px;
  color: var(--color-black);
  /* JS translates this upward in lockstep with its own image's growth, so
     the label stays clear of the enlarging image above it. */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-case .work-card__image {
  position: relative;
  height: 309px;
  overflow: visible;
  background: #eee;
  z-index: 1;
  transform-origin: bottom left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), z-index 0.4s;
}

.page-case .work-card__image img,
.page-case .work-card__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A card image that links out (e.g. Normal's "Web design" card, which
   opens a full video walkthrough) needs the anchor itself to fill the
   box so the image inside still sizes correctly and the whole card is
   clickable, not just the image's native inline footprint. */
.page-case .work-card__image a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.page-case .work-card__image--contain {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-case .work-card__image--contain img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.page-case .work-card__image--split {
  display: flex;
  gap: 4px;
  background: #f6f6f6;
}

.page-case .work-card__image--split img {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  /* Each image in a split card (Amble gin, Barbour) enlarges on its own
     hover, independent of its siblings — see js/work-hover.js. */
  position: relative;
  z-index: 1;
  transform-origin: bottom left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), z-index 0.4s;
}

.page-case .work-card__tagline {
  flex: 0 0 auto;
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: #98001f;
}

/* Normal page: matches a newer/updated Figma frame (node 322:11999) with a
   slightly taller image row than the other case-study pages, so this
   override is scoped to .page-normal only. Card gap is unified with the
   other case-study pages (see .work-strip above). */
.page-case.page-normal .work-strip {
  gap: 7px;
}

.page-case.page-normal .work-card__image {
  height: 316px;
}

/* Back-to-portfolio link, not part of the original design but useful
   real-world navigation since these are otherwise dead-end pages. */
.page-case .back-link {
  position: absolute;
  left: 31px;
  top: 760px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: -0.13px;
  color: rgba(0, 0, 0, 0.55);
}

.page-case .back-link:hover {
  color: var(--color-black);
}