{% import 'elementor/macros' as m %}
{% if settings.image_url %}
	{% set wrapper_tag = 'div' %}

	{% if settings.link is defined and settings.link.href is defined and settings.link.href is not empty %}
		{% set wrapper_tag = settings.link.tag | default('a') %}
	{% endif %}

	{% set wrapper_classes = ['aae-a-post-image-wrapper'] | merge([ base_styles.base ]) | join(' ') %}
	{% set img_classes = ['aae-a-post-image'] | merge(settings.classes | default([])) | join(' ') %}

	{# `auto` used to emit NO aspect-ratio at all, leaving the wrapper unsized
	   until the image bytes arrive — under a lazyloading cache plugin that
	   means a 0-height box whose late arrival shifts everything below it,
	   mid-scroll, after ScrollTrigger has measured. When the attachment's
	   intrinsic ratio is known, reserve it; a set ratio keeps winning. #}
	{% set ratio = '' %}
	{% if settings.aspect_ratio is defined and settings.aspect_ratio != 'auto' %}
		{% set ratio = settings.aspect_ratio | default('16/9') %}
	{% elseif settings.image_width is defined and settings.image_width > 0 and settings.image_height > 0 %}
		{% set ratio = settings.image_width ~ ' / ' ~ settings.image_height %}
	{% endif %}

	<{{ wrapper_tag }} class="{{ wrapper_classes }}"
		{{- ' ' }}{{ m.render_link_attributes(settings.link | default(null)) }}
		style="{% if ratio %}aspect-ratio: {{ ratio }};{% endif %}"
		data-interaction-id="{{ interaction_id | default('') }}"
		{{- m.render_custom_attributes(settings) }}>

		{# width/height 100% make the img FILL the aspect-ratio wrapper (object-fit
		   crops the overflow). This used to live in the widget stylesheet; that
		   file is bypassed now, so the fill must ship inline — otherwise every
		   image renders at its own natural ratio and the grid looks uneven. #}
		<img src="{{ settings.image_url }}"
			alt="{{ settings.image_alt }}"
			class="{{ img_classes }}"
			{% if settings.image_width is defined and settings.image_width > 0 and settings.image_height > 0 %}width="{{ settings.image_width }}" height="{{ settings.image_height }}"{% endif %}
			style="object-fit: {{ settings.object_fit | default('cover') }}; width: 100%; height: 100%; display: block;" />

		{{ children_placeholder | default('') | raw }}
	</{{ wrapper_tag }}>
{% endif %}