/**
 * KuLaDu Image Bubble Component
 *
 * Standalone image with speech bubble styling.
 * Reuses styles from Image Text component for consistency.
 */

/* ==========================================================================
   Container
   ========================================================================== */

.kuladu-image-bubble {
	position: relative;
	width: 100%;
	display: block;
}

/* ==========================================================================
   Media (Image) Container
   ========================================================================== */

.kuladu-image-bubble__media {
	position: relative;
	width: 100%;
	height: auto;
	line-height: 0; /* Verhindert Inline-Block spacing */
}

.kuladu-image-bubble__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border: 2px solid var(--color-black);
	vertical-align: top; /* Verhindert Baseline gap */
}

/* ==========================================================================
   Note: Shadow and border-radius styles moved to bubble-media-shadow.css
   Components now use .kuladu-bubble-media classes for unified system
   ========================================================================== */

/* ==========================================================================
   Aspect Ratio Variants
   ========================================================================== */

/* Auto (Original) - Default */
.kuladu-image-bubble__image--ratio-auto {
	width: 100%;
	height: auto;
}

/* 1:1 (Quadrat) */
.kuladu-image-bubble__image--ratio-1-1 {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* 4:3 (Standard Landscape) */
.kuladu-image-bubble__image--ratio-4-3 {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 3:2 (Klassisch Landscape) */
.kuladu-image-bubble__image--ratio-3-2 {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* 16:9 (Widescreen) */
.kuladu-image-bubble__image--ratio-16-9 {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* 2:3 (Portrait) */
.kuladu-image-bubble__image--ratio-2-3 {
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

/* 3:4 (Standard Portrait) */
.kuladu-image-bubble__image--ratio-3-4 {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* ==========================================================================
   Note: All shadow implementations moved to bubble-media-shadow.css
   Component now uses .kuladu-bubble-media classes for unified shadow system
   ========================================================================== */