/**
 * Single place page — templates/place/*.php.
 *
 * Layout ("hero + cards", the pet profile's language): the photo hero (or
 * the category tile without photos), the identity under it — category
 * chips, the name in the display face, the rating, the opening state — and
 * the action row; below, the place's details as cards in a main column and
 * an aside (location, opening hours, contact), 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. Status colours are blended
 * toward the text colour with color-mix(), the account panel's AA recipe.
 *
 * --pmd-header-clearance is the one custom property this file itself
 * defines rather than reads: a static, safe-without-JavaScript default that
 * assets/js/front/place.js refines at runtime (via the shared
 * assets/js/front/header-clearance.js measurement) once it knows the
 * theme's actual fixed-header height at the current viewport width.
 *
 * 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. Its rules mirror pet.css's, under the
 * place page's own class names (the pet stylesheet is not loaded here).
 *
 * @package PetMapDirectory
 */

:root {
	/*
	 * Conservative default: covers the tallest fixed header this theme is
	 * known to render (measured 89-121px across breakpoints). JavaScript
	 * narrows it per viewport; a reader with JavaScript off, or before the
	 * first measurement runs, still clears the header rather than starting
	 * underneath it.
	 */
	--pmd-header-clearance: 121px;

	/*
	 * Side gutter matched live to this theme's own header row
	 * (`.content-wrap` in header.php's markup — the box the logo and the
	 * nav menu sit inside), measured with Chrome at each breakpoint below
	 * rather than guessed: 30px from 1024px, 60px from 1200px, unchanged
	 * through 1680px and beyond — the header itself is fluid, not a
	 * centred max-width box, so this page matches that shape instead of
	 * imposing its own centred container (which is what put its left edge
	 * out of step with the logo at 1680px before this token existed).
	 * Below 1024px the gutter is the page's own 16px (20px from 640px).
	 */
	--pmd-place-gutter: var( --pmd-space-4 );
}

@media ( min-width: 640px ) {
	:root {
		--pmd-place-gutter: var( --pmd-space-5 );
	}
}

@media ( min-width: 1024px ) {
	:root {
		--pmd-place-gutter: 30px;
	}
}

@media ( min-width: 1200px ) {
	:root {
		--pmd-place-gutter: 60px;
	}
}

/*
 * The widest the content column ever gets. 1480px (gutters included) keeps
 * the hero photo, the reading column and the info cards at the proportions
 * they hold at 1440px — the width this page was designed against — on any
 * screen above it.
 */
@media ( min-width: 1560px ) {
	:root {
		--pmd-place-max: 1480px;
	}
}

.pmd-place {
	--pmd-place-card: var( --pmd-color-surface-raised, var( --pmd-color-surface ) );
	--pmd-place-ink: color-mix( in srgb, var( --pmd-color-primary ) 60%, var( --pmd-color-text ) );
	--pmd-place-ring: var( --pmd-color-primary );

	position: relative;
	color: var( --pmd-color-text );
	background: var( --pmd-color-surface );
	font-family: var( --pmd-font-sans, inherit );
	padding-top: var( --pmd-header-clearance );
}

.pmd-place-inner {
	/*
	 * --pmd-place-gutter lines this element's left edge up with the header
	 * logo's at every breakpoint the theme changes its own gutter at (see
	 * the token above), so up to --pmd-place-max the page stays in step
	 * with the theme's fluid header rather than imposing its own box.
	 *
	 * Past that width it stops growing and centres instead: a fluid content
	 * column on a 1920px screen gave a 1800px-wide hero cropped to roughly
	 * 4:1 (a strip, not a photo) and body text lines nobody can track back to.
	 */
	max-width: var( --pmd-place-max, none );
	margin-inline: auto;
	padding: 0 var( --pmd-place-gutter ) var( --pmd-space-8 );
}

/* ── Hero: the photos, or the category tile ──────────────────────── */

.pmd-place-header {
	display: flex;
	flex-direction: column;
	gap: var( --pmd-space-5 );
	padding-top: var( --pmd-space-5 );
}

