/**
 * Image + Text (inc/blocks-layout/image-text.php) — a photo alongside a
 * text column (Title / Intro / free-form WYSIWYG Body / CTA). Stacked
 * (photo always on top) below 900px; side by side from 900px up.
 *
 * Image Position (left/right) is done with CSS `order`, not by swapping
 * the actual markup — .image-text-media is always the FIRST thing in the
 * HTML (see inc/blocks-layout/image-text.php), so it always stacks on top
 * on mobile no matter which side it's set to show on desktop, same
 * "photo on top" mobile convention as Large Card Horizontal.
 *
 * Text Align (top/center/bottom) is `align-self` on .image-text-content —
 * .image-text-media keeps a fixed align-self: flex-start regardless, so
 * only the text column actually moves relative to the photo.
 */

.image-text-block {
	max-width: 75rem;
	margin: 0 auto;
	padding: 3rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.image-text-media {
	order: 1;
	align-self: flex-start;
	flex: 1 1 0%;
}

.image-text-media img {
	display: block;
	width: 100%;
	height: auto;
}

.image-text-content {
	order: 2;
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	gap: 0rem;
}

@media (min-width: 900px) {
	.image-text-block {
		flex-direction: row;
		align-items: flex-start; /* overridden per-instance below */
		gap: 8.125rem;
		padding: 5rem 2rem;
	}

	.image-text-align-top .image-text-content {
		align-self: flex-start;
	}

	.image-text-align-center .image-text-content {
		align-self: center;
	}

	.image-text-align-bottom .image-text-content {
		align-self: flex-end;
	}

	/* Image Position: "right" just swaps which column comes first
	   visually — the HTML order (photo, then text) never changes. */
	.image-text-image-right .image-text-media {
		order: 2;
	}

	.image-text-image-right .image-text-content {
		order: 1;
	}
}

/* ---- Eyebrow / Title / Intro / Body ---- */

.image-text-eyebrow {
	margin: 0 0 1rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-style: normal;
	font-size: 0.875rem;
	color: #333333;
  text-transform: uppercase;
}

.image-text-title {
	margin: 0 0 1rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-style: normal;
	font-size: 1.4rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	color: var(--room-ink);
}

@media (min-width: 900px) {
	.image-text-title {
		font-size: 1.625rem;
	}
}

.image-text-intro {
	font-size: 1.125rem;
	margin-bottom: 2rem;
}

.image-text-body {
	font-size: 1rem;
}

.image-text-intro,
.image-text-body {
	line-height: 1.5;
	color: #333333;
}

.image-text-intro p,
.image-text-body p {
	margin: 0 0 1em;
}

.image-text-intro p:last-child,
.image-text-body p:last-child {
	margin-bottom: 0;
}

.image-text-body {
	display: flex;
	flex-direction: column;
	gap: 0rem;
  margin: 0 0 1rem;
}

.image-text-body h2,
.image-text-body h3,
.image-text-body h4 {
	margin: 0 0 0.5rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-light);
	font-style: normal;
	font-size: 1.5rem;
	color: var(--room-ink);
}

/* ---- CTA ----
   Gold pill by default; inverts to solid black / white text+icon on
   hover. The icon itself (Download, Location Pin, or none — an
   editor-chosen field) is shared across every CTA button in the project;
   its markup and hover animation live in inc/cta-icon.php and
   assets/css/cta-icon.css, not here. */

.image-text-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.5rem;
	padding: 0.9rem 1.5rem;
	border-radius: 0;
	background: var(--goldHex);
	color: #000000;
	text-decoration: none;
}

.image-text-cta:hover,
.image-text-cta:focus-visible {
	background: #000000;
	color: #ffffff;
  border-radius: 10px;
}

.image-text-cta-label {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-style: normal;
	font-size: 0.95rem;
}