/* Module wrapper - tall scroll runway */
.blox-tr-body {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.blox-tr-body *,
.blox-tr-body *::before,
.blox-tr-body *::after {
  box-sizing: border-box;
}

/* Sticky container - pins text to viewport center */
.blox-tr-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer container - respects container width setting */
.blox-tr-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* Layout wrapper - flexbox for split mode */
.blox-tr-layout {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

/* Text column - full width by default */
.blox-tr-text-col {
  flex: 1;
  min-width: 0;
}

/* Content area - respects max content width */
.blox-tr-content {
  margin: 0 auto;
}

/* -- Image column (only when enabled) -- */
.blox-tr-image-col {
  flex: 1;
  min-width: 0;
}

.blox-tr-image-col {
  align-self: stretch;
}

.blox-tr-side-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blox-tr-side-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Image on left - reverse the order */
.blox-tr-image-left .blox-tr-layout {
  flex-direction: row-reverse;
}

/* Rich text base styles - inherits font from theme */
.blox-tr-content p,
.blox-tr-content h1,
.blox-tr-content h2,
.blox-tr-content h3,
.blox-tr-content h4,
.blox-tr-content h5,
.blox-tr-content h6 {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.4;
}

.blox-tr-content p {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1em 0;
}

.blox-tr-content p:last-child {
  margin-bottom: 0;
}

/* Word spans injected by JS */
.blox-tr-word {
  position: relative;
  display: inline-block;
  margin: 0 0.2em;
  transition: opacity 0.15s ease;
}

/* Reduced motion - show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .blox-tr-word {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Static fallback when motion is reduced via theme setting */
.blox-tr-no-motion .blox-tr-sticky {
  position: relative;
}

.blox-tr-no-motion .blox-tr-word {
  opacity: 1 !important;
}

.blox-tr-no-motion.blox-tr-body {
  height: auto !important;
}

/* Responsive text sizing */
@media (min-width: 768px) {
  .blox-tr-content p {
    font-size: 2rem;
  }
}

@media (min-width: 1024px) {
  .blox-tr-content p {
    font-size: 2.5rem;
  }
}

/* -- Mobile: image layout (below 768px) -- */
@media (max-width: 767px) {
  /* Stack columns vertically */
  .blox-tr-has-image .blox-tr-layout {
    flex-direction: column;
  }

  .blox-tr-has-image .blox-tr-text-col,
  .blox-tr-has-image .blox-tr-image-col {
    flex: none;
    width: 100%;
  }

  .blox-tr-side-image img {
    width: 100% !important;
    height: 50vw;
  }

  /* Hide image on mobile (default) */
  .blox-tr-mobile-hidden .blox-tr-image-col {
    display: none;
  }

  /* Image above text */
  .blox-tr-mobile-above .blox-tr-layout {
    flex-direction: column-reverse;
  }

  /* Image below text - already stacked correctly */
}

/* Mobile padding */
@media (max-width: 575px) {
  .blox-tr-container {
    padding: 0 16px;
  }

  .blox-tr-content p {
    font-size: 1.25rem;
  }
}