/**
 * Zone Six Worlds — the world cards and the threads.
 *
 * "One from each universe": six cards, each wearing its own world. The banner carries
 * the world's texture and chip; the body carries the world's display face and accent.
 * The card shapes themselves differ per world — Marvel is a bordered comic panel,
 * LitRPG is a save-file window, Wheel of Time has its inner gold rule — because a card
 * that only changed colour wouldn't read as a different world.
 */

.zsw-cards,
.zsw-threads {
	padding: clamp(40px, 6vw, 80px) var(--zsw-gut) 0;
}

.zsw-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--zsw-cols, 3), minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.zsw-cards__grid + .zsw-ad {
	margin-block: clamp(20px, 3vw, 36px);
}

.zsw-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	color: var(--zsw-ink);
	overflow: hidden;
}

.zsw-card__banner {
	position: relative;
	display: block;
	height: 170px;
	overflow: hidden;
	isolation: isolate;
	flex: 0 0 auto;
}

.zsw-card__chip {
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 3;
}

/**
 * A card banner is a still frame of its world until you point at it.
 *
 * Each banner carries the same backdrop as its world's stage — the Doctor Who card
 * alone spins three blurred vortex layers inside a 170px strip — and six of them sat
 * under the Dial all animating at once. A paused animation is rasterised once and then
 * costs almost nothing; a running blurred one is repainted every frame. So the cards
 * hold still, and a card comes alive on hover or keyboard focus, which is also the
 * moment the motion means something: "this one, here".
 *
 * Same inherited --zsw-play mechanism as the Dial; see zs-dial.css.
 */
.zsw-card__banner {
	--zsw-play: paused;
}

.zsw-card:hover .zsw-card__banner,
.zsw-card:focus-visible .zsw-card__banner {
	--zsw-play: running;
}

.zsw-card__banner *,
.zsw-card__banner *::before,
.zsw-card__banner *::after {
	animation-play-state: var(--zsw-play, paused) !important;
}

/**
 * The post's featured image, under the world's texture.
 *
 * Held back to 78% so the texture over it still reads as the world's, and so the chip
 * in the corner keeps its contrast whatever the photograph happens to be — a pale film
 * poster would otherwise swallow it.
 */
.zsw-card__photo {
	opacity: .78;
}

.zsw-card:hover .zsw-card__photo {
	opacity: .92;
	transition: opacity .35s ease;
}

.zsw-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 18px 20px;
}

.zsw-card__date {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--zsw-accent, var(--zsw-ink-faint));
}

.zsw-card__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

/* --- per-world card shapes ------------------------------------------------ */

/* Marvel: the comic panel, thick black border and a hard shadow. */
.zsw-card--marvel {
	background: #fff;
	border: 3px solid #14121a;
	box-shadow: 7px 7px 0 #14121a;
}

.zsw-card--marvel .zsw-card__banner {
	border-bottom: 3px solid #14121a;
}

.zsw-card--marvel .zsw-card__title {
	font-size: 30px;
	font-weight: 400;
	line-height: .98;
}

.zsw-card--marvel.lift:hover {
	transform: translate(-3px, -3px);
	box-shadow: 11px 11px 0 #14121a;
}

/* Doctor Who: glass over the vortex. */
.zsw-card--doctor-who {
	background: #0d0b24;
	border: 1px solid #534AB7;
	box-shadow: 0 14px 34px rgba(38, 33, 92, .35);
	color: #e8e6f7;
}

.zsw-card--doctor-who .zsw-card__title {
	color: #fff;
}

.zsw-card--doctor-who .zsw-card__date {
	font-size: 9px;
	letter-spacing: 2px;
	color: #AFA9EC;
}

/* BattleTech: the cut-corner armour plate. */
.zsw-card--battletech {
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 5px),
		linear-gradient(180deg, #3b4240 0%, #252a29 100%);
	clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
	color: #e6ecea;
}

.zsw-card--battletech .zsw-card__body {
	padding: 16px 22px 24px;
}

.zsw-card--battletech .zsw-card__date {
	color: #3be0a0;
}

/* Dune: sand, not glass. */
.zsw-card--dune {
	background: #efd9b0;
	color: #2a1208;
}

.zsw-card--dune .zsw-card__date {
	font-size: 8px;
	letter-spacing: 3px;
	color: #8a3a16;
}

/* Wheel of Time: the gold rule inset inside the border. */
.zsw-card--wheel-of-time {
	background: #06203d;
	border: 1px solid #c9973a;
	outline: 1px solid rgba(201, 151, 58, .35);
	outline-offset: -7px;
	color: #f3e3b5;
}

.zsw-card--wheel-of-time .zsw-card__date {
	color: #c9973a;
}

.zsw-card--wheel-of-time .zsw-card__title {
	font-size: 24px;
	line-height: 1.15;
}

/* LitRPG: the save-file window, chunky pixel border. */
.zsw-card--litrpg {
	background: rgba(8, 14, 4, .95);
	border: 4px solid #97C459;
	box-shadow: 0 0 0 4px #0b1206, 0 0 0 8px #3d5e18;
	color: #d8f0b0;
	margin: 8px;
}

.zsw-card--litrpg .zsw-card__date {
	font-size: 20px;
	letter-spacing: 0;
	text-transform: none;
	color: #97C459;
}

.zsw-card--litrpg .zsw-card__title {
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
}

/* --- the threads ---------------------------------------------------------- */

.zsw-threads {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: clamp(20px, 3vw, 28px);
	align-items: start;
}

.zsw-threads__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zsw-threads__lede {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--zsw-ink-soft);
}

.zsw-threads__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.zsw-thread {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: #fff;
	/* Explicit, because the base link rule is now a zero-specificity default and would
	 * otherwise tie with the theme's own link colour. */
	color: var(--zsw-ink);
	border: 2px solid var(--zsw-ink);
	transition: transform .25s ease, box-shadow .25s ease;
}

.zsw-thread:hover {
	transform: translateY(-4px);
	box-shadow: 5px 5px 0 var(--zsw-ink);
}

.zsw-thread__name {
	font-size: 24px;
	line-height: 1.05;
	min-width: 0;
}

@media (max-width: 900px) {
	.zsw-cards__grid {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}

	.zsw-threads {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.zsw-cards__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The rotations and hard offsets cost horizontal room a phone doesn't have. */
	.zsw-card--marvel {
		box-shadow: 4px 4px 0 #14121a;
	}

	.zsw-card--litrpg {
		margin: 4px;
		box-shadow: 0 0 0 4px #0b1206;
	}
}