/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Hello Elementor child theme.
Author: Brave Ron
Template: hello-elementor
Version: 1.0.2
Text Domain: hello-elementor-child
*/

.treatment-challanges a {
	width: fit-content !important;
}

.newly-diagnosed,
.newly-diagnosed .elementor-element {
	width: 100%;
}

/* About DIPG > "What is DIPG/DMG?" : middle image column full height.
 *
 * Keyed off the authored `.what-is-dipg` section class plus structure, never
 * Elementor's generated ids (.elementor-131 / .elementor-element-912ceb1) —
 * those are the post id and per-element hashes, so they change when the page
 * is rebuilt, duplicated, or imported into another site and the rules would
 * silently stop applying after a deploy.
 *
 * Structure this relies on:
 *   .what-is-dipg > … > .e-con-inner > [row] > [column] > .elementor-widget-image
 */

/* One gapless block from 768px up. The previous split (>=1025 and 768-991)
   left 992-1024px uncovered, where Elementor's own @media(max-width:1024px)
   rules set `--align-self: flex-end` on the column and the image collapsed
   back to its intrinsic height. Below 768 the row stacks, so no stretch. */
@media (min-width: 768px) {
	/* The row. */
	.what-is-dipg .e-con-inner > .e-con.e-child {
		--align-items: stretch;
		align-items: stretch !important;
	}

	/* The column holding the image, whichever one it is. Elementor ships
	   `--align-self: flex-start` (and `flex-end` under 1024px) on this column
	   and applies it as `align-self: var(--align-self)`, so override the custom
	   property as well as the real one. */
	.what-is-dipg .e-con-inner > .e-con.e-child > .e-con.e-child:has(> .elementor-widget-image) {
		--align-self: stretch;
		align-self: stretch !important;
		height: auto !important;
	}

	/* The widget div itself needs the height too — with Elementor's optimized
	   markup the <img> is a direct child, with no .elementor-widget-container
	   or <figure> in between for the height to come from. */
	.what-is-dipg .elementor-widget-image,
	.what-is-dipg .elementor-widget-image .elementor-widget-container,
	.what-is-dipg .elementor-widget-image figure {
		height: 100% !important;
	}

	.what-is-dipg .elementor-widget-image img {
		height: 100% !important;
		width: 100%;
		object-fit: cover;
	}
}