/* ============================================================
   Parkwellness — Studio Section
   Mobile-first: each panel stacks (content, then image) full width.
   From 900px up, panels become 2-column rows — content ~55%, image
   ~45% — and alternate sides: dark panels have content on the left,
   light panels have it on the right (order flips via the modifier
   classes below, DOM order stays the same so mobile stacking is
   identical either way).
   ============================================================ */

/* Overrides the global `section` default in main.css — this outer
   wrapper needs no padding of its own; each panel's own content
   column (.pw-studio-panel-content) carries its own padding instead,
   and the dark/light panel backgrounds should bleed flush to the
   section's top/bottom edges. */
#studio {
	padding-block: 0;
}

.pw-studio-panel {
	display: flex;
	flex-direction: column;
}

.pw-studio-panel--dark {
	background-color: var(--color-dark-600);
}

.pw-studio-panel--light {
	background-color: var(--color-cream-250);
}

@media (min-width: 900px) {
	.pw-studio-panel {
		flex-direction: row;
		align-items: stretch;
	}

	.pw-studio-panel--light .pw-studio-panel-content {
		order: 2;
	}

	.pw-studio-panel--light .pw-studio-panel-image {
		order: 1;
	}
}

/* -------------------------------------------------------
   Content side (~55% on desktop)
   ------------------------------------------------------- */
.pw-studio-panel-content {
	display: flex;
	align-items: center;
	padding: 56px 24px;
}

@media (min-width: 900px) {
	.pw-studio-panel-content {
		flex: 1 1 55%;
		min-width: 0;
		padding: 64px 72px;
	}
}

.pw-studio-panel-content-inner {
	width: 100%;
	max-width: 560px;
}

.pw-studio-panel--dark .pw-studio-panel-content-inner {
	color: var(--color-cream-300);
}

.pw-studio-panel--light .pw-studio-panel-content-inner {
	color: var(--color-dark-100);
}

/* -------------------------------------------------------
   Image side (~45% on desktop)
   ------------------------------------------------------- */
/* Square, fluid with viewport width — only up to the breakpoint where
   panels go side by side. From there the image has no aspect-ratio of
   its own at all; align-items:stretch on .pw-studio-panel (above)
   makes it match the content column's real height exactly, however
   tall that ends up being for a given panel's body copy.
   position:relative here + the img below being position:absolute is
   load-bearing, not decoration: measured live, a plain in-flow
   height:100% img created a circular dependency (the container's
   stretched height depends on its child; the child's height:100%
   depends on the container) that Chromium resolved by falling back to
   the image's own native pixel height as the row height — on these
   panels' actual photos that meant a ~718px-tall row even though the
   text column only needed ~530-550px. Taking the img out of flow via
   position:absolute stops it from feeding into that calculation at
   all, so the row height comes only from the content column, and the
   image (now free to reference that fully-resolved height for its own
   100%) just fills whatever that turns out to be. */
.pw-studio-panel-image {
	position: relative;
	aspect-ratio: 1 / 1;
}

@media (min-width: 900px) {
	.pw-studio-panel-image {
		flex: 1 1 45%;
		min-width: 0;
		aspect-ratio: auto;
	}
}

.pw-studio-panel-image img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* -------------------------------------------------------
   Eyebrow / Heading
   ------------------------------------------------------- */
.pw-studio-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;
}

.pw-studio-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.25;
	margin-bottom: 20px;
}

.pw-studio-heading-line1,
.pw-studio-heading-line2 {
	display: block;
}

.pw-studio-panel--dark .pw-studio-heading-line1 {
	color: var(--color-cream-50);
}

.pw-studio-panel--light .pw-studio-heading-line1 {
	color: var(--color-dark-700);
}

.pw-studio-heading-line2 {
	color: var(--color-gold-300);
}

/* -------------------------------------------------------
   Divider graphic — reused above and (optionally) below the body
   img. prefix + clamp() width — see the same fix on .pw-hero-divider
   in main.css: reset.css's ".pw-landing img" (class+element) beats a
   single-class max-width, so this was actually rendering at its full
   ~758px natural width (capped only by the ~560px content column) the
   whole time the client reviewed this section, not the 180px this
   file said. Same clamp() ceiling as the Hero divider (379px) — same
   graphic reused everywhere, one consistent designed size sitewide
   instead of each section's own accidental bug-driven width.
   ------------------------------------------------------- */
img.pw-studio-divider {
	display: block;
	width: clamp(180px, 27vw, 379px);
	height: auto;
	margin-block: 20px;
}

/* -------------------------------------------------------
   Body — paragraphs, optional bullet list, optional inline emphasis
   ------------------------------------------------------- */
.pw-studio-body p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 16px;
}

@media (min-width: 900px) {
	.pw-studio-body p {
		font-size: 16px;
	}
}

.pw-studio-body p:last-child {
	margin-bottom: 0;
}

/* Explicit color here, not just on the ancestor .pw-studio-panel-content
   -inner — Thrive's style.css sets "p,li{color:rgba(10,10,10,.85)}"
   directly on the element, which beats plain inheritance from an
   ancestor regardless of that ancestor's specificity (a direct rule on
   the element always wins over inherited value). */
.pw-studio-panel--dark .pw-studio-body p {
	color: var(--color-cream-300);
}

.pw-studio-panel--light .pw-studio-body p {
	color: var(--color-dark-100);
}

.pw-studio-body strong {
	color: var(--color-gold-300);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 600;
}

/* Gold-on-cream is too low contrast to read comfortably — light panels
   use a dark accent for the same emphasis instead. */
.pw-studio-panel--light .pw-studio-body strong {
	color: var(--color-dark-700);
}

/* Question-style bullet list (e.g. "Can the body move with control?") —
   a gold accent bar instead of a dot, matching the design. */
.pw-studio-body ul {
	list-style: none;
	margin: 20px 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). */
.pw-studio-body ul li {
	border-inline-start: 2px solid var(--color-gold-300);
	padding-inline-start: 14px;
	margin: 0 0 10px !important;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Same direct-rule-beats-inheritance issue as .pw-studio-body p above —
   Thrive's style.css also targets li directly. */
.pw-studio-panel--dark .pw-studio-body ul li {
	color: var(--color-cream-300);
}

.pw-studio-panel--light .pw-studio-body ul li {
	color: var(--color-dark-100);
}

.pw-studio-body ul li:last-child {
	margin-bottom: 0 !important;
}

/* -------------------------------------------------------
   Closing statement — only renders when panel_statement is filled
   ------------------------------------------------------- */
.pw-studio-statement {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.8;
	color: var(--color-gold-300);
}

.pw-studio-panel--light .pw-studio-statement {
	color: var(--color-dark-700);
}