/**
 * Single pet profile page — templates/pet/*.php.
 *
 * Layout ("cover + cards"): a decorative band with the profile photo (or the
 * species placeholder illustration) overlapping its lower edge, the name and
 * the fact chips beside it; below, the profile sections as cards in a main
 * column and an aside (the gallery), stacked on a phone.
 *
 * Design tokens only (--pmd-*), never a literal colour: InheritedColorGuardTest
 * and DarkModeTokenPairingTest enforce that every themed element here takes
 * its colour from a token and that any --pmd-color-text reader also paints a
 * --pmd-color-surface* background, and font-family always falls back to
 * `inherit` (FontInheritanceTest) so the page takes the theme's own font —
 * the name and the card titles read --pmd-font-display first, which a design
 * preset or a site may point at a display face.
 *
 * Site-level overrides (pinned by PetStylesheetTest), set on `.pmd-pet` or
 * any ancestor:
 *   --pmd-pet-cover-image   A cover image, e.g. url(…); painted over the
 *                           decorative pattern. Default: none.
 *   --pmd-pet-cover-pattern The pattern's mask image. Default: paws and bones.
 *   --pmd-pet-min-height    The page's minimum height, so a short profile
 *                           does not pull the theme's footer up the screen.
 *                           Default: 70vh, none on phones.
 *
 * The photo viewer is a native modal <dialog>: it renders in the top layer,
 * so no ancestor's overflow or stacking context can clip it, and its
 * ::backdrop takes the overlay token.
 *
 * `.pmd-pet` carries its own local box-sizing reset (below) instead of
 * opting into the shared `.pmd-reset` class: Front\StyleLoader's
 * page_needs_styles() gate does not know about a singular petmap_pet view
 * (only petmap_place and the embed shortcodes).
 *
 * @package PetMapDirectory
 */

.pmd-pet,
.pmd-pet *,
.pmd-pet *::before,
.pmd-pet *::after {
	box-sizing: border-box;
}

.pmd-pet {
	--pmd-pet-gutter: var( --pmd-space-5 );
	--pmd-pet-width: min( 100% - var( --pmd-pet-gutter ) * 2, 1080px );
	--pmd-pet-band-height: 200px;
	--pmd-pet-photo-size: 260px;
	--pmd-pet-photo-overlap: 144px;

	min-height: var( --pmd-pet-min-height, 70vh );
	padding-block-end: var( --pmd-space-8 );
	color: var( --pmd-color-text );
	background: var( --pmd-color-surface );
	font-family: var( --pmd-font-sans, inherit );
}

.pmd-pet-archived-banner {
	width: var( --pmd-pet-width );
	margin: var( --pmd-space-4 ) auto;
	padding: var( --pmd-space-3 ) var( --pmd-space-4 );
	border: 1px solid var( --pmd-color-border );
	border-radius: var( --pmd-radius-md );
	background: var( --pmd-color-surface-alt );
}

.pmd-pet-archived-banner p {
	margin: 0;
	color: var( --pmd-color-text );
	font-size: var( --pmd-text-sm );
}

/* ── Cover ────────────────────────────────────────────────────────── */

.pmd-pet-cover {
	position: relative;
	isolation: isolate;
}

.pmd-pet-cover-band {
	position: relative;
	height: var( --pmd-pet-band-height );
	overflow: hidden;
	background-color: var( --pmd-color-surface-alt );
}

/* The decorative pattern: a mask over a token colour, so it follows the
   palette (and dark mode) instead of carrying a colour of its own. */
