/*
 * Bento "De ce Salv Med". Figma: 05 De ce Salv Med (node 60:198), desktop frame 1512.
 * Grid 648 / 312 / 312 (1320 wide), two 280px rows with 24px gaps: the first card spans both rows,
 * the other four fill the right-hand 2x2. Tablet: 2 columns, large card on top. Mobile: 1 column.
 */
.sm-bento {
	box-sizing: border-box;
	padding-top: calc(var(--wp--preset--spacing--96) + var(--wp--preset--spacing--16));
	padding-bottom: calc(var(--wp--preset--spacing--96) + var(--wp--preset--spacing--16));
	background-color: var(--wp--preset--color--neutral-white);
	color: var(--wp--preset--color--brand-navy);
}

.sm-bento--pale {
	background-color: var(--wp--preset--color--neutral-pale);
}

.sm-bento *,
.sm-bento *::before,
.sm-bento *::after {
	box-sizing: border-box;
}

.sm-bento__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--48);
	width: 100%;
	max-width: calc(1320px + 2 * var(--sm-page-padding));
	margin-inline: auto;
	padding-inline: var(--sm-page-padding);
}

.sm-bento__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--32);
}

.sm-bento__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--16);
	min-width: 0;
}

.sm-bento__left > *,
.sm-bento__desc {
	margin: 0;
}

.sm-bento__title {
	max-width: 700px;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--brand-navy);
}

.sm-bento__desc {
	flex: none;
	width: 480px;
	max-width: 100%;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.667;
	color: var(--wp--preset--color--neutral-muted);
}

/* Grid */
.sm-bento__grid {
	display: grid;
	grid-template-columns: minmax(0, 648fr) minmax(0, 312fr) minmax(0, 312fr);
	grid-auto-rows: 280px;
	gap: var(--wp--preset--spacing--24);
}

.sm-bento--big-right .sm-bento__grid {
	grid-template-columns: minmax(0, 312fr) minmax(0, 312fr) minmax(0, 648fr);
}

.sm-bento-card--large {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.sm-bento--big-right .sm-bento-card--large {
	grid-column: 3;
}

/* Cards */
.sm-bento-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	min-width: 0;
	padding: var(--wp--preset--spacing--32);
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--wp--preset--color--neutral-white);
	color: var(--wp--preset--color--brand-navy);
}

.sm-bento-card--border {
	border: 1px solid var(--wp--preset--color--neutral-line);
}

.sm-bento-card--navy {
	background-color: var(--wp--preset--color--brand-navy);
	color: var(--wp--preset--color--neutral-white);
}

.sm-bento-card--red {
	background-color: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--neutral-white);
}

.sm-bento-card--pale {
	background-color: var(--wp--preset--color--neutral-pale);
}

.sm-bento-card--photo {
	justify-content: flex-end;
	padding: 40px;
	background-color: var(--wp--preset--color--brand-navy-dark);
	color: var(--wp--preset--color--neutral-white);
}

.sm-bento-card__bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.sm-bento-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 35%,
		color-mix(in srgb, var(--wp--preset--color--brand-navy-dark) 90%, transparent) 100%
	);
}

.sm-bento-card > *:not(.sm-bento-card__bg):not(.sm-bento-card__overlay) {
	position: relative;
}

.sm-bento-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: 100%;
}

.sm-bento-card__body > *,
.sm-bento-card__number {
	margin: 0;
}

/* Title: 24px bold by default */
.sm-bento-card__title {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: -0.01em;
	color: inherit;
	overflow-wrap: anywhere;
}

.sm-bento-card__text {
	font-size: var(--wp--preset--font-size--small);
	line-height: 22px;
	color: var(--wp--preset--color--neutral-muted);
}

.sm-bento-card--navy .sm-bento-card__text {
	color: inherit;
	opacity: 0.75;
}

.sm-bento-card--red .sm-bento-card__text {
	color: inherit;
	opacity: 0.9;
}

/* Number card: smaller semibold title under a big number */
.sm-bento-card--top-number .sm-bento-card__title {
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: 26px;
	letter-spacing: 0;
}

.sm-bento-card__number {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 96px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--brand-red);
}

.sm-bento-card--red .sm-bento-card__number {
	color: var(--wp--preset--color--neutral-white);
}

/* Large photo card: 40px title, 18px text */
.sm-bento-card--large .sm-bento-card__body {
	max-width: 480px;
	gap: 12px;
}

.sm-bento-card--large .sm-bento-card__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.sm-bento-card--large .sm-bento-card__text {
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.667;
	opacity: 0.85;
	color: inherit;
}

/* Top elements */
.sm-bento-card__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	background-color: var(--wp--preset--color--brand-red);
	border-radius: var(--wp--preset--border-radius--md);
}

.sm-bento-card--red .sm-bento-card__badge {
	background-color: var(--wp--preset--color--brand-navy);
}

.sm-bento-card__badge img {
	width: 32px;
	height: 32px;
}

.sm-bento-card__logo {
	display: block;
	width: 111px;
	height: 80px;
	padding: 10px;
	background-color: var(--wp--preset--color--neutral-line);
	border-radius: var(--wp--preset--border-radius--md);
	overflow: hidden;
}

.sm-bento-card__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sm-bento-card__avatars {
	display: flex;
}

.sm-bento-card__avatar {
	flex: none;
	width: 56px;
	height: 56px;
	max-width: none;
	margin-right: -12px;
	border-radius: 50%;
	object-fit: cover;
}

.sm-bento-card__avatar:last-child {
	margin-right: 0;
}

.sm-bento-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--link);
	font-weight: 600;
	line-height: 22px;
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
}

.sm-bento-card__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.sm-bento-card__link img {
	flex: none;
	width: 16px;
	height: 16px;
}

/* Tablet: large card on top, 2x2 below */
@media (max-width: 1024px) {
	.sm-bento__grid,
	.sm-bento--big-right .sm-bento__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sm-bento-card--large,
	.sm-bento--big-right .sm-bento-card--large {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 480px;
	}
}

/* Mobile: one column, cards size to content */
@media (max-width: 767px) {
	.sm-bento {
		padding-block: var(--wp--preset--spacing--64);
	}

	.sm-bento__inner {
		gap: var(--wp--preset--spacing--32);
	}

	.sm-bento__heading {
		flex-direction: column;
		align-items: flex-start;
	}

	.sm-bento__desc {
		width: 100%;
	}

	.sm-bento__grid,
	.sm-bento--big-right .sm-bento__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: var(--wp--preset--spacing--16);
	}

	.sm-bento-card {
		min-height: 240px;
		gap: var(--wp--preset--spacing--32);
	}

	.sm-bento-card--large,
	.sm-bento--big-right .sm-bento-card--large {
		min-height: 420px;
		padding: var(--wp--preset--spacing--24);
	}
}