/**
 * KuLaDu Image Text Component
 *
 * Flexible image-text section with repeatable content blocks.
 * Uses Design System variables from kuladu-variables.css
 *
 * Features:
 * - Responsive grid layout
 * - Configurable column splits
 * - Image styling variants
 * - Optimized readability
 * - Background color variants
 */

/* ==========================================================================
   Container & Layout
   ========================================================================== */

.kuladu-image-text {
	position: relative;
	width: 100%;
}

.kuladu-image-text__container {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

/* Mobile: Stack layout (wie vorher, nur mit besserem Spacing) */
@media (max-width: 767px) {
	.kuladu-image-text__container {
		display: flex;
		flex-direction: column;
		gap: var(--space-14); /* +24px mehr Abstand zwischen Bild und Text */
	}

	/* Mobile stack order: Image first (default) */
	.kuladu-image-text--mobile-image-first .kuladu-image-text__media {
		order: 1;
	}

	.kuladu-image-text--mobile-image-first .kuladu-image-text__content {
		order: 2;
	}

	/* Mobile stack order: Text first */
	.kuladu-image-text--mobile-text-first .kuladu-image-text__content {
		order: 1;
	}

	.kuladu-image-text--mobile-text-first .kuladu-image-text__media {
		order: 2;
	}
}

/* Desktop: Grid layout */
@media (min-width: 768px) {
	.kuladu-image-text__container {
		display: grid;
		align-items: center;
		padding: 0;
	}
}

@media (min-width: 1024px) {
	.kuladu-image-text__container {
		padding: 0;
	}
}

/* ==========================================================================
   Column Split Variants (Desktop)
   ========================================================================== */

/* 50/50 Split */
@media (min-width: 768px) {
	.kuladu-image-text--split-50-50.kuladu-image-text--image-left .kuladu-image-text__container {
		grid-template-columns: 1fr 1fr;
	}

	.kuladu-image-text--split-50-50.kuladu-image-text--image-right .kuladu-image-text__container {
		grid-template-columns: 1fr 1fr;
	}

	/* 40/60 Split (40% Image, 60% Text) */
	.kuladu-image-text--split-40-60.kuladu-image-text--image-left .kuladu-image-text__container {
		grid-template-columns: 2fr 3fr;
	}

	.kuladu-image-text--split-40-60.kuladu-image-text--image-right .kuladu-image-text__container {
		grid-template-columns: 3fr 2fr;
	}

	/* 60/40 Split (60% Image, 40% Text) */
	.kuladu-image-text--split-60-40.kuladu-image-text--image-left .kuladu-image-text__container {
		grid-template-columns: 3fr 2fr;
	}

	.kuladu-image-text--split-60-40.kuladu-image-text--image-right .kuladu-image-text__container {
		grid-template-columns: 2fr 3fr;
	}
}

/* ==========================================================================
   Content Gap (Space between Text and Image)
   ========================================================================== */

/* Mobile gaps already defined above */

@media (min-width: 768px) {
	.kuladu-image-text--gap-sm .kuladu-image-text__container {
		gap: var(--space-6);
	}

	.kuladu-image-text--gap-md .kuladu-image-text__container {
		gap: var(--space-10);
	}

	.kuladu-image-text--gap-lg .kuladu-image-text__container {
		gap: var(--space-14);
	}
}

@media (min-width: 1024px) {
	.kuladu-image-text--gap-sm .kuladu-image-text__container {
		gap: var(--space-8);
	}

	.kuladu-image-text--gap-md .kuladu-image-text__container {
		gap: var(--space-12);
	}

	.kuladu-image-text--gap-lg .kuladu-image-text__container {
		gap: var(--space-16);
	}
}

/* ==========================================================================
   Image Position (Grid Order)
   ========================================================================== */

@media (min-width: 768px) {
	.kuladu-image-text--image-left .kuladu-image-text__media {
		order: 1;
	}

	.kuladu-image-text--image-left .kuladu-image-text__content {
		order: 2;
	}

	.kuladu-image-text--image-right .kuladu-image-text__content {
		order: 1;
	}

	.kuladu-image-text--image-right .kuladu-image-text__media {
		order: 2;
	}
}

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

.kuladu-image-text__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-4); /* Interner Abstand zwischen Elementen */
	/* Padding wie Speech Bubble für konsistente Optik */
	padding: var(--space-0) var(--space-2) var(--space-0) var(--space-2);
}

/* Tablet: Symmetrisches Padding wie Speech Bubble */
@media (min-width: 768px) {
	.kuladu-image-text__content {
		gap: var(--space-5);
		padding: var(--space-10);
	}
}

/* Desktop: Größeres Padding wie Speech Bubble */
@media (min-width: 1024px) {
	.kuladu-image-text__content {
		gap: var(--space-6);
		padding: var(--space-0);
	}
}

/* Optimal readability: max-width for text blocks */
.kuladu-image-text__blocks,
.kuladu-image-text__text,
.kuladu-image-text__highlight {
	max-width: 65ch; /* Optimal: 45-75 characters per line */
}

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

/* Heading */
.kuladu-image-text__heading {
	margin: 0; /* Kein bottom margin - gap regelt Abstand */
	color: var(--color-black);
	/* Typography: h2 or .h2 or .font-sans .font-black .text-3xl */
}