.pmd-pet-cover-band::before {
	--pmd-pet-cover-pattern-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg transform='translate(30 32) rotate(-18)'%3E%3Cellipse cy='5' rx='8' ry='6.5'/%3E%3Cellipse cx='-9' cy='-5' rx='3' ry='4'/%3E%3Cellipse cx='-3.5' cy='-10' rx='3' ry='4'/%3E%3Cellipse cx='3.5' cy='-10' rx='3' ry='4'/%3E%3Cellipse cx='9' cy='-5' rx='3' ry='4'/%3E%3C/g%3E%3Cg transform='translate(90 30) rotate(30)'%3E%3Crect x='-10' y='-2.5' width='20' height='5' rx='2.5'/%3E%3Ccircle cx='-10' cy='-3' r='3.2'/%3E%3Ccircle cx='-10' cy='3' r='3.2'/%3E%3Ccircle cx='10' cy='-3' r='3.2'/%3E%3Ccircle cx='10' cy='3' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(30 92) rotate(-35)'%3E%3Crect x='-10' y='-2.5' width='20' height='5' rx='2.5'/%3E%3Ccircle cx='-10' cy='-3' r='3.2'/%3E%3Ccircle cx='-10' cy='3' r='3.2'/%3E%3Ccircle cx='10' cy='-3' r='3.2'/%3E%3Ccircle cx='10' cy='3' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(90 90) rotate(16) scale(.85)'%3E%3Cellipse cy='5' rx='8' ry='6.5'/%3E%3Cellipse cx='-9' cy='-5' rx='3' ry='4'/%3E%3Cellipse cx='-3.5' cy='-10' rx='3' ry='4'/%3E%3Cellipse cx='3.5' cy='-10' rx='3' ry='4'/%3E%3Cellipse cx='9' cy='-5' rx='3' ry='4'/%3E%3C/g%3E%3C/svg%3E");

	content: "";
	position: absolute;
	inset: 0;
	background-color: var( --pmd-color-primary );
	opacity: 0.09;
	-webkit-mask-image: var( --pmd-pet-cover-pattern, var( --pmd-pet-cover-pattern-default ) );
	mask-image: var( --pmd-pet-cover-pattern, var( --pmd-pet-cover-pattern-default ) );
	-webkit-mask-size: 120px 120px;
	mask-size: 120px 120px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}

/* A site's own cover image, painted over the pattern when one is set. */
.pmd-pet-cover-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var( --pmd-pet-cover-image, none );
	background-position: center;
	background-size: cover;
}

.pmd-pet-cover-inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var( --pmd-space-6 );
	width: var( --pmd-pet-width );
	margin: calc( var( --pmd-pet-photo-overlap ) * -1 ) auto 0;
}

.pmd-pet-cover-media {
	flex: 0 0 auto;
	width: var( --pmd-pet-photo-size );
}

.pmd-pet-cover-photo {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 4px solid var( --pmd-color-surface-raised );
	border-radius: var( --pmd-radius-xl );
	background: var( --pmd-color-surface-alt );
	box-shadow: var( --pmd-shadow-lg );
}

.pmd-pet-cover-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

a.pmd-pet-cover-photo:focus-visible {
	outline: 3px solid var( --pmd-color-primary );
	outline-offset: 3px;
}

.pmd-pet-placeholder {
	display: grid;
	place-items: center;
	color: var( --pmd-color-primary );
	background:
		linear-gradient( var( --pmd-color-primary-soft ), var( --pmd-color-primary-soft ) ),
		var( --pmd-color-surface-alt );
}

.pmd-pet-placeholder-art {
	display: block;
	width: 46%;
	height: auto;
	opacity: 0.85;
}

/* The name starts below the band whatever its length, so it never sits on a
   site's cover image. */
.pmd-pet-identity {
	flex: 1 1 auto;
	min-width: 0;
	padding-block-start: calc( var( --pmd-pet-photo-overlap ) + var( --pmd-space-4 ) );
}

.pmd-pet .pmd-pet-title {
	margin: 0;
	color: var( --pmd-color-text );
	font-family: var( --pmd-font-display, var( --pmd-font-sans, inherit ) );
	font-size: var( --pmd-text-4xl );
	font-weight: var( --pmd-weight-bold );
	line-height: var( --pmd-leading-tight );
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.pmd-pet-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var( --pmd-space-2 );
	margin: var( --pmd-space-3 ) 0 0;
	padding: 0;
	list-style: none;
}

.pmd-pet-fact {
	margin: 0;
	padding: var( --pmd-space-1 ) var( --pmd-space-3 );
	border: 1px solid var( --pmd-color-border );
	border-radius: var( --pmd-radius-pill );
	background: var( --pmd-color-surface-raised );
	color: var( --pmd-color-text );
	font-size: var( --pmd-text-sm );
	font-weight: var( --pmd-weight-medium );
	line-height: var( --pmd-leading-snug );
}

