/**
 * ForeBranch surnames browse + individuals list polish
 * Depends on list-chrome.css (hub tokens under .lp-shell).
 */

/* --------------------------------------------------------------------------
	A–Z navigation
	-------------------------------------------------------------------------- */
.lp-az-nav {
	margin-bottom: var(--lp-space-6);
}

.lp-az-nav .lp-panel__body {
	display: flex;
	flex-direction: column;
	gap: var(--lp-space-3);
	align-items: center;
}

.lp-az-nav__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lp-space-2);
}

.lp-az-nav__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	padding: var(--lp-space-1) var(--lp-space-2);
	font-size: var(--lp-text-sm);
	font-weight: var(--lp-weight-semibold);
	line-height: 1;
	color: var(--lp-color-accent);
	background: var(--lp-color-surface-alt);
	border: 1px solid var(--lp-color-border);
	border-radius: var(--lp-radius-pill);
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.lp-az-nav__letter:hover {
	background: var(--lp-color-accent-soft);
	border-color: var(--lp-color-accent-muted);
	color: var(--lp-color-accent);
	text-decoration: none;
}

.lp-az-nav__letter:focus-visible {
	outline: none;
	box-shadow: var(--lp-focus-ring);
}

/* Legacy alphabet nav if still present */
.hp-genealogy-container .hp-alphabet-nav {
	background: var(--lp-color-surface);
	border: 1px solid var(--lp-color-border);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-sm);
	padding: var(--lp-space-5);
	margin-bottom: var(--lp-space-6);
	text-align: center;
}

.hp-genealogy-container .letter-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	padding: var(--lp-space-1) var(--lp-space-2);
	margin: 2px;
	font-size: var(--lp-text-sm);
	font-weight: var(--lp-weight-semibold);
	color: var(--lp-color-accent);
	background: var(--lp-color-surface-alt);
	border: 1px solid var(--lp-color-border);
	border-radius: var(--lp-radius-pill);
	text-decoration: none;
}

.hp-genealogy-container .letter-link:hover {
	background: var(--lp-color-accent-soft);
	border-color: var(--lp-color-accent-muted);
	color: var(--lp-color-accent);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
	Letter sections + surname grid
	-------------------------------------------------------------------------- */
.hp-letter-section {
	margin-bottom: var(--lp-space-8);
}

.hp-letter-heading {
	font-size: var(--lp-text-xl);
	font-weight: var(--lp-weight-semibold);
	color: var(--lp-heading-color, var(--lp-color-text));
	margin: 0 0 var(--lp-space-4);
	padding: 0 0 var(--lp-space-2);
	border-bottom: 1px solid var(--lp-color-border);
	background: none;
	box-shadow: none;
	display: block;
	border-radius: 0;
}

.hp-letter-heading::after {
	content: none;
	display: none;
}

.hp-surnames-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--lp-space-3);
}

.hp-surname-item {
	background: var(--lp-color-surface);
	padding: var(--lp-space-3) var(--lp-space-4);
	border-radius: var(--lp-radius);
	border: 1px solid var(--lp-color-border);
	box-shadow: var(--lp-shadow-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hp-surname-item:hover {
	background: var(--lp-color-surface);
	border-color: var(--lp-color-accent-muted);
	box-shadow: var(--lp-shadow-hover);
	transform: none;
}

.hp-surname-item a {
	color: var(--lp-link-color, var(--lp-color-accent));
	text-decoration: none;
	font-weight: var(--lp-weight-semibold);
	font-size: var(--lp-text-base);
}

.hp-surname-item a:hover {
	color: var(--lp-color-accent-hover);
	text-decoration: underline;
}

.hp-surname-count {
	color: var(--lp-color-text-muted);
	font-size: var(--lp-text-sm);
	margin-left: var(--lp-space-2);
	font-weight: var(--lp-weight-normal);
}

/* --------------------------------------------------------------------------
	Individuals list polish (#004466, not #007cba)
	-------------------------------------------------------------------------- */
.hp-individuals-section .breadcrumbs a {
	color: var(--lp-color-text-secondary) !important;
}

.hp-individuals-section .breadcrumbs a:hover {
	color: var(--lp-color-accent) !important;
}

.hp-individuals-list {
	background: var(--lp-color-surface);
	border-radius: var(--lp-radius);
	overflow: hidden;
	border: 1px solid var(--lp-color-border);
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important;
	box-shadow: var(--lp-shadow-sm);
}

.hp-individual-item {
	padding: var(--lp-space-4) var(--lp-space-5);
	border-right: 1px solid var(--lp-color-border);
	border-bottom: 1px solid var(--lp-color-border);
	transition: background 0.15s ease;
}

.hp-individual-item:hover {
	background: var(--lp-color-surface-alt) !important;
}

.hp-individual-item a {
	color: var(--lp-color-accent);
	text-decoration: none;
	font-weight: var(--lp-weight-semibold);
}

.hp-individual-item a:hover {
	color: var(--lp-color-accent-hover);
	text-decoration: underline;
}

.hp-individual-item .hp-dates {
	color: var(--lp-color-text-muted);
	font-size: var(--lp-text-sm);
	font-weight: var(--lp-weight-normal);
	margin-left: var(--lp-space-2);
}

/* --------------------------------------------------------------------------
	Browse empty / misc
	-------------------------------------------------------------------------- */
.hp-browse-section > p {
	color: var(--lp-color-text-secondary);
	font-size: var(--lp-text-base);
}

/* --------------------------------------------------------------------------
	Responsive
	-------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.hp-surnames-list {
	grid-template-columns: 1fr;
	}

	.hp-individuals-list {
	grid-template-columns: 1fr !important;
	}

	.hp-individual-item {
	border-right: none;
	}
}

@media (max-width: 480px) {
	.hp-genealogy-container.lp-shell {
	padding: var(--lp-space-4) var(--lp-space-3) var(--lp-space-8);
	}

	.lp-az-nav__letter {
	min-width: 1.75rem;
	min-height: 1.75rem;
	font-size: var(--lp-text-xs);
	}
}