/* Content Image Split Flexible Section */

.content-image-split-logos {
  position: relative;
  /* Kept from the old ±60px column reveal (now replaced by the theme-wide one in
     assets/scroll-reveal.css). `clip`, not `hidden`, so position: sticky still works. */
  overflow-x: clip;
}

/* Gradient Background Support — flows from theme tokens so the
   gradient adapts if --clr-white or --clr-neutral-light is changed
   in theme settings. */
.content-image-split-logos.gradient-bg {
  background: linear-gradient(to bottom, var(--clr-white) 74%, var(--clr-neutral-light) 100%);
}

/* Grid Layout */
.content-image-split-logos__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
  width: 100%;
}

/* On mobile, content column appears first (above image/logos) */
@media (max-width: 1023px) {
  .content-image-split-logos__content-column {
    order: -1;
  }
}

/* Tablet+: switch to 2-col side-by-side layout. Previously this only kicked
   in at 1024+, which left iPad-portrait viewers with a stacked layout. */
@media (min-width: 768px) {
  .content-image-split-logos__grid {
    flex-direction: row;
    gap: var(--space-lg);
    align-items: center;
  }

  .content-image-split-logos__grid--flipped {
    flex-direction: row-reverse;
  }
}

/* Image Column */
.content-image-split-logos__image-column {
  width: 100%;
}

@media (min-width: 1024px) {
  .content-image-split-logos__image-column {
    max-width: 480px;
    flex:1;
  }
}

.content-image-split-logos__image-wrapper {
  width: 100%;
  position: relative;
  /* background-color controlled by section settings */
}

/* On mobile, override inline height to prevent image cropping */
@media (max-width: 1023px) {
  .content-image-split-logos__image-wrapper {
    height: auto !important;
    min-height: 280px;
  }
  
  .content-image-split-logos__image--fill {
    object-fit: contain;
    object-position: center;
  }
}

.content-image-split-logos__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.content-image-split-logos__image--fit {
  object-fit: contain;
}

.content-image-split-logos__image--fill {
  object-fit: cover;
}

/* Content Column */
.content-image-split-logos__content-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .content-image-split-logos__content-column {
    flex: 1;
    min-width: 0;
  }
}

/* Content Column Alignment */
.content-image-split-logos__content-column--align-left {
  align-items: flex-start;
  text-align: left;
}

.content-image-split-logos__content-column--align-center {
  align-items: center;
  text-align: center;
}

.content-image-split-logos__content-column--align-right {
  align-items: flex-end;
  text-align: right;
}

/* Heading */
.content-image-split-logos__heading-wrapper {
  margin-bottom: 0;
  line-height: 1.1;
}

/* Description */
.content-image-split-logos__description-wrapper {
  margin-bottom: 0;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Text measure cap (wide viewports only)

   Above 1280px the content column keeps growing with the container: at a 2085px
   viewport the grid is 1336px, the image column is a fixed 480px, and the content
   column lands at 832px. At 18px ('basis grotesque regular', ~9.01px average
   lowercase advance) that is ~92 characters per line, well past the comfortable
   45-75. The 52px heading was unconstrained across the same 832px, which is what
   made "Worldwide" fall onto a line of its own.

   The cap goes on the TEXT WRAPPERS, not on the column. The column keeps flex: 1,
   so the image width, the column gutter and the section's outer edges are exactly
   what they were on every instance - only the line length changes. Putting it on
   the wrappers also means it inherits the column's alignment for free: the
   column's align-items (flex-start / center / flex-end) positions the capped block,
   so left, centred and right instances all stay correct.

   1280px is the gate because that is exactly where the column first reaches the cap
   on a default-padded instance (1280 - 72 container padding - 64 inner px-xl = 1144
   grid; 1144 - 480 image - 24 gap = 640). Below it nothing can change.

   Default 640px = 71 characters per line at 18px. Editors can override per section
   with "Content Text Max Width (Desktop)", which sets --content-measure inline.
   --------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .content-image-split-logos__heading-wrapper,
  .content-image-split-logos__description-wrapper {
    max-width: var(--content-measure, 640px);
  }
}

