/**
 * Coming-soon resource cards.
 *
 * New classes only — the child theme owns .reslist, .rescard, .rcover, .rname,
 * .rfacts and .dl, and none of them are touched here.
 *
 * The fade is decoration. The badge is the message, and it carries real text,
 * because a faded thumbnail says nothing to a screen reader, nothing on a
 * greyscale print, and very little on a phone in sunlight.
 */

.rescard .rart {
	display: block;
	position: relative;
}

.rescard.is-soon .rcover {
	filter: grayscale( 0.35 );
	opacity: 0.4;
}

.rescard.is-soon .rcover-none {
	opacity: 0.4;
}

.rflag {
	background: #2e1b29;
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	left: 50%;
	letter-spacing: 0.04em;
	line-height: 1.2;
	padding: 8px 16px;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 50%;
	transform: translate( -50%, -50% );
	white-space: nowrap;
}

/* The title and facts stay at full strength. Fading them would make the card
   harder to read for no gain — the point is that this item exists and is
   worth waiting for, so its name has to be legible. */
.rescard.is-soon .rname {
	color: inherit;
}

.rescard.is-soon .soon {
	color: #5a4553;
	font-weight: 600;
}

@media ( prefers-reduced-motion: no-preference ) {
	.rescard .rcover {
		transition: opacity 0.2s ease;
	}
}

@media print {
	/* On paper the fade is unreliable, so the badge does the work alone. */
	.rescard.is-soon .rcover {
		filter: none;
		opacity: 0.7;
	}

	.rflag {
		background: #000;
		color: #fff;
	}
}