/*
 * Figma "Long form design" (Property 1 = with/without image, node
 * 1301:58921 for the "with image" variant) - fixed vertical padding
 * (spacing/24 = 96px), horizontal padding is spacing/4 (16px) at every
 * width, same as every other full-bleed section in this plugin
 * (split-content-section/cta-message-section/form-section).
 *
 * Defaults to white; editable via the block's own "Background color" panel
 * (supports.color.background in block.json) - independent of the right
 * column's own background below.
 */
.wp-block-andrei-saguna-text-image-section {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--base-white);
}

.wp-block-andrei-saguna-text-image-section__row {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--16);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/*
 * Left column: title, and - only when an image is set - the free content
 * pinned to the bottom via space-between (self-stretch is what makes the
 * column's height match the image's own height in the first place). Same
 * 50/50 calc() math as split-content-section/__left, for the same reason:
 * exact equal width regardless of either side's own padding/content.
 */
.wp-block-andrei-saguna-text-image-section__left {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 calc(50% - var(--wp--preset--spacing--16) / 2);
	width: calc(50% - var(--wp--preset--spacing--16) / 2);
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
	align-self: stretch;
}

.wp-block-andrei-saguna-text-image-section__left.is-title-only {
	justify-content: flex-start;
}

h2.wp-block-andrei-saguna-text-image-section__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.1;
	color: #002547;
}

/*
 * The free content well - real core blocks (paragraph/heading/list/quote),
 * same styling approach as long-form-section/__content and
 * split-content-section/__right (see either for the full reasoning behind
 * each individual rule below). Shared between both possible locations this
 * content can render in - paired with the title on the left (image mode) or
 * on its own in the right column (no-image mode) - via one combined
 * selector, since the typography itself never changes, only the container.
 */
.wp-block-andrei-saguna-text-image-section__left-content,
.wp-block-andrei-saguna-text-image-section__right {
	--text-image-heading-color: #002547;
	--text-image-body-color: #3f4a5a;

	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.wp-block-andrei-saguna-text-image-section__left-content :where(h1, h2, h3, h4, h5, h6),
.wp-block-andrei-saguna-text-image-section__right :where(h1, h2, h3, h4, h5, h6) {
	margin-block-start: 0;
	margin-block-end: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.2;
	letter-spacing: 0.8px;
	color: var(--text-image-heading-color);
}

.wp-block-andrei-saguna-text-image-section__left-content p,
.wp-block-andrei-saguna-text-image-section__right p {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
	color: var(--text-image-body-color);
}

.wp-block-andrei-saguna-text-image-section__left-content :where(ul, ol),
.wp-block-andrei-saguna-text-image-section__right :where(ul, ol) {
	margin: 0;
	padding-left: 1.2em;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
	color: var(--text-image-body-color);
}

.wp-block-andrei-saguna-text-image-section__left-content :where(ul, ol) li:not(:last-child),
.wp-block-andrei-saguna-text-image-section__right :where(ul, ol) li:not(:last-child) {
	margin-bottom: var(--wp--preset--spacing--1);
}

.wp-block-andrei-saguna-text-image-section__left-content blockquote,
.wp-block-andrei-saguna-text-image-section__right blockquote {
	margin: 0;
	padding-left: var(--wp--preset--spacing--4);
	border-left: 3px solid var(--wp--preset--color--yellow-400);
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-5);
	line-height: 1.3;
	font-style: italic;
	color: var(--text-image-heading-color);
}

.wp-block-andrei-saguna-text-image-section__left-content blockquote cite,
.wp-block-andrei-saguna-text-image-section__right blockquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	font-style: normal;
	color: var(--text-image-body-color);
}

/*
 * Right column, image mode: matches the Figma "Atom / Image" component
 * (1:1 for a single subject photo, object-cover, rounded) - same 50/50
 * calc() math as __left above. Stretched to the left column's own height
 * (align-self: stretch from the row's default align-items: stretch) takes
 * priority over the 1:1 ratio once the left column's content is tall enough
 * to make a literal square wider than the available 50%; aspect-ratio only
 * governs the height when the row is otherwise short (e.g. title-only-ish
 * left content), via min-height below.
 */
.wp-block-andrei-saguna-text-image-section__image {
	box-sizing: border-box;
	flex: 0 0 calc(50% - var(--wp--preset--spacing--16) / 2);
	width: calc(50% - var(--wp--preset--spacing--16) / 2);
	aspect-ratio: 1 / 1;
	min-height: 320px;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.wp-block-andrei-saguna-text-image-section__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Right column, no-image mode: the free content's own container, "separate
 * from the title" (by request) - same card treatment as
 * split-content-section/__right, but transparent by default (this content
 * reads as plain body copy either way it lands, not a highlighted card) -
 * overridable per-instance via the block's own "Right column" color panel.
 */
.wp-block-andrei-saguna-text-image-section__right {
	box-sizing: border-box;
	flex: 0 0 calc(50% - var(--wp--preset--spacing--16) / 2);
	width: calc(50% - var(--wp--preset--spacing--16) / 2);
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--md);
	background-color: transparent;
}

@media (max-width: 1024px) {
	.wp-block-andrei-saguna-text-image-section__row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--8);
	}

	.wp-block-andrei-saguna-text-image-section__left,
	.wp-block-andrei-saguna-text-image-section__image,
	.wp-block-andrei-saguna-text-image-section__right {
		flex: 1 1 100%;
		width: 100%;
	}

	.wp-block-andrei-saguna-text-image-section__image {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.wp-block-andrei-saguna-text-image-section {
		padding-top: var(--wp--preset--spacing--8);
		padding-bottom: var(--wp--preset--spacing--8);
	}

	h2.wp-block-andrei-saguna-text-image-section__heading {
		font-size: var(--wp--preset--font-size--h-2);
	}
}