/* Optional top alignment of the two columns. Default stays align-items: center
   (set on .content-image-split-logos__grid above) so no existing instance moves;
   this modifier only applies when an editor picks "Top" in Column Vertical
   Alignment. Gated to the breakpoint where the grid becomes a row - below 768px
   both columns are width: 100% and align-items has no visible effect anyway. */
@media (min-width: 768px) {
  .content-image-split-logos__grid--valign-top {
    align-items: flex-start;
  }
}

/* Heading/description are richtext blocks rendered into a .rte wrapper.
   Typography lives on the WRAPPER (editor-safe — the WYSIWYG editor cannot
   strip the wrapper's classes). The inner <h2>/<p> inherits font + color
   from the wrapper so typography survives even after the editor rewrites
   the inner tag to a bare <p>/<h2> on alignment/format edits. */
.content-image-split-logos__heading-wrapper > *,
.content-image-split-logos__description-wrapper > * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 !important;
}

/* Logos */
.content-image-split-logos__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-end;
  justify-content: flex-start;
  margin-top: auto;
}

/* Logos Alignment */
.content-image-split-logos__logos--align-left {
  justify-content: flex-start;
}

.content-image-split-logos__logos--align-center {
  justify-content: center;
}

.content-image-split-logos__logos--align-right {
  justify-content: flex-end;
}

/* Logos in Image Column */
.content-image-split-logos__image-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.content-image-split-logos__image-column--no-image {
  justify-content: center;
}

.content-image-split-logos__logos--image {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--clr-border-light);
}

.content-image-split-logos__logos--no-image {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

@media (min-width: 1024px) {
  .content-image-split-logos__logos--image {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
  }
  
  .content-image-split-logos__logos--no-image {
    margin-top: 0;
    padding-top: 0;
  }
}

.content-image-split-logos__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo with text layout */
.content-image-split-logos__logo--with-text {
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
  justify-content: flex-start;
}

.content-image-split-logos__logo-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.content-image-split-logos__logo-title {
  margin: 0;
  line-height: 1.3;
}

.content-image-split-logos__logo-description {
  margin: 0;
  line-height: 1.5;
  opacity: 0.85;
}

.content-image-split-logos__logo-wrapper {
  width: auto;
  height: var(--logo-size-mobile);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (min-width: 1024px) {
  .content-image-split-logos__logo-wrapper {
    width: auto;
    height: var(--logo-size-desktop);
  }
}

.content-image-split-logos__logo-img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Button Wrapper */
.content-image-split-logos__button-wrapper {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: flex-start;
  width: 100%;
  align-items: flex-start;
}

/* Reduced margin when logos are not showing - button sits closer to description */
.content-image-split-logos__button-wrapper--no-logos {
  margin-top: 0;
}

/* Button Alignment */
.content-image-split-logos__button-wrapper--align-left {
  justify-content: flex-start;
}

.content-image-split-logos__button-wrapper--align-center {
  justify-content: center;
}

.content-image-split-logos__button-wrapper--align-right {
  justify-content: flex-end;
}

.content-image-split-logos__button-wrapper .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .content-image-split-logos__button-wrapper {
    margin-top: var(--space-2xl);
    justify-content: flex-start;
  }
  
  .content-image-split-logos__button-wrapper--no-logos {
    margin-top: 0;
  }
  
  /* Maintain alignment on desktop */
  .content-image-split-logos__button-wrapper--align-center {
    justify-content: center;
  }
  
  .content-image-split-logos__button-wrapper--align-right {
    justify-content: flex-end;
  }
}

/* Background Image Handling */
.content-image-split-logos[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.content-image-split-logos .inner-container[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Bottom Fade Gradient */
.content-image-split-logos__bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}