/* Responsive presentation for the approved Bloom & Buzz image library. */

.bb-apiary-feature__media {
	background-image: url("../images/apiary-overview.webp");
	background-position: center;
}

.bb-field-hero__photo,
.bb-section-header__photo,
.bb-section-gallery__item {
	margin: 0;
	overflow: hidden;
	background: rgb(255 255 255 / 8%);
}

.bb-field-hero__photo {
	align-self: center;
	border: 0.6rem solid var(--bb-field-yellow);
	box-shadow: 1rem 1rem 0 rgb(0 0 0 / 18%);
}

.bb-field-hero__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bb-section-header__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 2rem;
}

.bb-section-header__photo {
	position: relative;
	z-index: 1;
	border: 0.4rem solid var(--bb-yellow);
	box-shadow: 0.75rem 0.75rem 0 rgb(249 195 0 / 25%);
}

.bb-section-header__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bb-section-gallery {
	padding-block: 1rem;
	background: var(--bb-field-green, #123f35);
}

.bb-section-gallery__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.bb-section-gallery__item {
	position: relative;
	background: #fff;
}

.bb-section-gallery__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bb-section-gallery__item figcaption {
	padding: 0.85rem 1rem;
	color: #173f39;
	background: #fff;
	font-weight: 700;
}

.bb-venture-journal__lede {
	max-width: 38rem;
	color: rgb(255 255 255 / 82%);
	font-size: 1.05rem;
}

.bb-venture-stories {
	padding-block: 3rem;
	background: var(--bb-field-cream, #f7f4e8);
}

.bb-venture-stories__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

/* Lock the Hive Story timeline into a consistent mobile-first rhythm. */
.bb-hive-story__chapter > * {
	min-width: 0;
}

.bb-hive-story__image {
	display: block;
	width: 100%;
	height: clamp(16rem, 68vw, 24rem);
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center;
}

.bb-beekeepers__grid {
	grid-template-columns: repeat(auto-fit, minmax(16rem, 18rem));
	justify-content: center;
	align-items: stretch;
	max-width: 40rem;
	margin-inline: auto;
}

.bb-beekeeper-card {
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	align-self: start;
}

.bb-beekeeper-card > div {
	display: block;
	min-height: 11rem;
	padding: 1.25rem;
}

.bb-beekeeper-card h3 {
	font-size: clamp(1.55rem, 6vw, 1.75rem);
	line-height: 1.05;
}

.bb-beekeeper-card__image {
	display: block;
	width: 100%;
	height: 13.5rem;
	flex: 0 0 13.5rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 18%;
	background: var(--bb-teal);
}

@media (min-width: 48.01rem) {
	.bb-field-hero__photo img {
		aspect-ratio: 4 / 3;
	}

	.bb-section-header__grid {
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
		gap: clamp(2rem, 6vw, 6rem);
	}

	.bb-section-gallery {
		padding-block: 2rem;
	}

	.bb-section-gallery--multiple .bb-section-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bb-section-gallery--multiple .bb-section-gallery__item:first-child {
		grid-column: 1 / -1;
	}

	.bb-section-gallery--multiple .bb-section-gallery__item:first-child img {
		aspect-ratio: 16 / 7;
	}

	.bb-venture-stories {
		padding-block: clamp(4rem, 8vw, 7rem);
	}

	.bb-venture-stories__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bb-hive-story__chapter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
	}

	.bb-hive-story__chapter > .bb-hive-story__image,
	.bb-hive-story__chapter > div {
		grid-row: 1;
	}

	.bb-hive-story__chapter:nth-child(odd) > .bb-hive-story__image {
		grid-column: 2;
		order: initial;
	}

	.bb-hive-story__chapter:nth-child(odd) > div {
		grid-column: 1;
	}

	.bb-hive-story__chapter:nth-child(even) > .bb-hive-story__image {
		grid-column: 1;
	}

	.bb-hive-story__chapter:nth-child(even) > div {
		grid-column: 2;
	}

	.bb-hive-story__image {
		height: clamp(20rem, 31vw, 29rem);
	}

	.bb-beekeeper-card__image {
		height: 13.5rem;
		min-height: 0;
	}

	.bb-beekeepers__grid {
		grid-template-columns: repeat(2, 18rem);
	}

	.bb-beekeeper-card {
		display: flex;
	}

	.bb-beekeeper-card h3 {
		font-size: 1.75rem;
	}
}

@media (min-width: 70rem) {
	.bb-venture-stories__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bb-section-gallery--multiple .bb-section-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bb-section-gallery--multiple .bb-section-gallery__item:first-child {
		grid-column: auto;
	}

	.bb-section-gallery--multiple .bb-section-gallery__item:first-child img {
		aspect-ratio: 4 / 3;
	}
}