/* ICS torn-paper card (CSS only). .ics-torn-card = card box whose paper (--yellow-0) is a masked ::before layer, so anything
   that is a direct child (text, photo, the year tab) is NOT clipped by the deckle outline.
   Masks: uploads/ics-torn/card-torn-mask-{a,b,c}-r2.svg (1000x1000, preserveAspectRatio none, one simple closed outline,
   edge inset <=1.3% of side, tapered to 0 at corners; generator projects/ics/card-torn-mask-gen.py, checker torn-svg-check.py).
   Variant a/b/c by sibling position (nth-child), so neighbouring cards differ.
   Tab (>=992px only): .ics-torn-card > .ics-card > .ics-tag is pulled out to sit on the top-right edge, above the paper.
   No px/rem sizes here except the 2px focus ring (outline) and the 4px hover lift (decor). */
.ics-torn-card {
	position: relative;
	isolation: isolate;
	transition: transform 220ms ease;
}
.ics-torn-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--yellow-0);
	pointer-events: none;
	-webkit-mask: url(/wp-content/uploads/ics-torn/card-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/card-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
}
.ics-torn-card:nth-child(3n+2)::before {
	-webkit-mask: url(/wp-content/uploads/ics-torn/card-torn-mask-b-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/card-torn-mask-b-r2.svg) center / 100% 100% no-repeat;
}
.ics-torn-card:nth-child(3n+3)::before {
	-webkit-mask: url(/wp-content/uploads/ics-torn/card-torn-mask-c-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/card-torn-mask-c-r2.svg) center / 100% 100% no-repeat;
}
/* outside-of-deckle overlay: page-coloured layer with the mask inverted (exclude), drawn over the card edge so content
   (photo, caption) is cut to the torn outline; tab is outside the box so it is not covered. Override --torn-bg on cards
   that sit on a non-cream band. */
.ics-torn-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--torn-bg, var(--neutral-50));
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
	mask-composite: exclude;
}
.ics-torn-card:nth-child(3n+2)::after {
	-webkit-mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-b-r2.svg) center / 100% 100% no-repeat;
	mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-b-r2.svg) center / 100% 100% no-repeat;
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.ics-torn-card:nth-child(3n+3)::after {
	-webkit-mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-c-r2.svg) center / 100% 100% no-repeat;
	mask: linear-gradient(#000 0 0), url(/wp-content/uploads/ics-torn/card-torn-mask-c-r2.svg) center / 100% 100% no-repeat;
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
/* H90: hover lift removed; hover look = .ics-card-hover (uploads/ics-motion/ics-card-hover.css) */
/* :has() rules are separate from the :focus-visible rules: one selector list holding :has() is dropped whole where :has() is unsupported */
.ics-torn-card:focus-visible {
	outline: 2px solid var(--neutral-1000);
	outline-offset: 2px;
	transform: none;
}
.ics-torn-card:has(:focus-visible) {
	outline: 2px solid var(--neutral-1000);
	outline-offset: 2px;
	transform: none;
}
.ics-torn-card:focus-visible::before {
	-webkit-mask: none;
	mask: none;
}
.ics-torn-card:has(:focus-visible)::before {
	-webkit-mask: none;
	mask: none;
}
.ics-torn-card:focus-visible::after {
	display: none;
}
.ics-torn-card:has(:focus-visible)::after {
	display: none;
}
/* desktop year tab: static inner card so the tag positions against the torn card, sitting on the top-right edge */
@media (min-width: 992px) {
	.ics-torn-card > .ics-card { position: static; }
	.ics-torn-card > .ics-card > .ics-tag {
		position: absolute;
		top: 0;
		right: 0;
		transform: translateY(-100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ics-torn-card { transition: none; }
	.ics-torn-card:hover { transform: none; }
}
@media print {
	.ics-torn-card::before { -webkit-mask: none; mask: none; }
	.ics-torn-card::after { display: none; }
}
@media (forced-colors: active) {
	.ics-torn-card::before, .ics-torn-card::after { display: none; }
	.ics-torn-card { border: 1px solid CanvasText; background: Canvas; }
}