/* Text blocks */
.kuladu-image-text__blocks {
	display: flex;
	flex-direction: column;
	gap: var(--space-5); /* Abstand zwischen Text-Blöcken */
}

.kuladu-image-text__text {
	color: var(--color-gray-700);
	/* Typography: Inherits from native <p> or use .font-serif .text-base */
}

.kuladu-image-text__text p {
	margin: 0 0 var(--space-4) 0;
}

.kuladu-image-text__text p:last-child {
	margin-bottom: 0;
}

/* Highlight Box */
.kuladu-image-text__highlight {
	padding: var(--space-5);
	background: var(--color-white);
	border-left: 4px solid var(--color-primary-500);
	border-radius: var(--radius-md);
}

.kuladu-image-text__highlight-title {
	display: block;
	color: var(--color-black);
	margin-bottom: var(--space-2);
	/* Typography: .font-sans .font-bold .text-lg */
}

.kuladu-image-text__highlight-text {
	margin: 0;
	color: var(--color-gray-700);
	/* Typography: .font-serif .text-base */
}

/* CTA Button Spacing */
.kuladu-image-text__content .kuladu-button {
	align-self: flex-start;
	margin-top: var(--space-2); /* Extra Abstand über dem Button */
}

/* ==========================================================================
   Media (Image) Column
   ========================================================================== */

.kuladu-image-text__media {
	position: relative;
	width: 100%;
	height: auto;
	line-height: 0; /* Verhindert Inline-Block spacing */
	/* overflow: hidden entfernt - sonst wird Shadow abgeschnitten */
}

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

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

/* Mobile: Auto height for stack layout */
@media (max-width: 767px) {
	/* Container has no fixed height in stack layout */
	.kuladu-image-text__media {
		min-height: auto;
		max-height: none;
		height: auto;
	}

	/* Image fills width, height auto */
	.kuladu-image-text__image {
		height: auto;
	}
}

/* Desktop: Auto height based on content */
@media (min-width: 768px) {
	.kuladu-image-text__image {
		min-height: 400px;
	}
}

/* ==========================================================================
   Note: Border-radius styles moved to bubble-media-shadow.css
   Use .kuladu-bubble-media classes for unified border-radius system
   ========================================================================== */

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

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

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

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

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

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

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

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

/* Mobile: Override height: 100% for aspect ratio images to prevent overflow */
@media (max-width: 767px) {
	.kuladu-image-text__image--ratio-1-1,
	.kuladu-image-text__image--ratio-4-3,
	.kuladu-image-text__image--ratio-3-2,
	.kuladu-image-text__image--ratio-16-9,
	.kuladu-image-text__image--ratio-2-3,
	.kuladu-image-text__image--ratio-3-4 {
		height: auto; /* Let aspect-ratio control height */
		width: 100%;
		max-width: 100%; /* Prevent growing beyond container */
	}
}

/* ==========================================================================
   Note: Shadow implementation moved to bubble-media-shadow.css
   Use .kuladu-bubble-media classes for unified shadow system
   ========================================================================== */

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

.kuladu-image-text--bg-sand-100 {
	background: var(--color-sand-100);
}

.kuladu-image-text--bg-white {
	background: var(--color-white);
}

.kuladu-image-text--bg-primary-50 {
	background: var(--color-primary-50);
}

.kuladu-image-text--bg-secondary-50 {
	background: var(--color-secondary-50);
}

.kuladu-image-text--bg-tertiary-50 {
	background: var(--color-tertiary-50);
}

.kuladu-image-text--bg-transparent {
	background: transparent;
}

/* ==========================================================================
   Section Padding Variants
   ========================================================================== */

.kuladu-image-text--padding-none {
	padding: 0;
}

.kuladu-image-text--padding-sm {
	padding: var(--space-8) 0;
}

.kuladu-image-text--padding-md {
	padding: var(--space-12) 0;
}

.kuladu-image-text--padding-lg {
	padding: var(--space-16) 0;
}

.kuladu-image-text--padding-xl {
	padding: var(--space-20) 0;
}

@media (min-width: 768px) {
	.kuladu-image-text--padding-sm {
		padding: var(--space-10) 0;
	}

	.kuladu-image-text--padding-md {
		padding: var(--space-14) 0;
	}

	.kuladu-image-text--padding-lg {
		padding: var(--space-18) 0;
	}

	.kuladu-image-text--padding-xl {
		padding: var(--space-24) 0;
	}
}

@media (min-width: 1024px) {
	.kuladu-image-text--padding-sm {
		padding: var(--space-12) 0;
	}

	.kuladu-image-text--padding-md {
		padding: var(--space-16) 0;
	}

	.kuladu-image-text--padding-lg {
		padding: var(--space-20) 0;
	}

	.kuladu-image-text--padding-xl {
		padding: var(--space-28) 0;
	}
}

/* ==========================================================================
   Accessibility & Print
   ========================================================================== */

/* Focus states for CTA button already handled by button.css */

/* Print optimization */
@media print {
	.kuladu-image-text__media--shadow-hard-orange::after,
	.kuladu-image-text__media--shadow-hard-yellow::after,
	.kuladu-image-text__media--shadow-hard-green::after {
		display: none;
	}

	.kuladu-image-text {
		background: white !important;
	}
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.kuladu-image-text * {
		transition: none !important;
	}
}