/* ============================================================
   Parkwellness — Contrology Section
   Full-bleed background photo (same absolute/object-fit pattern as
   the hero) with a dark scrim, centered copy stacked on top: eyebrow,
   divider, heading, paragraph, a second divider, closing statement.
   ============================================================ */

.pw-contrology {
	position: relative;
	padding-block: 96px;
	overflow: hidden;
	background-color: var(--color-dark-700); /* fallback until a background image is set */
}

/* .pw-contrology prefix (not just .pw-contrology-bg) — needed to
   outrank reset.css's ".pw-landing img" rule (class + element, more
   specific than a single class), which would otherwise win the
   height cascade (its height:auto beating our height:100%) and leave
   the image at its own intrinsic aspect-ratio height, pinned top-left
   instead of centered/cropped to fill the section — same fix as
   .pw-hero .pw-hero-bg in main.css. */
.pw-contrology .pw-contrology-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* cancels the implicit aspect-ratio WordPress's width/height attrs
	   put on the <img> itself, so it actually fills the section via
	   height:100% instead of keeping its own natural ratio (same fix
	   as the hero background image). */
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center;
}

.pw-contrology-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--overlay-black-70);
}

.pw-contrology-content {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

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

/* img. prefix + clamp() width — see .pw-hero-divider in main.css for
   why: reset.css's ".pw-landing img" beats a single-class max-width,
   so this rendered at its full ~758px width (the content column's own
   cap) the whole time it was reviewed, not the 180px below. 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-contrology-divider {
	display: block;
	width: clamp(180px, 27vw, 379px);
	height: auto;
	margin: 20px auto;
}

h2.pw-contrology-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	line-height: 1.3;
	margin-bottom: 1.25rem;
}

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

.pw-contrology-heading-line1 {
	color: var(--color-cream-50);
}

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

p.pw-contrology-paragraph {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-taupe-100);
	max-width: 515px;
	margin: auto;
}

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

.pw-contrology-statement {
	font-family: var(--font-accent);
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	line-height: 32px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-cream-400);
}