/**
 * Single pet profile page
 */

.hp-pet-profile {
	overflow: hidden;
	max-width: 640px;
	margin: 0 auto;
}

.hp-pet-profile__hero {
	background: var(--hp-cream-100);
}

.hp-pet-profile__image {
	display: block;
	width: 100%;
	max-height: 28rem;
	object-fit: cover;
}

.hp-pet-profile__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 16rem;
	font-size: 4rem;
}

.hp-pet-profile__body {
	padding: var(--hp-space-6);
}

.hp-pet-profile__name {
	margin: 0 0 var(--hp-space-4);
	font-size: var(--hp-font-size-3xl);
	line-height: var(--hp-line-height-tight);
	text-align: center;
}

.hp-pet-profile__meta {
	display: grid;
	gap: var(--hp-space-3);
	margin: 0 0 var(--hp-space-5);
	padding: var(--hp-space-4);
	background: var(--hp-yellow-50);
	border: 1px solid var(--hp-yellow-200);
	border-radius: var(--hp-radius-xl);
}

.hp-pet-profile__meta-row {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: var(--hp-space-3);
	align-items: start;
}

.hp-pet-profile__meta dt {
	margin: 0;
	font-size: var(--hp-font-size-sm);
	font-weight: var(--hp-font-weight-semibold);
	color: var(--hp-color-text-muted);
}

.hp-pet-profile__meta dd {
	margin: 0;
	font-weight: var(--hp-font-weight-semibold);
	color: var(--hp-color-text);
}

.hp-pet-profile__about h2 {
	margin: 0 0 var(--hp-space-3);
	font-size: var(--hp-font-size-lg);
}

.hp-pet-profile__about p {
	margin: 0;
	line-height: var(--hp-line-height-relaxed);
	color: var(--hp-color-text);
}

.hp-pet-profile__actions {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	margin-top: var(--hp-space-5);
}

.hp-pet-profile__actions .hp-btn {
	justify-content: center;
	text-align: center;
}

@media (min-width: 640px) {
	.hp-pet-profile__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.hp-pet-profile__actions .hp-btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 480px) {
	.hp-pet-profile__meta-row {
		grid-template-columns: 1fr;
		gap: var(--hp-space-1);
	}

	.hp-pet-profile__body {
		padding: var(--hp-space-4);
	}
}