/* Case study media sizing — responsive, no CMS content or artwork modified. */
/* A restrained default for new CMS images and videos. Keep the complete frame visible. */
.case-sections > .case-image {
  width: min(100%, 1080px);
  max-width: 100%;
  margin-inline: auto;
}
.case-sections > .case-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76svh;
  object-fit: contain;
  object-position: center;
}
.case-sections > .case-video {
  width: min(100%, 1080px, calc(76svh * 16 / 9));
  max-width: 100%;
  margin-inline: auto;
}
.case-sections > .case-video video,
.case-sections > .case-embed iframe {
  display: block;
  width: 100%;
  max-height: 76svh;
}
.case-sections > .case-video video {
  height: auto;
  object-fit: contain;
}
.case-sections > .case-embed iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.case-sections > .case-execution-heading {
  max-width: 1080px;
}

/* Amnesty: original 4:3 campaign boards, deliberately smaller than the viewport. */
.case-sections > .case-image:has(img[src*="amnesty"]) {
  width: min(100%, 980px, calc(75svh * 4 / 3));
}

/* Hunger Cam: the video and its supporting 4:3 board; keep the wide 'telas' strip readable. */
.case-sections > .case-embed {
  width: min(100%, 1050px, calc(75svh * 16 / 9));
}
.case-sections > .case-image:has(img[src*="whatsapp-image-2026-10-25"]) {
  width: min(100%, 1150px, calc(84svh * 4 / 3));
}
.case-sections > .case-image:has(img[src*="whatsapp-image-2026-10-25"]) img {
  max-height: 84svh;
}
.case-sections > .case-image:has(img[src*="telas.png"]) {
  width: min(100%, 1120px);
}

/* Movistar: the first film is landscape (1272x718); the second is portrait (1080x1920). */
.is-movistar .case-sections > .case-video:has(source[src*="movistar-calle.mp4"]) {
  width: min(100%, 1080px, calc(77svh * 1272 / 718));
}
.is-movistar .case-sections > .case-video:has(source[src*="movistar-calle.mp4"]) video {
  width: 100%;
  height: auto;
  max-height: 77svh;
  object-fit: contain;
}
.is-movistar .case-sections > .case-video:has(source[src$="/movistar.mp4"]) {
  width: min(100%, 420px, calc(75svh * 9 / 16));
}
.is-movistar .case-sections > .case-video:has(source[src$="/movistar.mp4"]) video {
  width: 100%;
  height: auto;
  max-height: 75svh;
  object-fit: contain;
}

/* One-offs: the IKEA pull-tab stays panoramic; Mentos fits a laptop screen. */
.is-oneoffs .case-sections > .case-image:has(img[src*="ikea-pull-tab"]) {
  width: min(100%, 1170px);
}
.is-oneoffs .case-sections > .case-image:has(img[src*="mentos"]) {
  width: min(100%, 1050px, calc(76svh * 16 / 9));
}

/* It's-a me, Snickers!: preserve the playable 4:3 frame and fullscreen link.
   !important overrides the old inline max-width in the game container. */
.case-sections > .snickers-game {
  width: min(100%, 800px, calc(72svh * 4 / 3)) !important;
  max-width: min(100%, 800px, calc(72svh * 4 / 3)) !important;
  margin-inline: auto;
}
.case-sections > .snickers-game iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 72svh;
  border: 0;
}

/* The Infinite Viewing: a complete 3D viewport, sized separately from video embeds. */
.case-sections > .infinite-viewing-simulator {
  width: min(100%, 1080px, calc(72svh * 16 / 10));
  max-width: 100%;
  margin-inline: auto;
}
.infinite-viewing-simulator iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 0;
  background: #10140f;
}
.infinite-viewing-simulator figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 20px;
  line-height: 1.5;
}
.infinite-viewing-simulator figcaption a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Mobile: fill available width while keeping landscape and portrait content fully visible. */
@media (max-width: 700px) {
  .case-sections > .case-image,
  .case-sections > .case-video,
  .case-sections > .case-embed { max-width: 100%; }
  .case-sections > .case-image img,
  .case-sections > .case-video video,
  .case-sections > .case-embed iframe { max-height: 73svh; }
  .case-sections > .case-image:has(img[src*="whatsapp-image-2026-10-25"]) img {
    max-height: 73svh;
  }
  .is-movistar .case-sections > .case-video:has(source[src$="/movistar.mp4"]) {
    width: min(100%, 350px, calc(72svh * 9 / 16));
  }
  .is-movistar .case-sections > .case-video:has(source[src$="/movistar.mp4"]) video {
    max-height: 72svh;
  }
  .case-sections > .snickers-game {
    width: min(100%, calc(73svh * 4 / 3)) !important;
    max-width: min(100%, calc(73svh * 4 / 3)) !important;
  }
  .case-sections > .infinite-viewing-simulator {
    width: min(100%, calc(70svh * 4 / 5));
  }
  .infinite-viewing-simulator iframe {
    aspect-ratio: 4 / 5;
  }
}