/**
 * Homepage Section 3 — About Marjolein Buss
 * Stable scope class: .sm-home-s3
 * Enqueue handle:     studiom-home-s3-css
 *
 * Pixel-matched to studiom.ai "MARJOLEIN BUSS" section:
 *   — Two columns: text left (~42%), portrait image right (~58%)
 *   — Container: 1200px max-width, 20px/32px horizontal padding
 *   — Vertical padding: 64px mobile → 80px desktop
 *   — Column gap: 48px → 64px desktop
 *   — Body text: Chivo 300, 16–17px, #333333, line-height 1.72–1.75
 *   — Label: Lexend Mega 500, 9–10px, tracked 0.42–0.46em, #999999
 *   — Portrait image: 2:3 aspect ratio, object-fit cover, no radius
 *   — Mobile: image first (top), text second (bottom) — order:-1 on image
 *
 * SCOPE: ALL selectors prefixed with .sm-home-s3 — no global rules.
 *
 * @package StudioM_Child
 */

/* ========================================================================
   Section outer — full-bleed white band, zero horizontal padding
   ======================================================================== */

.sm-home-s3 {
	background-color: #ffffff;
	padding-top: 64px;
	padding-bottom: 64px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.sm-home-s3.has-global-padding,
.sm-home-s3.is-layout-constrained {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (min-width: 768px) {
	.sm-home-s3 {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

/* ========================================================================
   Neutralize WP constrained-layout horizontal padding on nested blocks
   ======================================================================== */

.sm-home-s3 .has-global-padding,
.sm-home-s3 .is-layout-constrained {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ========================================================================
   Inner container — 1200px, consistent with Section 2 above
   ======================================================================== */

.sm-home-s3 .sm-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px !important;
	padding-right: 20px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

@media (min-width: 768px) {
	.sm-home-s3 .sm-container {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

/* ========================================================================
   Two-column layout — ~42 / 58 split (text/image), nowrap on desktop
   Reference: studiom.ai text narrower than image column (~40/60 ratio)
   ======================================================================== */

.sm-home-s3 .wp-block-columns {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 48px;
	align-items: flex-start;
	margin-top: 0;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.sm-home-s3 .wp-block-columns {
		gap: 64px;
	}
}

@media (min-width: 1024px) {
	.sm-home-s3 .wp-block-columns {
		gap: 64px;
	}
}

.sm-home-s3 .wp-block-column {
	margin-top: 0;
	margin-bottom: 0;
}

/* Text column — left, ~42% (reference: ~40% text vs 60% image) */
.sm-home-s3 .sm-about__text {
	flex: 0 0 42% !important;
	width: 42% !important;
	min-width: 0;
}

/* Image column — right, fills remaining ~58% */
.sm-home-s3 .sm-about__image {
	flex: 1 1 0% !important;
	min-width: 0;
}

/* Mobile: stack vertically — image above, text below (matches studiom.ai) */
@media (max-width: 767px) {
	.sm-home-s3 .wp-block-columns {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		gap: 32px;
	}

	.sm-home-s3 .sm-about__text,
	.sm-home-s3 .sm-about__image {
		flex: 1 1 100% !important;
		width: 100% !important;
	}

	/* Image appears first (top) on mobile — matches studiom.ai mobile layout */
	.sm-home-s3 .sm-about__image {
		order: -1;
	}
}

/* ========================================================================
   Label — "M A R J O L E I N   B U S S"
   Spaced-out uppercase eyebrow; higher specificity than the p rule below
   ======================================================================== */

.sm-home-s3 .sm-about__text .sm-about__label {
	font-family: 'Lexend Mega', sans-serif;
	font-weight: 500;
	font-size: 9px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: #999999;
	margin-top: 0;
	margin-bottom: 28px;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.sm-home-s3 .sm-about__text .sm-about__label {
		font-size: 10px;
		letter-spacing: 0.46em;
		margin-bottom: 32px;
	}
}

/* ========================================================================
   Body paragraphs — Chivo, airy rhythm, near-black
   Reference: studiom.ai body colour closer to #333 than #444
   ======================================================================== */

.sm-home-s3 .sm-about__text p {
	font-family: 'Chivo', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.72;
	color: #333333;
	margin-top: 0;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.sm-home-s3 .sm-about__text p {
		font-size: 17px;
		line-height: 1.75;
		margin-bottom: 24px;
	}
}

.sm-home-s3 .sm-about__text p:last-child {
	margin-bottom: 0;
}

/* Strong / bold emphasis — near-black, heavier weight */
.sm-home-s3 .sm-about__text p strong,
.sm-home-s3 .sm-about__text p b {
	font-weight: 700;
	color: #111111;
}

/* ========================================================================
   Portrait image — 2:3 aspect ratio, cover, top-aligned, no radius
   Reference: studiom.ai shows a portrait-orientation photo, sharp corners
   ======================================================================== */

.sm-home-s3 .sm-about__image .wp-block-image {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

@media (min-width: 768px) {
	.sm-home-s3 .sm-about__image .wp-block-image {
		aspect-ratio: 2 / 3;
	}
}

.sm-home-s3 .sm-about__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

@media (min-width: 768px) {
	.sm-home-s3 .sm-about__image img {
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}
}

/* ========================================================================
   WP Block spacing normalization — scoped to Section 3
   Prevents default wp-block-group padding leaking into columns
   ======================================================================== */

.sm-home-s3 .wp-block-column > .wp-block-group {
	padding: 0 !important;
	margin: 0;
}