.pmd-place-gallery {
	display: flex;
	flex-direction: column;
	gap: var( --pmd-space-2 );
	min-width: 0;
}

.pmd-place-gallery-hero {
	display: block;
	overflow: hidden;
	border-radius: var( --pmd-radius-xl );
	background: var( --pmd-color-surface-alt );
	box-shadow: var( --pmd-shadow-md );
}

.pmd-place-gallery-main {
	display: block;
	width: 100%;
	/*
	 * 4/3 on phones: at 360-414px wide, 16/9 gives the hero 176-206px of
	 * height — a strip above the fold rather than the photo the page opens
	 * with. The wider shape takes over from 640px, where 16/9 is already
	 * 360px tall.
	 */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition-property: scale;
	transition-duration: var( --pmd-duration-normal );
	transition-timing-function: var( --pmd-ease-out );
}

.pmd-place-gallery-hero:hover .pmd-place-gallery-main {
	scale: 1.02;
}

.pmd-place-gallery-hero:focus-visible,
.pmd-place-gallery-thumb:focus-visible {
	outline: 3px solid var( --pmd-place-ring );
	outline-offset: 3px;
}

@media ( min-width: 640px ) {
	.pmd-place-gallery-main {
		aspect-ratio: 16 / 9;
	}
}

/* The rest of the photos, a strip under the hero that scrolls sideways. */
.pmd-place-gallery-thumbs {
	display: flex;
	gap: var( --pmd-space-2 );
	margin: 0;
	padding: var( --pmd-space-1 ) var( --pmd-space-1 ) var( --pmd-space-2 );
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}

.pmd-place-gallery-thumbs li {
	flex: 0 0 auto;
	margin: 0;
}

.pmd-place-gallery-thumb {
	display: block;
	width: 96px;
	height: 72px;
	overflow: hidden;
	border-radius: var( --pmd-radius-md );
	background: var( --pmd-color-surface-alt );
}

.pmd-place-gallery-thumb 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-place-gallery-thumb:hover img {
	scale: 1.06;
}

/*
 * No photos: a soft band carrying the pet profile's paw-and-bone pattern,
 * with the place's category icon in a raised circle — the shape the
 * directory card's tile draws, at hero size.
 */
.pmd-place-gallery-empty {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	border-radius: var( --pmd-radius-xl );
	background-color: var( --pmd-color-surface-alt );
}

.pmd-place-gallery-empty::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var( --pmd-color-primary );
	opacity: 0.09;
	-webkit-mask-image: 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");
	mask-image: 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");
	-webkit-mask-size: 120px 120px;
	mask-size: 120px 120px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}

.pmd-place-gallery-empty-ico {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border-radius: var( --pmd-radius-full );
	background: var( --pmd-place-card );
	box-shadow: var( --pmd-shadow-md );
}

.pmd-place-gallery-empty-ico::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	background-color: var( --pmd-color-accent, var( --pmd-color-primary ) );
	-webkit-mask-image: var( --pmd-icon );
	mask-image: var( --pmd-icon );
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * From 1024px, aspect-ratio 16/9 alone stops being "a header photo" and
 * starts being a wall: at 1320px wide that is 742px tall, and at 1440px
 * roughly 780px — before a reader ever sees the name, the rating or
 * anything below it. Two different fixes for the two shapes:
 *   - a real photo keeps its aspect ratio (so a wide photo still reads as a
 *     photo, not a strip) but is capped at a sane hero height and cropped
 *     to it with the object-fit:cover it already has;
 *   - the no-photo tile has no photo to preserve the shape of, so it
 *     becomes a flat, compact band instead — 200px: tall enough to read as
 *     a header band and short enough that the name, rating and the action
 *     row sit comfortably in the first viewport on a 1440×900 screen.
 * PlaceGalleryPlaceholderTest pins both.
 */
@media ( min-width: 1024px ) {
	.pmd-place-gallery-main {
		max-height: 420px;
	}

	.pmd-place-gallery-empty {
		aspect-ratio: auto;
		height: 200px;
	}
}

