/* Latest species. Loaded only where the block/section is used. */
.als {
	--als-size: 160px;
	--als-w: var(--als-size);
	--als-ratio: 1;
	--als-ring: var(--ast-global-color-0, #2f5d3a);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}
.als--sm { --als-size: 112px; }
.als--md { --als-size: 160px; }
.als--lg { --als-size: 224px; }
.als--xl { --als-size: 300px; }

.als__title {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
}
.als--align-center .als__title,
.als--align-center .als__empty { text-align: center; }

.als__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.als--align-center .als__list { justify-content: center; }

.als__item {
	width: calc(var(--als-w) + 1.5rem);
	max-width: 100%;
	margin: 0;
}

.als__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.als__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: min(var(--als-w), 100%);
	aspect-ratio: var(--als-ratio);
	overflow: hidden;
	border-radius: 50%;
	background: color-mix(in srgb, var(--als-ring) 12%, #fff);
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--als-ring) 35%, transparent);
	transition: transform 0.2s, box-shadow 0.2s;
}
.als--rounded .als__icon { border-radius: 22%; }
.als--square .als__icon { border-radius: 4px; }
.als--landscape { --als-w: calc(var(--als-size) * 1.5); --als-ratio: 3 / 2; }
.als--landscape .als__icon { border-radius: 14px; }

/* Extra specificity: Astra's ".entry-content img { height: auto }" would
   otherwise stop the photo filling the frame and push it off centre. */
.als .als__icon .als__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0;
	object-fit: cover;
	object-position: 50% 50%;
}
.als--fit-contain .als__icon .als__img { object-fit: contain; }
/* Initials stay hidden behind a shrunk photo's empty edges. */
.als--fit-contain .als__icon:has(.als__img) .als__initial { visibility: hidden; }

.als__initial {
	font-size: calc(var(--als-size) * 0.34);
	font-weight: 700;
	line-height: 1;
	color: var(--als-ring);
}

a.als__card:hover .als__icon,
a.als__card:focus-visible .als__icon {
	transform: translateY(-3px);
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--als-ring);
}

.als__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}
.als--sm .als__name { font-size: 0.75rem; }
.als--xl .als__name { font-size: 1rem; }
a.als__card:hover .als__name { text-decoration: underline; }

.als__date { font-size: 0.75rem; opacity: 0.7; }
.als__empty { margin: 0; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
	.als__icon { transition: none; }
	a.als__card:hover .als__icon { transform: none; }
}

/* Where it was seen */
.als__where {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.2rem;
	margin-top: 0.3rem;
	font-size: 0.75rem;
	line-height: 1.3;
	text-align: center;
	opacity: 0.8;
}
.als__where svg { flex: none; margin-top: 0.05rem; color: var(--als-ring); }
a.als__where { text-decoration: none; }
/* Plain place names take the text colour; buttons keep the site's button colours. */
span.als__where,
a.als__where:not(.button) { color: inherit; }
a.als__where:hover span,
a.als__where:focus-visible span { text-decoration: underline; }
.als--xl .als__where { font-size: 0.875rem; }

/* Location links as small buttons, using the site's (Astra) button colours. */
.als .als__where--button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	gap: 0.3rem;
	max-width: 100%;
	margin: 0.45rem auto 0;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	opacity: 1;
	text-decoration: none;
}
.als .als__where--button svg { margin: 0; color: currentColor; }
.als .als__where--button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.als .als__where--button:hover span,
.als .als__where--button:focus-visible span { text-decoration: none; }
.als__item { display: flex; flex-direction: column; }
.als__card .asc-mega { margin: 0 !important; }