/**
 * Speech Bubble Component
 *
 * Unified bubble system for text AND image content.
 * Used in Hero, Event Highlights, Image-Bubble, Image-Text, and Text-Bubble.
 *
 * Uses Design System variables from kuladu-variables.css
 */

/* ==========================================================================
   Shadow Offset Variables (responsive, size variants)
   ========================================================================== */

/* Size: Medium (default) - matches hard-shadow-xl/2xl */
.kuladu-speech-bubble-wrapper {
	--bubble-shadow-offset: 12px; /* Mobile */
	--bubble-shadow-color: var(--color-black); /* Default: Black */
}

@media (min-width: 768px) {
	.kuladu-speech-bubble-wrapper {
		--bubble-shadow-offset: 16px; /* Tablet */
	}
}

@media (min-width: 1024px) {
	.kuladu-speech-bubble-wrapper {
		--bubble-shadow-offset: 20px; /* Desktop */
	}
}

/* Size: Small - matches hard-shadow-lg */
.kuladu-speech-bubble-wrapper--size-sm {
	--bubble-shadow-offset: 8px; /* All viewports */
}

/* ==========================================================================
   Bubble Wrapper (handles shadow spacing)
   ========================================================================== */

.kuladu-speech-bubble-wrapper {
	/* No base padding - only when shadow is present */
}

/* Wrapper padding when shadow is present (default: always has padding) */
.kuladu-speech-bubble-wrapper {
	padding-right: var(--bubble-shadow-offset);
	padding-bottom: var(--bubble-shadow-offset);
}

/* No shadow: remove padding and completely disable shadow */
.kuladu-speech-bubble-wrapper--no-shadow {
	padding: 0 !important;
}

.kuladu-speech-bubble-wrapper--no-shadow .kuladu-speech-bubble {
	box-shadow: none !important;
}

/* Automatically remove padding when child has outline-only (no shadow, no bg) */
.kuladu-speech-bubble-wrapper:has(.kuladu-speech-bubble--outline-only) {
	padding: 0 !important;
}

/* Also remove padding when child has shadow-none */
.kuladu-speech-bubble-wrapper:has(.kuladu-speech-bubble--shadow-none) {
	padding: 0 !important;
}

/* Legacy shadow color classes (for backward compatibility) */
.kuladu-speech-bubble-wrapper--shadow-green,
.kuladu-speech-bubble-wrapper--shadow-yellow,
.kuladu-speech-bubble-wrapper--shadow-orange,
.kuladu-speech-bubble-wrapper--shadow-sand,
.kuladu-speech-bubble-wrapper--shadow-white,
.kuladu-speech-bubble-wrapper--shadow-black,
.kuladu-speech-bubble-wrapper--shadow-none {
	/* Deprecated: Shadow color is now controlled via --bubble-shadow-color variable */
}

/* ==========================================================================
   Base Speech Bubble
   ========================================================================== */

.kuladu-speech-bubble {
	position: relative;
	/* Equal padding on all sides (wrapper handles shadow compensation) */
	padding: var(--space-8);

	/* Speech bubble look: Asymmetrische Border-Radii (Spitze unten links) */
	/* Uhrzeigersinn: top-left, top-right, bottom-right, bottom-left */
	border-top-left-radius: var(--radius-speech-bubble-lg);
	border-top-right-radius: var(--radius-speech-bubble-md);
	border-bottom-right-radius: var(--radius-speech-bubble-lg);
	border-bottom-left-radius: var(--radius-speech-bubble-sm);

	/* Border immer schwarz 2px */
	border: 2px solid var(--color-black);
	background: var(--color-white);

	/* Default Shadow - uses CSS variable for color */
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--bubble-shadow-color);

	/* Smooth transitions */
	transition: all 0.3s ease;
}

/* Tablet - larger padding */
@media (min-width: 768px) {
	.kuladu-speech-bubble {
		padding: var(--space-10);
	}
}

/* Desktop - maximum padding */
@media (min-width: 1024px) {
	.kuladu-speech-bubble {
		padding: var(--space-10);
	}
}

/* ==========================================================================
   Color Variants (with colored hard shadows) - LEGACY
   Using CSS variable for shadow offset
   ========================================================================== */

/* Primary - Light Orange Background (für Hero) */
.kuladu-speech-bubble--primary {
	background: var(--color-tertiary-100);
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--bubble-shadow-color);
}

/* Secondary - White/Green Shadow */
.kuladu-speech-bubble--secondary {
	background: var(--color-white);
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--bubble-shadow-color);
}

/* Accent - Light Yellow Background */
.kuladu-speech-bubble--accent {
	background: var(--color-secondary-100);
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--bubble-shadow-color);
}