/* ── Identity: chips, name, rating, state ────────────────────────── */

.pmd-place-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --pmd-space-3 );
	min-width: 0;
}

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

.pmd-place-cat {
	display: inline-flex;
	align-items: center;
	gap: var( --pmd-space-2 );
	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-place-card );
	color: var( --pmd-color-text );
	font-size: var( --pmd-text-sm );
	font-weight: var( --pmd-weight-semibold );
	line-height: var( --pmd-leading-snug );
}

/* The category's map marker icon, in its marker colour. */
.pmd-place-cat-ico {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var( --pmd-cat-color, var( --pmd-color-accent, var( --pmd-color-primary ) ) );
	-webkit-mask-image: var( --pmd-icon );
	mask-image: var( --pmd-icon );
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.pmd-place-cat-dot {
	display: block;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: var( --pmd-radius-full );
	background-color: var( --pmd-cat-color, var( --pmd-color-primary ) );
}

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

@media ( min-width: 768px ) {
	.pmd-place .pmd-place-title {
		font-size: var( --pmd-text-4xl );
	}
}

.pmd-place-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --pmd-space-2 ) var( --pmd-space-3 );
	color: var( --pmd-color-text-muted );
	font-size: var( --pmd-text-sm );
}

/* The rating links down to the reviews; 44px tall for a thumb. */
.pmd-place .pmd-place-rating {
	display: inline-flex;
	align-items: center;
	gap: var( --pmd-space-2 );
	min-height: 44px;
	color: var( --pmd-color-text );
	font-weight: var( --pmd-weight-semibold );
	text-decoration: none;
}

.pmd-place-rating .pmd-ico {
	display: block;
	flex: none;
}

.pmd-place-rating-count {
	color: var( --pmd-color-text-muted );
	font-weight: var( --pmd-weight-regular );
	text-decoration: underline;
	text-decoration-color: var( --pmd-color-border-strong );
	text-underline-offset: 3px;
}

.pmd-place .pmd-place-rating:hover .pmd-place-rating-count {
	color: var( --pmd-place-ink );
	text-decoration-color: currentColor;
}

.pmd-place .pmd-place-rating:focus-visible {
	outline: 2px solid var( --pmd-place-ring );
	outline-offset: 2px;
	border-radius: var( --pmd-radius-sm );
}

/* Open now / closes soon / closed: a pill with a status dot. */
.pmd-place-status,
.pmd-place-price {
	display: inline-flex;
	align-items: center;
	gap: var( --pmd-space-2 );
	padding: 2px var( --pmd-space-3 );
	border-radius: var( --pmd-radius-pill );
	font-size: var( --pmd-text-sm );
	font-weight: var( --pmd-weight-semibold );
	line-height: 1.6;
	white-space: nowrap;
}

.pmd-place-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var( --pmd-radius-full );
	background: currentColor;
}

.pmd-place-status.is-open {
	color: color-mix( in srgb, var( --pmd-color-success ) 45%, var( --pmd-color-text ) );
	background: color-mix( in srgb, var( --pmd-color-success ) 14%, var( --pmd-place-card ) );
}

.pmd-place-status.is-closing {
	color: color-mix( in srgb, var( --pmd-color-warning ) 45%, var( --pmd-color-text ) );
	background: color-mix( in srgb, var( --pmd-color-warning ) 16%, var( --pmd-place-card ) );
}

.pmd-place-status.is-closed {
	color: color-mix( in srgb, var( --pmd-color-danger ) 55%, var( --pmd-color-text ) );
	background: color-mix( in srgb, var( --pmd-color-danger ) 12%, var( --pmd-place-card ) );
}

.pmd-place-price {
	color: var( --pmd-color-text );
	background: var( --pmd-color-surface-alt );
}

/* ── Action row ──────────────────────────────────────────────────── */

/*
 * Phones: equal tiles, icon over label, one row — every action under a
 * thumb. From 640px: pills that hug their label. The first action is the
 * primary one.
 */
