/* Ruby Dew Fun Facts board */
.rdff {
	--rdff-red: #b31809;
	--rdff-ink: #2e2e2e;
	--rdff-text: #424242;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: stretch;
	width: 100%;
}

.rdff-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.rdff-badge {
	display: inline-block;
	margin-bottom: 20px;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(255, 0, 238, 0.26);
	color: #9e0d00;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Stacked slides: all share one grid cell so the board never jumps in height. */
.rdff-texts,
.rdff-frame {
	display: grid;
}

.rdff-texts {
	flex: 1 1 auto;
	grid-template-rows: minmax(0, 1fr);
	width: 100%;
	min-height: 0;
}

.rdff-text,
.rdff-image {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.rdff-text.is-active,
.rdff-image.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0s;
}

.rdff-text {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.rdff-title {
	margin: 0 0 16px;
	color: var(--rdff-ink);
	font-family: "Noto Serif TC", Georgia, serif;
	font-size: 4.2rem;
	font-style: italic;
	font-weight: 900;
	line-height: 1.25;
	text-shadow: 2px 2px 2px #e0e0e0;
}

.rdff-title-red {
	color: var(--rdff-red);
}

/* The fact fills the space left under the title; script sizes its text to fit. */
.rdff-fact {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.rdff-fact p {
	margin: 0;
	color: var(--rdff-text);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.55;
}

.rdff-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

.rdff-btn {
	display: inline-block;
	padding: 14px 30px;
	border: 2px solid var(--rdff-red);
	border-radius: 999px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.rdff-btn-primary {
	background: var(--rdff-red);
	color: #fff;
}

.rdff-btn-primary:hover,
.rdff-btn-primary:focus-visible {
	background: #8f1307;
	border-color: #8f1307;
	color: #fff;
}

.rdff-btn-outline {
	background: #fff;
	color: var(--rdff-red);
}

.rdff-btn-outline:hover,
.rdff-btn-outline:focus-visible {
	background: #fdf0ee;
}

.rdff-right {
	min-width: 0;
}

.rdff-frame {
	padding: 10px;
	border: 1px solid #9e9e9e;
	border-radius: 30px;
	background: #f5f5f5;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.rdff-image {
	min-height: 0;
	border-radius: 22px;
	overflow: hidden;
}

.rdff-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rdff-btn:focus-visible {
	outline: 2px solid var(--rdff-red);
	outline-offset: 3px;
}

/* Tablet and phone: stack the image above the text. */
@media (max-width: 767px) {
	.rdff {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.rdff-right {
		order: -1;
	}

	.rdff-frame {
		aspect-ratio: 4 / 3;
	}

	.rdff-texts {
		grid-template-rows: auto;
	}

	.rdff-title {
		font-size: 3.2rem;
	}

	.rdff-fact {
		overflow: visible;
	}

	.rdff-fact p {
		font-size: 18px;
	}
}

/* Hidden until the script has chosen the starting fact and sized its text. */
.rdff.rdff-pending .rdff-text,
.rdff.rdff-pending .rdff-image {
	opacity: 0;
	visibility: hidden;
	transition: none;
}

/* Safety net: if the script is delayed, show the chosen fact after 2 seconds anyway. */
.rdff.rdff-pending .rdff-text.is-active,
.rdff.rdff-pending .rdff-image.is-active {
	animation: rdff-reveal 0.6s ease 2s forwards;
}

@keyframes rdff-reveal {
	to {
		opacity: 1;
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rdff-text,
	.rdff-image,
	.rdff-text.is-active,
	.rdff-image.is-active {
		transition: none;
	}
}