/* Media + Text alternating bands — measured from reference media-text component.
   Markup: .media-text.grid > .media-text__content / .media-text__media
   DOM order decides which side the media sits on at >=1024px. */

.media-text {
	gap: 0;
	align-items: center;
	margin-top: 30px;
	margin-bottom: 30px;
}
.media-text:first-child { margin-top: 0; }
.media-text:last-child { margin-bottom: 0; }

@media screen and (min-width: 1024px) {
	.media-text {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 50px;
		margin-bottom: 50px;
		row-gap: var(--grid-row-gutter);
	}
}

.media-text__media { align-self: start; }

.media-text__image-wrap {
	border-radius: 0;
	height: 100%;
	overflow: hidden;
	margin: 0;
}

.media-text__image {
	aspect-ratio: 3 / 2;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
@media screen and (min-width: 1280px) {
	.media-text__image { aspect-ratio: 16 / 9; }
	.single-post .media-text__image { aspect-ratio: 3 / 2; }
}

/* Text column: below media on mobile, source order on desktop */
.media-text__content {
	order: 1;
	padding: var(--grid-col-gutter);
}
@media screen and (min-width: 1024px) {
	.media-text__content { order: 0; }
}
@media screen and (max-width: 1023px) {
	.media-text:not(.media-text--has-background) .media-text__content {
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 0;
	}
}
.media-text:not(.media-text--has-background) .media-text__content:first-child { padding-left: 0; }

.media-text__tag { margin-bottom: 6px; }
.media-text:not(.media-text--has-background) .media-text__tag { color: var(--color-gray-600); }

.media-text__title { margin-bottom: 6px; }

.media-text__description {
	font-weight: var(--font-weight-medium);
	margin: 12px 0 10px;
}

.media-text .btn { width: 100%; }
@media screen and (min-width: 576px) {
	.media-text .btn { width: auto; }
}

.media-text strong { font-weight: var(--font-weight-medium); }

/* --------------------------------------------------- background variants */

.media-text--has-background { color: var(--color-soft-white); overflow: hidden; }
.media-text--has-background .media-text__image-wrap { border-radius: 0; }
.media-text--has-background .media-text__tag { opacity: 0.7; }

.media-text--with-padding { align-items: normal; }
@media screen and (min-width: 1024px) {
	.media-text--with-padding .media-text__content { padding: 50px var(--grid-col-gutter); }
}

.media-text--with-full-height-media { align-items: normal; }
.media-text--with-full-height-media .media-text__media { height: 100%; }

.media-text--burgundy-2 { background-color: var(--color-burgundy-2); color: var(--color-soft-white); }
.media-text--burgundy-2 a { color: var(--color-brass-1); }
.media-text--burgundy-2 .btn { background-color: var(--color-brass-1); color: var(--color-soft-black) !important; }

.media-text--soft-black { background-color: var(--color-soft-black); color: var(--color-soft-white); }
.media-text--soft-black a { color: var(--color-brass-1); }
.media-text--soft-black .btn { background-color: var(--color-soft-white); color: var(--color-soft-black) !important; }

.media-text--white,
.media-text--soft-white { background-color: var(--color-soft-white); color: var(--color-soft-black); }
.media-text--white .btn { background-color: var(--color-burgundy-2); color: var(--color-soft-white) !important; }

.media-text--brass-3 { background-color: var(--color-brass-3); color: var(--color-soft-black); }

/* ------------------------------------------------------------------------
   Section title/description helpers (measured from reference section
   component; duplicated defensively so this template stands alone —
   values identical wherever else they are declared). */

.section__title,
.section__description { text-align: center; }

@media screen and (min-width: 1024px) {
	.section__description {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--wrap-width-large);
	}
}

.section__title ~ :not(.section__description) { margin-top: var(--typography-spacing); }