/*
 * Colors reference Elementor's own Global Colors (defined in Site Settings,
 * output as CSS custom properties on .elementor-kit-N) rather than
 * hardcoding hex values a second time. The hex after the comma in each
 * var() is a fallback only — used if the Elementor variable somehow isn't
 * available in this part of the DOM — not the live value in normal
 * operation. This means a future color change only has to happen once, in
 * Elementor's Global Colors panel, and cascades here automatically.
 */
:root {
	--wm-primary: var(--e-global-color-primary, #1D7A6B);
	--wm-secondary: var(--e-global-color-secondary, #1A1A1A);
	--wm-accent: var(--e-global-color-accent, #F5F0E8);
	--wm-text: var(--e-global-color-text, #333333);
	--wm-white: var(--e-global-color-a6c7019, #FFFFFF);
	--wm-font-primary: "Miriam Libre", serif;
	--wm-font-secondary: "Inter", sans-serif;
}

.swm-header-section {
	background: var(--wm-accent);
	padding: 80px 24px;
	text-align: center;
}

.swm-page-title {
	font-family: var(--wm-font-primary);
	font-size: 56px;
	color: var(--wm-secondary);
	margin: 0 0 16px;
}

.swm-page-intro {
	font-family: var(--wm-font-secondary);
	font-size: 18px;
	color: var(--wm-text);
	line-height: 1.8;
	max-width: 700px;
	margin: 0 auto;
}

.swm-content-section {
	background: var(--wm-white);
	padding: 80px 24px;
}

.swm-empty-state {
	text-align: center;
	font-family: var(--wm-font-secondary);
	font-size: 18px;
	color: var(--wm-text);
}

.articles-card-image {
	width: 100%;
	aspect-ratio: 3 / 4;
	display: block;
	object-fit: cover;
}

.articles-card-title {
	font-family: var(--wm-font-primary);
	color: var(--wm-secondary);
	font-size: 24px;
	margin: 16px 0 8px;
}

.articles-card-excerpt {
	font-family: var(--wm-font-secondary);
	color: var(--wm-text);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 16px;
}

.articles-card-button {
	display: inline-block;
	font-family: var(--wm-font-secondary);
	font-weight: 600;
	color: var(--wm-white);
	background: var(--wm-primary);
	padding: 10px 24px;
	border-radius: 4px;
	text-decoration: none;
}

.articles-card-button:hover {
	opacity: 0.9;
	color: var(--wm-white);
}

/*
 * Spacing between separate row blocks, and centered card text — both apply
 * at every screen size (not just mobile).
 */
.articles-row {
	margin-bottom: 40px;
}

.articles-row:last-child {
	margin-bottom: 0;
}

.articles-card {
	text-align: center;
}

/*
 * The solo featured card (odd entry count peels the newest one into its
 * own row) matches the paired-card width on desktop, since every image is
 * now cropped to a uniform 3:4 ratio — a mismatched featured-card size
 * reads as an error rather than intentional.
 */
.articles-row > .articles-card:only-child {
	max-width: 48% !important;
	margin: 0 auto !important;
}

.swm-cta-section {
	background: var(--wm-primary);
	padding: 60px 24px;
	text-align: center;
}

.swm-cta-title {
	font-family: var(--wm-font-primary);
	font-size: 36px;
	color: var(--wm-white);
	margin: 0 0 12px;
}

.swm-cta-text {
	font-family: var(--wm-font-secondary);
	font-size: 18px;
	color: var(--wm-white);
	line-height: 1.8;
	margin: 0 0 24px;
}

.swm-cta-button {
	display: inline-block;
	font-family: var(--wm-font-secondary);
	font-weight: 600;
	color: var(--wm-primary);
	background: var(--wm-white);
	padding: 12px 32px;
	border-radius: 4px;
	text-decoration: none;
}

/* Mobile: cards stack to a single column under 768px. */
@media (max-width: 768px) {
	.swm-page-title {
		font-size: 36px;
	}

	.articles-row {
		flex-direction: column;
		align-items: center;
	}

	.articles-row .articles-card {
		flex: 0 0 auto !important;
		width: 90% !important;
		max-width: 90% !important;
		margin: 0 auto !important;
	}

	.articles-row > .articles-card:only-child {
		max-width: 90%;
	}
}

/*
 * Mobile-only line break in the H1. There is still only one <h1> element —
 * this just controls where it visually wraps on narrow screens, instead of
 * relying on the browser's default wrap point.
 */
.swm-mobile-break {
	display: none;
}

@media (max-width: 480px) {
	.swm-mobile-break {
		display: block;
	}
}