/* ============================================================
   Difference band — dark image + benefit list band. Tokens only.
   ============================================================ */

.lh-difference {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  overflow: hidden;
}

.lh-difference__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
  padding-block: var(--section-pad-top) var(--section-pad-bottom);
}

/* Media */
.lh-difference__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--lh-img-loader, none), var(--surface-image);
}
.lh-difference__media-link { display: block; height: 100%; }
.lh-difference__img,
.lh-difference__placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.lh-difference__media-link .lh-difference__img { transition: transform var(--duration-slow) var(--ease-out); }
.lh-difference__media-link:hover .lh-difference__img { transform: scale(1.04); }
.lh-difference__media-link:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Image-only mode — single full-bleed editorial banner, no copy column.
   The image must span the whole section edge-to-edge: drop the inner's
   max-width container + all padding so there is zero gap between the section
   container and the image. */
/* ...but not vertically: with no padding the banner sat one section-pad from the
   next title ("Trending Now"), barely more than that title's gap to its own grid.
   A section's worth of margin (outside the dark background) restores the rhythm. */
.lh-difference--image-only { margin-block: var(--section-pad-top) var(--section-pad-bottom); }
.lh-difference--image-only .lh-difference__inner {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
}
.lh-difference--image-only .lh-difference__media,
.lh-difference--image-only .lh-difference__img,
.lh-difference--image-only .lh-difference__placeholder-svg { border-radius: 0; }
.lh-difference--image-only .lh-difference__img,
.lh-difference--image-only .lh-difference__placeholder-svg { aspect-ratio: 16 / 6; }
@media (max-width: 749px) {
  .lh-difference--image-only .lh-difference__img,
  .lh-difference--image-only .lh-difference__placeholder-svg { aspect-ratio: 4 / 3; }
}

/* Background fit modes for image-only mode (merchant setting). */
.lh-difference--image-only[data-image-fit="cover"] .lh-difference__img { object-fit: cover; }
.lh-difference--image-only[data-image-fit="contain"] .lh-difference__img { object-fit: contain; }
.lh-difference--image-only[data-image-fit="fill"] .lh-difference__img { object-fit: fill; }
/* Auto — let the image keep its natural ratio; the band height follows it (no crop). */
.lh-difference--image-only[data-image-fit="auto"] .lh-difference__img {
  height: auto;
  aspect-ratio: auto;
  object-fit: fill;
}

/* Content */
.lh-difference__eyebrow { color: var(--color-accent); margin-bottom: var(--space-3); }
.lh-difference__heading {
  margin: 0 0 var(--space-4);
  font-size: var(--font-h1);
  color: var(--text-on-dark);
}
.lh-difference__subheading {
  margin: 0 0 var(--space-8);
  max-width: 52ch;
  font-size: var(--font-body-lg);
  line-height: var(--leading-body);
  color: var(--text-on-dark);
  opacity: 0.86;
}

/* Feature list */
.lh-difference__features {
  display: grid;
  gap: var(--space-6);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.lh-difference__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.lh-difference__feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--lh-white);
  border-radius: var(--radius-sm);
}
.lh-difference__feature-text { display: flex; flex-direction: column; gap: var(--space-1); }
.lh-difference__feature-title {
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  font-weight: var(--weight-semibold);
  color: var(--text-on-dark);
}
.lh-difference__feature-desc {
  font-size: var(--font-body-sm);
  line-height: var(--leading-snug);
  color: var(--text-on-dark);
  opacity: 0.78;
}

.lh-difference__cta { margin-top: var(--space-2); }

/* Desktop two-column with image position */
@media (min-width: 768px) {
  .lh-difference__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  .lh-difference--media-right .lh-difference__media { order: 2; }
}