/* Neutral - Sand Background */
.kuladu-speech-bubble--neutral {
	background: var(--color-sand-100);
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--bubble-shadow-color);
}

/* ==========================================================================
   Extended Background Color Variants
   ========================================================================== */

/* White Background */
.kuladu-speech-bubble--bg-white {
	background: var(--color-white);
}

/* Sand Background */
.kuladu-speech-bubble--bg-sand {
	background: var(--color-sand-100);
}

/* Light Primary Green Background */
.kuladu-speech-bubble--bg-light-green {
	background: var(--color-primary-50);
}

/* Light Secondary Yellow Background */
.kuladu-speech-bubble--bg-light-yellow {
	background: var(--color-secondary-100);
}

/* Light Tertiary Orange Background */
.kuladu-speech-bubble--bg-light-orange {
	background: var(--color-tertiary-100); /* #FFE5D7 */
}

/* Light Grey Background */
.kuladu-speech-bubble--bg-light-grey {
	background: var(--color-gray-50); /* #f5f5f5 */
}

/* Medium Grey Background */
.kuladu-speech-bubble--bg-grey {
	background: var(--color-gray-100); /* #e5e5e5 */
}

/* Black Background */
.kuladu-speech-bubble--bg-black {
	background: var(--color-black);
}

.kuladu-speech-bubble--bg-black,
.kuladu-speech-bubble--bg-black h1,
.kuladu-speech-bubble--bg-black h2,
.kuladu-speech-bubble--bg-black h3,
.kuladu-speech-bubble--bg-black h4,
.kuladu-speech-bubble--bg-black h5,
.kuladu-speech-bubble--bg-black h6,
.kuladu-speech-bubble--bg-black p {
	color: var(--color-white);
}

/* ==========================================================================
   Extended Hard Shadow Color Variants
   Using CSS variable for responsive shadow offset
   ========================================================================== */

/* Hard Shadow - Primary Green */
.kuladu-speech-bubble--shadow-green {
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--color-primary-500);
}

/* Hard Shadow - Secondary Yellow */
.kuladu-speech-bubble--shadow-yellow {
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--color-secondary-500);
}

/* Hard Shadow - Tertiary Orange */
.kuladu-speech-bubble--shadow-orange {
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--color-tertiary-500);
}

/* Hard Shadow - Sand */
.kuladu-speech-bubble--shadow-sand {
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--color-sand-400);
}

/* Hard Shadow - White */
.kuladu-speech-bubble--shadow-white {
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--color-white);
}

/* Hard Shadow - Black */
.kuladu-speech-bubble--shadow-black {
	box-shadow: var(--bubble-shadow-offset) var(--bubble-shadow-offset) 0 0 var(--color-black);
}

/* No Shadow */
.kuladu-speech-bubble--shadow-none {
	box-shadow: none;
}

/* Outline Only - Black border, no shadow, no background (for images) */
.kuladu-speech-bubble--outline-only {
	box-shadow: none;
	background: transparent;
	padding: 0;
	overflow: hidden;
}

/* ==========================================================================
   Border-Radius Varianten (Spitzen-Position wählbar)
   Basis: 80px, 80px, 40px, 12px (Spitze unten links)
   ========================================================================== */

/* Spitze unten links (default) */
.kuladu-speech-bubble--tip-bottom-left {
	border-top-left-radius: var(--radius-speech-bubble-lg);
	border-top-right-radius: var(--radius-speech-bubble-md);
	border-bottom-right-radius: var(--radius-speech-bubble-lg);
	border-bottom-left-radius: var(--radius-speech-bubble-sm);
}

/* Spitze unten rechts */
.kuladu-speech-bubble--tip-bottom-right {
	border-top-left-radius: var(--radius-speech-bubble-md);
	border-top-right-radius: var(--radius-speech-bubble-lg);
	border-bottom-left-radius: var(--radius-speech-bubble-lg);
	border-bottom-right-radius: var(--radius-speech-bubble-sm);
}

/* Spitze oben links */
.kuladu-speech-bubble--tip-top-left {
	border-top-right-radius: var(--radius-speech-bubble-lg);
	border-bottom-right-radius: var(--radius-speech-bubble-md);
	border-bottom-left-radius: var(--radius-speech-bubble-lg);
	border-top-left-radius: var(--radius-speech-bubble-sm);
}

/* Spitze oben rechts */
.kuladu-speech-bubble--tip-top-right {
	border-top-left-radius: var(--radius-speech-bubble-lg);
	border-bottom-left-radius: var(--radius-speech-bubble-md);
	border-bottom-right-radius: var(--radius-speech-bubble-lg);
	border-top-right-radius: var(--radius-speech-bubble-sm);
}

