/* ============================================
   Reps — scrolly overrides
   ============================================ */

.page.reps .reps__content-flow:has(> .project-scrolly) {
  gap: 0;
}

.page.reps .project-scrolly__track .project-scrolly__step {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* No artificial scroll padding — media height drives the rhythm */
@media (min-width: 1281px) {
  .page.reps .project-scrolly__track > .project-scrolly__step,
  .page.reps .project-scrolly__track > .project-scrolly__step.project-scrolly__step--pad,
  .page.reps .project-scrolly__track > .project-scrolly__step.reps__step--learned {
    min-height: 0 !important;
    justify-content: flex-start;
  }
}

.page.reps .more-projects-grid {
  gap: var(--space-1);
}

.page.reps .section {
  gap: var(--space-1);
}

.reps__step--learned .reps__block-img--full {
  max-height: none;
}

.project-scrolly__track .reps__figure {
  display: block;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
  height: fit-content;
  line-height: 0;
  overflow: hidden;
  background-color: var(--color-surface-primary);
}

.project-scrolly__track .reps__block-img:not(.reps__block-img--full):not(.reps__block-img--screen):not(.reps__block-img--hero) {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: var(--aspect-video);
  height: auto;
  max-height: var(--project-scrolly-media-max-h);
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
}

.project-scrolly__track .reps__hero-step .reps__media-video--portrait {
  max-height: none;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center top;
  background-color: var(--color-surface-primary);
}

/* Opening video: show the whole phone recording */
.page.reps .project-scrolly__track .reps__hero-step .reps__figure video[data-scroll-play] {
  object-position: center;
}

.project-scrolly__track .reps__hero-step .reps__figure {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-height: min(78vh, 44rem);
  height: auto;
  overflow: hidden;
}

/* Opening photo: phone in hand on the Reps purple, filling the frame */
.project-scrolly__track .reps__hero-step .reps__block-img--hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
}

.project-scrolly__track .reps__hero-step .reps__figure .reps__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center top;
}

.project-scrolly__track .reps__media-video--portrait {
  aspect-ratio: 1 / 2;
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background-color: var(--color-surface-primary);
}

.project-scrolly__track .reps__block-img--full {
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  max-height: none;
  width: 100%;
  height: auto;
  display: block;
}

.project-scrolly__track .reps__figure:has(.reps__block-img--full) {
  overflow: visible;
  background-color: var(--color-surface-primary);
}

.project-scrolly__track .reps__figure--stroked {
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-primary);
}

.project-scrolly__track .reps__block-img--photo {
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  max-height: var(--project-scrolly-media-max-h);
  width: 100%;
  height: auto;
  display: block;
}

.project-scrolly__track .reps__block-img--stroked,
.project-scrolly__track .reps__media-video--stroked {
  box-sizing: border-box;
  border: 1px solid var(--color-border);
}

.project-scrolly__track .reps__media-video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  background-color: var(--color-surface-primary);
  box-sizing: border-box;
}

.project-scrolly__track .reps__media-video--landscape {
  aspect-ratio: var(--aspect-video);
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
  background-color: var(--color-surface-primary);
}

.project-scrolly__track .reps__flow-block > .reps__figure:has(.reps__media-video--landscape),
.project-scrolly__track .project-scrolly__step > .reps__figure:has(.reps__media-video--landscape) {
  position: relative;
  aspect-ratio: var(--aspect-video);
  max-height: min(56vh, 32rem);
  width: 100%;
  overflow: hidden;
}

.project-scrolly__track .reps__flow-block > .reps__figure:has(.reps__media-video--landscape) .reps__media-video,
.project-scrolly__track .project-scrolly__step > .reps__figure:has(.reps__media-video--landscape) .reps__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-scrolly__track .reps__video-grid {
  display: flex;
  flex-direction: column;
  gap: var(--project-scrolly-media-gap);
  width: 100%;
  margin: 0;
}

/* Studio mockups — two portrait shots side by side, also on small screens */
.project-scrolly__track .reps__mockup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--project-scrolly-media-gap);
  width: 100%;
  margin: 0;
}

.project-scrolly__track .reps__mockup-grid .reps__figure {
  margin: 0;
  overflow: hidden;
}

.project-scrolly__track .reps__video-grid--duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.project-scrolly__track .reps__video-grid .reps__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  background-color: var(--color-surface-primary);
  aspect-ratio: 1 / 2;
  width: 100%;
  height: auto;
}

.project-scrolly__track .reps__video-grid .reps__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.project-scrolly__track .reps__video-grid .reps__media-video--stroked {
  border: none;
}

/* Phone recordings stay side by side on small screens, like the screen grids */

.reps__flow-block {
  display: flex;
  flex-direction: column;
  gap: var(--project-scrolly-media-gap);
  width: 100%;
}

.reps__flow-block + .reps__flow-block {
  margin-top: 0;
}

.project-scrolly__track .reps__screen-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--project-scrolly-media-gap);
  width: 100%;
  margin: 0;
}

.project-scrolly__track .reps__screen-grid--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-scrolly__track .reps__screen-grid .reps__figure {
  position: relative;
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  align-self: stretch;
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  background-color: var(--color-surface-primary);
}

.project-scrolly__track .reps__screen-grid .reps__figure--stroked {
  border: 1px solid var(--color-border);
}

.project-scrolly__track .reps__screen-grid .reps__block-img--screen {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
  margin: 0;
  border: none;
  background-color: var(--color-surface-primary);
}

.project-scrolly__track .reps__flow-block > .reps__figure {
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  background-color: var(--color-surface-primary);
}

.project-scrolly__track .reps__flow-block > .reps__figure .reps__media-video {
  border: none;
}

@media (max-width: 1024px) {
  .project-scrolly__track .reps__screen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .project-scrolly__track .reps__screen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Screens next to a screen recording: same frame, pinned to the top */
.project-scrolly__track .reps__video-grid .reps__block-img--screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
  margin: 0;
}

/* Logo loop — keep the icon vertically centred in the 16:9 box */
.page.reps .project-scrolly__track .project-scrolly__step video.reps__media-video--landscape {
  object-position: center center;
}

/* Animated studio mockups — same 4:5 frame as the still mockups */
.project-scrolly__track .reps__media-video--mockup {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1032 / 1280;
  max-height: none;
  background-color: var(--color-surface-dark);
}

/* Hero loop — centred crop of the 16:9 clip inside the 5:4 frame */
.page.reps .project-scrolly__track .reps__hero-step video.reps__media-video--hero {
  object-position: center center;
  background-color: var(--color-surface-dark);
}

/* Text-led figure for steps that have a number instead of a photo */
.project-scrolly__track .reps__stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  min-height: clamp(24rem, 62vh, 36rem);
  padding: var(--space-4);
  line-height: var(--leading-snug);
  font-family: var(--font-body);
  letter-spacing: var(--tracking);
}

.reps__stat-card__value {
  font-family: var(--font-display);
  font-size: calc(var(--text-xl) * 2.5);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-text-primary);
}

.reps__stat-card__label {
  max-width: 28rem;
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--color-text-body);
  text-wrap: pretty;
}

.project-scrolly__track .reps__stat-card.data-figure {
  display: grid;
  align-content: center;
  margin: 0;
}