/* Work case study body only */
.work-detail-page-product-images-with-captions .is-mobile { display: none; }

@media (max-width: 767px) {
  .work-detail-page-product-images-with-captions .is-desktop { display: none; }
  .work-detail-page-product-images-with-captions .is-mobile { display: block; }
}
.work-detail-page-content .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}
.mox-2h-media-block img,
.mox-2h-media-block video,
.mox-2h-media-block iframe {
  border-radius: 7px;
}

/* #05-2h-media */
@media (max-width: 767px) {
  .mox-2h-media-block {
    flex-direction: column !important; /* #05-2h-media */
    gap: 50px !important; /* #05-2h-media — match the 50px vertical gap between work-body blocks (custom.css:8019-8021) */
  }
  .mox-2h-media-block .mox-2h-media-left,
  .mox-2h-media-block .mox-2h-media-right {
    flex: 1 1 100% !important; /* #05-2h-media */
    width: 100%; /* #05-2h-media */
  }
}

/* ── 3-up media block (9×16) ──────────────────────────── */
.mox-3up-media-block .mox-3up-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  font-size: 12px;
  line-height: 1.4;
  color: #000;
  margin-bottom: 12px;
}
.mox-3up-media-block .mox-3up-meta .mox-3up-caption {
  max-width: 60%;
  text-align: right;
}
.mox-3up-media-block .mox-3up-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.mox-3up-media-block .mox-3up-cell {
  flex: 1 1 0;
  aspect-ratio: 9 / 16;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: #f4f4f4;
}
.mox-3up-media-block .mox-3up-cell img,
.mox-3up-media-block .mox-3up-cell video,
.mox-3up-media-block .mox-3up-cell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
/* Desktop hides the mobile-override element; mobile hides the desktop one. */
.mox-3up-media-block .mox-3up-cell .mox-3up-mobile { display: none; }

@media (max-width: 767px) {
  .mox-3up-media-block .mox-3up-row {
    /* Horizontal scroll with snap on mobile; each cell ≈ 78vw so the next one peeks in. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    /* full-bleed left padding so the first cell aligns with the section gutter,
       trailing padding so the last cell can snap centred-ish */
    padding-right: 22vw;
  }
  .mox-3up-media-block .mox-3up-row::-webkit-scrollbar { display: none; }
  .mox-3up-media-block .mox-3up-cell {
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }
  /* swap desktop ↔ mobile assets for video/embed cells */
  .mox-3up-media-block .mox-3up-cell .mox-3up-desktop { display: none; }
  .mox-3up-media-block .mox-3up-cell .mox-3up-mobile { display: block; }
}

/* ── video-caption block: rounded corners ───────────────────────
   Vimeo embeds are served through a same-origin wrapper endpoint
   (/?mox-vimeo=1&v=ID) so overflow:hidden + border-radius can clip
   the iframe. Chrome 144 Site Isolation prevents CSS clipping of
   cross-origin iframes, but same-origin iframes are clippable.    */
.work-detail-page-product-video2-video,
.work-detail-page-product-video3-video {
  overflow: hidden;
  border-radius: 7px;
}
.work-detail-page-product-video2-video .mox-video-media,
.work-detail-page-product-video3-video .mox-video-media {
  display: block;
  line-height: 0;
}
.work-detail-page-product-video2-video iframe,
.work-detail-page-product-video3-video iframe,
.work-detail-page-product-video2-video video,
.work-detail-page-product-video3-video video {
  display: block;
  width: 100%;
  height: auto;
}
.work-detail-page-product-video2-video object,
.work-detail-page-product-video2-video embed {
  display: block;
  width: 100%;
  max-height: none;
}
.work-detail-page-product-video3-video object,
.work-detail-page-product-video3-video embed {
  display: block;
  width: 100%;
  max-height: none;
}

@media (max-width: 767px) {
  /* Use CSS custom properties set inline by PHP for dynamic dimensions
     Formula: --mobile-h = HEIGHT * 0.89, --mobile-w = WIDTH, minus 1px adjustment */
  .work-detail-page-product-video2-video object[style*="--mobile-h"],
  .work-detail-page-product-video2-video embed,
  .work-detail-page-product-video3-video object[style*="--mobile-h"],
  .work-detail-page-product-video3-video embed {
    height: calc(100vw * var(--mobile-h) / var(--mobile-w) - 1px);
  }
  
  /* Fallback for blocks without custom properties */
  .work-detail-page-product-video2-video object:not([style*="--mobile-h"]),
  .work-detail-page-product-video2-video embed:not([style*="--mobile-h"]) {
    height: calc(100vw * 801 / 687 - 1px); /* 687x900 portrait default */
  }
  .work-detail-page-product-video3-video object:not([style*="--mobile-h"]),
  .work-detail-page-product-video3-video embed:not([style*="--mobile-h"]) {
    height: calc(100vw * 100 / 198 - 1px); /* 862x486 landscape default */
  }
}

