/* Caveman Circus Dad Joke. Phones and narrow columns: Rok on top, the joke on a stone card. 760px and up: the full banner with the joke on the slab. */
.ccdj {
	--ccdj-ink: #1A1814;
	--ccdj-stone: #F1E3C6;
	--ccdj-red: #EE6A5E;
	--ccdj-green: #8DCB67;
	container: ccdj / inline-size;
	margin: 40px 0 8px;
	padding-top: 22px;
	border-top: 2px dashed #CFC8BC;
	font-family: var(--cc-font, Rubik, system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
	color: var(--ccdj-ink);
	line-height: 1.25;
}
.ccdj-kick {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cc-blue, #1F5BE0);
}
.ccdj .ccdj-art {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin: 0 auto -4px;
	position: relative;
	z-index: 1;
	border: 0;
	box-shadow: none;
}
.ccdj-slab {
	position: relative;
	background: var(--ccdj-stone);
	border: 3px solid var(--ccdj-ink);
	box-shadow: inset 0 -5px 0 rgba(140, 110, 70, .22), 4px 4px 0 var(--ccdj-ink);
	padding: 18px;
}
.ccdj-q {
	margin: 0;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -.005em;
}
.ccdj-pl {
	margin: .45em 0 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
}
.ccdj-btns {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	font-size: 16px;
}
.ccdj .ccdj-b {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	min-width: 0;
	margin: 0;
	padding: .5em .6em;
	border: 2.5px solid var(--ccdj-ink);
	border-radius: 0;
	box-shadow: 0 3px 0 var(--ccdj-ink);
	font-family: inherit;
	font-size: 1em;
	font-weight: 800;
	line-height: 1;
	color: var(--ccdj-ink);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: transform .08s, box-shadow .08s;
}
.ccdj .ccdj-b:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ccdj-ink); }
.ccdj .ccdj-b:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ccdj-ink); }
.ccdj .ccdj-b:disabled { cursor: wait; opacity: .8; }
.ccdj .ccdj-b svg { width: 1.45em; height: 1.45em; flex: none; display: block; }
.ccdj .ccdj-g { background: var(--ccdj-red); }
.ccdj .ccdj-h { background: var(--ccdj-green); }

.ccdj-res { margin-top: 14px; font-size: 15px; }
.ccdj-res[hidden], .ccdj.is-voted .ccdj-btns { display: none; }
.ccdj-bar {
	display: flex;
	height: 2em;
	border: 2.5px solid var(--ccdj-ink);
	box-shadow: 0 3px 0 var(--ccdj-ink);
	overflow: hidden;
	font-weight: 800;
	background: var(--ccdj-green);
}
.ccdj-bar span {
	display: flex;
	align-items: center;
	padding: 0 .6em;
	white-space: nowrap;
	transition: width .6s ease;
}
.ccdj-bg { background: var(--ccdj-red); width: 50%; flex: none; }
.ccdj-bar span:empty { padding: 0; }
.ccdj-bh { flex: 1; justify-content: flex-end; }
.ccdj-note { margin-top: .6em; font-size: .85em; font-weight: 600; color: #5C554B; }

/* Wide: the full banner */
@container ccdj (min-width: 760px) {
	.ccdj-ban {
		position: relative;
		aspect-ratio: 1700 / 449;
		background: url(dj-banner.webp) center / 100% 100% no-repeat;
	}
	.ccdj .ccdj-art { display: none; }
	.ccdj-slab {
		position: absolute;
		left: 58.6%;
		top: 16.5%;
		width: 36.5%;
		height: 72%;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		container: ccdjslab / inline-size;
	}
	.ccdj-in {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.ccdj-q { font-size: 7.4cqw; line-height: 1.12; }
	.ccdj-pl { font-size: 6.2cqw; line-height: 1.2; }
	.ccdj-btns { gap: 4cqw; margin-top: 6cqw; font-size: 5.6cqw; }
	.ccdj-res { margin-top: 5cqw; font-size: 5cqw; }
	.ccdj--long .ccdj-q { font-size: 6.4cqw; }
	.ccdj--long .ccdj-pl { font-size: 5.6cqw; }
	.ccdj--long .ccdj-btns { margin-top: 4.5cqw; font-size: 5.2cqw; }
	.ccdj--long .ccdj-res { margin-top: 4cqw; font-size: 4.6cqw; }
	.ccdj--xlong .ccdj-q { font-size: 5.6cqw; }
	.ccdj--xlong .ccdj-pl { font-size: 5cqw; }
	.ccdj--xlong .ccdj-btns { margin-top: 3.5cqw; font-size: 4.8cqw; }
	.ccdj--xlong .ccdj-res { margin-top: 3cqw; font-size: 4.2cqw; }
}

@media (prefers-reduced-motion: reduce) {
	.ccdj .ccdj-b, .ccdj-bar span { transition: none; }
}