/* Celebrity Gallery — single detail page
 *
 * Text colors INHERIT from the active theme so the page is readable on both
 * light and dark themes. Muted values use the theme color at reduced opacity.
 */

.celeb-single {
	--celeb-accent: #0fb0b0;
	--celeb-placeholder: rgba(128, 128, 128, 0.18);
	max-width: 1000px;
	margin: 32px auto;
	padding: 0 16px;
	color: inherit;                 /* was a fixed dark color — now follows theme */
}

.celeb-single__header {
	display: flex;
	gap: 30px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.celeb-single__photo {
	flex: 0 0 280px;
	max-width: 280px;
}

.celeb-single__photo img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

.celeb-single__photo--placeholder {
	display: block;
	width: 280px;
	height: 340px;
	border-radius: 10px;
	background: var(--celeb-placeholder);
}

.celeb-single__intro {
	flex: 1 1 320px;
}

.celeb-single__name {
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 4px;
	color: inherit;
}

.celeb-single__role {
	color: var(--celeb-accent);
	font-size: 16px;
	margin-bottom: 22px;
}

.celeb-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 32px;
	max-width: 460px;
}

.celeb-fact__label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: inherit;
}

.celeb-fact__value {
	display: block;
	font-size: 15px;
	color: currentColor;
	opacity: 0.8;                   /* subtle, but adapts to light or dark */
}

.celeb-section {
	margin-top: 32px;
}

.celeb-section h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	color: inherit;
}

.celeb-section__body {
	font-size: 15px;
	line-height: 1.6;
	color: inherit;
}

.celeb-section__body p {
	margin: 0 0 12px;
}

@media (max-width: 600px) {
	.celeb-single__photo {
		flex-basis: 100%;
		max-width: 100%;
	}
	.celeb-single__photo--placeholder {
		width: 100%;
	}
}