/* See ./l-tmlayout.md for design notes and rationale. */

.l-tmlayout {
  --tml-bg: var(--tml-bg-sm, transparent);
  --tml-asp: var(--tml-asp-sm, 1 / 1);
  --tml-tw: var(--tml-tw-sm, 50%);
  --tml-mw: var(--tml-mw-sm, 50%);
  --tml-tx: var(--tml-tx-sm, flex-start);
  --tml-ty: var(--tml-ty-sm, flex-start);
  --tml-mx: var(--tml-mx-sm, 50%);
  --tml-my: var(--tml-my-sm, 50%);

  background: var(--tml-bg);
}

.l-tmlayout__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stack";
  width: 100%;
}

:where(.l-tmlayout__text-section, .l-tmlayout__media-section) {
  grid-area: stack;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
}

.l-tmlayout__text-section {
  justify-content: var(--tml-ty);
  align-items: var(--tml-tx);
  z-index: 1;
}

.l-tmlayout__media-section {
  justify-content: flex-start;
  align-items: flex-start;
}

:where(.l-tmlayout__text) {
  width: max-content;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

.l-tmlayout__media {
  width: 100%;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

:where(.l-tmlayout__media > picture) {
  display: contents;
}

.l-tmlayout__media > img,
.l-tmlayout__media > picture > img {
  position: absolute;
  top: var(--tml-my, 50%);
  left: var(--tml-mx, 50%);
  transform: translate(
    calc(-1 * var(--tml-mx, 50%)),
    calc(-1 * var(--tml-my, 50%))
  );
  width: auto;
  height: auto;
  max-width: none;
  transition: opacity 200ms ease;
}

.l-tmlayout__media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--tml-mx, 50%) var(--tml-my, 50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.l-tmlayout__media.is-video-ready > img,
.l-tmlayout__media.is-video-ready > picture > img {
  opacity: 0;
}

.l-tmlayout__media.is-video-ready > video {
  opacity: 1;
  pointer-events: auto;
}

.l-tmlayout[data-layout-sm="lr"] > .l-tmlayout__content > .l-tmlayout__text-section {
  width: var(--tml-tw);
  justify-self: start;
}

.l-tmlayout[data-layout-sm="lr"] > .l-tmlayout__content > .l-tmlayout__media-section {
  width: var(--tml-mw);
  justify-self: end;
}

.l-tmlayout[data-layout-sm="rl"] > .l-tmlayout__content > .l-tmlayout__text-section {
  width: var(--tml-tw);
  justify-self: end;
}

.l-tmlayout[data-layout-sm="rl"] > .l-tmlayout__content > .l-tmlayout__media-section {
  width: var(--tml-mw);
  justify-self: start;
}

.l-tmlayout[data-layout-sm="tb"] > .l-tmlayout__content {
  grid-template-areas: "top" "bottom";
  grid-template-rows: auto auto;
}

.l-tmlayout[data-layout-sm="tb"] > .l-tmlayout__content > .l-tmlayout__text-section {
  grid-area: top;
  height: auto;
}

.l-tmlayout[data-layout-sm="tb"] > .l-tmlayout__content > .l-tmlayout__media-section {
  grid-area: bottom;
  aspect-ratio: var(--tml-asp);
  height: auto;
}

.l-tmlayout[data-layout-sm="bt"] > .l-tmlayout__content {
  grid-template-areas: "top" "bottom";
  grid-template-rows: auto auto;
}

.l-tmlayout[data-layout-sm="bt"] > .l-tmlayout__content > .l-tmlayout__text-section {
  grid-area: bottom;
  height: auto;
}

.l-tmlayout[data-layout-sm="bt"] > .l-tmlayout__content > .l-tmlayout__media-section {
  grid-area: top;
  aspect-ratio: var(--tml-asp);
  height: auto;
}

.l-tmlayout[data-height-driver-sm="media"]
  > .l-tmlayout__content > .l-tmlayout__media-section {
  aspect-ratio: var(--tml-asp);
  height: auto;
  align-self: start;
}

@media (width >= 768px) {
  .l-tmlayout {
    --tml-bg: var(--tml-bg-md, var(--tml-bg-sm, transparent));
    --tml-asp: var(--tml-asp-md, var(--tml-asp-sm, 1 / 1));
    --tml-tw: var(--tml-tw-md, var(--tml-tw-sm, 50%));
    --tml-mw: var(--tml-mw-md, var(--tml-mw-sm, 50%));
    --tml-tx: var(--tml-tx-md, var(--tml-tx-sm, flex-start));
    --tml-ty: var(--tml-ty-md, var(--tml-ty-sm, flex-start));
    --tml-mx: var(--tml-mx-md, var(--tml-mx-sm, 50%));
    --tml-my: var(--tml-my-md, var(--tml-my-sm, 50%));
  }

  .l-tmlayout[data-layout-md="lr"] > .l-tmlayout__content > .l-tmlayout__text-section {
    width: var(--tml-tw);
    justify-self: start;
  }

  .l-tmlayout[data-layout-md="lr"] > .l-tmlayout__content > .l-tmlayout__media-section {
    width: var(--tml-mw);
    justify-self: end;
  }

  .l-tmlayout[data-layout-md="rl"] > .l-tmlayout__content > .l-tmlayout__text-section {
    width: var(--tml-tw);
    justify-self: end;
  }

  .l-tmlayout[data-layout-md="rl"] > .l-tmlayout__content > .l-tmlayout__media-section {
    width: var(--tml-mw);
    justify-self: start;
  }

  .l-tmlayout[data-layout-md="tb"] > .l-tmlayout__content {
    grid-template-areas: "top" "bottom";
    grid-template-rows: auto auto;
  }

  .l-tmlayout[data-layout-md="tb"] > .l-tmlayout__content > .l-tmlayout__text-section {
    grid-area: top;
    height: auto;
  }

  .l-tmlayout[data-layout-md="tb"] > .l-tmlayout__content > .l-tmlayout__media-section {
    grid-area: bottom;
    aspect-ratio: var(--tml-asp);
    height: auto;
  }

  .l-tmlayout[data-layout-md="bt"] > .l-tmlayout__content {
    grid-template-areas: "top" "bottom";
    grid-template-rows: auto auto;
  }

  .l-tmlayout[data-layout-md="bt"] > .l-tmlayout__content > .l-tmlayout__text-section {
    grid-area: bottom;
    height: auto;
  }

  .l-tmlayout[data-layout-md="bt"] > .l-tmlayout__content > .l-tmlayout__media-section {
    grid-area: top;
    aspect-ratio: var(--tml-asp);
    height: auto;
  }

  .l-tmlayout[data-height-driver-md="media"]
    > .l-tmlayout__content > .l-tmlayout__media-section {
    aspect-ratio: var(--tml-asp);
    height: auto;
    align-self: start;
  }
}

@media (width >= 1024px) {
  .l-tmlayout {
    --tml-bg:
      var(--tml-bg-lg,
        var(--tml-bg-md,
          var(--tml-bg-sm, transparent)));
    --tml-asp:
      var(--tml-asp-lg,
        var(--tml-asp-md,
          var(--tml-asp-sm, 1 / 1)));
    --tml-tw:
      var(--tml-tw-lg,
        var(--tml-tw-md,
          var(--tml-tw-sm, 50%)));
    --tml-mw:
      var(--tml-mw-lg,
        var(--tml-mw-md,
          var(--tml-mw-sm, 50%)));
    --tml-tx:
      var(--tml-tx-lg,
        var(--tml-tx-md,
          var(--tml-tx-sm, flex-start)));
    --tml-ty:
      var(--tml-ty-lg,
        var(--tml-ty-md,
          var(--tml-ty-sm, flex-start)));
    --tml-mx:
      var(--tml-mx-lg,
        var(--tml-mx-md,
          var(--tml-mx-sm, 50%)));
    --tml-my:
      var(--tml-my-lg,
        var(--tml-my-md,
          var(--tml-my-sm, 50%)));
  }

  .l-tmlayout[data-layout-lg="lr"] > .l-tmlayout__content > .l-tmlayout__text-section {
    width: var(--tml-tw);
    justify-self: start;
  }

  .l-tmlayout[data-layout-lg="lr"] > .l-tmlayout__content > .l-tmlayout__media-section {
    width: var(--tml-mw);
    justify-self: end;
  }

  .l-tmlayout[data-layout-lg="rl"] > .l-tmlayout__content > .l-tmlayout__text-section {
    width: var(--tml-tw);
    justify-self: end;
  }

  .l-tmlayout[data-layout-lg="rl"] > .l-tmlayout__content > .l-tmlayout__media-section {
    width: var(--tml-mw);
    justify-self: start;
  }

  .l-tmlayout[data-layout-lg="tb"] > .l-tmlayout__content {
    grid-template-areas: "top" "bottom";
    grid-template-rows: auto auto;
  }

  .l-tmlayout[data-layout-lg="tb"] > .l-tmlayout__content > .l-tmlayout__text-section {
    grid-area: top;
    height: auto;
  }

  .l-tmlayout[data-layout-lg="tb"] > .l-tmlayout__content > .l-tmlayout__media-section {
    grid-area: bottom;
    aspect-ratio: var(--tml-asp);
    height: auto;
  }

  .l-tmlayout[data-layout-lg="bt"] > .l-tmlayout__content {
    grid-template-areas: "top" "bottom";
    grid-template-rows: auto auto;
  }

  .l-tmlayout[data-layout-lg="bt"] > .l-tmlayout__content > .l-tmlayout__text-section {
    grid-area: bottom;
    height: auto;
  }

  .l-tmlayout[data-layout-lg="bt"] > .l-tmlayout__content > .l-tmlayout__media-section {
    grid-area: top;
    aspect-ratio: var(--tml-asp);
    height: auto;
  }

  .l-tmlayout[data-height-driver-lg="media"]
    > .l-tmlayout__content > .l-tmlayout__media-section {
    aspect-ratio: var(--tml-asp);
    height: auto;
    align-self: start;
  }
}

@media (width >= 1440px) {
  .l-tmlayout {
    --tml-bg:
      var(--tml-bg-xl,
        var(--tml-bg-lg,
          var(--tml-bg-md,
            var(--tml-bg-sm, transparent))));
    --tml-asp:
      var(--tml-asp-xl,
        var(--tml-asp-lg,
          var(--tml-asp-md,
            var(--tml-asp-sm, 1 / 1))));
    --tml-tw:
      var(--tml-tw-xl,
        var(--tml-tw-lg,
          var(--tml-tw-md,
            var(--tml-tw-sm, 50%))));
    --tml-mw:
      var(--tml-mw-xl,
        var(--tml-mw-lg,
          var(--tml-mw-md,
            var(--tml-mw-sm, 50%))));
    --tml-tx:
      var(--tml-tx-xl,
        var(--tml-tx-lg,
          var(--tml-tx-md,
            var(--tml-tx-sm, flex-start))));
    --tml-ty:
      var(--tml-ty-xl,
        var(--tml-ty-lg,
          var(--tml-ty-md,
            var(--tml-ty-sm, flex-start))));
    --tml-mx:
      var(--tml-mx-xl,
        var(--tml-mx-lg,
          var(--tml-mx-md,
            var(--tml-mx-sm, 50%))));
    --tml-my:
      var(--tml-my-xl,
        var(--tml-my-lg,
          var(--tml-my-md,
            var(--tml-my-sm, 50%))));
  }

  .l-tmlayout[data-layout-xl="lr"] > .l-tmlayout__content > .l-tmlayout__text-section {
    width: var(--tml-tw);
    justify-self: start;
  }

  .l-tmlayout[data-layout-xl="lr"] > .l-tmlayout__content > .l-tmlayout__media-section {
    width: var(--tml-mw);
    justify-self: end;
  }

  .l-tmlayout[data-layout-xl="rl"] > .l-tmlayout__content > .l-tmlayout__text-section {
    width: var(--tml-tw);
    justify-self: end;
  }

  .l-tmlayout[data-layout-xl="rl"] > .l-tmlayout__content > .l-tmlayout__media-section {
    width: var(--tml-mw);
    justify-self: start;
  }

  .l-tmlayout[data-layout-xl="tb"] > .l-tmlayout__content {
    grid-template-areas: "top" "bottom";
    grid-template-rows: auto auto;
  }

  .l-tmlayout[data-layout-xl="tb"] > .l-tmlayout__content > .l-tmlayout__text-section {
    grid-area: top;
    height: auto;
  }

  .l-tmlayout[data-layout-xl="tb"] > .l-tmlayout__content > .l-tmlayout__media-section {
    grid-area: bottom;
    aspect-ratio: var(--tml-asp);
    height: auto;
  }

  .l-tmlayout[data-layout-xl="bt"] > .l-tmlayout__content {
    grid-template-areas: "top" "bottom";
    grid-template-rows: auto auto;
  }

  .l-tmlayout[data-layout-xl="bt"] > .l-tmlayout__content > .l-tmlayout__text-section {
    grid-area: bottom;
    height: auto;
  }

  .l-tmlayout[data-layout-xl="bt"] > .l-tmlayout__content > .l-tmlayout__media-section {
    grid-area: top;
    aspect-ratio: var(--tml-asp);
    height: auto;
  }

  .l-tmlayout[data-height-driver-xl="media"]
    > .l-tmlayout__content > .l-tmlayout__media-section {
    aspect-ratio: var(--tml-asp);
    height: auto;
    align-self: start;
  }
}