/* Content column: 20px left/right padding, vertically centred beside the image. */
.jarvis-card-full-image__content {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Desktop: image fills its half on all sides and matches the content height.
   The Bootstrap row already makes both columns equal height (flex stretch), so
   the media column takes the content column's height. The <img> is absolutely
   positioned to fill that column — this ignores the height of any wrapper divs
   the {{ media }} slot injects, which would otherwise break a height:100% chain.
   ponytail: absolute-fill, not a height:100% cascade — robust to slot wrappers. */
@media (min-width: 768px) {
  .jarvis-card-full-image__media {
    position: relative;
    overflow: hidden;
  }
  .jarvis-card-full-image__media .jarvis-image,
  .jarvis-card-full-image__media figure {
    margin: 0;
  }
  .jarvis-card-full-image__media .jarvis-image__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Soft-fade the image edge that meets the text (~40px). Default = image left,
     so fade its right edge; flipped = image right, so fade its left edge.
     Desktop only — mobile stacks, so no fade. */
  .jarvis-card-full-image--fade .jarvis-card-full-image__media .jarvis-image__img {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 80px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 80px), transparent);
  }
  .jarvis-card-full-image--fade.jarvis-card-full-image--flip .jarvis-card-full-image__media .jarvis-image__img {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 80px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 80px), transparent);
  }
}