/* ────────────────────────────────────────────────────────────
   03-text-media.css — two-column composite
   Class chain: .text-media [.media-left | .media-right]
                             [.is-style-bg-light | .is-style-bg-medium | .is-style-bg-dark]

   Scope: GB elements don't ship column/gutter, vertical-align or
   responsive-collapse controls, so that scaffolding lives here.
   Atomic rules (H2 size, button-group spacing) sit alongside it.
   ──────────────────────────────────────────────────────────── */

/* ── Section wrapper ──────────────────────────────────────── */
.text-media {
	padding-top:    var(--spacing-4xl);
	padding-bottom: var(--spacing-4xl);
	padding-left:   var(--spacing-md);
	padding-right:  var(--spacing-md);
}

/* Inner row: 2 equal columns with generous gap, centered container.
   Source order determines column position:
     media-right → [content, image] → content left, image right (natural LTR)
     media-left  → [image, content] → image left, content right (natural LTR) */
.text-media__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--spacing-2xl);
	max-width: var(--container-max-width);
	margin-left:  auto;
	margin-right: auto;
}

/* Media column — image fills its cell with no radius/crop */
.text-media__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Media column — Google Maps embed (text-map-left/right) */
.text-media__media iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
}

/* Text column — vertical stack with tight rhythm */
.text-media__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

/* ── H2 (ported from source) ──────────────────────────────── */
.text-media h2 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-heading);
	margin: 0; /* Gap styles create spacing */
}

/* ── H3 subhead ───────────────────────────────────────────── */
.text-media h3 {
	font-family: var(--font-primary);
	font-size: var(--text-heading-md);
	line-height: var(--line-height-snug);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-heading-alt);
	margin: 0; /* Gap styles create spacing */
}

/* ── Body paragraph ───────────────────────────────────────── */
.text-media p {
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
	margin: 0; /* Gap styles create spacing */
}

/* ── Button group (ported) ────────────────────────────────── */
.text-media .wp-block-buttons {
	margin-top: var(--spacing-lg);
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

/* ── Dark-bg text flip ────────────────────────────────────── */
/* is-style-bg-dark is on the core/group outer; .text-media is on
   the inner GB element — must use descendant selector. */
.is-style-bg-dark .text-media h2,
.is-style-bg-dark .text-media h3,
.is-style-bg-dark .text-media p { color: var(--color-text-body-inverse); }

/* ── Variant: media-bg (photo full-bleed behind content card) ─ */
/* Section's own background-image is the photo (set per-instance
   via GB Backgrounds panel or inline styles.backgroundImage).
   The content column becomes a white card; the opposite column
   is an empty spacer reserving real estate so the photo isn't
   covered edge-to-edge. */

.text-media.media-bg {
	background-color: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.text-media.media-bg .text-media__row {
	align-items: stretch;
	gap: 0;
}

.text-media.media-bg .text-media__content {
	background-color: var(--color-white);
	padding: var(--spacing-2xl);
	justify-content: center;
}

/* The media column stays in the grid as an empty spacer — the
   section itself carries the photo, so this column just reserves
   real estate so the card doesn't span the full width. */
.text-media.media-bg .text-media__media { background: transparent; }
.text-media.media-bg .text-media__media img { display: none; }

.text-media.media-bg h2 {
	font-size: var(--text-heading-lg);
}

/* Media-bg always shows the white card — pin card text colors
   to on-light even under a .is-style-bg-dark group. */
.is-style-bg-dark .text-media.media-bg .text-media__content h2,
.is-style-bg-dark .text-media.media-bg .text-media__content h3,
.is-style-bg-dark .text-media.media-bg .text-media__content p {
	color: var(--color-text-heading);
}
.is-style-bg-dark .text-media.media-bg .text-media__content p {
	color: var(--color-text-body);
}

/* ── Responsive: collapse at mobile ────────────────────────── */
@media (max-width: 1023px) {
	.text-media {
		padding-top:    var(--spacing-2xl);
		padding-bottom: var(--spacing-2xl);
	}
	/* media-bg: spacer column has no content — collapse it below 1024px */
	.text-media.media-bg .text-media__media { display: none; }
}

@media (max-width: 767px) {
	.text-media:not(.media-bg) .text-media__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--spacing-xl);
	}
	/* media-right / map-right: image or map is last in source — pull it
	   above content on mobile */
	.text-media.media-right .text-media__media,
	.text-media.map-right .text-media__media { order: -1; }
}

@media (max-width: 768px) {
	.text-media {
		padding-left:  var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}
}

@media (max-width: 767px) {
	/* media-bg: collapse content card to full width on mobile */
	.text-media.media-bg .text-media__row {
		grid-template-columns: minmax(0, 1fr);
	}
}