/*
 * Page scaffolding: container, section rhythm, grids.
 */

.jbw-container {
	width: 100%;
	max-width: calc(var(--jbw-container) + 2 * var(--jbw-gutter-x));
	margin-inline: auto;
	padding-inline: var(--jbw-gutter-x);
}

/* Sections carry the kit's 10%/5% padding and 2rem internal gap. */
.jbw-section {
	position: relative;
	padding-block: var(--jbw-gutter-y);
}

.jbw-section__inner {
	display: flex;
	flex-direction: column;
	gap: var(--jbw-gap);
}

.jbw-section--flush {
	padding-block: 0;
}

.jbw-stack {
	display: flex;
	flex-direction: column;
	gap: var(--jbw-gap);
}

.jbw-center {
	text-align: center;
	align-items: center;
}

/*
 * A centred section still wants its grids and carousels full width;
 * align-items: center would otherwise shrink them to their content.
 */
.jbw-center > .jbw-grid--animals,
.jbw-center > .jbw-grid--services,
.jbw-center > .jbw-tabs,
.jbw-center > .jbw-carousel,
.jbw-center > .jbw-form {
	width: 100%;
	align-self: stretch;
}

.jbw-measure {
	max-width: 52ch;
}

.jbw-center .jbw-measure {
	margin-inline: auto;
}

.jbw-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.jbw-center .jbw-actions {
	justify-content: center;
}

/* Site frame ------------------------------------------------------- */

.jbw-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.jbw-main {
	flex: 1 0 auto;
}

/* Two-up: text beside media, used by the story panels. */
.jbw-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(var(--jbw-gap) * 2);
	align-items: center;
}

@media (max-width: 1024px) {
	.jbw-split {
		gap: var(--jbw-gap);
	}
}

@media (max-width: 767px) {
	.jbw-split {
		grid-template-columns: 1fr;
	}
}

/* Animal grid: two across, one on phones. */
.jbw-grid--animals {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jbw-gap);
}

@media (max-width: 767px) {
	.jbw-grid--animals {
		grid-template-columns: 1fr;
	}
}

/*
 * Services: one tall feature card on the left, a 2x2 of smaller tiles on
 * the right. Collapses to 2-up then 1-up.
 */
.jbw-grid--services {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jbw-gap);
}

.jbw-grid--services__minor {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jbw-gap);
}

@media (max-width: 767px) {
	.jbw-grid--services {
		grid-template-columns: 1fr;
	}

	.jbw-grid--services__minor {
		grid-template-columns: repeat(2, 1fr);
	}
}