/*
 * Collections index — ten worlds, each in its own accent.
 *
 * The tile is the product card with a name and a count under it. Nothing here restyles
 * the card itself; the accent arrives as an .aethyrdancer-collection-* class from
 * tokens.css sitting on the list item, which is what re-points --ad-accent and the two
 * card tints for everything inside.
 *
 * All colour comes from tokens.css. Nothing here declares a raw hex.
 *
 * No JavaScript. The page is a grid of links and it should stay one.
 */

/*
 * `flex` and `width` together because the parent may be either.
 *
 * Astra's .ast-container is a flex row (it expects a content column and a sidebar). A
 * lone flex item with no basis sizes to its content, which capped this grid at 950px
 * inside a 1200px container and cost it a whole column. Stating both keeps the page
 * full-width under Astra without depending on Astra's markup — in an ordinary block
 * parent `width: 100%` is simply the default and `flex` is inert.
 */
.aethyrdancer-collections {
	flex: 1 1 100%;
	margin: 0 auto;
	max-width: 1240px;
	padding: var(--ad-space-12) var(--ad-space-4) var(--ad-space-16);
	width: 100%;
}

.aethyrdancer-collections__head {
	margin-bottom: var(--ad-space-12);
	text-align: center;
}

.aethyrdancer-collections__title {
	margin: 0;
}

.aethyrdancer-collections__intro {
	color: var(--ad-text-muted);
	margin: var(--ad-space-6) auto 0;
	max-width: 62ch;
}

.aethyrdancer-collections__empty {
	color: var(--ad-text-muted);
	text-align: center;
}

/*
 * auto-fit rather than a fixed column count: the catalogue is ten collections today and
 * the grid should not need editing when it is twelve. The 220px floor is what keeps a
 * 3:4 card legible — below it the cutout stops reading as a garment.
 */
.aethyrdancer-collections__grid {
	display: grid;
	gap: var(--ad-space-8) var(--ad-space-6);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aethyrdancer-collections__tile {
	display: block;
	text-decoration: none;
	transition: transform 200ms ease;
}

/*
 * Same 10% lift as a product card, and for the same reason it is on the tile rather than
 * the card inside it: artwork, frame and collection name grow together or the tile comes
 * apart. Only open tiles move — a closed one is not a target, so responding to the
 * pointer would promise a click it cannot honour.
 */
a.aethyrdancer-collections__tile:hover,
a.aethyrdancer-collections__tile:focus-visible {
	transform: scale(1.1);
	position: relative;
	z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
	.aethyrdancer-collections__tile {
		transition: none;
	}

	a.aethyrdancer-collections__tile:hover,
	a.aethyrdancer-collections__tile:focus-visible {
		transform: none;
	}
}

a.aethyrdancer-collections__tile:focus-visible {
	border-radius: var(--ad-radius-lg);
	outline: 2px solid var(--ad-focus);
	outline-offset: 6px;
}

.aethyrdancer-collections__name {
	margin: var(--ad-space-4) 0 0;
	text-align: center;
}

/*
 * Sentence case, not the tracked uppercase this started as. Almendra Display is a
 * decorative serif and its capitals are ornate; set small, uppercase and tracked, the
 * count stopped being readable at a glance even though it measured 5.48:1. The rest of
 * the site sets its meta in ordinary case for the same reason — the price on the archive,
 * the result count above the shop grid — so this now matches rather than inventing.
 */
.aethyrdancer-collections__meta {
	color: var(--ad-text-muted);
	font-size: var(--ad-text-sm);
	letter-spacing: 0.02em;
	margin: var(--ad-space-2) 0 0;
	text-align: center;
}

/*
 * A collection below the piece threshold.
 *
 * The card is left ALONE. An earlier version desaturated and dimmed it, which read well
 * on one tile and was wrong on a page of them: this index exists to show ten accents at
 * once, all derived from the artwork, and muting the artwork to signal a navigation state
 * suppresses the only thing the page is for. It also contradicts principle 1 — the art is
 * the loud thing, and the chrome does not get to turn it down.
 *
 * So the closed state lives entirely in the label. The name softens, the meta line says
 * what is happening and why, and there is no link. That is enough: a tile that cannot be
 * clicked and explains itself is not a dead end, it is a preview.
 */
.aethyrdancer-collections__item.is-closed .aethyrdancer-collections__name {
	opacity: 0.72;
}

.aethyrdancer-collections__item.is-closed .aethyrdancer-collections__tile {
	cursor: default;
}

/*
 * No opacity here, deliberately. Dimming this to 0.75 to make it read as secondary
 * composited --ad-text-muted down to 3.55:1 against the ground, under the 4.5:1 that
 * 14.4px text needs. It is the second half of the same sentence as the count; it can
 * simply be the same colour.
 */
.aethyrdancer-collections__threshold {
	color: var(--ad-text-muted);
}

@media (max-width: 480px) {
	.aethyrdancer-collections {
		padding: var(--ad-space-8) var(--ad-space-4) var(--ad-space-12);
	}

	.aethyrdancer-collections__grid {
		gap: var(--ad-space-6) var(--ad-space-4);
	}

	body.aethyrdancer-typeface .aethyrdancer-collections__meta {
		font-family: 'Amarante', serif;
		font-size: 14px;
		line-height: 1.5;
		color: var(--ad-text);
	}

	.aethyrdancer-collections__head {
		margin-bottom: var(--ad-space-6);
	}
}

/* Touch scrolling must not leave a card enlarged after a tap. */
@media (hover: none) {
	a.aethyrdancer-collections__tile:hover {
		transform: none;
	}
}