/* ==========================================================================
   Size Variants (Optional)
   ========================================================================== */

.kuladu-speech-bubble--sm {
	padding: var(--space-4);
}

@media (min-width: 768px) {
	.kuladu-speech-bubble--sm {
		padding: var(--space-5);
	}
}

.kuladu-speech-bubble--lg {
	padding: var(--space-8);
}

@media (min-width: 768px) {
	.kuladu-speech-bubble--lg {
		padding: var(--space-10);
	}
}

@media (min-width: 1024px) {
	.kuladu-speech-bubble--lg {
		padding: var(--space-12);
	}
}

/* ==========================================================================
   Speech Bubble with Tail/Arrow (Optional - for later use)
   ========================================================================== */

.kuladu-speech-bubble--with-tail::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

/* Tail pointing down */
.kuladu-speech-bubble--tail-bottom::after {
	bottom: calc(var(--border-width-2) * -1 - 20px);
	left: 50%;
	transform: translateX(-50%);
	border-width: 20px 15px 0 15px;
	border-color: var(--color-neutral-900) transparent transparent transparent;
}

/* Tail pointing left */
.kuladu-speech-bubble--tail-left::after {
	left: calc(var(--border-width-2) * -1 - 20px);
	top: 50%;
	transform: translateY(-50%);
	border-width: 15px 20px 15px 0;
	border-color: transparent var(--color-neutral-900) transparent transparent;
}

/* Tail pointing right */
.kuladu-speech-bubble--tail-right::after {
	right: calc(var(--border-width-2) * -1 - 20px);
	top: 50%;
	transform: translateY(-50%);
	border-width: 15px 0 15px 20px;
	border-color: transparent transparent transparent var(--color-neutral-900);
}

/* ==========================================================================
   Content Styling (Layout only - Typography via kuladu-typography.css)
   ========================================================================== */

/* Note: Typography for h1-h6 and p elements is now defined ONLY in kuladu-typography.css
   These selectors only handle spacing and color overrides inside the bubble context */

.kuladu-speech-bubble h1,
.kuladu-speech-bubble h2,
.kuladu-speech-bubble h3,
.kuladu-speech-bubble h4,
.kuladu-speech-bubble h5,
.kuladu-speech-bubble h6 {
	margin-top: 0;
	color: var(--color-black);
	/* Typography: Inherits from native h1-h6 in kuladu-typography.css */
}

.kuladu-speech-bubble h1,
.kuladu-speech-bubble h2 {
	margin-bottom: var(--space-4);
}

.kuladu-speech-bubble h3,
.kuladu-speech-bubble h4,
.kuladu-speech-bubble h5,
.kuladu-speech-bubble h6 {
	margin-bottom: var(--space-3);
}

.kuladu-speech-bubble p {
	margin-top: 0;
	margin-bottom: var(--space-4);
	color: var(--color-black);
	/* Typography: Inherits from native <p> in kuladu-typography.css */
}

.kuladu-speech-bubble p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Image Support - Bubble as Image Container
   ========================================================================== */

/* When bubble contains an image instead of text */
.kuladu-speech-bubble--has-image {
	padding: 0; /* No padding for images */
	background: transparent; /* No background */
	border: none; /* No border on container (image has border) */
	line-height: 0; /* Prevents inline-block spacing */
}

/* Image inside bubble */
.kuladu-speech-bubble__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border: 2px solid var(--color-black); /* Border on image */
	border-radius: inherit; /* Inherits from parent bubble */
	vertical-align: top; /* Prevents baseline gap */
	position: relative;
	z-index: 1;
}

/* Aspect Ratio Variants for Images */
.kuladu-speech-bubble__image--ratio-auto {
	width: 100%;
	height: auto;
}

.kuladu-speech-bubble__image--ratio-1-1 {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.kuladu-speech-bubble__image--ratio-4-3 {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.kuladu-speech-bubble__image--ratio-3-2 {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kuladu-speech-bubble__image--ratio-16-9 {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.kuladu-speech-bubble__image--ratio-2-3 {
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.kuladu-speech-bubble__image--ratio-3-4 {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* ==========================================================================
   Focus/Hover States (for interactive bubbles)
   ========================================================================== */

.kuladu-speech-bubble--interactive {
	cursor: pointer;
	transition: all var(--duration-normal) var(--ease-smooth);
}

.kuladu-speech-bubble--interactive:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hard-lg);
}

.kuladu-speech-bubble--interactive:active {
	transform: translateY(0);
}

.kuladu-speech-bubble--interactive:focus-visible {
	outline: 2px solid var(--color-primary-600);
	outline-offset: 4px;
}