/**
 * Page: Saved Pets
 *
 * Favorites page with grid of saved animals, share modal,
 * and shared list view.
 */

.saved-pets {
	padding-bottom: var(--module-spacing-large);
}

.saved-pets-back .arrow-block {
	transform: none;
}

.saved-pets-header {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--module-spacing-medium);
}

.saved-pets-header .heading-2 {
	margin: 0;
}

/* .grid utility provides display: grid + gap + 12-col template.
   Cards span 4 columns (3-across). li needs position for .favorite-btn. */

.saved-pets-grid {
	row-gap: var(--text-spacing-xxlarge);
}

.saved-pets-grid > li {
	grid-column: span 4;
}

.saved-pets-empty {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	padding: var(--module-spacing-large) 0;
	text-align: center;
}

.saved-pets-empty-icon {
	color: var(--wolfhound-gray);
	font-size: calc(64rem / 16);
	margin-bottom: var(--text-spacing-xsmall);
}

.saved-pets-empty-icon svg {
	height: 64px;
	width: 64px;
}

.saved-pets-empty .heading-4 {
	margin: 0;
}

.saved-pets-empty p {
	color: var(--grayhound);
	margin: 0;
	max-width: 400px;
}

.saved-pets-empty .btn {
	margin-top: var(--text-spacing-xsmall);
}

.shared-list-view .saved-pets-header {
	align-items: baseline;
}

.shared-list-date {
	flex-shrink: 0;
}

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

	.saved-pets-grid > li {
		grid-column: span 4;
	}

}

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

	.saved-pets-grid > li {
		grid-column: span 6;
	}

	.saved-pets-header {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--text-spacing-xsmall);
	}

	.share-modal-actions {
		flex-direction: column;
	}

}