// ==========================================================================
// Text-Media Block
// Flexible text/media composition with one-column and two-column variants.
// ==========================================================================

.b-text-media {
  &__row {
    align-items: stretch;

    // Column gap variants — two-column layouts only (columns are side-by-side from lg up)
    &.col-gap-sm {
      @include media-breakpoint-up(lg) {
        > :first-child {
          padding-right: 1rem;
        }
        > :last-child {
          padding-left: 1rem;
        }
      }

      @include media-breakpoint-up(xxl) {
        > :first-child {
          padding-right: 1.5rem;
        }
        > :last-child {
          padding-left: 1.5rem;
        }
      }
    }

    &.col-gap-md {
      @include media-breakpoint-up(lg) {
        > :first-child {
          padding-right: 2rem;
        }
        > :last-child {
          padding-left: 2rem;
        }
      }

      @include media-breakpoint-up(xxl) {
        > :first-child {
          padding-right: 3rem;
        }
        > :last-child {
          padding-left: 3rem;
        }
      }
    }

    &.col-gap-lg {
      @include media-breakpoint-up(lg) {
        > :first-child {
          padding-right: 4rem;
        }
        > :last-child {
          padding-left: 4rem;
        }
      }

      @include media-breakpoint-up(xxl) {
        > :first-child {
          padding-right: 5.5rem;
        }
        > :last-child {
          padding-left: 5.5rem;
        }
      }
    }
  }

  &__column {
    &--text,
    &--media {
      min-width: 0;
    }
  }

  // Two-column variants
  &--layout-left {
    .b-text-media__column--text .c-text-block {
      @include media-breakpoint-up(lg) {
        // padding-right: $tm-column-padding-right;
        padding-left: 0;
      }
    }

    .b-text-media__row--stack-text-first {
      @include media-breakpoint-down(lg) {
        flex-direction: column;
      }

      .b-text-media__column--text .c-text-block {
        @include media-breakpoint-down(lg) {
          padding-bottom: $tm-column-padding-bottom;
          padding-top: 0;
        }
      }
    }

    .b-text-media__row--stack-media-first {
      @include media-breakpoint-down(lg) {
        flex-direction: column-reverse;
      }

      .b-text-media__column--text .c-text-block {
        @include media-breakpoint-down(lg) {
          padding-top: $tm-column-padding-top;
          padding-bottom: 0;
        }
        @include media-breakpoint-down(md) {
          padding-top: $tm-column-padding-top-sm;
          padding-bottom: 0;
        }
      }
    }
  }

  &--layout-right {
    .b-text-media__column--text {
      order: 2;
    }
    .b-text-media__column--media {
      order: 1;
    }

    // col-gap-* uses :first-child/:last-child (DOM order), but layout-right
    // visually swaps columns via CSS order — so padding sides must be flipped.
    // Reset overridden side back to Bootstrap's half-gutter (not 0) to preserve
    // the outer column spacing.
    &.b-text-media__row,
    .b-text-media__row {
      $gutter: calc(var(--hks-gutter-x) * 0.5);

      &.col-gap-sm {
        @include media-breakpoint-up(lg) {
          > :first-child {
            padding-right: $gutter;
            padding-left: 1rem;
          }
          > :last-child {
            padding-left: $gutter;
            padding-right: 1rem;
          }
        }
        @include media-breakpoint-up(xxl) {
          > :first-child {
            padding-right: $gutter;
            padding-left: 1.5rem;
          }
          > :last-child {
            padding-left: $gutter;
            padding-right: 1.5rem;
          }
        }
      }
      &.col-gap-md {
        @include media-breakpoint-up(lg) {
          > :first-child {
            padding-right: $gutter;
            padding-left: 2rem;
          }
          > :last-child {
            padding-left: $gutter;
            padding-right: 2rem;
          }
        }
        @include media-breakpoint-up(xxl) {
          > :first-child {
            padding-right: $gutter;
            padding-left: 3rem;
          }
          > :last-child {
            padding-left: $gutter;
            padding-right: 3rem;
          }
        }
      }
      &.col-gap-lg {
        @include media-breakpoint-up(lg) {
          > :first-child {
            padding-right: $gutter;
            padding-left: 3rem;
          }
          > :last-child {
            padding-left: $gutter;
            padding-right: 3rem;
          }
        }
        @include media-breakpoint-up(xxl) {
          > :first-child {
            padding-right: $gutter;
            padding-left: 4.5rem;
          }
          > :last-child {
            padding-left: $gutter;
            padding-right: 4.5rem;
          }
        }
      }
    }
    .b-text-media__column--text .c-text-block {
      @include media-breakpoint-up(lg) {
        // padding-left: $tm-column-padding-left;
        // padding-right: 0;
      }
    }

    .b-text-media__row {
      @include media-breakpoint-up(lg) {
        flex-direction: row;
      }
    }

    .b-text-media__row--stack-text-first {
      @include media-breakpoint-down(lg) {
        flex-direction: column-reverse;
      }

      .b-text-media__column--text .c-text-block {
        @include media-breakpoint-down(lg) {
          padding-bottom: $tm-column-padding-bottom;
          padding-top: 0;
        }
      }
    }

    .b-text-media__row--stack-media-first {
      @include media-breakpoint-down(lg) {
        flex-direction: column;
      }

      .b-text-media__column--text .c-text-block {
        @include media-breakpoint-down(lg) {
          padding-top: $tm-column-padding-top;
          padding-bottom: 0;
        }
      }
    }
  }

  // Vertical alignment controls for two-column layouts.
  &--valign-top {
    .b-text-media__row {
      @include media-breakpoint-up(lg) {
        align-items: flex-start;
      }
    }
  }

  &--valign-center {
    .b-text-media__row {
      @include media-breakpoint-up(lg) {
        align-items: center;
      }
    }
  }

  &--valign-bottom {
    .b-text-media__row {
      @include media-breakpoint-up(lg) {
        align-items: flex-end;
      }
    }
  }

  &--no-media {
    .b-text-media__column--text .c-text-block {
      @include media-breakpoint-down(lg) {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }

  // One-column layouts — columns are always stacked, never side-by-side
  &--layout-one-column-image-first {
    .b-text-media__row > :first-child,
    .b-text-media__row > :last-child {
      $gutter: calc(var(--hks-gutter-x) * 0.5);
      padding-right: $gutter;
      padding-left: $gutter;
    }

    // Text sits below image — add top spacing only if media is present.
    &:not(.b-text-media--no-media) {
      .b-text-media__column--text .c-text-block {
        padding-top: $tm-column-padding-top-sm;
        padding-bottom: 0;

        @include media-breakpoint-up(md) {
          padding-top: $tm-column-padding-top;
        }
      }
    }
  }

  &--layout-one-column-text-first {
    // col-gap-* uses :first-child/:last-child, but text-first layout visually
    // stacks columns in reverse order — so padding sides must be flipped.
    // Reset overridden side back to Bootstrap's half-gutter (not 0) to preserve
    .b-text-media__row > :first-child,
    .b-text-media__row > :last-child {
      $gutter: calc(var(--hks-gutter-x) * 0.5);
      padding-right: $gutter;
      padding-left: $gutter;
    }

    // Text sits above image — add bottom spacing only if media is present.
    &:not(.b-text-media--no-media) {
      .b-text-media__column--text .c-text-block {
        padding-top: 0;
        padding-bottom: $tm-column-padding-bottom;

        @include media-breakpoint-up(md) {
          padding-bottom: $tm-column-padding-bottom;
        }
      }
    }
  }

  // One-column content width modifiers (set via section class).
  &.l-section--content-max-640,
  &.l-section--content-max-960 {
    &.b-text-media--layout-one-column-image-first,
    &.b-text-media--layout-one-column-text-first {
      .b-text-media__column--text .c-text-block {
        width: 100%;
        margin-inline-start: 0;
        margin-inline-end: auto;
      }
    }
  }

  &.l-section--content-max-640 {
    &.b-text-media--layout-one-column-image-first,
    &.b-text-media--layout-one-column-text-first {
      .b-text-media__column--text .c-text-block {
        max-width: 640px;
      }
    }
  }

  &.l-section--content-max-960 {
    &.b-text-media--layout-one-column-image-first,
    &.b-text-media--layout-one-column-text-first {
      .b-text-media__column--text .c-text-block {
        max-width: 960px;
      }
    }
  }
}