/**
* Block: Content Image (dhukr/content-image).
* Depends on tokens.css (block.json) and global.css (.dh-section, .dh-btn,
* .dh-pretitle, section backgrounds).
*/

/* ==========================================================================
Row
========================================================================== */

.dh-content-image__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: var(--dh-space-48);
	margin-inline: auto; /* centers the row when "Row max width" is set */
}

/* Cards sit closer to their image than plain text does. */
.dh-content-image__row:has(.dh-content-image__content--card_cream),
.dh-content-image__row:has(.dh-content-image__content--card_dark) {
	gap: var(--dh-space-24);
}

/* Column ratio (text / image). With "image on the left" the columns swap. */
.dh-content-image__row--ratio-40-60 {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.dh-content-image__row--ratio-60-40 {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.dh-content-image__row--image-left.dh-content-image__row--ratio-40-60 {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.dh-content-image__row--image-left.dh-content-image__row--ratio-60-40 {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.dh-content-image .dh-content-image__row--no-image {
	grid-template-columns: minmax(0, 1fr);
}

/* Visual swap only; DOM order stays content -> image. */
.dh-content-image__row--image-left .dh-content-image__media {
	order: -1;
}

/* ==========================================================================
Background image covering only the top part of the section
(the row overlaps its bottom edge, the rest of the section stays white).
========================================================================== */

.dh-content-image__section--bg-top .dh-section__bg-media {
	height: 70%;
}

/* ==========================================================================
Content
========================================================================== */

.dh-content-image__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--dh-space-16);
	min-width: 0;
}

.dh-content-image__content--card_cream,
.dh-content-image__content--card_dark {
	padding: var(--dh-space-48);
	border-radius: var(--dh-radius-card);
}

.dh-content-image__content--card_cream {
	background-color: var(--dh-color-bg-alt);
}

/* card_dark also has .dh-section--bg-dark (background + text tokens). */

.dh-content-image__icon {
	width: var(--dh-icon-badge);
	height: var(--dh-icon-badge);
	padding: var(--dh-space-8);
	border-radius: var(--dh-radius-round);
	background-color: var(--dh-color-white);
	object-fit: contain;
}

.dh-content-image__section .dh-content-image__title {
	color: var(--dh-color-heading);
	margin-bottom: 0;
}

.dh-content-image__text {
	color: var(--dh-color-text);
	font-size: var(--dh-fs-body-18);
	line-height: var(--dh-lh-body);
}

.dh-content-image__text > * + * {
	margin-top: var(--dh-space-16);
}

.dh-content-image__text :where(ul, ol) {
	padding-left: 1.25em;
}

.dh-content-image__text :where(li + li) {
	margin-top: var(--dh-space-8);
}

.dh-content-image__text :where(a) {
	color: var(--dh-color-heading);
}

.dh-content-image__actions {
	margin-top: var(--dh-space-8);
}

/* "See it in action" style text link */
.dh-content-image__link {
	display: inline-flex;
	align-items: center;
	gap: var(--dh-space-12);
	margin-top: var(--dh-space-8);
	color: var(--dh-color-accent-text);
	font-family: var(--dh-font-body);
	font-size: var(--dh-fs-body-18);
	font-weight: var(--dh-fw-semibold);
	text-decoration: none;
	text-transform: uppercase;
}

.dh-content-image__link:hover {
	text-decoration: underline;
}

/* ==========================================================================
Image: fills the row height next to cards, rounded corners.
========================================================================== */

.dh-content-image__media {
	min-width: 0;
}

.dh-content-image__img {
	width: 100%;
	height: 100%;
	border-radius: var(--dh-radius-card);
	object-fit: cover;
}

.dh-content-image__section--bg-top .dh-container {
	margin-top: 200px; 
}

/* ==========================================================================
Tablet
========================================================================== */

@media screen and (max-width: 1200px) {
	.dh-content-image__row {
		gap: var(--dh-space-32);
	}

	.dh-content-image__content--card_cream,
	.dh-content-image__content--card_dark {
		padding: var(--dh-space-32);
	}
}

/* ==========================================================================
Mobile: one column, image always below the text.
The ".dh-content-image" prefix keeps these rules above the ratio rules.
========================================================================== */

@media only screen and (max-width: 768px) {
	.dh-content-image .dh-content-image__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dh-space-24);
	}

	.dh-content-image .dh-content-image__row--image-left .dh-content-image__media {
		order: 0;
	}

	.dh-content-image__content--card_cream,
	.dh-content-image__content--card_dark {
		padding: var(--dh-space-24);
	}

	.dh-content-image__img {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.dh-content-image__section--bg-top .dh-section__bg-media {
		height: 40%;
	}

	.dh-content-image__section--bg-top .dh-container {
		margin-top: 100px; 
	}
}

.dh-content-image__link-icon {
	display: inline-flex;
}

/* Desktop and tablet: the image never sets the row height; it fills the
 * column next to the text (height = text column) and is cropped to fit. */
@media screen and (min-width: 769px) {
	.dh-content-image__media {
		position: relative;
	}

	.dh-content-image__img {
		position: absolute;
		inset: 0;
	}
}