/*
 * Everything we bake (/bakery/everything/), per the Claude Design
 * "Website/Everything We Bake.html". Shared hub layout: assets/css/hub.css.
 */

.mbh-tiles5 {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.mbh-dep {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 28px;
	overflow: hidden;
	background: var(--mbh-cream);
	color: var(--mbh-ink);
	text-decoration: none;
	transition: transform 0.2s;
}

.mbh-dep:hover {
	color: var(--mbh-ink);
	transform: translateY(-4px);
}

.mbh-dep__im {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mbh-paper);
}

.mbh-dep__im img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mbh-dep__b {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 20px 20px;
}

.mbh-dep__t {
	display: block;
	font-family: var(--mbh-sub);
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mbh-dep__s {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mbh-mute);
}

.mbh-dep__go {
	flex: none;
	width: 28px;
	height: 17px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18' fill='none' stroke='%23901C3B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12.5c4.5-6.2 12.2-8.6 23-5.4'/%3E%3Cpath d='M19.6 2.6l5.6 4.6-6 3.6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.3s cubic-bezier(0.34, 1.7, 0.64, 1);
}

.mbh-dep:hover .mbh-dep__go {
	transform: translateX(3px);
}

.mbh-dep.is-on {
	background: var(--mbh-jam);
	color: var(--mbh-cream);
}

.mbh-dep.is-on:hover {
	color: var(--mbh-cream);
}

.mbh-dep.is-on .mbh-dep__s {
	color: #f6d3bc;
}

.mbh-dep.is-on .mbh-dep__go {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18' fill='none' stroke='%23F2BF91' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12.5c4.5-6.2 12.2-8.6 23-5.4'/%3E%3Cpath d='M19.6 2.6l5.6 4.6-6 3.6'/%3E%3C/svg%3E");
}

@media (max-width: 1100px) {
	.mbh-tiles5 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 14px;
	}

	.mbh-tiles5 > .mbh-dep {
		grid-column: span 2;
	}

	.mbh-tiles5 > .mbh-dep:nth-child(-n + 2) {
		grid-column: span 3;
	}
}

@media (max-width: 640px) {
	.mbh-tiles5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.mbh-tiles5 > .mbh-dep,
	.mbh-tiles5 > .mbh-dep:nth-child(-n + 2) {
		grid-column: auto;
	}

	.mbh-tiles5 > .mbh-dep:last-child {
		grid-column: 1 / -1;
	}

	.mbh-tiles5 > .mbh-dep:last-child .mbh-dep__im {
		aspect-ratio: 2 / 1;
	}

	.mbh-dep__t {
		font-size: 20px;
	}

	.mbh-dep__b {
		padding: 14px;
	}

	.mbh-dep__go {
		display: none;
	}
}