.pmd-pet-owner {
	margin: var( --pmd-space-3 ) 0 0;
	color: var( --pmd-color-text-muted );
	font-size: var( --pmd-text-sm );
}

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

.pmd-pet-body {
	display: grid;
	gap: var( --pmd-space-5 );
	width: var( --pmd-pet-width );
	margin: var( --pmd-space-7 ) auto 0;
}

.pmd-pet-body-split {
	grid-template-columns: minmax( 0, 3fr ) minmax( 0, 2fr );
	align-items: start;
}

.pmd-pet-column {
	display: flex;
	flex-direction: column;
	gap: var( --pmd-space-5 );
	min-width: 0;
}

.pmd-pet-card {
	padding: var( --pmd-space-5 );
	border: 1px solid var( --pmd-color-border );
	border-radius: var( --pmd-radius-xl );
	background: var( --pmd-color-surface-raised );
	color: var( --pmd-color-text );
	box-shadow: var( --pmd-shadow-sm );
}

.pmd-pet .pmd-pet-card-title {
	margin: 0 0 var( --pmd-space-3 );
	color: var( --pmd-color-text );
	font-family: var( --pmd-font-display, var( --pmd-font-sans, inherit ) );
	font-size: var( --pmd-text-xl );
	font-weight: var( --pmd-weight-bold );
	line-height: var( --pmd-leading-tight );
}

.pmd-pet-bio {
	/* A readable measure when "About me" spans the full width on its own. */
	max-width: 70ch;
	color: var( --pmd-color-text );
	font-size: var( --pmd-text-md );
	line-height: var( --pmd-leading-normal );
	overflow-wrap: break-word;
}

.pmd-pet-bio p:first-child {
	margin-top: 0;
}

.pmd-pet-bio p:last-child {
	margin-bottom: 0;
}

/* ── Likes ────────────────────────────────────────────────────────── */

.pmd-pet-likes-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --pmd-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-pet-chip {
	margin: 0;
	padding: var( --pmd-space-1 ) var( --pmd-space-3 );
	border-radius: var( --pmd-radius-pill );
	background: var( --pmd-color-primary-soft );
	color: var( --pmd-color-text );
	font-size: var( --pmd-text-sm );
	line-height: var( --pmd-leading-snug );
}

/* ── Gallery ──────────────────────────────────────────────────────── */

.pmd-pet-gallery-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 104px, 1fr ) );
	gap: var( --pmd-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-pet-gallery-cell {
	margin: 0;
}

.pmd-pet-gallery-item {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var( --pmd-radius-md );
	background: var( --pmd-color-surface-alt );
}

.pmd-pet-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition-property: scale;
	transition-duration: var( --pmd-duration-normal );
	transition-timing-function: var( --pmd-ease-out );
}

.pmd-pet-gallery-item:hover img {
	scale: 1.04;
}

.pmd-pet-gallery-item:focus-visible {
	outline: 3px solid var( --pmd-color-primary );
	outline-offset: 2px;
}

/* ── Photo viewer (templates/pet/viewer.php) ─────────────────────── */

/* The page behind an open viewer does not scroll. */
html:has( .pmd-pet-viewer[open] ) {
	overflow: hidden;
}

.pmd-pet-viewer {
	width: min( 100vw - var( --pmd-space-5 ) * 2, 1100px );
	max-width: none;
	max-height: none;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var( --pmd-radius-xl );
	background: var( --pmd-color-surface-raised );
	color: var( --pmd-color-text );
	box-shadow: var( --pmd-shadow-xl );
	font-family: var( --pmd-font-sans, inherit );
}

.pmd-pet-viewer::backdrop {
	background: var( --pmd-color-overlay );
}

.pmd-pet-viewer-frame {
	position: relative;
	display: grid;
	gap: var( --pmd-space-3 );
	padding: var( --pmd-space-4 );
}

.pmd-pet-viewer-figure {
	display: grid;
	place-items: center;
	margin: 0;
	min-height: 200px;
}

.pmd-pet-viewer-img {
	display: block;
	max-width: 100%;
	max-height: calc( 100vh - 160px );
	max-height: calc( 100dvh - 160px );
	width: auto;
	height: auto;
	border-radius: var( --pmd-radius-lg );
	object-fit: contain;
}

