/*
 * HiBellevue Directory — public component styles (Stage 3 Sheet D).
 *
 * Scope rules (per AGENTS.md and the UI guidelines):
 *  - every rule is namespaced under hbd-* classes; theme globals untouched;
 *  - the theme's fonts and text colors are inherited, never overridden;
 *  - borders and surfaces use translucent ink so light and dark themes both
 *    keep usable contrast without site-specific colors;
 *  - loaded only on screens that render plugin components (selective).
 */

/* ===== Shared tokens ===== */
.hbd-single-place,
.hbd-archive,
.hbd-place-grid,
.hbd-tiles,
.hbd-search,
.hbd-facets {
	--hbd-space-s: 0.5rem;
	--hbd-space-m: 1rem;
	--hbd-space-l: 1.5rem;
	--hbd-radius: 6px;
	--hbd-line: 1px solid rgba(0, 0, 0, 0.14);
	--hbd-line-soft: 1px solid rgba(0, 0, 0, 0.08);
}

/* ===== Keyboard focus (never removed) ===== */
.hbd-single-place a:focus-visible,
.hbd-archive a:focus-visible,
.hbd-place-grid a:focus-visible,
.hbd-tiles a:focus-visible,
.hbd-search :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* ===== Images ===== */
.hbd-card__img,
.hbd-place__photo-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hbd-radius);
}

/* ===== Card grids ===== */
.hbd-place-grid {
	display: grid;
	gap: var(--hbd-space-l);
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	margin: var(--hbd-space-l) 0;
	padding: 0;
}

.hbd-card {
	border: var(--hbd-line);
	border-radius: var(--hbd-radius);
	overflow: hidden;
	min-width: 0;
}

.hbd-card__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.hbd-card__link:hover .hbd-card__title,
.hbd-card__link:focus-visible .hbd-card__title {
	text-decoration: underline;
}

.hbd-card__body {
	padding: var(--hbd-space-m) var(--hbd-space-m) var(--hbd-space-l);
}

.hbd-card__title {
	margin: 0 0 var(--hbd-space-s);
	font-size: 1.1em;
	line-height: 1.3;
}

.hbd-card__meta,
.hbd-card__distance {
	margin: 0 0 var(--hbd-space-s);
	font-size: 0.875em;
	line-height: 1.5;
	color: inherit;
}

.hbd-card__meta-sep,
.hbd-card__distance {
	opacity: 1; /* Contrast is kept; hierarchy comes from size, not fading. */
}

/* Editorial: dominant photo, larger title. */
.hbd-card--editorial .hbd-card__media img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.hbd-card--editorial .hbd-card__title {
	font-size: 1.2em;
}

/* Compact: smaller image and text for dense results. */
.hbd-card--compact .hbd-card__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hbd-card--compact .hbd-card__title {
	font-size: 1em;
}

.hbd-card--compact .hbd-card__body {
	padding: var(--hbd-space-s) var(--hbd-space-m);
}

/* Horizontal: image beside text from 640px up. */
.hbd-card--horizontal .hbd-card__link {
	display: grid;
	grid-template-columns: 1fr;
}

.hbd-card--horizontal .hbd-card__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

@media (min-width: 640px) {
	.hbd-card--horizontal .hbd-card__link {
		grid-template-columns: 38% 1fr;
	}

	.hbd-card--horizontal .hbd-card__media img {
		height: 100%;
		border-radius: 0;
	}
}

/* ===== Tiles ===== */
.hbd-tiles {
	margin: var(--hbd-space-l) 0;
}

.hbd-tiles__title {
	margin: 0 0 var(--hbd-space-m);
	font-size: 1.15em;
}

