/**
 * PetReptiles Species Quick Facts -- card grid styling.
 *
 * Every selector is scoped under .prq-facts (no bare element selectors,
 * no !important) so this stylesheet can never leak into Popcorn theme
 * markup and can never be accidentally targeted by other plugins' CSS.
 *
 * Design tokens match the existing PetReptiles system exactly:
 * cream section background, white cards, terracotta neutral accent,
 * olive values, Playfair Display headings, DM Sans body, DM Mono labels.
 */

.prq-facts {
	--prq-cream: #FAF6EF;
	--prq-white: #FFFFFF;
	--prq-dark: #1A1F14;
	--prq-muted: #6B6858;
	--prq-terracotta: #C45C2E;
	--prq-olive: #4A5C2F;

	/* Care-level accent colours -- used only via the is-care-* modifier
	   classes below, never applied to any of the other 7 cards. */
	--prq-care-beginner: #2F7A4A;
	--prq-care-intermediate: #C9821E;
	--prq-care-advanced: #B33A3A;
}

.prq-facts__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.prq-facts__card {
	background: var(--prq-white);
	border-radius: 12px;
	border-top: 3px solid var(--prq-terracotta);
	padding: 22px 20px;
	box-shadow: 0 1px 3px rgba(26, 31, 20, 0.06);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.prq-facts__label {
	font-family: 'DM Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--prq-terracotta);
	margin: 0;
}

.prq-facts__value {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--prq-olive);
	margin: 0;
	line-height: 1.25;
}

.prq-facts__value--italic {
	font-style: italic;
}

.prq-facts__detail {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	color: var(--prq-muted);
	margin: 0;
	line-height: 1.4;
}

.prq-facts__note {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-style: italic;
	color: var(--prq-muted);
	text-align: center;
	margin: 18px 0 0 0;
}

/* -----------------------------------------------------------------
 * Care-level accent classes.
 *
 * Applied ONLY to the Care Level card, and only ever set server-side
 * from the sanitized prq_care_level meta value (see PRQ_Render). No
 * colour is ever written into page content -- these are the only
 * three places the green/orange/red values exist.
 * ----------------------------------------------------------------- */

.prq-facts__card.is-care-beginner {
	border-top-color: var(--prq-care-beginner);
}
.prq-facts__card.is-care-beginner .prq-facts__label {
	color: var(--prq-care-beginner);
}

.prq-facts__card.is-care-intermediate {
	border-top-color: var(--prq-care-intermediate);
}
.prq-facts__card.is-care-intermediate .prq-facts__label {
	color: var(--prq-care-intermediate);
}

.prq-facts__card.is-care-advanced {
	border-top-color: var(--prq-care-advanced);
}
.prq-facts__card.is-care-advanced .prq-facts__label {
	color: var(--prq-care-advanced);
}

/* -----------------------------------------------------------------
 * Responsive breakpoints -- match the existing PetReptiles pattern:
 * 4 columns desktop, 2 columns tablet, 1 column mobile.
 * ----------------------------------------------------------------- */

@media (max-width: 900px) {
	.prq-facts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.prq-facts__grid {
		grid-template-columns: repeat(1, 1fr);
	}
}