/**
 * Phixo · Work index (archive-phixo_series.php) page styles.
 *
 * Tokens only — every colour/size is a var(--…) from phixo.css :root.
 * Classes are prefixed phixo-work__ to avoid collisions; shared house
 * classes (.band, .container, .eyebrow, .lede, .img-slot) do the rest.
 *
 * Wireframe board 02: hero eyebrow "The archive" / H1 "Work" / a row of
 * discipline filter chips (ALL active on charcoal), then a 2-col card grid.
 */

/* ---- Hero head ---------------------------------------------------------- */
.phixo-work__head {
	max-width: var(--measure);
}

.phixo-work__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	color: var(--ink);
	margin: 0 0 18px;
}

.phixo-work__intro {
	margin: 0;
	max-width: 52ch;
}

/* ---- Discipline filter chips ------------------------------------------- */
.phixo-work__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 30px;
}

.phixo-work__chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	font-family: var(--sans);
	font-weight: 600;
	font-size: var(--fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.phixo-work__chip:hover,
.phixo-work__chip:focus-visible {
	color: var(--ink);
	border-color: var(--ink);
}

.phixo-work__chip:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 2px;
}

/*
 * Active chip: charcoal fill, linen text (mirrors the wireframe's ALL chip).
 * State is NOT colour-only — the fill + border + weight all change and the JS
 * carries aria-pressed, so the selection reads without relying on hue.
 */
.phixo-work__chip.is-active,
.phixo-work__chip[aria-pressed="true"] {
	color: var(--bg);
	background: var(--ink);
	border-color: var(--ink);
	cursor: default;
}

/* ---- Series card grid --------------------------------------------------- */
.phixo-work__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 44px 32px;
}

.phixo-work__card {
	margin: 0;
}

/* Cards hidden by the filter drop out of flow entirely. */
.phixo-work__card[hidden] {
	display: none;
}

.phixo-work__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.phixo-work__media {
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
	background: var(--stone);
}

.phixo-work__media .img-slot {
	aspect-ratio: 16 / 11;
	margin: 0;
}

.phixo-work__media .phixo-img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.phixo-work__link:hover .phixo-work__media .phixo-img,
.phixo-work__link:focus-visible .phixo-work__media .phixo-img {
	transform: scale(1.03);
}

.phixo-work__link:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 4px;
}

.phixo-work__meta {
	display: block;
	font-family: var(--sans);
	font-weight: 600;
	font-size: var(--fs-caption);
	letter-spacing: 0.06em;
	color: var(--mute);
	margin-bottom: 6px;
}

.phixo-work__name {
	font-family: var(--serif);
	font-weight: 500;
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
	color: var(--ink);
	margin: 0;
	transition: color 0.18s ease;
}

.phixo-work__link:hover .phixo-work__name,
.phixo-work__link:focus-visible .phixo-work__name {
	color: var(--brass);
}

/* ---- Empty state -------------------------------------------------------- */
.phixo-work__none {
	font-family: var(--serif);
	font-size: var(--fs-h3);
	line-height: var(--lh-body);
	color: var(--mute);
	max-width: 40ch;
	margin: 0;
}

.phixo-work__none--static {
	margin-top: 8px;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 680px) {
	.phixo-work__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phixo-work__chip,
	.phixo-work__media .phixo-img,
	.phixo-work__name {
		transition: none;
	}
	.phixo-work__link:hover .phixo-work__media .phixo-img,
	.phixo-work__link:focus-visible .phixo-work__media .phixo-img {
		transform: none;
	}
}