/*
  Rolled print mockup block on the artwork detail pages.
  See docs/ROLLED_PRINT_MOCKUP.md.

  The block starts collapsed and is only given height once an image is on its
  way, so a visitor who never opens the paper tab - and anyone whose request is
  refused - sees no gap at all rather than an empty frame.

  The image stays in flow the whole time and the skeleton is laid over it. An
  earlier version hid the image while loading, which stopped it loading at all:
  a lazy image with no layout box is never fetched, so its onload never fired
  and the block never flipped to ready.
*/

.rollprint-block {
  display: none;
  /* Capped so the block never goes full-bleed on a wide container. It sits in
     a full-width tab pane on v1 and under the hero on v2, so it has to bring
     its own width rather than inherit one. Matches the other preview images. */
  max-width: 750px;
  margin: 0 0 18px 0;
}

.rollprint-block.is-loading,
.rollprint-block.is-ready {
  display: block;
}

/* Positioning context for the skeleton, so the block itself stays free to
   carry padding without shifting the overlay */
.rollprint-media {
  position: relative;
}

/*
  The image reserves the block's height from the start, before it has any bytes,
  because the render is always the template's own 1000x800. Placeholder and
  finished image therefore occupy the same box and the swap shifts nothing.
*/
.rollprint-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 800;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.rollprint-block.is-ready .rollprint-image {
  opacity: 1;
}

/* Laid over the image rather than stacked above it, so the two never both
   take up space */
.rollprint-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 80%;
  overflow: hidden;
  border-radius: 4px;
  background: #f2f2f2;
}

.rollprint-block.is-ready .rollprint-skeleton {
  display: none;
}

.rollprint-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  animation: rollprint-sweep 1.25s ease-in-out infinite;
}

@keyframes rollprint-sweep {
  100% {
    transform: translateX(100%);
  }
}

.rollprint-caption {
  margin: 6px 0 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #777;
}

.rollprint-block--panel .rollprint-caption {
  margin-top: 10px;
  text-align: center;
}

/* Respect a reduced-motion preference: keep the block, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .rollprint-skeleton::after {
    animation: none;
  }
  .rollprint-image {
    transition: none;
  }
}

/*
  v2 drops it into the poster panel's stack of preview images, between the
  artwork and the wall shot. It carries that stack's framing itself rather than
  sitting inside an $_lp_item wrapper, because a wrapper would leave an empty
  grey band behind on the artworks that have no mockup.
*/
.rollprint-block--panel {
  max-width: none;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid #ebebeb;
  text-align: center;
  background: #f8f8f8;
}

/*
  v1 puts it beside the size listing rather than above it: the mockup floats
  left and the rest of the pane flows around it on the right.

  A float is used instead of a flex or grid wrapper because the pane is ~1900
  lines of markup with the listing spread across it, and boxing that up would
  be a far larger change than the layout is worth. Widen the image by raising
  the percentage - max-width is only the ceiling.
*/
@media (min-width: 992px) {
  #tabs_i2-poster .rollprint-block {
    float: left;
    width: 43%;
    margin-right: 28px;
  }

  /*
    The listing needs its own block formatting context. Without it the size rows
    are full-width blocks that do not fit next to the float, so they drop below
    it and only the first line of text wraps alongside - which looks like the
    layout is broken. flow-root makes the column sit beside the float and take
    the remaining width, with no clipping of anything inside it.
  */
  .rollprint-side {
    display: flow-root;
  }

  /* The pane has to contain the float, or the next section rides up beside it */
  #tabs_i2-poster::after {
    content: "";
    display: table;
    clear: both;
  }
}

@media (max-width: 767px) {
  .rollprint-block {
    margin-bottom: 12px;
  }
}