.pmd-pet-viewer-counter {
	margin: 0;
	color: var( --pmd-color-text-muted );
	font-size: var( --pmd-text-sm );
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.pmd-pet-viewer-counter[hidden] {
	display: none;
}

.pmd-pet .pmd-pet-viewer-btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var( --pmd-color-border );
	border-radius: var( --pmd-radius-full );
	background: var( --pmd-color-surface-raised );
	color: var( --pmd-color-text );
	font-family: var( --pmd-font-sans, inherit );
	line-height: 1;
	box-shadow: var( --pmd-shadow-md );
	cursor: pointer;
	transition-property: background-color, scale;
	transition-duration: var( --pmd-duration-fast );
	transition-timing-function: var( --pmd-ease-out );
}

.pmd-pet .pmd-pet-viewer-btn:hover {
	background: var( --pmd-color-surface-alt );
}

.pmd-pet .pmd-pet-viewer-btn:active {
	scale: 0.96;
}

.pmd-pet .pmd-pet-viewer-btn:focus-visible {
	outline: 3px solid var( --pmd-color-primary );
	outline-offset: 2px;
}

.pmd-pet .pmd-pet-viewer-btn[hidden] {
	display: none;
}

.pmd-pet-viewer-btn svg {
	display: block;
}

.pmd-pet .pmd-pet-viewer-close {
	inset-block-start: var( --pmd-space-3 );
	inset-inline-end: var( --pmd-space-3 );
}

.pmd-pet .pmd-pet-viewer-prev,
.pmd-pet .pmd-pet-viewer-next {
	inset-block-start: 50%;
	translate: 0 -50%;
}

.pmd-pet .pmd-pet-viewer-prev {
	inset-inline-start: var( --pmd-space-3 );
}

.pmd-pet .pmd-pet-viewer-next {
	inset-inline-end: var( --pmd-space-3 );
}

/* The chevrons point the way the reading direction goes. */
.pmd-pet-viewer-prev:dir( rtl ) svg,
.pmd-pet-viewer-next:dir( rtl ) svg {
	scale: -1 1;
}

@media (prefers-reduced-motion: no-preference) {
	.pmd-pet-viewer[open] {
		animation: pmd-pet-viewer-in var( --pmd-duration-normal ) var( --pmd-ease-out );
	}

	@keyframes pmd-pet-viewer-in {
		from {
			opacity: 0;
			scale: 0.96;
		}
	}
}

/* ── Phone ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.pmd-pet {
		--pmd-pet-gutter: var( --pmd-space-4 );
		--pmd-pet-band-height: 112px;
		--pmd-pet-photo-overlap: 72px;

		/* A footer right under a short profile is expected on a phone. */
		min-height: var( --pmd-pet-min-height, 0 );
	}

	.pmd-pet-cover-inner {
		flex-direction: column;
		align-items: stretch;
		gap: var( --pmd-space-4 );
	}

	.pmd-pet-cover-media {
		width: 100%;
	}

	.pmd-pet-cover-photo {
		aspect-ratio: 4 / 3;
	}

	.pmd-pet-placeholder {
		aspect-ratio: 16 / 9;
	}

	.pmd-pet-placeholder-art {
		width: 30%;
	}

	.pmd-pet-identity {
		padding-block-start: 0;
	}

	.pmd-pet .pmd-pet-title {
		font-size: var( --pmd-text-3xl );
	}

	.pmd-pet-body {
		gap: var( --pmd-space-4 );
		margin-block-start: var( --pmd-space-6 );
	}

	.pmd-pet-body-split {
		grid-template-columns: minmax( 0, 1fr );
	}

	.pmd-pet-column {
		gap: var( --pmd-space-4 );
	}

	.pmd-pet-card {
		padding: var( --pmd-space-4 );
	}

	.pmd-pet-viewer {
		width: calc( 100vw - var( --pmd-space-4 ) * 2 );
	}

	.pmd-pet-viewer-frame {
		padding: var( --pmd-space-3 );
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmd-pet-gallery-item img {
		transition: none;
	}

	.pmd-pet-gallery-item:hover img {
		scale: none;
	}

	.pmd-pet .pmd-pet-viewer-btn {
		transition: none;
	}
}