.pmd-place-actions {
	display: grid;
	grid-auto-columns: minmax( 0, 1fr );
	grid-auto-flow: column;
	gap: var( --pmd-space-2 );
	margin-top: var( --pmd-space-5 );
}

/* Only the share button, and the script kept it hidden: no empty row. */
.pmd-place-actions:not( :has( > .pmd-place-action:not( [hidden] ) ) ) {
	display: none;
}

.pmd-place .pmd-place-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --pmd-space-1 );
	min-width: 0;
	min-height: 64px;
	margin: 0;
	padding: var( --pmd-space-2 );
	border: 1px solid var( --pmd-color-border );
	border-radius: var( --pmd-radius-lg );
	background: var( --pmd-place-card );
	color: var( --pmd-place-ink );
	font-family: var( --pmd-font-sans, inherit );
	font-size: var( --pmd-text-xs );
	font-weight: var( --pmd-weight-semibold );
	line-height: var( --pmd-leading-tight );
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	box-shadow: var( --pmd-shadow-sm );
	transition-property: background-color, border-color, color, scale;
	transition-duration: var( --pmd-duration-fast );
	transition-timing-function: var( --pmd-ease-out );
}

.pmd-place .pmd-place-action[hidden] {
	display: none;
}

.pmd-place .pmd-place-action:hover {
	border-color: var( --pmd-color-primary );
	color: var( --pmd-place-ink );
}

.pmd-place .pmd-place-action:active {
	scale: 0.97;
}

.pmd-place .pmd-place-action:focus-visible {
	outline: 2px solid var( --pmd-place-ring );
	outline-offset: 2px;
}

.pmd-place .pmd-place-action.is-primary {
	border-color: var( --pmd-color-primary );
	background: var( --pmd-color-primary );
	color: var( --pmd-color-on-primary );
}

.pmd-place .pmd-place-action.is-primary:hover {
	border-color: var( --pmd-color-primary-hover );
	background: var( --pmd-color-primary-hover );
	color: var( --pmd-color-on-primary );
}

.pmd-place-action-ico {
	display: block;
	flex: none;
}

.pmd-place-action-label {
	overflow-wrap: anywhere;
}

@media ( min-width: 640px ) {
	.pmd-place-actions {
		display: flex;
		flex-wrap: wrap;
	}

	.pmd-place .pmd-place-action {
		flex-direction: row;
		gap: var( --pmd-space-2 );
		min-height: 44px;
		padding: var( --pmd-space-2 ) var( --pmd-space-5 );
		border-radius: var( --pmd-radius-pill );
		font-size: var( --pmd-text-sm );
	}
}

/* ── Layout: two columns on desktop ──────────────────────────────── */

.pmd-place-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	grid-template-areas: "info" "main";
	gap: var( --pmd-space-5 );
	margin-top: var( --pmd-space-6 );
}

.pmd-place-col-main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	gap: var( --pmd-space-5 );
	min-width: 0;
}

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

@media ( min-width: 1024px ) {
	.pmd-place-layout {
		grid-template-columns: minmax( 0, 1fr ) 340px;
		grid-template-areas: "main info";
		align-items: start;
		gap: var( --pmd-space-6 );
	}
}

/*
 * From 1200px the photo and the info cards share the first rows, so the page
 * opens the way a listing should: the photo at a shape that still reads as a
 * photo, and the map, "Get directions" and opening hours visible without
 * scrolling. Below this width they stay stacked.
 *
 * The whole page is the grid and .pmd-place-layout becomes display:contents,
 * so the info cards can sit beside the header without being moved in the
 * markup — templates/place/place.php's source order (header, actions, info,
 * main) is the reading order when the columns stack, and this rule must not
 * disturb it. `contents` is safe here: the element is a plain div with no
 * implicit ARIA role to erase.
 */
