/* ============================================
   Block: Triple Split
   ============================================ */

.block-triple-split {

  --overlap: 300px;

  &.bleed-up {
    margin-top: calc(-1 * var(--overlap));
    position: relative;
    z-index: -1;

    & .text {
      padding-top: var(--overlap);
      padding-bottom: 0;
    }
    & .center-media {
      top: calc(50% +  calc(var(--overlap) / 2));
    }
  }

  & .split-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: max(70vw, 1000px);
  }

  & .media {
    overflow: hidden;

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

  &.media-boxed {
    & .media {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-lg);

      & img,
      & video {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: var(--border-radius);
        border: 3px solid var(--color-red);
        box-shadow: 3px 3px 0px var(--color-red);
      }
    }
  }

  & .text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-xl) var(--space-lg);
  }

  & .text-inner {
    max-width: 520px;
    max-width:calc(100% - 180px);
  }

  & .subtitle {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: var(--space-xs);
  }

  & .heading {
    margin-bottom: var(--space-sm);
  }

  & .body {
    line-height: 1.7;
    margin-bottom: var(--space-md);
    text-transform:uppercase;
    line-height:110%;

    & p:last-child {
      margin-bottom: 0;
    }
  }

  &.flipped {
    & .media {
      order: 2;
    }

    & .text {
      order: 1;
      justify-content: flex-start;
    }
  }

  & .center-media {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 30%;
    max-width: 320px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

    & img,
    & video {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  & .text-inner {
    &.pt-sm { padding-top: var(--space-sm); }
    &.pt-md { padding-top: var(--space-md); }
    &.pt-lg { padding-top: var(--space-lg); }
    &.pt-xl { padding-top: var(--space-xl); }

    &.pb-sm { padding-bottom: var(--space-sm); }
    &.pb-md { padding-bottom: var(--space-md); }
    &.pb-lg { padding-bottom: var(--space-lg); }
    &.pb-xl { padding-bottom: var(--space-xl); }
  }

  @media (max-width: 768px) {
    & .split-inner {
      grid-template-columns: 1fr;
      min-height: auto;
    }

    & .media,
    &.flipped .media {
      order: 1;
      min-height: 55vh;
      max-height: 75vh;
    }

    & .center-media,
    &.flipped .center-media {
      position: relative;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      transform: none;
      order: 2;
      width: min(80%, 360px);
      max-width: 100%;
      margin: calc(-1 * var(--space-lg)) auto var(--space-md);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
      overflow: hidden;
    }

    & .center-media img,
    & .center-media video,
    &.flipped .center-media img,
    &.flipped .center-media video {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 4;
      object-fit: cover;
    }

    & .text,
    &.flipped .text {
      order: 3;
      justify-content: flex-start;
      padding: var(--space-lg) var(--space-md);
      padding-top: 0;
    }

    & .text-inner {
      max-width: 100%;
      width: 100%;
    }

    &.media-boxed .media {
      padding: var(--space-md);

      & img,
      & video {
        max-width: 400px;
        margin: 0 auto;
      }
    }
  }
}