/* ICS torn photo (CSS only). Reusable class: .ics-torn-photo on a WRAPPER (figure/div/Bricks div) around one <img>.
   Three layers, outermost first:
   1. ::before  = GREY tear (outermost) (mask = photo mask, inset -2%)            -> white edge, visible on cream/yellow
   2. ::after   = smaller paper-white tear just outside the photo (inset -0.8%),
                  mask = the next variant (a->b, b->c, c->a) so the two edges differ
   3. img       = photo cut by its own mask (inset 0)
   Wrapper filter = soft drop-shadow (0 2px 6px rgba .12) so the edge reads on white, cream and yellow backgrounds.
   Masks: uploads/ics-torn/torn-mask-{a,b,c}-r2.svg (1000x625, preserveAspectRatio none, one simple outline, edge bite
   <=3.6% of height, tapered to 0 at corners; generator projects/ics/torn-mask-gen.py, checker projects/ics/torn-svg-check.py).
   Variant by sibling position (nth-child 3n+2 = b, 3n+3 = c). Mask stretches 100% 100%.
   Do not put the class on an <img> itself (no ::before there): use the wrapper.
   No px/rem/em sizes. Colours from tokens (paper = --yellow-0 #FFFFFF, grey = --neutral-300 #c9c6bf). */
.ics-torn-photo {
	--ics-tp-mask: url(/wp-content/uploads/ics-torn/torn-mask-a-r2.svg);
	--ics-tp-grey: url(/wp-content/uploads/ics-torn/torn-mask-b-r2.svg);
	position: relative;
	isolation: isolate;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}
.ics-torn-photo:nth-child(3n+2) {
	--ics-tp-mask: url(/wp-content/uploads/ics-torn/torn-mask-b-r2.svg);
	--ics-tp-grey: url(/wp-content/uploads/ics-torn/torn-mask-c-r2.svg);
}
.ics-torn-photo:nth-child(3n+3) {
	--ics-tp-mask: url(/wp-content/uploads/ics-torn/torn-mask-c-r2.svg);
	--ics-tp-grey: url(/wp-content/uploads/ics-torn/torn-mask-a-r2.svg);
}
.ics-torn-photo::before,
.ics-torn-photo::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
.ics-torn-photo::before {
	inset: -2%;
	background: var(--neutral-300, #c9c6bf);
	-webkit-mask: var(--ics-tp-grey) center / 100% 100% no-repeat;
	mask: var(--ics-tp-grey) center / 100% 100% no-repeat;
}
.ics-torn-photo::after {
	inset: -0.8%;
	background: var(--yellow-0, #FFFFFF);
	-webkit-mask: var(--ics-tp-mask) center / 100% 100% no-repeat;
	mask: var(--ics-tp-mask) center / 100% 100% no-repeat;
}
.ics-torn-photo > img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask: var(--ics-tp-mask) center / 100% 100% no-repeat;
	mask: var(--ics-tp-mask) center / 100% 100% no-repeat;
}
/* collage art (hero-collage-*, mission-s2-photo-*) is already torn: no second tear, no shadow */
.ics-torn-photo:has(> img[src*="hero-collage"]),
.ics-torn-photo:has(> img[src*="mission-s2-photo"]) {
	filter: none;
}
.ics-torn-photo:has(> img[src*="hero-collage"])::before,
.ics-torn-photo:has(> img[src*="hero-collage"])::after,
.ics-torn-photo:has(> img[src*="mission-s2-photo"])::before,
.ics-torn-photo:has(> img[src*="mission-s2-photo"])::after {
	display: none;
}
.ics-torn-photo:has(> img[src*="hero-collage"]) > img,
.ics-torn-photo:has(> img[src*="mission-s2-photo"]) > img {
	-webkit-mask: none;
	mask: none;
}
/* no-:has() fallback: ics-motion-fallback.php adds .ics-torn-photo--art to wrappers of collage art (same rules as the :has() block) */
.ics-torn-photo.ics-torn-photo--art { filter: none; }
.ics-torn-photo.ics-torn-photo--art::before,
.ics-torn-photo.ics-torn-photo--art::after { display: none; }
.ics-torn-photo.ics-torn-photo--art > img { -webkit-mask: none; mask: none; }
@media print {
	.ics-torn-photo { filter: none; }
	.ics-torn-photo::before, .ics-torn-photo::after { display: none; }
	.ics-torn-photo > img { -webkit-mask: none; mask: none; }
}
@media (forced-colors: active) {
	.ics-torn-photo { filter: none; }
	.ics-torn-photo::before, .ics-torn-photo::after { display: none; }
	.ics-torn-photo > img { -webkit-mask: none; mask: none; }
}