@media ( min-width: 1200px ) {
	.pmd-place-inner {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) 360px;
		grid-template-areas:
			"hero    info"
			"actions info"
			"main    info"
			"nearby  nearby";
		grid-template-rows: auto auto 1fr auto;
		align-items: start;
		column-gap: var( --pmd-space-7 );
	}

	.pmd-place-header {
		grid-area: hero;
	}

	.pmd-place-actions {
		grid-area: actions;
	}

	.pmd-place-layout {
		display: contents;
	}

	.pmd-place-info {
		padding-top: var( --pmd-space-5 );
	}

	.pmd-place-col-main {
		grid-area: main;
		margin-top: var( --pmd-space-6 );
	}

	.pmd-place-nearby {
		grid-area: nearby;
	}

	/*
	 * Inside its own column the photo is around 1000px wide at most, so
	 * 16/9 lands near 560px: tall enough to read as a hero, and capped so a
	 * portrait-ish source never pushes the title below the fold.
	 */
	.pmd-place-gallery-main {
		max-height: 520px;
	}
}

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

.pmd-place-card {
	display: flex;
	flex-direction: column;
	gap: var( --pmd-space-4 );
	min-width: 0;
	margin: 0;
	padding: var( --pmd-space-4 );
	border: 1px solid var( --pmd-color-border );
	border-radius: var( --pmd-radius-xl );
	background: var( --pmd-place-card );
	color: var( --pmd-color-text );
	box-shadow: var( --pmd-shadow-sm );
}

@media ( min-width: 768px ) {
	.pmd-place-card {
		padding: var( --pmd-space-5 );
	}
}

.pmd-place .pmd-place-card-title {
	margin: 0;
	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-place-description {
	/* A readable measure when the card spans the full width. */
	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-place-description > :first-child {
	margin-top: 0;
}

.pmd-place-description > :last-child {
	margin-bottom: 0;
}

/* Services and pets welcome. */
.pmd-place-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var( --pmd-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-place-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 );
}

/* ── Location ────────────────────────────────────────────────────── */

.pmd-place-map {
	width: 100%;
	height: 200px;
	min-height: 0;
	overflow: hidden;
	border-radius: var( --pmd-radius-lg );
	background: var( --pmd-color-surface-alt );
}

.pmd-place-address,
.pmd-place-phone,
.pmd-place-website {
	display: flex;
	align-items: flex-start;
	gap: var( --pmd-space-3 );
	margin: 0;
	color: var( --pmd-color-text );
	font-size: var( --pmd-text-md );
	line-height: var( --pmd-leading-snug );
	overflow-wrap: anywhere;
}

.pmd-place-address .pmd-ico,
.pmd-place-phone .pmd-ico,
.pmd-place-website .pmd-ico {
	flex: none;
	margin-top: 1px;
	color: var( --pmd-place-ink );
}

.pmd-place-phone,
.pmd-place-website {
	align-items: center;
	min-height: 44px;
}

.pmd-place .pmd-place-phone a,
.pmd-place .pmd-place-website a {
	color: var( --pmd-place-ink );
	font-weight: var( --pmd-weight-semibold );
	text-decoration: none;
}

.pmd-place .pmd-place-phone a:hover,
.pmd-place .pmd-place-website a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pmd-place .pmd-place-directions {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var( --pmd-space-2 ) var( --pmd-space-5 );
	border: 1px solid var( --pmd-color-border-strong );
	border-radius: var( --pmd-radius-pill );
	background: var( --pmd-place-card );
	color: var( --pmd-color-text );
	font-size: var( --pmd-text-sm );
	font-weight: var( --pmd-weight-semibold );
	text-decoration: none;
}

.pmd-place .pmd-place-directions:hover {
	border-color: var( --pmd-color-primary );
	color: var( --pmd-place-ink );
}

.pmd-place .pmd-place-directions:focus-visible,
.pmd-place .pmd-place-phone a:focus-visible,
.pmd-place .pmd-place-website a:focus-visible,
.pmd-place .pmd-place-social a:focus-visible {
	outline: 2px solid var( --pmd-place-ring );
	outline-offset: 2px;
}

/* ── Opening hours ───────────────────────────────────────────────── */

.pmd-place-hours-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var( --pmd-text-sm );
	font-variant-numeric: tabular-nums;
}