/* ── video-caption block: mobile/desktop media toggle ───────── */
.work-detail-page-product-video2-video .is-mobile,
.work-detail-page-product-video3-video .is-mobile { display: none; }
@media (max-width: 767px) {
  .work-detail-page-product-video2-video .is-desktop,
  .work-detail-page-product-video3-video .is-desktop { display: none; }
  .work-detail-page-product-video2-video .is-mobile,
  .work-detail-page-product-video3-video .is-mobile { display: block; }
}

/* ── video-caption block: aspect-ratio fill wrapper ────────────
   Used by layout values 4:5 / 9:16 / 16:9. The aspect-ratio is set
   inline by PHP; the video/iframe/object fills it absolutely.      */
.work-detail-page-product-video-wrap {
  overflow: hidden;
  border-radius: 7px;
  position: relative;
  line-height: 0;
}
.work-detail-page-product-video-wrap .mox-video-media {
  display: block;
  width: 100%;
  height: 100%;
}
.work-detail-page-product-video-wrap video,
.work-detail-page-product-video-wrap iframe,
.work-detail-page-product-video-wrap object,
.work-detail-page-product-video-wrap embed {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ── mox-carousel: rounded corners ─────────────────────────────
   belt-and-suspenders rules in the external stylesheet so these
   are guaranteed to load even if the block's inline <style> is
   blocked by CSP or stripped by a caching/optimisation layer.   */
.mox-carousel .swiper-slide {
  overflow: hidden;
  border-radius: 7px;
}
.mox-carousel .mox-carousel__card {
  overflow: hidden;
  border-radius: 7px;
  clip-path: inset(0 round 7px);
  -webkit-clip-path: inset(0 round 7px);
}
.mox-carousel .mox-carousel__poster img {
  border-radius: 7px;
  clip-path: inset(0 round 7px);
  -webkit-clip-path: inset(0 round 7px);
}

/* ── mox-carousel: undo the height:100vh that custom.css applies to
   .section .swiper at ≥1200px (that rule targets the old related-posts
   slider, not this block) ───────────────────────────────────────── */
@media (min-width: 1200px) {
  .work-detail-page-product-images-with-captions .mox-carousel-wrap .swiper.mox-carousel,
  .work-detail-page-product-images-with-captions .mox-carousel-wrap .swiper.mox-carousel .swiper-wrapper {
    height: auto;
  }
}

/* ── Image+Caption block: mobile size overrides ─────────────────
   On desktop each variant has a distinct max-width (100/70/50% for
   landscape; 70/50/35% for portrait). On mobile ignore all of those
   and use one rule per orientation group. */
@media (max-width: 767px) {
  .work-detail-page-product-landscape-large,
  .work-detail-page-product-landscape-medium,
  .work-detail-page-product-landscape-small {
    max-width: 100%;
  }

  .work-detail-page-product-portrait-large,
  .work-detail-page-product-portrait-medium,
  .work-detail-page-product-portrait-small {
    max-width: 75%;
  }
}

/* #04-mobile START — make every work image+caption block fill the same width on mobile.
   Overrides the 75% cap on portrait variants and the legacy image2/3/4 widths
   so all images sit at 100% of their container. To revert, delete this block. */
@media (max-width: 767px) {
  .work-detail-page-product-landscape-large,
  .work-detail-page-product-landscape-medium,
  .work-detail-page-product-landscape-small,
  .work-detail-page-product-portrait-large,
  .work-detail-page-product-portrait-medium,
  .work-detail-page-product-portrait-small,
  .work-detail-page-product-image1,
  .work-detail-page-product-image2,
  .work-detail-page-product-image3,
  .work-detail-page-product-image4 {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
/* #04-mobile END */

/* ── Work – 3-up Portrait (9:16) block ─────────────────────────────
   Three portrait tiles side-by-side on desktop, horizontal scroll on
   mobile with snap. Each tile is image / video / iframe in a 9:16 box.
   Caption row below mirrors .work-detail-page-product-caption style.   */
.work-detail-page-product-3up-portrait {
  width: 100%;
}
.work-3up-track {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}
.work-3up-tile {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.work-3up-tile-media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 7px;
  background: #000;
  line-height: 0;
}
.work-3up-tile-media > img,
.work-3up-tile-media > video,
.work-3up-tile-media > iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.work-3up-tile-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 12px;
  opacity: 0.6;
  padding: 8px;
  text-align: center;
}
.work-3up-tile-caption {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.work-3up-tile-credit {
  font-size: 12px;
  opacity: 0.6;
  flex: 0 0 auto;
}
.work-3up-tile-text {
  font-size: 12px;
  flex: 1 1 auto;
  text-align: right;
  opacity: 0.85;
}

/* Mobile: horizontal scroll with snap; reveal a sliver of the next tile. */
@media (max-width: 767px) {
  .work-3up-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
    /* tame default UA scrollbars on iOS/Android browsers */
    scrollbar-width: none;
  }
  .work-3up-track::-webkit-scrollbar { display: none; }
  .work-3up-tile {
    flex: 0 0 75%;
    scroll-snap-align: start;
  }
  .work-3up-tile-caption {
    flex-direction: row;
  }
}