/*
 * JUST DROPPED -- a strip torn off a page and stuck on the card.
 *
 * The plan asked for a ripped-paper comic stamp rather than a generic NEW
 * badge, so the shape is the whole point: the top and bottom edges are torn
 * with a clip-path and the ends are straight, the way a strip pulled off a
 * sheet actually comes away. A border cannot be used with clip-path -- the clip
 * cuts the border off with everything else -- so the edge is carried by a
 * drop-shadow filter, which follows the clipped silhouette instead of the box.
 *
 * The strip is ink with cream type in both positions. It lands on two different
 * grounds -- the grid card's stage is the category colour, the poster's copy
 * column is paper -- and a cream strip disappears on one while a coloured one
 * disappears on the other. Only the offset shadow changes.
 *
 * Not on the home page. Its two racks are the 3D comic covers, which are
 * painted canvas and would need the strip drawn into the artwork rather than
 * styled, and "This week's issues", whose heading already says this.
 *
 * Placement lives here too, including the `position: relative` the grid card's
 * art needs in order to hold it, so the whole feature is one file rather than a
 * block copied into catalog.css. catalog.css sets no position on that element,
 * so there is nothing here to lose a cascade fight with.
 */

.drop-stamp {
  display: inline-block;
  padding: 9px clamp(11px, 1.3vw, 16px) 11px;
  color: var(--paper, #f2efe9);
  background: var(--ink, #0c0b0e);
  font-family: var(--font-display);
  /* Two grid cards fit across a phone, and at a fixed .8rem the strip took
     three quarters of the art it is stuck to. It scales down with the viewport
     instead, so it stays a strip on a card rather than a banner across one. */
  font-size: clamp(.6rem, 2.1vw, .8rem);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Decoration under a link on every surface it appears on. Without this the
     strip is a dead patch in the middle of the card's own tap target. */
  pointer-events: none;
  /* Both long edges torn, both ends straight -- the way a strip pulled off a
     sheet actually comes away. The padding above is what keeps the teeth off
     the lettering; deepening one without the other eats the type. */
  clip-path: polygon(
    0% 14%, 8% 1%, 17% 10%, 28% 2%, 40% 11%, 52% 2%, 64% 10%, 75% 1%, 87% 9%, 95% 2%, 100% 12%,
    100% 88%, 92% 99%, 81% 90%, 69% 100%, 56% 89%, 44% 99%, 32% 90%, 20% 100%, 9% 90%, 0% 97%
  );
}

/* The grid card: pinned to the art, which is already the category colour, so
   the shadow is a plain dark offset that works on all seven of them. */
.catalog-compact-stage { position: relative; }
.catalog-compact-stage .drop-stamp {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 8px;
  transform: rotate(-2.6deg);
  filter: drop-shadow(3px 4px 0 rgba(17, 16, 21, .4));
}

/* The poster: in the flow above the format line, not slammed on the cover art.
   All four corners of that art are already taken -- issue tag, corner box,
   price circle, barcode -- and the sold-out slam lands across the middle. */
.product-poster-copy .drop-stamp {
  margin-bottom: 12px;
  transform: rotate(-1.4deg);
  filter: drop-shadow(3px 4px 0 var(--accent, var(--brand)));
}

/* The quick-look panel: the third place the strip renders, and the one that had
   no rule at all. `.product-peek-art` is a grid with `place-items: center`, so
   an unplaced strip is not a badge on the artwork -- it is an extra ROW. The
   photo squeezed into row one and the torn strip sat centred beneath it.

   Bottom left, because the top left of this panel is already the issue tag
   (.product-peek-issue) and the bottom right is Boom's Pick. */
.product-peek-art .drop-stamp {
  position: absolute;
  z-index: 3;
  bottom: 9px;
  left: 8px;
  transform: rotate(-2.6deg);
  filter: drop-shadow(3px 4px 0 rgba(17, 16, 21, .4));
}

/* The pull-list row: a 52x68 thumb, the smallest ground this strip lands on.
   Same top-left corner as the grid card, cut down to fit -- at the grid
   card's own padding the strip alone would be wider than the thumb. */
.catalog-pull-thumb { position: relative; }
.catalog-pull-thumb .drop-stamp {
  position: absolute;
  z-index: 3;
  top: 3px;
  left: 3px;
  padding: 2px 5px 3px;
  font-size: .38rem;
  transform: rotate(-2.6deg);
  filter: drop-shadow(1.5px 2px 0 rgba(17, 16, 21, .4));
}