.pmd-place-hours-table th,
.pmd-place-hours-table td {
	padding: var( --pmd-space-2 ) var( --pmd-space-3 );
	border: 0;
	border-bottom: 1px solid var( --pmd-color-border );
	background: transparent;
	color: var( --pmd-color-text-muted );
	font-weight: var( --pmd-weight-regular );
	text-align: start;
}

.pmd-place-hours-table td {
	text-align: end;
}

.pmd-place-hours-table tbody tr:last-child th,
.pmd-place-hours-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Today: highlighted as a rounded band. */
.pmd-place-hours-table tr.is-today th,
.pmd-place-hours-table tr.is-today td {
	border-bottom-color: transparent;
	background: var( --pmd-color-primary-soft );
	color: var( --pmd-color-text );
	font-weight: var( --pmd-weight-semibold );
}

.pmd-place-hours-table tr.is-today th {
	border-start-start-radius: var( --pmd-radius-md );
	border-end-start-radius: var( --pmd-radius-md );
}

.pmd-place-hours-table tr.is-today td {
	border-start-end-radius: var( --pmd-radius-md );
	border-end-end-radius: var( --pmd-radius-md );
}

/* ── Contact ─────────────────────────────────────────────────────── */

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

.pmd-place-social li {
	margin: 0;
}

.pmd-place .pmd-place-social a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var( --pmd-space-2 ) var( --pmd-space-4 );
	border: 1px solid var( --pmd-color-border-strong );
	border-radius: var( --pmd-radius-pill );
	color: var( --pmd-place-ink );
	font-size: var( --pmd-text-sm );
	font-weight: var( --pmd-weight-semibold );
	text-decoration: none;
}

.pmd-place .pmd-place-social a:hover {
	border-color: var( --pmd-color-primary );
}

/* ── Nearby places ───────────────────────────────────────────────── */

.pmd-place-nearby {
	margin-top: var( --pmd-space-8 );
	padding-top: var( --pmd-space-6 );
	border-top: 1px solid var( --pmd-color-border );
}

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

/*
 * One column on phones, two from 640px up — never three or four.
 *
 * card.php is a horizontal card: a fixed 92px thumb beside a title, a status
 * chip, a locality and (only here) a distance. Any row of three or four
 * cards leaves that text column around 200px wide at desktop widths, and it
 * folds: the address across three lines, "Abierto 24h" breaking inside its
 * own chip, the chips drifting out of line. Measured at 1024, 1440 and
 * 1680px, a minmax()/auto-fit grid still produced three or four such rows.
 *
 * Two columns give every card at least the width the directory's own list
 * gives it, and Front\PlacePage::MAX_NEARBY (4) fills them as a balanced
 * 2×2 block instead of a row of four squeezed cards or a lone orphan below
 * three.
 */
.pmd-place-nearby-list {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --pmd-space-4 );
}

@media ( min-width: 640px ) {
	.pmd-place-nearby-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

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

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

.pmd-place-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-place-viewer::backdrop {
	background: var( --pmd-color-overlay );
}

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

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

.pmd-place-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-place-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-place-viewer-counter[hidden] {
	display: none;
}

.pmd-place .pmd-place-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-place .pmd-place-viewer-btn:hover {
	background: var( --pmd-color-surface-alt );
}

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

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

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

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

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

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

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

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

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

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

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

@media ( max-width: 767px ) {
	.pmd-place-viewer {
		width: calc( 100vw - var( --pmd-space-4 ) * 2 );
	}

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

@media ( prefers-reduced-motion: reduce ) {
	.pmd-place-gallery-main,
	.pmd-place-gallery-thumb img,
	.pmd-place .pmd-place-action,
	.pmd-place .pmd-place-viewer-btn {
		transition: none;
	}

	.pmd-place-gallery-hero:hover .pmd-place-gallery-main,
	.pmd-place-gallery-thumb:hover img,
	.pmd-place .pmd-place-action:active {
		scale: none;
	}
}

/* ── Accessibility ───────────────────────────────────────────────── */

.pmd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}