/*!
 * PetMap PETinder — [petinder_pets layout="directory"], the members page.
 *
 * Reads Free's --pmd-* design tokens with literal fallbacks from its warm
 * preset; fonts are inherited and titles read --pmd-font-display first.
 * Cards follow the marquee's (assets/css/pet-marquee.css): a 4:5 photo or
 * species drawing on a warm gradient, the name and age on a scrim at least
 * 75% opaque behind the text, a soft lift on hover. Two columns on a phone,
 * as many ~13rem columns as fit above (five at the 1180px content width).
 * Motion only without prefers-reduced-motion.
 *
 * Outer layout (pinned by PageLayoutStylesheetTest): the surface spans the
 * page, the content keeps --pti-dir-width with gutters, and the block has
 * vertical room, so an Elementor full-width page needs no container.
 *
 * The photo, drawing and caption share one grid cell instead of being
 * positioned, so the name link's ::after resolves against the card and
 * makes the whole card its click target.
 *
 * @package PetMapPetinder
 */

.pti-dir {
	--pti-ink: var(--pmd-color-text, #2b1d14);
	--pti-muted: var(--pmd-color-text-muted, #7a6252);
	--pti-surface: var(--pmd-color-surface, #fff8f1);
	--pti-raised: var(--pmd-color-surface-raised, #fff);
	--pti-alt: var(--pmd-color-surface-alt, #fdefe2);
	--pti-border: var(--pmd-color-border, #f0dfcf);
	--pti-primary: var(--pmd-color-primary, #c2410c);
	--pti-primary-hover: var(--pmd-color-primary-hover, #9a3412);
	--pti-on-primary: var(--pmd-color-on-primary, #fff);
	--pti-soft: var(--pmd-color-primary-soft, rgba(238, 100, 3, 0.1));
	--pti-accent: var(--pmd-color-accent, #ee6403);
	--pti-radius: var(--pmd-radius-xl, 20px);
	--pti-display: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	--pti-ease-out: cubic-bezier(0.2, 0, 0, 1);
	--pti-scrim: 31 20 13;
	--pti-dir-gutter: var(--pmd-space-4, 16px);
	--pti-dir-width: min(100% - var(--pti-dir-gutter) * 2, 1180px);

	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-5, 20px);
	padding-block: var(--pmd-space-6, 32px) var(--pmd-space-7, 48px);
	color: var(--pti-ink);
	font-family: var(--pmd-font-sans, inherit);
	background: var(--pti-surface);
}

/* The surface runs full width; the content keeps a contained width with
   gutters, whether or not the theme gives the page a container. */
.pti-dir > * {
	width: var(--pti-dir-width);
	margin-inline: auto;
}

@media (min-width: 768px) {
	.pti-dir {
		--pti-dir-gutter: var(--pmd-space-6, 32px);
		padding-block: var(--pmd-space-7, 48px) var(--pmd-space-8, 64px);
	}
}

.pti-dir *,
.pti-dir *::before,
.pti-dir *::after {
	box-sizing: border-box;
}

.pti-dir p {
	margin: 0;
}

/* ── Heading, count and call to action ────────────────────────────── */

.pti-dir-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmd-space-3, 12px) var(--pmd-space-4, 16px);
	align-items: flex-end;
	justify-content: space-between;
}

.pti-dir .pti-dir-title {
	margin: 0;
	color: var(--pti-ink);
	font-family: var(--pti-display);
	font-size: clamp(1.5rem, 5vw, 2rem);
	font-weight: var(--pmd-weight-bold, 700);
	line-height: var(--pmd-leading-tight, 1.2);
	text-wrap: balance;
}

.pti-dir .pti-dir-count {
	margin-top: var(--pmd-space-1, 4px);
	color: var(--pti-muted);
	font-size: var(--pmd-text-sm, 0.875rem);
}

.pti-dir .pti-dir-cta,
.pti-dir .pti-dir-reset {
	display: inline-flex;
	gap: var(--pmd-space-2, 8px);
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--pmd-space-2, 8px) var(--pmd-space-5, 20px);
	color: var(--pti-on-primary);
	font-family: var(--pti-display);
	font-weight: var(--pmd-weight-semibold, 600);
	line-height: 1.2;
	text-decoration: none;
	background: var(--pti-primary);
	border-radius: var(--pmd-radius-pill, 999px);
	box-shadow: var(--pmd-shadow-sm, 0 1px 2px rgba(92, 45, 14, 0.08));
}

.pti-dir .pti-dir-cta:hover,
.pti-dir .pti-dir-reset:hover {
	color: var(--pti-on-primary);
	background: var(--pti-primary-hover);
}

/* ── Species filter chips ─────────────────────────────────────────── */

.pti-dir-filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmd-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pti-dir-filter-list li {
	margin: 0;
}

.pti-dir .pti-dir-filter-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--pmd-space-4, 16px);
	color: var(--pti-ink);
	font-weight: var(--pmd-weight-medium, 500);
	text-decoration: none;
	background: var(--pti-raised);
	border: 1px solid var(--pti-border);
	border-radius: var(--pmd-radius-pill, 999px);
}

.pti-dir .pti-dir-filter-chip:hover {
	border-color: var(--pmd-color-border-strong, #e2c8b0);
	background: var(--pti-alt);
}

.pti-dir .pti-dir-filter-chip[aria-current="true"] {
	color: var(--pti-on-primary);
	background: var(--pti-primary);
	border-color: var(--pti-primary);
}

/* ── Cards ────────────────────────────────────────────────────────── */

.pti-dir-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pmd-space-3, 12px);
	margin-block: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.pti-dir-list {
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
		gap: var(--pmd-space-5, 20px);
	}
}

.pti-dir-item {
	min-width: 0;
	margin: 0;
}

.pti-dir-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	color: var(--pti-ink);
	background: var(--pti-raised);
	border: 1px solid var(--pti-border);
	border-radius: var(--pti-radius);
	box-shadow: var(--pmd-shadow-sm, 0 1px 2px rgba(92, 45, 14, 0.08));
	isolation: isolate;
}

.pti-dir-media {
	display: grid;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	color: var(--pti-primary);
	background: linear-gradient(160deg, var(--pti-alt), var(--pti-border));
}

.pti-dir-media > * {
	grid-area: 1 / 1;
	min-width: 0;
}

.pti-dir-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pti-dir-art {
	display: grid;
	place-self: center;
	width: 46%;
	margin-bottom: 22%;
	opacity: 0.85;
}

.pti-dir-art .pti-art {
	display: block;
	width: 100%;
	height: auto;
}

.pti-dir-initial {
	place-items: center;
	color: var(--pti-accent);
	font-size: 3.5rem;
	font-weight: var(--pmd-weight-bold, 700);
	line-height: 1;
}

.pti-dir-caption {
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-self: end;
	padding: 2.75rem var(--pmd-space-3, 12px) var(--pmd-space-3, 12px);
	color: #fff;
	background: linear-gradient(to top, rgb(var(--pti-scrim) / 0.9) 0%, rgb(var(--pti-scrim) / 0.78) 55%, rgb(var(--pti-scrim) / 0) 100%);
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.pti-dir .pti-dir-name {
	margin: 0;
	color: #fff;
	font-family: var(--pti-display);
	font-size: var(--pmd-text-lg, 1.125rem);
	font-weight: var(--pmd-weight-bold, 700);
	line-height: var(--pmd-leading-tight, 1.2);
	overflow-wrap: anywhere;
}

.pti-dir .pti-dir-link {
	color: #fff;
	text-decoration: none;
	outline: none;
}

/* The name link covers the whole card. */
.pti-dir .pti-dir-link::after {
	position: absolute;
	inset: 0;
	z-index: 2;
	content: "";
	border-radius: inherit;
}

.pti-dir .pti-dir-link:focus-visible::after {
	outline: 3px solid var(--pti-accent);
	outline-offset: -3px;
	border-radius: var(--pti-radius);
}

/* A drawing instead of a photo: the caption needs no scrim, the warm
   gradient already carries ink text (a browser without :has() keeps it). */
.pti-dir-media:not(:has(.pti-dir-photo)) .pti-dir-caption {
	color: var(--pti-ink);
	background: none;
	text-shadow: none;
}

.pti-dir .pti-dir-media:not(:has(.pti-dir-photo)) .pti-dir-name,
.pti-dir .pti-dir-media:not(:has(.pti-dir-photo)) .pti-dir-link {
	color: var(--pti-ink);
}

.pti-dir .pti-dir-media:not(:has(.pti-dir-photo)) .pti-dir-age {
	color: var(--pti-ink);
}

.pti-dir-age {
	color: #fff8f1;
	font-size: var(--pmd-text-sm, 0.875rem);
	line-height: var(--pmd-leading-snug, 1.35);
}

.pti-dir-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: var(--pmd-space-3, 12px);
	list-style: none;
}

.pti-dir-chip {
	max-width: 100%;
	margin: 0;
	padding: 2px var(--pmd-space-2, 8px);
	overflow: hidden;
	color: var(--pti-ink);
	font-size: var(--pmd-text-xs, 0.75rem);
	font-weight: var(--pmd-weight-medium, 500);
	line-height: var(--pmd-leading-snug, 1.35);
	white-space: nowrap;
	text-overflow: ellipsis;
	background: var(--pti-surface);
	border: 1px solid var(--pti-border);
	border-radius: var(--pmd-radius-pill, 999px);
}

@media (min-width: 640px) {
	.pti-dir-chip {
		font-size: var(--pmd-text-sm, 0.875rem);
	}
}

/* ── Empty state ──────────────────────────────────────────────────── */

.pti-dir-empty {
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-3, 12px);
	align-items: center;
	padding: var(--pmd-space-7, 48px) var(--pmd-space-4, 16px);
	color: var(--pti-ink);
	text-align: center;
	background: var(--pti-raised);
	border: 1px solid var(--pti-border);
	border-radius: var(--pti-radius);
}

.pti-dir-empty-icon {
	display: grid;
	width: 4.5rem;
	height: 4.5rem;
	place-items: center;
	color: var(--pti-accent);
	background: var(--pti-soft);
	border-radius: 50%;
}

.pti-dir .pti-dir-empty-text {
	color: var(--pti-muted);
}

/* ── Pages ────────────────────────────────────────────────────────── */

.pti-dir-pages-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmd-space-2, 8px);
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pti-dir-pages-list li {
	margin: 0;
}

