/* ============================================================
   Parkwellness — Studio Philosophy Section
   Light bg header: eyebrow + heading in a left column, paragraph +
   statement + caption in a right column, mobile-first (stacked,
   right column below left) becoming a 2-column row from 900px up.
   Full-bleed slideshow of photo pairs below the header.
   ============================================================ */

/* Overrides the global `section` default in main.css — the header
   below carries its own padding-block instead, so the slideshow after
   it stays flush against this section's top/bottom edges. */
.pw-studio-philosophy {
	background-color: var(--color-cream-200);
	padding-block: 0;
}

/* -------------------------------------------------------
   Header — 2 columns
   padding-block lives here (not on the section) so the slideshow
   right below stays flush against the section's own top/bottom edges
   — no gap after it before the next section starts. */
.pw-studio-philosophy-header {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: 40px;
}

@media (min-width: 769px) {
	.pw-studio-philosophy-header {
		padding-block: 64px;
	}
}

@media (min-width: 900px) {
	.pw-studio-philosophy-header {
		flex-direction: row;
		gap: 60px;
	}
}

.pw-studio-philosophy-header-left {
	flex: 0 0 auto;
}

@media (min-width: 900px) {
	.pw-studio-philosophy-header-left {
		flex: 0 0 38%;
	}
}

.pw-studio-philosophy-header-right {
	flex: 1;
	min-width: 0;
}

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

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

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

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

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

p.pw-studio-philosophy-paragraph {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-dark-100);
	margin-bottom: 20px;
}

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

p.pw-studio-philosophy-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;
	margin-bottom: 16px;
}

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

.pw-studio-philosophy-statement-line1 {
	color: var(--color-dark-700);
}

.pw-studio-philosophy-statement-line2 {
	color: var(--color-gold-600);
}

p.pw-studio-philosophy-caption {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-dark-100);
}

/* -------------------------------------------------------
   Slideshow — full-bleed, one banner photo per slide crossfading
   (same mechanism as the Hero slideshow: stacked absolute slides,
   opacity toggled via .is-active by assets/js/studio-philosophy-
   slideshow.js), plus manual prev/next arrows.
   ------------------------------------------------------- */
.pw-studio-philosophy-slideshow {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

@media (min-width: 700px) {
	.pw-studio-philosophy-slideshow {
		aspect-ratio: 16 / 7;
	}
}

/* .pw-studio-philosophy-slideshow prefix (not just
   .pw-studio-philosophy-slide) — 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 and
   leave each slide at its own intrinsic aspect-ratio height instead
   of filling the slideshow — same fix as .pw-hero .pw-hero-bg. */
.pw-studio-philosophy-slideshow .pw-studio-philosophy-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* cancels the implicit aspect-ratio WordPress's width/height attrs
	   put on the <img> itself, same fix as the hero background image. */
	aspect-ratio: auto;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.pw-studio-philosophy-slide.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.pw-studio-philosophy-slide {
		transition: none;
	}
}

.pw-studio-philosophy-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	color: var(--color-cream-50);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.pw-studio-philosophy-arrow:hover {
	background: rgba(255, 255, 255, 0.4);
}

.pw-studio-philosophy-arrow svg {
	width: 22px;
	height: 22px;
}

.pw-studio-philosophy-arrow--prev {
	left: 20px;
}

.pw-studio-philosophy-arrow--next {
	right: 20px;
}