/**
 * Archive: Animals (Adopt a Pet)
 *
 * Custom husky-blue-25 hero background, scoped to this page only.
 */

.archive-animal > .module.hero.content-image:first-child {
	margin-top: 0;
	padding-bottom: var(--text-spacing-small);
	padding-top: calc(var(--header-height) + var(--text-spacing-xxlarge));
	position: relative;
}

.archive-animal > .module.hero.content-image:first-child::before {
	background: var(--husky-blue-25);
	bottom: 5.834vw;
	content: '';
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

.archive-animal > .module.hero.content-image:first-child > .container {
	position: relative;
	z-index: 2;
}

.archive-animal > .module.hero.content-image:first-child > .archive-animal-curve {
	bottom: 1px;
	color: var(--husky-blue-25);
	font-size: 0;
	left: 0;
	line-height: 0;
	position: absolute;
	transform: scaleX(-1);
	width: 100%;
	z-index: 1;
}

.archive-animal > .module.hero.content-image:first-child > .archive-animal-curve svg {
	display: block;
	height: auto;
	margin-top: -1px;
	width: 100%;
}

/* Reduce space between hero and filter bar */

.archive-animal > .module.hero.content-image + .module.filterable-animals {
	margin-top: var(--text-spacing-xlarge);
}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.archive-animal > .module.hero.content-image:first-child {
		padding-bottom: var(--text-spacing-xxlarge);
		padding-top: calc(var(--header-height) + var(--text-spacing-medium));
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	/* Extend husky-blue-25 bg behind the in-flow mobile header — locally
	   override --header-height so base padding calc includes it, and pull
	   the module up by the same amount via negative margin-top. */

	.archive-animal > .module.hero.content-image:first-child {
		--header-height: 120px;
		margin-top: calc(-1 * var(--header-height));
	}

	.archive-animal .pill.small {
		font-size: calc(10rem / 16);
	}

	.archive-animal .pill {
		padding: 2px 8px;
	}

}