/**
 * Asuma Bento — 4-column desktop, custom stack order on tablet/mobile.
 *
 * Mobile/tablet order: Strategija → Scenariji → Snimanje → Editovanje →
 * Objavljivanje → Menadžer → CTA
 */

.asuma-bento {
	--asuma-bento-gap: 16px;
	--asuma-bento-card-pad: 30px;
	--asuma-bento-card-radius: 15px;
	--asuma-bento-cta-radius: 16px;
	--asuma-bento-fg: #221c1c;
	--asuma-bento-muted: #635f5f;
	--asuma-bento-surface: #ffffff;
	--asuma-bento-cta-gradient: linear-gradient(
		168.73deg,
		#ff6154 29.34%,
		#f7f6f6 88.99%
	);
	width: 100%;
}

.asuma-bento__grid {
	display: flex;
	flex-direction: column;
	gap: var(--asuma-bento-gap);
	width: 100%;
}

.asuma-bento__col {
	display: contents;
}

/* Card base */
.asuma-bento__card {
	background: var(--asuma-bento-surface);
	border-radius: var(--asuma-bento-card-radius) !important;
	box-sizing: border-box;
	margin: 0;
	width: 100%;
}

.asuma-bento__card-inner,
.asuma-bento__cta-inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	min-height: inherit;
	padding: var(--asuma-bento-card-pad);
}

.asuma-bento__card-title {
	color: var(--asuma-bento-fg);
	font-family: inherit;
	font-size: 40px !important;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.3 !important;
	margin: 0;
	word-break: break-word;
}

.asuma-bento__card-body {
	margin: 0;
	padding-right: 16px;
}

.asuma-bento__card-body p {
	color: var(--asuma-bento-muted);
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.5;
	margin: 0;
}

/* Mobile / tablet stack order */
.asuma-bento__card--strategija {
	order: 1;
}

.asuma-bento__card--scenariji {
	order: 2;
}

.asuma-bento__card--snimanje {
	order: 3;
}

.asuma-bento__card--editovanje {
	order: 4;
}

.asuma-bento__card--objavljivanje {
	order: 5;
}

.asuma-bento__card--menadzer {
	order: 6;
}

.asuma-bento__card--cta {
	order: 7;
}

/* Auto height on small screens */
.asuma-bento__card--h-427,
.asuma-bento__card--h-283,
.asuma-bento__card--h-355 {
	min-height: 0;
}

.asuma-bento__card--h-427 .asuma-bento__card-inner,
.asuma-bento__card--h-283 .asuma-bento__card-inner,
.asuma-bento__card--h-355 .asuma-bento__card-inner {
	min-height: 300px;
}

/* CTA card */
.asuma-bento__card--cta {
	background: var(--asuma-bento-cta-gradient);
	border-radius: var(--asuma-bento-cta-radius) !important;
	min-height: 680px;
	overflow: hidden;
	position: relative;
}

.asuma-bento__cta-inner {
	gap: 24px;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}

.asuma-bento__cta-title {
	color: #ffffff !important;
	font-family: inherit;
	font-size: 38px !important;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2 !important;
	margin: 0;
	word-break: break-word;
}

.asuma-bento__cta-media {
	position: absolute;
	left: 0;
	bottom: 0;
	min-height: 462px;
	overflow: hidden;
	width: 100%;
	z-index: -1;
	display: flex;
}

.asuma-bento__cta-media img {
	display: block;
	object-fit: cover;
	object-position: center bottom;
	width: 100%;
	margin-bottom: 0px !important;
}

.asuma-bento__cta-actions {
	margin-top: auto;
	width: 100%;
}

.asuma-bento__cta-btn.as-button {
	width: 100%;
}

/* Desktop: 4 columns, fixed heights */
@media (min-width: 1000px) {
	.asuma-bento__grid {
		align-items: stretch;
		flex-direction: row;
	}

	.asuma-bento__col {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		gap: var(--asuma-bento-gap);
		min-width: 0;
	}

	.asuma-bento__card {
		order: unset;
	}

	.asuma-bento__card--h-427 {
		min-height: 427px;
	}

	.asuma-bento__card--h-283 {
		min-height: 283px;
	}

	.asuma-bento__card--h-355 {
		min-height: 355px;
	}

	.asuma-bento__card--h-427 .asuma-bento__card-inner,
	.asuma-bento__card--h-283 .asuma-bento__card-inner,
	.asuma-bento__card--h-355 .asuma-bento__card-inner {
		min-height: 100%;
	}

	.asuma-bento__col--cta {
		flex: 1 1 0;
	}

	.asuma-bento__card--cta {
		flex: 1 1 auto;
		min-height: 730px;
	}

	.asuma-bento__cta-btn.as-button {
		width: 100%;
	}
}

@media (max-width: 999px) {
	.asuma-bento__card-title {
		font-size: 32px !important;
	}
}

@media (max-width: 790px) {
	.asuma-bento__cta-media img {
		object-position: center top;
		width: 100% !important;
		margin-bottom: -260px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.asuma-bento__cta-btn.as-button {
		transition-duration: 0.01ms;
	}
}