/* Single name page + /names filter layout. */

/* --- Single hero --- */
.abn-name-hero { text-align: center; padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; position: relative; }
.abn-name-hero__display { font-family: var(--abn-font-display); font-weight: 800; font-size: clamp(3rem, 9vw, 5.5rem); color: var(--abn-dark); line-height: 1; margin: 0.2rem 0; }
.abn-name-hero__native { font-size: 1.4rem; color: var(--abn-primary); font-weight: 700; }
.abn-name-hero__pron { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; color: var(--abn-muted); font-size: 1.05rem; }
.abn-pron-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--abn-secondary); color: #fff; border: 0; cursor: pointer; transition: var(--abn-transition); }
.abn-pron-btn:hover { background: var(--abn-secondary-dark); transform: scale(1.05); }

/* --- Quick stats bar --- */
.abn-quickstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--abn-border); border: 1px solid var(--abn-border); border-radius: var(--abn-radius); overflow: hidden; margin-block: 2rem; }
.abn-quickstats > div { background: #fff; padding: 1rem 0.75rem; text-align: center; }
.abn-quickstats dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--abn-muted); font-weight: 700; margin-bottom: 0.25rem; }
.abn-quickstats dd { margin: 0; font-family: var(--abn-font-heading); font-weight: 800; color: var(--abn-dark); font-size: 1.02rem; }
@media (max-width: 720px) { .abn-quickstats { grid-template-columns: repeat(2, 1fr); } }

/* --- Content layout --- */
.abn-single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; }
@media (max-width: 960px) { .abn-single-layout { grid-template-columns: 1fr; } }

.abn-prose { font-size: 1.08rem; }
.abn-prose h2 { font-size: 1.6rem; margin-top: 2.2rem; display: flex; align-items: center; gap: 0.5rem; }
.abn-prose h2::before { content: ""; width: 26px; height: 4px; border-radius: 4px; background: var(--abn-primary); }
.abn-prose p { margin-block: 0 1.1rem; }

.abn-block { background: #fff; border: 1px solid var(--abn-border); border-radius: var(--abn-radius-lg); padding: 1.6rem; margin-bottom: 1.5rem; }

/* Famous people cards */
.abn-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.abn-person { display: flex; gap: 0.9rem; padding: 1rem; border: 1px solid var(--abn-border); border-radius: var(--abn-radius); background: var(--abn-light-bg); }
.abn-person__avatar { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: var(--abn-secondary); color: #fff; display: grid; place-items: center; font-family: var(--abn-font-heading); font-weight: 800; font-size: 1.3rem; }
.abn-person__name { font-weight: 800; font-family: var(--abn-font-heading); margin: 0; }
.abn-person__role { color: var(--abn-muted); font-size: 0.88rem; margin: 0.1rem 0 0.3rem; }
.abn-person__bio { font-size: 0.88rem; margin: 0; }

/* Sticky sidebar (share/save) */
.abn-aside { position: sticky; top: 90px; display: grid; gap: 1.25rem; }
.abn-share { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.abn-share a, .abn-share button { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--abn-light-bg); border: 1px solid var(--abn-border); color: var(--abn-dark); cursor: pointer; }
.abn-share a:hover, .abn-share button:hover { background: var(--abn-primary); color: #fff; border-color: var(--abn-primary); }

/* --- /names filter page --- */
.abn-filter-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .abn-filter-layout { grid-template-columns: 1fr; } }
.abn-filters { background: #fff; border: 1px solid var(--abn-border); border-radius: var(--abn-radius-lg); padding: 1.4rem; position: sticky; top: 90px; }
.abn-filters h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--abn-muted); margin: 1.25rem 0 0.6rem; }
.abn-filters h3:first-child { margin-top: 0; }
.abn-filter-group { display: flex; flex-direction: column; gap: 0.35rem; max-height: 220px; overflow-y: auto; }
.abn-filter-group label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; cursor: pointer; }
.abn-toggle-row { display: flex; gap: 0.4rem; }
.abn-toggle-row label { flex: 1; text-align: center; padding: 0.5rem; border: 1px solid var(--abn-border); border-radius: var(--abn-radius); cursor: pointer; font-weight: 700; font-family: var(--abn-font-heading); }
.abn-toggle-row input { position: absolute; opacity: 0; }
.abn-toggle-row input:checked + span { }
.abn-toggle-row label:has(input:checked) { background: var(--abn-primary); color: #fff; border-color: var(--abn-primary); }
.abn-region-group { margin-bottom: 0.6rem; }
.abn-region-group > summary { font-weight: 800; font-family: var(--abn-font-heading); cursor: pointer; padding: 0.3rem 0; }

.abn-results-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.abn-results-head .count { color: var(--abn-muted); }
.abn-results-head select { padding: 0.55rem 0.9rem; border-radius: var(--abn-radius-pill); border: 1px solid var(--abn-border); font-family: var(--abn-font-body); background: #fff; }

.abn-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--abn-gap); }
.abn-loading { text-align: center; padding: 3rem; color: var(--abn-muted); }
.abn-pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2rem; }
.abn-pagination button { padding: 0.6rem 1rem; border: 1px solid var(--abn-border); background: #fff; border-radius: var(--abn-radius); cursor: pointer; font-weight: 700; }
.abn-pagination button:disabled { opacity: 0.4; cursor: default; }

.abn-filter-toggle { display: none; }
@media (max-width: 900px) {
	.abn-filter-toggle { display: inline-flex; }
	.abn-filters { position: fixed; inset: 0; z-index: 300; border-radius: 0; overflow-y: auto; transform: translateX(-100%); transition: transform var(--abn-transition); }
	.abn-filters[data-open="true"] { transform: translateX(0); }
}