/* ============================================================
   PLANTISIMA - generic content pages (page.php)
   Branded reading layout, mirroring the single post: white card on the cream
   page (desktop), full-bleed on cream (mobile). Tokens from style.css :root.
   ============================================================ */

.page-main {
	/* Same warm wash as the single post / homepage hero, anchored near the top. */
	background:
		radial-gradient(1100px 620px at 80% -90px, rgba(197, 107, 62, 0.10), transparent 60%),
		var(--brand-canvas);
	background-repeat: no-repeat;
	padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 5rem);
}

/* White "paper" card, centered on the cream page. */
.page-card {
	max-width: 760px;
	margin: 0 auto;
	background: var(--brand-surface);
	border: 1px solid var(--brand-sand);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(27, 58, 43, 0.05);
	padding: clamp(1.75rem, 4vw, 3.5rem);
}

.page-header { margin-bottom: 1.25rem; }
.page-title {
	margin: 0;
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.15;
	color: var(--brand-ink);
}

.page-content {
	font-size: 1.15rem;
	line-height: 1.75;
	color: #36433c;
}
.page-content > * { margin: 0 0 1.3em; }
.page-content > *:last-child { margin-bottom: 0; }

.page-content h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
	margin: 1.6em 0 0.5em;
	color: var(--brand-forest);
}
.page-content h3 {
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	margin: 1.4em 0 0.4em;
	color: var(--brand-ink);
}
.page-content a {
	color: var(--brand-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.page-content ul,
.page-content ol { padding-left: 1.4em; }
.page-content li { margin: 0.4em 0; }
.page-content img { max-width: 100%; height: auto; border-radius: 10px; }
.page-content blockquote {
	margin: 1.5em 0;
	padding: 0.4em 0 0.4em 1.2em;
	border-left: 3px solid var(--brand-accent);
	color: var(--global-palette5);
	font-style: italic;
}

/* Phones: drop the card, full-bleed on cream (matches the single post). */
@media (max-width: 600px) {
	.page-main { padding: 1rem 0 2.5rem; }
	.page-card {
		max-width: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 1.25rem 1.1rem;
	}
	.page-content { font-size: 1.25rem; }
}