/**
 * Rich Content (Branded) pattern.
 *
 * Modifier on .lfbc-rich-content (defined in rich-content.css) that swaps
 * the corner ring logo for a full-bleed banner image clipped to the card's
 * rounded top corners. All other rich-content body styling — eyebrow,
 * headings, lists, CTA, embedded accordion — is inherited unchanged.
 *
 * The banner sits flush against the card's top + side edges via negative
 * margins that exactly negate the card's top + inline padding (see
 * rich-content.css: `padding-block: 40px ...; padding-inline: clamp(20px, 5vw, 80px)`).
 * If those padding values change in rich-content.css, the negative-margin
 * values below must change in lockstep.
 */

/* Banner row: break out of the card's 40px top padding and clamp() inline
 * padding so the image touches the rounded top corners. `overflow: hidden`
 * + matching `border-start-*-radius` clips the image to the same curve as
 * the card itself.
 *
 * `!important` on the inline margins is required to beat WP's constrained-
 * layout rule (`.is-layout-constrained > :not(.alignfull):not(.alignleft):not(.alignright)`)
 * which sets `margin-left/right: auto !important` on every direct child of
 * a layout-constrained block. Without `!important` the auto-margins win
 * and the banner stays indented by the card's inline padding. */
.lfbc-rich-content--branded > .lfbc-rich-content__banner {
	margin: 0 !important;
	margin-block-start: -60px !important;
	margin-inline: calc(clamp(20px, 5vw, 80px) * -1) !important;
	margin-bottom: 40px;
	overflow: hidden;
	border-start-start-radius: clamp(24px, 5vw, 80px);
	border-start-end-radius: clamp(24px, 5vw, 80px);
}

/* Cap the banner at 225px tall regardless of source image aspect ratio.
 * `object-fit: cover` makes the image fill that 100% × max-height box by
 * scaling + cropping (centered) rather than stretching, so editors can
 * swap in a taller/different-ratio image without distortion. For images
 * shorter than 225px at the rendered width (the bundled 1024×188 sits at
 * ~165px in a 900px card), max-height never engages and the image
 * displays at its intrinsic ratio. */
.lfbc-rich-content--branded > .lfbc-rich-content__banner img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 225px;
	object-fit: cover;
}

/* Restore the 40px gap between banner and the first content block that the
 * card's top padding would normally provide. */
.lfbc-rich-content--branded > .lfbc-rich-content__banner + .lfbc-rich-content__eyebrow {
	margin-block-start: 40px;
}