.hbd-tiles__list {
	display: grid;
	gap: var(--hbd-space-m);
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.hbd-tiles__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.hbd-tiles__item {
	border: var(--hbd-line);
	border-radius: var(--hbd-radius);
	padding: var(--hbd-space-m);
}

.hbd-tiles__link {
	font-weight: 600;
	text-decoration: none;
}

.hbd-tiles__link:hover {
	text-decoration: underline;
}

.hbd-tiles__count {
	display: block;
	margin-top: var(--hbd-space-s);
	font-size: 0.875em;
}

/* ===== Archives (home + taxonomy) ===== */
.hbd-archive__title {
	margin: 0 0 var(--hbd-space-m);
	line-height: 1.2;
}

.hbd-archive__description {
	margin: 0 0 var(--hbd-space-l);
	max-width: 65ch;
}

.hbd-archive__empty {
	margin: var(--hbd-space-l) 0;
}

/* ===== Single place ===== */
.hbd-place__title {
	margin: 0 0 var(--hbd-space-s);
	line-height: 1.2;
	overflow-wrap: break-word;
}

.hbd-place__terms {
	margin: 0 0 var(--hbd-space-l);
	font-size: 0.95em;
}

.hbd-place__term-sep {
	margin: 0 0.4em;
}

.hbd-place__gallery {
	display: grid;
	gap: var(--hbd-space-m);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	margin: 0 0 var(--hbd-space-l);
	padding: 0;
}

.hbd-place__photo {
	margin: 0;
}

.hbd-place__description {
	margin: 0 0 var(--hbd-space-l);
	max-width: 70ch;
}

.hbd-place__section {
	margin: 0 0 var(--hbd-space-l);
}

.hbd-place__section-title {
	margin: 0 0 var(--hbd-space-m);
	font-size: 1.15em;
}

.hbd-place__address {
	margin: 0 0 var(--hbd-space-m);
	max-width: 60ch;
}

.hbd-place__distances {
	margin: 0;
	padding-left: 1.2em;
}

.hbd-place__distance {
	margin: 0 0 var(--hbd-space-s);
	font-size: 0.95em;
}

.hbd-place__distance--primary {
	font-weight: 600;
}

.hbd-place__contacts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hbd-place__contact {
	margin: 0 0 var(--hbd-space-s);
}

.hbd-place__contact-label {
	font-weight: 600;
}

.hbd-place__facts {
	margin: 0;
}

.hbd-place__fact {
	display: grid;
	grid-template-columns: minmax(9em, max-content) 1fr;
	gap: var(--hbd-space-m);
	padding: var(--hbd-space-s) 0;
	border-bottom: var(--hbd-line-soft);
}

@media (max-width: 480px) {
	.hbd-place__fact {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

.hbd-place__fact-label {
	font-weight: 600;
}

.hbd-place__fact-value {
	margin: 0;
	overflow-wrap: anywhere;
}

.hbd-place__correction {
	margin: var(--hbd-space-l) 0 0;
	font-size: 0.9em;
}

/* ===== Search form (Stage 4 Sheet C) — plain GET form, no JavaScript ===== */
.hbd-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hbd-space-s);
	align-items: center;
	margin: var(--hbd-space-m) 0 0;
}

.hbd-search__label {
	/* Visually hidden but available to assistive technology. */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hbd-search__input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	font: inherit;
	color: inherit;
	background: inherit;
	border: var(--hbd-line);
	border-radius: var(--hbd-radius);
}

/* Buttons: Elementor kits (and other sites) often style ALL buttons
 * globally, e.g. `.elementor-kit-9 button` (specificity 0,1,1).Prefixing
 * ours with their own form class (0,2,0) keeps the plugin's guaranteed
 * surface winning that common case without touching theme styles. */
.hbd-search .hbd-search__submit {
	padding: 0.5rem 1rem;
	font: inherit;
	/* Contrast must not depend on theme inheritance. Browsers that know
	 * system colors get a guaranteed-ratio pair (white/black on light,
	 * inverted on dark); older ones drop the Canvas declarations and
	 * fall back to the inherited look. */
	background-color: inherit;
	color: inherit;
	border: var(--hbd-line);
	border-radius: var(--hbd-radius);
	cursor: pointer;
	background: Canvas;
	color: CanvasText;
}

.hbd-search__scope,
.hbd-search__scope a {
	margin: var(--hbd-space-s) 0 0;
	font-size: 0.9em;
}

.hbd-search__scope {
	flex-basis: 100%;
}

.hbd-search__refine {
	margin: var(--hbd-space-m) 0 0;
}

/* ===== Facet toolbar (Stage 4 Sheet D) — plain GET form, no JavaScript ===== */
.hbd-facets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hbd-space-s);
	align-items: center;
	margin: var(--hbd-space-m) 0 0;
}

.hbd-facets__label {
	font-size: 0.9em;
}

.hbd-facets__select {
	padding: 0.4rem 0.5rem;
	font: inherit;
	color: inherit;
	background: inherit;
	border: var(--hbd-line);
	border-radius: var(--hbd-radius);
	max-width: 11rem;
}

.hbd-facets .hbd-facets__apply {
	padding: 0.45rem 1rem;
	font: inherit;
	/* Same guaranteed surface as the search submit (see above), with the
	 * same specificity win over kit-level global button styles. */
	background-color: inherit;
	color: inherit;
	border: var(--hbd-line);
	border-radius: var(--hbd-radius);
	cursor: pointer;
	background: Canvas;
	color: CanvasText;
}

.hbd-facets__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hbd-space-s);
	align-items: baseline;
	margin: var(--hbd-space-s) 0 0;
}

.hbd-facets__count {
	font-size: 0.9em;
}

.hbd-facets__chip {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	font-size: 0.9em;
	text-decoration: none;
	border: var(--hbd-line-soft);
	border-radius: calc(var(--hbd-radius) * 2);
}

.hbd-facets__chip-x {
	margin-left: 0.2rem;
}

/* ===== Autocomplete listbox (Stage 4 Sheet E) — created by JS only ===== */
.hbd-suggest__list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background-color: Canvas;
	border: var(--hbd-line);
	border-radius: var(--hbd-radius);
	max-height: 16rem;
	overflow-y: auto;
}

.hbd-suggest__option {
	padding: var(--hbd-space-s) var(--hbd-space-m);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hbd-suggest__option[aria-selected='true'] {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.hbd-suggest__status {
	margin: var(--hbd-space-s) 0 0;
}

/* ===== Reduced motion: plugin adds no motion anyway; belt and braces. ===== */
@media (prefers-reduced-motion: reduce) {
	.hbd-single-place *,
	.hbd-archive *,
	.hbd-place-grid *,
	.hbd-tiles * {
		transition: none !important;
		animation: none !important;
	}
}