/* ============================================================
   Parkwellness — Right For You Section
   Mobile-first: content stacks above the two lists, single column.
   From 900px up, a 2-column grid — top-aligned (not vertically
   centered like About/Book, both columns start at the same y).
   ============================================================ */

.pw-right-for-you {
	background-color: var(--color-dark-800);
}

.pw-right-for-you-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 900px) {
	.pw-right-for-you-grid {
		grid-template-columns: 1fr 1fr;
		gap: 60px;
	}
}

.pw-right-for-you-eyebrow {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-gold-300);
	margin-bottom: 14px;
}

h2.pw-right-for-you-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.25;
}

.pw-right-for-you-heading-line1,
.pw-right-for-you-heading-line2 {
	display: block;
}

.pw-right-for-you-heading-line1 {
	color: var(--color-cream-200);
}

.pw-right-for-you-heading-line2 {
	color: var(--color-gold-300);
}

/* img. prefix + clamp() width — same fix/values as every other
   divider reusing this graphic sitewide: a single class loses to
   reset.css's ".pw-landing img" on max-width, and the ceiling is the
   same 379px sitewide for visual consistency. Left-aligned (margin
   0, not auto) to match this section's left-aligned content. */
img.pw-right-for-you-divider {
	display: block;
	width: clamp(180px, 27vw, 379px);
	height: auto;
	margin: 20px 0;
}

p.pw-right-for-you-paragraph {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-cream-300);
	max-width: 480px;
}

@media (min-width: 900px) {
	p.pw-right-for-you-paragraph {
		font-size: 16px;
	}
}

/* -------------------------------------------------------
   Lists — two labeled groups, each item with a gold accent bar (same
   treatment as .pw-studio-body ul li's question-style bullet list).
   ------------------------------------------------------- */
.pw-right-for-you-lists {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* p. prefix — reset.css's ".pw-landing p{margin:0}" (class+element)
   was beating this single-class margin-bottom, so the label sat
   flush against the list below it. */
p.pw-right-for-you-list-label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-gold-300);
	margin-bottom: 15px;
}

.pw-right-for-you-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* margin:0 + margin-bottom !important — Thrive's parent-theme
   style.css sets "ul>li:not(.thrv-styled-list-item){margin:0 0 0
   1.5em}" (2 elements + a :not() pseudo-class), which outranks this
   class+element selector on BOTH margin-left (added an unwanted 21px
   indent on top of our own padding-inline-start) and margin-bottom
   (zeroed it, collapsing every item's accent bar into what looked
   like one continuous line instead of separate per-item segments).
   Same Thrive-conflict !important precedent used elsewhere in this
   project (see feedback-css-specificity-gotchas memory). */
.pw-right-for-you-list li {
	border-inline-start: 2px solid var(--color-gold-300);
	padding-inline-start: 14px;
	margin: 0 0 12px !important;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-cream-300);
}

.pw-right-for-you-list li:last-child {
	margin-bottom: 0 !important;
}