/* ============================================================
 * Keystone Media Section
 * ============================================================
 * Full-width section block with light background, image on one
 * side and heading + paragraphs on the other.
 *
 * Designed to flush-stack against any preceding alignfull block
 * (no margin, padding only) so it sits immediately below a hero.
 *
 * Pattern slug: keystone/media-section
 * Variants:    .keystone-media-section--image-right
 *              .keystone-media-section--no-bg
 * ============================================================ */

.keystone-media-section {
	/* Defaults pull from theme.json tokens — any brand can override. */
	--keystone-media-section-bg:        var(--wp--preset--color--accent-5, #f7f7f8);
	--keystone-media-section-heading:   var(--wp--preset--color--contrast, #111111);
	--keystone-media-section-text:      var(--wp--preset--color--contrast, #111111);
	--keystone-media-section-radius:    12px;

	background:    var(--keystone-media-section-bg);
	color:         var(--keystone-media-section-text);
	padding-block: clamp(2.5rem, 6vw, 5rem);
	/* Horizontal padding directly on the section because WP's layout
	   engine inlines `padding:0` and zeroes out has-global-padding. */
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px)) !important;

	/* Flush-stack with whatever sits above (hero, prior section, etc.). */
	margin-top:    0 !important;
	margin-bottom: 0 !important;
}

.keystone-media-section--no-bg {
	--keystone-media-section-bg: transparent;
}

/* Inner sits inside the alignwide container so it respects the theme's
   wideSize (1340px) while the bg extends full bleed. */
.keystone-media-section__inner {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap:                   clamp(2rem, 5vw, 5rem);
	align-items:           center;
	/* WP layout engine doesn't apply alignwide constraints inside wp:html.
	   Mirror what .is-layout-constrained > .alignwide would do. */
	max-width:             var(--wp--style--global--wide-size, 1340px);
	margin-inline:         auto;
}

/* Image-right variant — flip the columns and visual order. */
.keystone-media-section--image-right .keystone-media-section__inner {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.keystone-media-section--image-right .keystone-media-section__image {
	order: 2;
}

.keystone-media-section--image-right .keystone-media-section__text {
	order: 1;
}

/* ── Image column ──────────────────────────────────────────── */
/* Image hugs the outer margin of its column (left margin by default,
   right margin when in --image-right variant). Do not center. */
.keystone-media-section__image {
	display:         flex;
	justify-content: flex-start;
}

.keystone-media-section--image-right .keystone-media-section__image {
	justify-content: flex-end;
}

/* Figure shrinks to image's intrinsic width (max-content) so the parent's
   justify-content can actually align it. With width:100% the figure would
   fill the column and the image would always sit at its left edge regardless
   of justify-content. */
.keystone-media-section__image figure,
.keystone-media-section__visual {
	margin:    0;
	width:     max-content;
	max-width: 100%;
}

.keystone-media-section__image img {
	display:       block;
	height:        auto;
	max-width:     100%;
	border-radius: var(--keystone-media-section-radius);
}

/* ── Text column ───────────────────────────────────────────── */
.keystone-media-section__text {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
}

.keystone-media-section__heading {
	color:          var(--keystone-media-section-heading);
	margin:         0;
	font-size:      clamp(1.5rem, 3.5vw, 2.25rem);
	line-height:    1.2;
	font-weight:    700;
	letter-spacing: -0.01em;
}

/* GLOBAL RULE — text inside Keystone components MUST respect the surrounding
   column / container margins. Do NOT add `max-width: Xch` caps on paragraphs
   or headings — they should flow to the same right edge as their heading. */
.keystone-media-section__paragraph {
	color:       var(--keystone-media-section-text);
	margin:      0;
	font-size:   var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
}

/* ── Mobile stack ──────────────────────────────────────────── */
@media (max-width: 781px) {
	.keystone-media-section__inner,
	.keystone-media-section--image-right .keystone-media-section__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Image first, text below — matches the mobile screenshot reference. */
	.keystone-media-section__image,
	.keystone-media-section--image-right .keystone-media-section__image {
		order: 1;
		justify-content: center;
	}

	.keystone-media-section__text,
	.keystone-media-section--image-right .keystone-media-section__text {
		order: 2;
	}

	/* Figure can fill the column on mobile so the cap + auto margin work. */
	.keystone-media-section__image figure,
	.keystone-media-section__visual {
		width: 100%;
	}

	/* Left-align the image with the heading below it (no centered
	   whitespace on its left that reads as an artificial margin). */
	.keystone-media-section__image img {
		max-width:     320px;
		margin-inline: 0;
	}
}

/* ============================================================
 * BRAND: VaaSBlock
 * Navy heading colour to match the brand's existing visual
 * language on /rma-badges/ and similar landing pages.
 * ============================================================ */
body.brand-vaasblock .keystone-media-section {
	--keystone-media-section-heading: #1a1a72;
	--keystone-media-section-text:    #1a1a1a;
}