/* Both directory pages ("Alle Steckbriefe", "Alle Buchvorstellungen") run through
 * the appfile "promo_index" and share this stylesheet. */
.promo-index-intro {
	margin-bottom: var(--default-margin);
}

.promo-index-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
}

.promo-index-search input[type="search"] {
	flex: 1 1 14rem;
	max-width: 22rem;
	padding: .25rem;
}

.promo-index-reset {
	font-size: .85em;
}

.promo-index-count {
	margin: 0 0 1rem;
	color: var(--dark-grey);
	font-size: .85em;
}

.promo-index-letters {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .5rem;
	margin: 0 0 1.5rem;
	padding: .5rem;
	border: 1px solid var(--hawk-grey);
	border-radius: var(--default-box-border-radius);
	background: var(--light-grey);
	font-weight: var(--default-semi-bold);
}

/* Three states: red = group on this page, blue = group on another page, grey = no
 * entry at all. */
.promo-index-letters span {
	color: var(--mid-grey);
}

/* All three pseudo-classes are needed to beat the frame's "a:link"/"a:visited",
 * which outranks a bare class. */
.promo-index-letters a.promo-index-letter-away,
.promo-index-letters a.promo-index-letter-away:link,
.promo-index-letters a.promo-index-letter-away:visited {
	color: var(--booklooker-blue);
}

/* Arrows as characters: makepage.svg's moveleft/moveright are bullet triangles. */
.promo-index-pager {
	margin-left: .5rem;
	white-space: nowrap;
}

.promo-index-pager a {
	padding: 0 .25rem;
	font-size: 1.15em;
	text-decoration: none;
}

.promo-index-group {
	margin: 1.5rem 0 .5rem;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--hawk-grey);
	font-size: 1.05rem;
}

/* Column width measured against the real content box: <main> holds about 44rem,
 * so an earlier 22rem collapsed the list into a single column. */
.promo-index-list {
	columns: 11rem;
	column-gap: 2rem;
}

/* Title plus author needs more room; 20rem still leaves two columns in 44rem. */
.promo-index-list-wide {
	columns: 20rem;
}

.promo-index-list li {
	break-inside: avoid;
	margin-bottom: .35rem;
	line-height: 1.4;
}

.promo-index-sub {
	color: var(--dark-grey);
	font-size: .85em;
}

.promo-index-sub::before {
	content: "· ";
}

.promo-index-empty {
	margin: 1.5rem 0;
}

.promo-index-pagenav {
	margin: 1.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.promo-index-cross {
	margin-top: 2rem;
	padding-top: .5rem;
	border-top: 1px solid var(--hawk-grey);
	font-size: .9em;
}