/* Real productions share one calm, consistent format. */
.selected-work--portfolio .work-intro {
  max-width: 32ch;
}

.selected-work--portfolio.selected-work--canva .canva-work__gallery[data-visible] {
  gap: 40px 24px !important;
}

.selected-work--portfolio.selected-work--canva .canva-work__gallery[data-visible] .canva-work__item:nth-child(n) .canva-work__frame {
  position: relative;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  background: #e9eded;
  isolation: isolate;
}

.work-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.work-film.is-playing {
  opacity: 1;
}

.team-story__photo > img.team-story__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Native horizontal browsing on phones and tablets, like the team gallery. */
@media (max-width: 1000px) {
  .selected-work--portfolio.selected-work--canva .canva-work__gallery[data-visible] {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
    gap: clamp(16px, 1.6vw, 28px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .selected-work--portfolio .canva-work__gallery::-webkit-scrollbar {
    display: none;
  }

  .selected-work--portfolio .canva-work__gallery > .canva-work__item {
    flex: 0 0 43%;
    width: 43% !important;
    min-width: 0;
    scroll-snap-align: start;
  }

  .selected-work--portfolio .canva-work__gallery:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
  }
}

@media (max-width: 700px) {
  .selected-work--portfolio .canva-work__gallery > .canva-work__item {
    flex-basis: 84%;
    width: 84% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-film {
    opacity: 0 !important;
    transition: none;
  }
}