/* Image + Text Section — single image, left or right, beside flowing body text */

.text-columns {
	background: #f5f5f5;
	padding-top:    var( --tc-pt, 3rem );
	padding-bottom: var( --tc-pb, 3rem );
	margin-top:     var( --tc-mt, 0rem );
	margin-bottom:  var( --tc-mb, 0rem );
}

.text-columns__inner {
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 5rem;
	display: flex;
	align-items: center;
	gap: 4.875rem;
}

/* Image on the right by default; "image-left" flips order. No image at all
   collapses to a single centered text column.

   NOTE: the markup order is [media, text], so the NATURAL flex order already
   puts the image on the LEFT. The old rule reversed on "--image-left", which
   inverted the control: a block set to "left" rendered right and vice versa.
   Default therefore reverses (image right), and "--image-left" restores the
   natural order (image left), so the editor setting now matches what renders. */
.text-columns__inner { flex-direction: row-reverse; }
.text-columns--image-left .text-columns__inner { flex-direction: row; }
.text-columns--no-image .text-columns__inner { max-width: 60rem; }

.text-columns__media {
	flex: 1 1 0;
	min-width: 0;
}
.text-columns__img {
	display: block; width: 100%;
	aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem;
}
.text-columns.is-imgh-short .text-columns__img { aspect-ratio: 16 / 9; }
.text-columns.is-imgh-tall  .text-columns__img { aspect-ratio: 4 / 5; }

.text-columns__text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: left;
}
.text-columns--align-center .text-columns__text { text-align: center; align-items: center; }

.text-columns__eyebrow {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 1rem; font-weight: 500; letter-spacing: 0.25rem;
	text-transform: uppercase; line-height: 1.35; color: rgba( 0, 13, 38, 0.7 ); margin: 0 0 0.25rem;
}
.text-columns__heading {
	font-family: 'Quincy', Georgia, serif;
	font-size: clamp( 2rem, 4vw, 3rem );
	font-weight: 400; line-height: clamp( 2.3rem, 4.6vw, 3.45rem ); color: #000d26; margin: 0 0 0.75rem;
}
.text-columns__subhead {
	font-family: 'Quincy', Georgia, serif;
	font-size: 1.75rem; font-weight: 400; line-height: 1.25;
	color: #000d26; margin: 1.75rem 0 0.25rem;
}
.text-columns__subhead:first-child { margin-top: 0; }
.text-columns__body {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem; line-height: 1.55; color: #0a1628; margin: 0 0 1rem;
}
.text-columns__body-list {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem; line-height: 1.55; color: #0a1628;
	margin: 0 0 1rem; padding: 0; list-style: none;
}
.text-columns__body-list li {
	position: relative; padding-left: 2.5rem;
}
.text-columns__body-list li + li { margin-top: 0.75rem; }
/* Brand "D" plug marker, matching the amenities/two-panel list icon so every
   bulleted list on the site reads the same. Was a plain blue dot, which was
   the only list style that didn't use the brand marker. Inlined as an SVG
   data URI (not a relative url()) so it is immune to the WP Rocket path
   rewriting that broke a relative icon path elsewhere in this theme. */
.text-columns__body-list li::before {
	content: ''; position: absolute; left: 0; top: 0.15em;
	width: 1.5rem; height: 1.25rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none'%3E%3Cpath d='M3.028 0v20H10.704c1.835 0 3.452-.414 4.852-1.243 1.399-.828 2.494-1.985 3.283-3.471.788-1.485 1.183-3.247 1.183-5.285s-.395-3.776-1.183-5.271C18.25 3.234 17.155 2.072 15.756 1.244 14.356.415 12.738.001 10.904.001H3.028V0zm3.91 3.8h3.572c1.127 0 2.105.252 2.933.757.829.505 1.472 1.224 1.931 2.157.459.934.688 2.03.688 3.287 0 1.257-.229 2.376-.688 3.3-.459.924-1.102 1.639-1.931 2.143-.829.505-1.806.757-2.933.757H6.938V3.8z' fill='%230B5CFF'/%3E%3Cpath d='M4.995 16.091H0v-4.212h4.995v4.212z' fill='%230B5CFF'/%3E%3Cpath d='M4.995 8.214H0V4.002h4.995v4.212z' fill='%230B5CFF'/%3E%3Cpath d='M24 12.132h-4.995V7.92H24v4.212z' fill='%230B5CFF'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}
.text-columns__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	background: #0b5cff;
	color: #fff;
	padding: 1rem 1.6875rem;
	border-radius: 0.5rem;
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	margin-top: 0.5rem;
	transition: filter 0.15s, transform 0.05s;
}
.text-columns--align-center .text-columns__cta { align-self: center; }
.text-columns__cta:hover { filter: brightness( 0.95 ); color: #fff; }
.text-columns__cta:active { transform: translateY( 1px ); }

@media (max-width: 1200px) {
	.text-columns__inner { padding: 0 3rem; gap: 3rem; }
}
@media (max-width: 900px) {
	.text-columns__inner {
		flex-direction: column !important;
		padding: 0 1.5rem;
		gap: 2rem;
	}
	.text-columns__media { width: 100%; }
	/* STACKED ONLY: content first, image after. The markup order is
	   [media, text] because that is what the desktop row layout needs, but
	   once the columns stack, leading with the image pushes the heading and
	   copy below the fold. order:2 moves the image last for the stacked
	   layout only -- the desktop row order above is untouched. */
	.text-columns__media { order: 2; }
}
@media (max-width: 600px) {
	.text-columns {
		padding-top:    var( --tc-pt-m, var( --tc-pt, 3rem ) );
		padding-bottom: var( --tc-pb-m, var( --tc-pb, 3rem ) );
		margin-top:     var( --tc-mt-m, var( --tc-mt, 0rem ) );
		margin-bottom:  var( --tc-mb-m, var( --tc-mb, 0rem ) );
	}
	.text-columns__inner { padding: 0 1rem; }
}