/* ────────────────────────────────────────────────────────────
   03-inline-text-media.css — Inline Text + Media
   Class chain: core/group outer .inline-text-media-wrap (alignwide, bg via Style panel)
                → gb element .inline-text-media (section, contained width only)
                → gb element .inline-text-media__row (grid: image + content —
                  the actual visible card surface: bg color + padding)
                  → gb element .inline-text-media__image (fixed 200px square)
                  → gb element .inline-text-media__content (text + link)
   ──────────────────────────────────────────────────────────── */

/* ── Outer wrapper — left as full-bleed so its native alignfull
   breakout margin isn't fought; the inner section below is what
   actually gets constrained + centered. Putting max-width/margin-inline
   directly on this outer .alignfull element used to cancel its own
   breakout margin, trapping it inside .entry-content instead of
   reaching the intended --container-wide (1280px) — was also using the
   wrong token (--container-max-width, 1140px). Background color also
   doesn't live here — see .inline-text-media__row below; this rule
   strips the global .is-style-bg-* paint the block's own className
   still applies to this element, so the color reads as a contained
   panel instead of an edge-to-edge band. ── */
.inline-text-media-wrap {
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	background-color: transparent;
}

/* ── Inner section — contained width only, no visual surface ── */
.inline-text-media {
	max-width: var(--container-wide);
	margin-inline: auto;
}

/* ── Row — the actual visible surface: bg color + padding, plus the
   fixed image column + flexible text layout. No border/radius —
   matches this theme's own radius-none default. ────────────── */
.inline-text-media__row {
	display: grid;
	grid-template-columns: 175px 1fr;
	gap: var(--spacing-lg);
	align-items: center;
	padding: var(--spacing-lg) var(--spacing-md);
}

.is-style-bg-light .inline-text-media__row {
	background-color: var(--wp--preset--color--white);
}
.is-style-bg-medium .inline-text-media__row {
	background-color: var(--wp--preset--color--gray-soft);
}
.is-style-bg-dark .inline-text-media__row {
	background-color: var(--wp--preset--color--blue-primary);
}

/* ── Image — enforce square crop ──────────────────────────── */
.inline-text-media__image img {
	display: block;
	width: 175px;
	height: 175px;
	object-fit: cover;
}

/* ── Content column ───────────────────────────────────────── */
.inline-text-media__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

/* ── Heading ──────────────────────────────────────────────── */
.inline-text-media__heading {
	font-family: var(--font-primary);
	font-size: var(--text-heading-md);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	color: var(--color-text-heading-alt);
	margin: 0;
}

/* ── Body text ────────────────────────────────────────────── */
.inline-text-media__body {
	font-family: var(--font-body);
	font-size: var(--text-body-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-body);
	margin: 0;
}

/* ── Dark-bg overrides ────────────────────────────────────── */
.is-style-bg-dark .inline-text-media__heading {
	color: var(--color-text-body-inverse);
}

/* body text caught by global .is-style-bg-dark p rule */

/* Read More — white text + white arrow on dark bg */
.is-style-bg-dark.inline-text-media-wrap .wp-block-button.is-style-no-style .wp-block-button__link,
.is-style-bg-dark.inline-text-media-wrap .wp-block-button.is-style-no-style a.wp-block-button__link {
	color: var(--color-white);
	background-color: transparent !important;	
}

.is-style-bg-dark.inline-text-media-wrap .wp-block-button.is-style-no-style .wp-block-button__link::after,
.is-style-bg-dark.inline-text-media-wrap .wp-block-button.is-style-no-style a.wp-block-button__link::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M8.88888 3.3335L13.3333 8.00016M13.3333 8.00016L8.88888 12.6668M13.3333 8.00016L2.66666 8.00016' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.is-style-bg-dark.inline-text-media-wrap .wp-block-button.is-style-no-style .wp-block-button__link:hover,
.is-style-bg-dark.inline-text-media-wrap .wp-block-button.is-style-no-style a.wp-block-button__link:hover {
	color: var(--color-white);
	background-color: transparent !important;
}

.is-style-bg-dark.inline-text-media-wrap .wp-block-button.is-style-no-style .wp-block-button__link:hover::after,
.is-style-bg-dark.inline-text-media-wrap .wp-block-button.is-style-no-style a.wp-block-button__link:hover::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M8.88888 3.3335L13.3333 8.00016M13.3333 8.00016L8.88888 12.6668M13.3333 8.00016L2.66666 8.00016' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	transform: translateX(2px);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
	.inline-text-media__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.inline-text-media__image img {
		width: 100%;
		height: 220px;
	}
}