/*
 * Installation Guide — subtle repeated "primetv.ca" watermark on the device TUTORIAL cards only.
 * Loaded only on /installation-guide/ (inc/assets.php). Scoped to the nine #sn-*-guide tutorial
 * containers, so the hero, intro, "Before you start", device selector, troubleshooting, FAQ and
 * footer are untouched. pointer-events:none keeps every link, button, text selection, scroll and
 * touch working.
 *
 * Two coordinated layers, one pattern (primetv.ca, Barlow Condensed 700, -35°, slate #334155, tile
 * of 14.4em × 9.6em with two staggered words):
 *  - written content: one ::after overlay per card repeating prime-tv-watermark-tile.png (4.5%);
 *  - screenshots: the same pattern is baked into the image pixels (slightly fainter), so the
 *    screenshots are lifted above the overlay and never get a second, CSS watermark.
 */

#sn-firetv-guide,
#sn-androidtv-guide,
#sn-formuler-guide,
#sn-smarttv-guide,
#sn-roku-guide,
#sn-apple-guide,
#sn-windows-guide,
#sn-androidphone-guide,
#sn-buzztv-guide {
  position: relative; /* Positioning context for the overlay (verified: no descendant depends on it). */
  isolation: isolate;
}

#sn-firetv-guide::after,
#sn-androidtv-guide::after,
#sn-formuler-guide::after,
#sn-smarttv-guide::after,
#sn-roku-guide::after,
#sn-apple-guide::after,
#sn-windows-guide::after,
#sn-androidphone-guide::after,
#sn-buzztv-guide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: url("../images/watermark/prime-tv-watermark-tile.png");
  background-repeat: repeat;
  background-size: 317px 211px;
  background-position: 0 0;
}

/* Screenshots already carry the watermark in their pixels: keep them above the overlay. */
:is(#sn-firetv-guide, #sn-androidtv-guide, #sn-formuler-guide, #sn-smarttv-guide, #sn-roku-guide, #sn-apple-guide, #sn-windows-guide, #sn-androidphone-guide, #sn-buzztv-guide) :is(.sn-ig-shot, .sn-ig-shot-sm) > img {
  position: relative;
  z-index: 6;
}

@media (max-width: 600px) {
  #sn-firetv-guide::after,
  #sn-androidtv-guide::after,
  #sn-formuler-guide::after,
  #sn-smarttv-guide::after,
  #sn-roku-guide::after,
  #sn-apple-guide::after,
  #sn-windows-guide::after,
  #sn-androidphone-guide::after,
  #sn-buzztv-guide::after {
    background-size: 216px 144px;
  }
}

@media print {
  #sn-firetv-guide::after,
  #sn-androidtv-guide::after,
  #sn-formuler-guide::after,
  #sn-smarttv-guide::after,
  #sn-roku-guide::after,
  #sn-apple-guide::after,
  #sn-windows-guide::after,
  #sn-androidphone-guide::after,
  #sn-buzztv-guide::after {
    display: none;
  }
}