/*
 * Live CSS split (triptych) preview.
 *
 * Renders a 3-panel split of an artwork purely in CSS: three slices of the
 * same image positioned with background-position 0% / 50% / 100% over a
 * subtle wall background. Replaces the pre-generated ImageMagick thumbnails
 * (uploads/split/split3_*.jpg) so no image file has to exist per artwork.
 *
 * Markup is emitted by hp_split_preview() in hp_helper.php:
 *   <span class="splitprev" style="width:..px;height:..px;">
 *     <i style="background-image:url('artwork.jpg')"></i> (x3)
 *   </span>
 *
 * The container keeps the artwork's own aspect ratio (width = height x w/h),
 * so the slices reassemble the full image without cropping or distortion.
 */

.splitprev {
  display: inline-flex;
  gap: 4%;
  padding: 6px 7px;
  background: linear-gradient(180deg, #f7f5f2 0%, #e9e6e1 100%);
  border-radius: 4px;
  box-sizing: content-box;
  vertical-align: middle;
  margin-right: 8px;
}

.splitprev i {
  flex: 1 1 0;
  display: block;
  background-repeat: no-repeat;
  /* Panel width fraction p = (1 - 2*0.04) / 3 = 0.30667 with a 4% gap, so
     background-size-x = 100 / p = 326.1% makes the three slices line up as
     one continuous image across the gaps (positions 0% / 50% / 100%). */
  background-size: 326.1% 100%;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.35);
  border-radius: 1px;
}

.splitprev i:nth-child(1) { background-position: 0% 50%; }
.splitprev i:nth-child(2) { background-position: 50% 50%; }
.splitprev i:nth-child(3) { background-position: 100% 50%; }