/* Common */
body .aem-GridColumn {

  .text-highlight,
  .parallax-zoom,
  .parallax-scroll,
  .video-scrub,
  .callout,
  .image-display-animation {
    --offset-top: calc(var(--header-space, 0px) + var(--userbar-h, 0px) + var(--browsebar-h, 0px));
    --title-large: 32px;
    --block-gap-m: 32px;
  }
}

@media (width < 768px) {
  body .aem-GridColumn {

    .text-highlight,
    .parallax-zoom,
    .parallax-scroll,
    .video-scrub,
    .callout,
    .image-display-animation {
      --offset-top: calc(var(--header-space, 0px) + var(--browsebar-h, 0px));
      --title-large: 26px;
      --block-gap-m: 24px;
    }
  }
}

/* Text Highlight */
body:not(.in-aem-editor) .aem-GridColumn .text-highlight {
  position: relative;
  z-index: 0;
  width: 100dvw;
  height: calc(250svh + var(--text-highlight-ch, 0px));
  left: 50%;
  right: 50%;
  transform: translateX(-50%);

  html[lang|="ar"] & {
    transform: translateX(50%);
  }

  .text-highlight__image {
    height: calc(100svh - var(--cta-button-h, 0px));
    overflow: hidden;
    position: sticky;
    top: 0px;
    z-index: 0;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity .5s;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  .text-highlight__content {
    max-width: 980px;
    padding: 0 24px;
    margin-inline: auto;
    position: sticky;
    top: -100%;
    left: auto;
    right: auto;
    z-index: 2;
    color: #3e3e3e;

    .text-highlight__text-group {
      font-size: clamp(26px, 3.75vw, 48px);


    }
  }

  &[data-content-scroll="on"] {
    .text-highlight__image {
      &::after {
        opacity: 1;
      }
    }

    .text-highlight__content {
      .text-highlight__text-group {
        .text-highlight__text span {
          color: inherit !important;
          /* text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5); */
        }
      }
    }
  }
}

/* Parallax Zoom */
body:not(.in-aem-editor) .aem-GridColumn .parallax-zoom {

  position: relative;
  height: 200svh;
  z-index: 0;

  .parallax-zoom__container {
    max-width: 640px;
    margin-inline: auto;
    padding-inline: 24px;
    min-height: calc(100svh - var(--cta-button-h, 0px));
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    position: sticky;
    top: 0px;
    overflow-y: clip;
  }

  .parallax-zoom__vi-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .parallax-zoom__vi {
    .parallax-zoom__vi__in {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100dvw;
      height: calc((100svh - var(--cta-button-h, 0px)) * 1);
    }

    .parallax-zoom__vi-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &[data-status="playing"] {
      .parallax-zoom__vi-btn-play {
        display: none;
      }
    }

    &:not([data-status="playing"]) {
      .parallax-zoom__vi-btn-pause {
        display: none;
      }
    }
  }

  .parallax-zoom__vi-controls {
    position: absolute;
    top: var(--offset-top);
    left: 0;
    right: 0;
    margin-inline: auto;
    padding: 16px;
    width: 100%;
    max-width: calc(1280px + 32px);
    display: flex;
    justify-content: flex-end;
    column-gap: var(--video-controls-c-gap);
    pointer-events: none;

    button {
      pointer-events: all;
      cursor: pointer;
    }
  }

  .parallax-zoom__content {
    display: flex;
    flex-direction: column;
    gap: 24px 0;
  }

  .parallax-zoom__title {
    font-size: var(--title-large);
  }

  .parallax-scroll__description {
    font-size: 16px;
  }
}

/* Parallax Scroll */
body:not(.in-aem-editor) .aem-GridColumn .parallax-scroll {

  height: var(--scroll-height, 200svh);
  z-index: 0;
  position: relative;

  .parallax-scroll__container {
    position: sticky;
    top: var(--offset-top);
    height: calc(100svh - var(--cta-button-h, 0px) - var(--offset-top));
  }

  .parallax-scroll__item {
    display: grid;
    gap: 20px;
    position: absolute;
    padding-block: 32px;
    width: 100%;
    max-height: 100%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;

    >* {
      overflow: hidden;
    }
  }

  .parallax-scroll__content__in {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px 0;
    overflow-y: hidden;
    pointer-events: auto;
  }

  .parallax-scroll__title {
    font-size: var(--title-large);
  }

  .parallax-scroll__description {
    font-size: 16px;
  }

  .parallax-scroll__img {
    order: -1;
    max-height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

@media (min-width: 768px) {
  body:not(.in-aem-editor) .aem-GridColumn .parallax-scroll {
    .parallax-scroll__item {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
    }

    .parallax-scroll__content__in {
      justify-content: center;
      padding-block: 32px;
    }
  }
}

@media (max-width: 767px) {
  body:not(.in-aem-editor) .aem-GridColumn .parallax-scroll {
    .parallax-scroll__container {
      height: calc(100svh - var(--cta-button-h, 0px) - var(--offset-top) + var(--header-space, 0px));
    }

    .parallax-scroll__item {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      height: 100%;
    }

    .parallax-scroll__img {
      max-height: 35svh;
    }

    .parallax-scroll__content {
      height: 100%;
    }
  }
}

/* Video Scrub */
body:not(.in-aem-editor) .aem-GridColumn .video-scrub {
  position: relative;
  height: calc(var(--video-scrub-ch, 200svh));
  left: 50%;
  transform: translateX(-50%);
  width: 100dvw;

  .video-scrub__container {
    position: sticky;
    top: var(--offset-top);
    height: calc((100svh - var(--cta-button-h, 0px)) * 1);
    display: grid;
    z-index: 0;
  }

  .video-scrub__content,
  .video-scrub__image {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .video-scrub__image {
    position: relative;
    overflow: hidden;

  }

  .video-scrub__content {
    z-index: 1;
    align-self: center;
    justify-self: center;
    text-align: center;
    max-width: 1280px;
    padding: 32px 24px;

    &.text-change {
      display: grid;

      >* {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }
    }
  }

  .video-scrub__text {
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.5;
    color: #FFF;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5), 0px 0px 10px rgba(0, 0, 0, 0.5), 0px 0px 10px rgba(0, 0, 0, 0.5);
  }

  .video-scrub__canvas {
    width: 100%;
    height: 100%;
  }

  .video-scrub__frames {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;

    img {
      position: absolute;
    }
  }
}

body.in-aem-editor .aem-GridColumn .video-scrub {

  .video-scrub__frames {
    img {
      &:not(:first-child) {
        display: none;
      }
    }
  }
}

/* Call Out */
body:not(.in-aem-editor) .aem-GridColumn .callout {
  img {
    vertical-align: top;
  }

  .callout__text {
    display: flex;
    flex-direction: column;
    gap: 24px 0;
  }

  .callout__frames {
    --frame-grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 24px;
    grid-template-columns: var(--frame-grid-template-columns);

    &:has(> :only-child) {
      --frame-grid-template-columns: 1fr;
    }

    .callout__frame {
      .gifAnim {
        opacity: 0;

        &.visible {
          opacity: 1;
        }
      }
    }

    &.callout--layout-overlay {
      --frame-grid-template-columns: 1fr;
      grid-template-rows: 1fr;

      &>* {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }
    }

    &.callout--layout-3columns {
      --frame-grid-template-columns: 1fr 2fr 1fr;

      .callout__content-start {
        order: 0;
      }

      .callout__content-center {
        order: 1;
        text-align: center;
      }

      .callout__content-end {
        order: 2;
      }
    }
  }

  &.callout--fullsize {
    position: relative;
    width: 100dvw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;

    .callout__in {
      height: calc(100svh - var(--offset-top) - var(--cta-button-h, 0px));
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .callout__frames {
      padding: var(--block-gap-m) 24px;
      width: 100%;
      max-height: 100%;
      position: relative;
      max-width: 1280px;

      &:has(.callout__bg) {
        display: block;
      }
    }

    .callout__bg {

      img {
        width: 100%;
        height: auto;
        max-height: calc(100svh - var(--cta-button-h, 0px) - var(--offset-top) - var(--block-gap-m) * 2);
        object-fit: contain;
      }
    }
  }

  &.callout--scrub {
    height: 200svh;

    .callout__in {
      position: sticky;
      top: var(--offset-top);
    }
  }

  &.callout--font-color-light {
    color: #fff;
  }
}

@media (max-width: 767px) {
  body:not(.in-aem-editor) .aem-GridColumn .callout {
    .callout__frames {
      gap: 16px;

      &.callout--layout-type2 {
        --frame-grid-template-columns: 1fr;
      }

      &.callout--layout-3columns {
        --frame-grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 24px;

        .callout__img {
          width: auto;
          max-height: 30svh;
        }
      }
    }
  }
}

/* Image Display Animation */
body .aem-GridColumn .image-display-animation {
  .image-display-animation__in {
    display: grid;
  }

  &.image-display-animation--layered {
    .image-display-animation__in {
      >* {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }
    }
  }
}

/* Image Compare */
.icv {
  position: relative;
  overflow: hidden;
  cursor: row-resize
}

.icv__icv--vertical {
  cursor: row-resize
}

.icv__icv--horizontal {
  cursor: col-resize
}

.icv__img {
  pointer-events: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width: none;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  top: 0;
  display: block
}

.icv__is--fluid .icv__img {
  display: none
}

.icv__img-a {
  height: auto;
  position: static;
  z-index: 1;
  left: 0px
}

.icv__img-b {
  height: 100%;
  position: absolute;
  z-index: 2;
  left: auto;
  right: 0px;
  width: auto
}

.icv__icv--vertical .icv__img-b {
  width: 100%;
  height: auto
}

.icv__imposter {
  z-index: 4;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%
}

.icv__wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  z-index: 3
}

.icv__is--fluid .icv__wrapper,
.icv__icv--vertical .icv__wrapper {
  width: 100% !important
}

.icv__is--fluid .icv__wrapper,
.icv__icv--horizontal .icv__wrapper {
  height: 100% !important
}

.icv__fluidwrapper {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.icv__control {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  top: 0px;
  z-index: 5
}

.icv__icv--vertical .icv__control {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  left: 0;
  width: 100%
}

.icv__control-line {
  height: 50%;
  width: 2px;
  z-index: 6
}

.icv__icv--vertical .icv__control-line {
  width: 50%
}

.icv__theme-wrapper {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s;
  z-index: 5
}

.icv__icv--vertical .icv__theme-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.icv__arrow-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all 0.1s ease-out 0s;
  transition: all 0.1s ease-out 0s
}

.icv__arrow-a {
  -webkit-transform: scale(1.5) rotateZ(180deg);
  transform: scale(1.5) rotateZ(180deg);
  height: 20px;
  width: 20px;
  -webkit-filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.33));
  filter: drop-shadow(0px -3px 5px rgba(0, 0, 0, 0.33))
}

.icv__arrow-b {
  -webkit-transform: scale(1.5) rotateZ(0deg);
  transform: scale(1.5) rotateZ(0deg);
  height: 20px;
  width: 20px;
  -webkit-filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.33));
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.33))
}

.icv__circle {
  width: 50px;
  height: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 999px
}

.icv__label {
  position: absolute;
  bottom: 1rem;
  z-index: 12;
  background: rgba(0, 0, 0, 0.33);
  color: white;
  border-radius: 3px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.icv__label.vertical {
  bottom: auto;
  left: 1rem
}

.icv__label.on-hover {
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 0.25s cubic-bezier(0.68, 0.26, 0.58, 1.22);
  transition: 0.25s cubic-bezier(0.68, 0.26, 0.58, 1.22)
}

.icv:hover .icv__label.on-hover {
  -webkit-transform: scale(1);
  transform: scale(1)
}

.icv__label-before {
  left: 1rem
}

.icv__label-after {
  right: 1rem
}

.icv__label-before.vertical {
  top: 1rem
}

.icv__label-after.vertical {
  bottom: 1rem;
  right: auto
}

.icv__body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}