.pti-dir .pti-dir-page,
.pti-dir .pti-dir-prev,
.pti-dir .pti-dir-next {
	display: inline-flex;
	gap: var(--pmd-space-1, 4px);
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--pmd-space-3, 12px);
	color: var(--pti-ink);
	font-weight: var(--pmd-weight-medium, 500);
	text-decoration: none;
	background: var(--pti-raised);
	border: 1px solid var(--pti-border);
	border-radius: var(--pmd-radius-pill, 999px);
}

.pti-dir a.pti-dir-page:hover,
.pti-dir .pti-dir-prev:hover,
.pti-dir .pti-dir-next:hover {
	background: var(--pti-alt);
	border-color: var(--pmd-color-border-strong, #e2c8b0);
}

.pti-dir .pti-dir-page[aria-current="page"] {
	color: var(--pti-on-primary);
	background: var(--pti-primary);
	border-color: var(--pti-primary);
}

.pti-dir-gap {
	display: inline-grid;
	min-width: 1.5rem;
	place-items: center;
	color: var(--pti-muted);
}

.pti-dir .pti-dir-cta:focus-visible,
.pti-dir .pti-dir-reset:focus-visible,
.pti-dir .pti-dir-filter-chip:focus-visible,
.pti-dir .pti-dir-page:focus-visible,
.pti-dir .pti-dir-prev:focus-visible,
.pti-dir .pti-dir-next:focus-visible {
	outline: 2px solid var(--pti-accent);
	outline-offset: 2px;
}

/* ── Instant filters and pages (assets/js/pet-directory.js) ───────── */

/* The live region announcing the new count sits after the section. */
.pti-dir-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Loading a species or a page: the cards step back until it arrives. */
.pti-dir[aria-busy="true"] {
	cursor: progress;
}

.pti-dir[aria-busy="true"] .pti-dir-list,
.pti-dir[aria-busy="true"] .pti-dir-empty {
	opacity: 0.55;
}

/* Focus moved to the heading after a page change: no ring for a pointer. */
.pti-dir .pti-dir-title[tabindex="-1"]:focus:not(:focus-visible) {
	outline: none;
}

.pti-dir .pti-dir-title[tabindex="-1"]:focus-visible {
	outline: 2px solid var(--pti-accent);
	outline-offset: 4px;
}

/* ── Motion ───────────────────────────────────────────────────────── */

@media (hover: hover) {
	.pti-dir-card:hover {
		box-shadow: var(--pmd-shadow-lg, 0 14px 34px rgba(92, 45, 14, 0.14), 0 2px 6px rgba(92, 45, 14, 0.07));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pti-dir-card {
		transition-property: translate, box-shadow;
		transition-duration: 300ms;
		transition-timing-function: var(--pti-ease-out);
	}

	.pti-dir-photo {
		transition: scale 500ms var(--pti-ease-out);
	}

	.pti-dir-card:hover {
		translate: 0 -4px;
	}

	.pti-dir-card:hover .pti-dir-photo {
		scale: 1.05;
	}
}

/* A swapped-in species or page: the cards rise in briefly; the dim of a
   load only shows once it takes a moment, so a fast answer never flashes. */
@media (prefers-reduced-motion: no-preference) {
	.pti-dir-list,
	.pti-dir-empty {
		transition-property: opacity, translate;
		transition-duration: 200ms;
		transition-timing-function: var(--pti-ease-out);
	}

	.pti-dir[aria-busy="true"] .pti-dir-list,
	.pti-dir[aria-busy="true"] .pti-dir-empty {
		transition-delay: 120ms;
	}

	.pti-dir.is-entering .pti-dir-list,
	.pti-dir.is-entering .pti-dir-empty {
		opacity: 0;
		translate: 0 6px;
	}
}