/* Adoption gallery + pet cards. */

.section--pets { background: var(--c-surface-low); }

.pets__header {
	display: grid;
	gap: var(--sp-sm);
	margin-bottom: var(--sp-md);
}
@media (min-width: 800px) {
	.pets__header {
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: var(--sp-md);
	}
}

.pets__filters { display: flex; flex-wrap: wrap; gap: var(--sp-unit); }

.pets__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-gutter);
}
@media (min-width: 640px) { .pets__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pets__grid { grid-template-columns: repeat(3, 1fr); } }

.pets__empty { color: var(--c-on-surface-var); }

/* ---- card ---- */
.pet-card {
	background: var(--c-bg);
	box-shadow: var(--shadow-ambient);
	transition: transform var(--dur) var(--ease);
	display: flex;
	flex-direction: column;
}
.pet-card:hover { transform: translateY(-6px); }

.pet-card[data-hidden="true"] { display: none; }

.pet-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.pet-card__image {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}
.pet-card:hover .pet-card__image { transform: scale(1.05); }

.pet-card__badge {
	position: absolute;
	top: var(--sp-xs);
	left: var(--sp-xs);
	background: color-mix(in srgb, var(--c-primary) 92%, transparent);
	color: var(--c-on-primary);
	padding: 0.25rem 0.75rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.pet-card__body { padding: var(--sp-sm); display: flex; flex-direction: column; gap: var(--sp-unit); }

.pet-card__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-unit);
}
.pet-card__name { font-size: var(--fs-h-md); margin: 0; font-weight: 500; }
.pet-card__age { color: var(--c-on-surface-var); font-size: var(--fs-label); }

.pet-card__traits {
	display: flex; flex-wrap: wrap; gap: 0.5rem;
	list-style: none; padding: 0; margin: 0 0 var(--sp-unit);
}
.pet-card__trait {
	background: var(--c-surface-cont);
	color: var(--c-on-surface-var);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pet-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--c-primary);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: auto;
}
.pet-card__link:hover .pet-card__arrow { transform: translateX(4px); }
.pet-card__arrow { transition: transform var(--dur) var(--ease); }