/*
 * Media Triptych experience — static foundation.
 *
 * Source media dimensions never control the layout. Each frame owns its
 * geometry, and its image or video is cropped into that frame with cover.
 */

.mmg-experience--media-triptych {
  --mmg-triptych-width: min(94vw, 1440px);
  --mmg-triptych-height: clamp(420px, 72svh, 760px);
  --mmg-triptych-gap: clamp(8px, 1vw, 16px);
  --mmg-triptych-radius: clamp(16px, 1.6vw, 28px);
  --mmg-triptych-side-width: 1fr;
  --mmg-triptych-video-width: 2fr;
  position: relative;
  width: 100%;
  min-width: 0;
}

.mmg-media-triptych__pin-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.mmg-media-triptych__layout {
  display: grid;
  grid-template-areas: "left video right";
  grid-template-columns:
    minmax(0, var(--mmg-triptych-side-width))
    minmax(0, var(--mmg-triptych-video-width))
    minmax(0, var(--mmg-triptych-side-width));
  gap: var(--mmg-triptych-gap);
  width: var(--mmg-triptych-width);
  height: var(--mmg-triptych-height);
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
  isolation: isolate;
}

.mmg-media-triptych__frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--mmg-triptych-radius);
  background: #111;
  transform: translateZ(0);
}

.mmg-media-triptych__frame--left {
  grid-area: left;
  border-radius:
    var(--mmg-triptych-radius)
    0
    0
    var(--mmg-triptych-radius);
}

.mmg-media-triptych__video {
  grid-area: video;
}

.mmg-media-triptych__frame--right {
  grid-area: right;
  border-radius:
    0
    var(--mmg-triptych-radius)
    var(--mmg-triptych-radius)
    0;
}

.mmg-media-triptych__frame--left::after,
.mmg-media-triptych__frame--right::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgb(0 0 0 / var(--mmg-triptych-image-overlay, 0));
}

.mmg-media-triptych__frame > img,
.mmg-media-triptych__frame > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  max-width: none !important;
  max-height: none !important;
  display: block;
  object-fit: cover !important;
  object-position: var(--mmg-media-position, center center);
  border: 0;
  border-radius: inherit;
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .mmg-experience--media-triptych[data-mmg-triptych-ready="true"] {
    --mmg-triptych-offset: 0px;
    display: grid;
    align-items: center;
    min-height: calc(100svh - var(--mmg-triptych-offset));
    overflow: visible;
  }

  .mmg-experience--media-triptych[data-mmg-triptych-ready="true"]
    .mmg-media-triptych__layout {
    position: relative;
    display: block;
  }

  .mmg-experience--media-triptych[data-mmg-triptych-ready="true"]
    .mmg-media-triptych__frame {
    will-change: left, top, width, height;
    backface-visibility: hidden;
  }

  .mmg-experience--media-triptych[data-mmg-triptych-ready="true"]
    .mmg-media-triptych__frame--left,
  .mmg-experience--media-triptych[data-mmg-triptych-ready="true"]
    .mmg-media-triptych__frame--right {
    z-index: 1;
  }

  .mmg-experience--media-triptych[data-mmg-triptych-ready="true"]
    .mmg-media-triptych__video {
    z-index: 2;
  }
}

@media (max-width: 767px) {
  .mmg-experience--media-triptych {
    --mmg-triptych-width: calc(100vw - 32px);
    --mmg-triptych-height: auto;
    --mmg-triptych-gap: 8px;
    --mmg-triptych-radius: 16px;
  }

  .mmg-media-triptych__layout {
    grid-template-areas:
      "video video"
      "left right";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }

  .mmg-media-triptych__video {
    aspect-ratio: 16 / 9;
  }

  .mmg-media-triptych__frame--left,
  .mmg-media-triptych__frame--right {
    aspect-ratio: 4 / 5;
  }
}