/**
 * Services — alternating dark/light section styles.
 *
 * Service sections live inside a group with class "mo-inc-services-list".
 * Colors alternate automatically via nth-child.
 * These rules apply in both the editor and on the frontend.
 */

.mo-inc-services__intro {
	padding-inline: var(--wp--preset--spacing--space-xl);
	padding-block: var(--wp--preset--spacing--space-xl);
}

@media (min-width: 782px) {
	.mo-inc-services__intro {
		padding-inline: var(--wp--preset--spacing--section-padding-large);
		padding-block: var(--wp--preset--spacing--section-padding-large);
	}
}

.mo-inc-service-section {
	margin-block-start: 0;
	position: relative;
}

.moinc-service-section > .wp-block-group {
	position: static;
}
/* ── Odd sections: dark green ── */

.mo-inc-services-list .mo-inc-service-section:nth-child(odd) {
	background-color: var(--wp--preset--color--dark-green);
	color: var(--wp--preset--color--beige);
}

.mo-inc-services-list .mo-inc-service-section:nth-child(odd) h1,
.mo-inc-services-list .mo-inc-service-section:nth-child(odd) h2,
.mo-inc-services-list .mo-inc-service-section:nth-child(odd) h3,
.mo-inc-services-list .mo-inc-service-section:nth-child(odd) h4,
.mo-inc-services-list .mo-inc-service-section:nth-child(odd) h5,
.mo-inc-services-list .mo-inc-service-section:nth-child(odd) h6 {
	color: var(--wp--preset--color--beige);
}

.mo-inc-services-list .mo-inc-service-section:nth-child(odd) p:not(:where(.mo-inc-outcome-thumbnail-editor *)),
.mo-inc-services-list .mo-inc-service-section:nth-child(odd) li:not(:where(.mo-inc-outcome-thumbnail-editor *)) {
	color: var(--wp--preset--color--beige);
}

.mo-inc-services-list .mo-inc-service-section:nth-child(odd) a:not(:where(.mo-inc-outcome-thumbnail-editor *)) {
	color: var(--wp--preset--color--beige);
}

/* Editor: reset inherited section colors inside outcome thumbnail block */
.mo-inc-services-list .mo-inc-service-section:nth-child(odd) .mo-inc-outcome-thumbnail-editor {
	color: #1e1e1e;
}

.mo-inc-services-list .mo-inc-service-section:nth-child(odd) .mo-inc-outcome-thumbnail-editor a {
	color: var(--wp-admin-theme-color, #3858e9);
}

/* Capabilities: mint on dark background */
.mo-inc-services-list .mo-inc-service-section:nth-child(odd) .mo-inc-service-section__capabilities-label,
.mo-inc-services-list .mo-inc-service-section:nth-child(odd) .mo-inc-service-section__capabilities-list li {
	color: var(--wp--preset--color--mint);
}

/* ── Even sections: white ── */

.mo-inc-services-list .mo-inc-service-section:nth-child(even) {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-green);
}

/* Capabilities: dark green on light background */
.mo-inc-services-list .mo-inc-service-section:nth-child(even) .mo-inc-service-section__capabilities-label,
.mo-inc-services-list .mo-inc-service-section:nth-child(even) .mo-inc-service-section__capabilities-list li {
	color: var(--wp--preset--color--dark-green);
}

/* ── Shared capability styles ── */

/* Border uses currentColor so it matches text (beige or dark green) automatically */
.mo-inc-service-section__capabilities-label {
	border-bottom-style: solid;
	border-bottom-color: currentColor;
}

/* Outcome case study thumbnail */
.mo-inc-outcome-thumbnail__link {
	text-decoration: none;
}

.mo-inc-outcome-thumbnail__link:hover {
	text-decoration: underline;
}

.mo-inc-outcome-thumbnail__title {
	font-size: var(--wp--preset--font-size--body-text);
	font-weight: 400;
	line-height: 1.3;
}

/* ── Mobile (< 782px): compact service section ── */

@media (max-width: 781px) {
	.mo-inc-service-section .mo-inc-service-section__capabilities-label {
		display: none;
	}

	.mo-inc-service-section .mo-inc-service-section__capabilities-label + .wp-block-columns {
		display: none;
	}

	.mo-inc-service-section .mo-inc-outcome-thumbnail__image {
		display: none;
	}

	.mo-inc-service-section .wp-block-mo-inc-outcome-thumbnail {
		display: block;
		width: calc(100% + 2 * var(--wp--preset--spacing--space-xl));
		max-width: none;
		margin-block: 0;
		margin-inline: calc(-1 * var(--wp--preset--spacing--space-xl));
	}

	.mo-inc-service-section .mo-inc-outcome-thumbnail__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		box-sizing: border-box;
		margin-block-start: var(--wp--preset--spacing--space-lg);
		padding-block: var(--wp--preset--spacing--space-md);
		padding-inline: var(--wp--preset--spacing--space-xl);
		border-block: 1px solid currentColor;
		border-inline: 0;
		color: inherit;
		text-decoration: none;
		font-size: var(--wp--preset--font-size--body-text);
		line-height: 1.4;
	}

	.mo-inc-service-section .mo-inc-outcome-thumbnail__link:hover {
		text-decoration: none;
		opacity: 0.85;
	}

	.mo-inc-service-section .mo-inc-outcome-thumbnail__title {
		flex: 1;
		min-width: 0;
	}

	.mo-inc-service-section .mo-inc-outcome-thumbnail__link::after {
		content: '';
		display: inline-block;
		width: 27px;
		height: 8px;
		background-color: currentColor;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='8' viewBox='0 0 27 8'%3E%3Cpath d='M26.354 4.036a.5.5 0 0 0 0-.708L23.172.146a.5.5 0 1 0-.707.708l2.828 2.828-2.828 2.828a.5.5 0 1 0 .707.708zM0 3.682v.5h26v-1H0z'/%3E%3C/svg%3E");
		mask-repeat: no-repeat;
		mask-size: contain;
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}

	.mo-inc-service-section .mo-inc-outcome-thumbnail__link:hover::after {
		transform: translateX(4px);
	}
}