/**
 * Homepage Section 3 - About Marjolein Buss
 * Primary wrapper selector: .sm-section--about-marjolein
 *
 * Layout: Two-column biographical section with text left, image right
 * Matches studiom.ai "MARJOLEIN BUSS" section styling
 *
 * SCOPE: This CSS is ONLY for homepage Section 3
 * All selectors scoped under .sm-section--about-marjolein
 *
 * @package StudioM_Child
 */

/* ========================================================================
   Section Container - Neutralized Padding System
   Reference match: generous vertical breathing room
   ======================================================================== */

.sm-section--about-marjolein {
	padding-top: 64px;
	padding-bottom: 64px;
	background-color: #ffffff;
	/* Neutralize WordPress constrained padding - this section manages its own spacing */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (min-width: 782px) {
	.sm-section--about-marjolein {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}

@media (min-width: 1024px) {
	.sm-section--about-marjolein {
		padding-top: 120px;
		padding-bottom: 120px;
	}
}

@media (min-width: 1400px) {
	.sm-section--about-marjolein {
		padding-top: 140px;
		padding-bottom: 140px;
	}
}

/* Neutralize nested .has-global-padding within Section 3 */
.sm-section--about-marjolein.has-global-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.sm-section--about-marjolein .has-global-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ========================================================================
   Inner Container - Single Source of Truth for Horizontal Spacing
   ======================================================================== */

.sm-section--about-marjolein .sm-container {
	max-width: 1240px;
	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: 782px) {
	.sm-section--about-marjolein .sm-container {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

@media (min-width: 1200px) {
	.sm-section--about-marjolein .sm-container {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

.sm-section--about-marjolein .sm-container.has-global-padding {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

@media (min-width: 782px) {
	.sm-section--about-marjolein .sm-container.has-global-padding {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

@media (min-width: 1200px) {
	.sm-section--about-marjolein .sm-container.has-global-padding {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

/* ========================================================================
   Two-Column Layout - Text Left, Image Right
   Reference match: ~35/65 split (text/image) with moderate gap
   ======================================================================== */

.sm-section--about-marjolein .wp-block-columns {
	margin-bottom: 0;
	margin-top: 0;
	gap: 32px;
	align-items: center;
}

@media (min-width: 782px) {
	.sm-section--about-marjolein .wp-block-columns {
		gap: 48px;
	}
}

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

@media (min-width: 1400px) {
	.sm-section--about-marjolein .wp-block-columns {
		gap: 80px;
	}
}

.sm-section--about-marjolein .wp-block-column {
	margin-bottom: 0;
	margin-top: 0;
}

/* Text column - ~35% width, tighter feel matching reference */
.sm-section--about-marjolein .sm-about__text {
	flex: 0 0 35%;
	max-width: 480px;
}

/* Image column - ~65% width, dominant visual as in reference */
.sm-section--about-marjolein .sm-about__image {
	flex: 1 1 65%;
}

/* Mobile: stack columns, text first */
@media (max-width: 781px) {
	.sm-section--about-marjolein .wp-block-columns {
		flex-direction: column;
		gap: 32px;
	}

	.sm-section--about-marjolein .sm-about__text,
	.sm-section--about-marjolein .sm-about__image {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* ========================================================================
   Label - Spaced Uppercase Typography (Small Caps Feel)
   Reference match: very small, highly tracked uppercase
   ======================================================================== */

.sm-section--about-marjolein .sm-about__label {
	font-family: 'Lexend Mega', sans-serif;
	font-weight: 400;
	font-size: 9px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: #999;
	margin-top: 0;
	margin-bottom: 24px;
	line-height: 1.5;
}

@media (min-width: 782px) {
	.sm-section--about-marjolein .sm-about__label {
		font-size: 10px;
		letter-spacing: 0.4em;
		margin-bottom: 32px;
	}
}

@media (min-width: 1200px) {
	.sm-section--about-marjolein .sm-about__label {
		font-size: 11px;
		letter-spacing: 0.42em;
		margin-bottom: 40px;
	}
}

/* ========================================================================
   Body Paragraphs - Constrained Width for Optimal Readability
   Reference match: comfortable reading rhythm, consistent vertical spacing
   ======================================================================== */

.sm-section--about-marjolein .sm-about__text p {
	font-family: 'Chivo', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.65;
	color: #555;
	margin-top: 0;
	margin-bottom: 20px;
	max-width: 100%;
}

@media (min-width: 782px) {
	.sm-section--about-marjolein .sm-about__text p {
		font-size: 16px;
		line-height: 1.7;
		margin-bottom: 22px;
		max-width: 100%;
	}
}

@media (min-width: 1200px) {
	.sm-section--about-marjolein .sm-about__text p {
		font-size: 17px;
		line-height: 1.75;
		margin-bottom: 24px;
	}
}

/* Last paragraph - no bottom margin */
.sm-section--about-marjolein .sm-about__text p:last-child {
	margin-bottom: 0;
}

/* Bold lead-in text - stands out but same font family */
.sm-section--about-marjolein .sm-about__text p strong,
.sm-section--about-marjolein .sm-about__text p b {
	font-weight: 600;
	color: #222;
}

/* ========================================================================
   Image - Fixed Aspect Ratio Container with Object-Fit Cover
   Reference match: portrait aspect ratio, subtle rounded corners, clean crop
   ======================================================================== */

.sm-section--about-marjolein .sm-about__image figure,
.sm-section--about-marjolein .sm-about__image .wp-block-image {
	margin: 0;
	padding: 0;
}

@media (min-width: 782px) {
	.sm-section--about-marjolein .sm-about__image figure,
	.sm-section--about-marjolein .sm-about__image .wp-block-image {
		aspect-ratio: 3 / 4;
		overflow: hidden;
	}
}

@media (min-width: 1200px) {
	.sm-section--about-marjolein .sm-about__image figure,
	.sm-section--about-marjolein .sm-about__image .wp-block-image {
		aspect-ratio: 5 / 6.5;
	}
}

.sm-section--about-marjolein .sm-about__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

@media (min-width: 782px) {
	.sm-section--about-marjolein .sm-about__image img {
		height: 100%;
		object-fit: cover;
		object-position: center 25%;
		border-radius: 12px;
	}
}

@media (min-width: 1200px) {
	.sm-section--about-marjolein .sm-about__image img {
		border-radius: 16px;
		object-position: center 22%;
	}
}

/* ========================================================================
   WordPress Block Spacing Normalization
   ======================================================================== */

/* Remove unwanted spacing from nested groups */
.sm-section--about-marjolein .wp-block-column > .wp-block-group {
	padding: 0 !important;
	margin: 0;
}

/* Remove is-layout-constrained padding effects */
.sm-section--about-marjolein.is-layout-constrained,
.sm-section--about-marjolein .is-layout-constrained {
	padding-left: 0 !important;
	padding-right: 0 !important;
}