/*------------------------------------------------------------
Lego Sets — bare-bones public grid/filter styling.
Deliberately simple (plain CSS, no fixed 1920px stage) so a
designer can restyle it without fighting the homepage's layout
system. Colour tokens loosely match the brand palette.
------------------------------------------------------------*/

.lego-page {
	--lego-orange: #FF8200;
	--lego-blue: #0080FF;
	--lego-grey: #adadad;
	--lego-ink: #111111;
	--lego-cream: #EADFCF;
	--lego-border: #E2DED6;
	font-family: 'DM Sans', sans-serif;
	color: var(--lego-ink);
	max-width: 1200px;
	margin: 0 auto;
	padding: 160px 24px 96px;
}

.lego-page__title {
	font-family: 'F37Analogue', sans-serif;
	font-size: 40px;
	text-align: center;
	margin: 0 0 32px;
}

/* Logged-in banner — tells editors/admins they're on the editable
   view of this page (inline quick-edit controls on cards below),
   not just the public read-only page. Same dashed/muted treatment
   as .lego-card__admin so the two visually read as one system. */

.lego-page__admin-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	flex-wrap: wrap;
	max-width: 100%;
	margin: 0 auto 32px;
	padding: 10px 16px;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 8px;
	background: var(--lego-orange);
	font-size: 13px;
	text-align: center;
}

.lego-page__admin-banner-text {
	margin: 0;
}

/* Staff have no admin bar and no wp-admin, so this is their only way to
   sign out — worth making it look like a button rather than hiding it in
   the sentence. */
.lego-page__logout,
.lego-page__logout:visited {
	flex: none;
	padding: 4px 12px;
	border: 1px solid rgba(0, 0, 0, 0.45);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.65);
	color: inherit;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
}

.lego-page__logout:hover,
.lego-page__logout:focus-visible,
.lego-page__logout:visited:hover,
.lego-page__logout:visited:focus-visible {
	background: #fff;
	border-color: #000;
	text-decoration: none;
}

/* Set lookup — sits above the filters because it's the fast path to a
   single set, where the filters below narrow a browse. */

.lego-search {
	max-width: 460px;
	margin: 0 auto 28px;
	text-align: center;
}

.lego-search__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.lego-search__input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--lego-border);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	color: var(--lego-ink);
}

.lego-search__input:focus-visible {
	outline: 2px solid var(--lego-orange);
	outline-offset: -1px;
}

/* Result count for the whole control set — sits between the filters and
   the grid it describes, rather than against any one control. */
.lego-results-count {
	margin: 0 0 24px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	opacity: 0.7;
}

/* Filters */

.lego-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-bottom: 20px;
}

.lego-filters__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
}

.lego-filters__field select {
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid var(--lego-border);
	font-family: inherit;
	font-size: 14px;
	background: #fff;
	min-width: 160px;
}

/* Marks the staff-only Availability filter without shouting. */
.lego-filters__field em {
	font-style: normal;
	font-weight: 400;
	opacity: 0.55;
}

/* "Sets for little builders" — a boolean narrowing, so a checkbox
   rather than a facet dropdown. Boxed to match the select controls
   so the filter row keeps one visual rhythm. */
.lego-filters__check {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 160px;
	padding: 8px 12px;
	border: 1px solid var(--lego-border);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	font-weight: 400;
}

.lego-filters__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--lego-orange);
	cursor: pointer;
}

.lego-filters__check:has(input:disabled) {
	opacity: 0.5;
}

/* Grid */

.lego-grid-wrap {
	position: relative;
}

.lego-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

/* Shown briefly while filters re-run — see [hidden] note on .lego-card
   above; same fix needed here since this also sets display explicitly. */
.lego-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
	z-index: 2;
}

.lego-loading[hidden] {
	display: none;
}

.lego-loading__spinner {
	width: 36px;
	height: 36px;
	border: 4px solid var(--lego-border);
	border-top-color: var(--lego-orange);
	border-radius: 50%;
	animation: lego-spin 0.7s linear infinite;
}

@keyframes lego-spin {
	to {
		transform: rotate(360deg);
	}
}

.lego-grid__empty {
	text-align: center;
	padding: 48px 0;
	opacity: 0.7;
}

/* Card */

.lego-card {
	border: 1px solid var(--lego-border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* `display: flex` above beats the browser's built-in [hidden] rule
   (author CSS always wins over the user-agent stylesheet, regardless
   of specificity), so the JS filter's `card.hidden = true` silently
   did nothing visually without this. */
.lego-card[hidden] {
	display: none;
}

.lego-card.is-expanded {
	background: var(--lego-grey);
	color: #000;
	border-color: var(--lego-orange);
}

.lego-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--lego-cream);
}

.lego-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.lego-card__image--placeholder {
	width: 100%;
	height: 100%;
}

.lego-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #FFD400;
	color: #111;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Both badges derive from date_added and are mutually exclusive, so
   they can share the slot and just differ in colour. */
.lego-card__badge--coming_soon {
	background: var(--lego-orange);
	color: #fff;
}

/* Temporarily-unavailable sets stay in the grid (they may free up
   again shortly) but are knocked back and banded with the reason.
   Statuses tiered "never shown" are filtered out server-side and
   never reach this state. */

.lego-card.is-unavailable .lego-card__image {
	filter: grayscale(1);
	opacity: 0.45;
}

.lego-card__unavailable-banner {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	padding: 6px 8px;
	background: rgba(17, 17, 17, 0.78);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
}

/* Explicit, since the rule above sets position (author CSS beats the
   user-agent [hidden] rule) — same trap as .lego-card[hidden] below. */
.lego-card__unavailable-banner[hidden] {
	display: none;
}

.lego-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

/* Header — internal set id, title and recommended builders sit above
   the artwork, so the number a customer quotes at the counter is the
   first thing on the card. */
.lego-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--lego-cream);
	border-bottom: 1px solid var(--lego-border);
}

.lego-card__set-id {
	flex: none;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lego-card__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.lego-card__builders {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
}

.lego-card__builders-icon {
	display: block;
}

/* Availability reads as a full-width band under the artwork, so it
   sits outside the padded body. */
.lego-card__status {
	display: block;
	padding: 6px 12px;
	background: var(--lego-orange);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

.lego-card__status[hidden] {
	display: none;
}

/*.lego-card.is-expanded .lego-card__status {
	background: rgba(255, 255, 255, 0.2);
}
*/
.lego-card__status--checked_out { background: var(--lego-cream); color: #000; }
.lego-card__status--reserved    { background: var(--lego-blue); color: #fff;}
.lego-card__status--missing,
.lego-card__status--broken      { background: #cc0000; color: #fff; }

/* Age / pieces / recommended booking period. */
.lego-card__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 10px;
	font-size: 13px;
	opacity: 0.85;
}

.lego-card__toggle {
	margin-top: auto;
	align-self: flex-start;
	background: none;
	border: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px 0 4px;
	color: inherit;
	display: flex;
	align-items: center;
	gap: 4px;
}

.lego-card__toggle-icon {
	display: inline-block;
	transition: transform 0.2s ease;
}

.lego-card__toggle[aria-expanded="true"] .lego-card__toggle-icon {
	transform: rotate(180deg);
}

.lego-card__details {
	font-size: 13px;
	line-height: 1.5;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 10px;
	margin-top: 4px;
}

.lego-card.is-expanded .lego-card__details {
	border-top-color: rgba(255, 255, 255, 0.3);
}

.lego-card__details p {
	margin: 0 0 8px;
}

/* The states are listed so this outranks the link-underline reset in the
   bricks stylesheet, which reaches (0,2,1) via `a:visited:hover`. Without
   them a set whose instructions had been opened would lose its underline
   on hover. See bricks/scss/partials/_base.scss. */
.lego-card__instructions,
.lego-card__instructions:hover,
.lego-card__instructions:focus,
.lego-card__instructions:visited,
.lego-card__instructions:visited:hover,
.lego-card__instructions:visited:focus {
	color: inherit;
	text-decoration: underline;
}

.lego-card__instructions--unavailable {
	opacity: 0.6;
	text-decoration: line-through;
}

.lego-card__paper {
	font-weight: 600;
}

/* Staff-only operational detail inside the Details panel. Same dashed
   treatment as the quick-edit block below, so both read as "staff tool
   bolted onto the public card" rather than part of the public design. */
.lego-card__staff-details {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed rgba(0, 0, 0, 0.25);
}

.lego-card.is-expanded .lego-card__staff-details {
	border-top-color: rgba(255, 255, 255, 0.4);
}

.lego-card__staff-heading {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Staff quick-edit (status/location/notes) — Staff role and above.
   Deliberately visually distinct (dashed divider, muted background) so
   it reads as "admin tool bolted onto the public card", not part of
   the public design. */

.lego-card__admin {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed rgba(0, 0, 0, 0.25);
}

.lego-card.is-expanded .lego-card__admin {
	border-top-color: rgba(255, 255, 255, 0.4);
}

.lego-card__admin-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	flex: 1 1 auto;
	min-width: 110px;
}

.lego-card__admin-field select,
.lego-card__admin-field textarea {
	padding: 6px 8px;
	border-radius: 6px;
	border: 1px solid var(--lego-border);
	font-family: inherit;
	font-size: 13px;
	background: #fff;
	color: var(--lego-ink);
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.lego-card__admin-field textarea {
	resize: vertical;
}

.lego-card__admin-field--full {
	flex-basis: 100%;
}

.lego-card__save-state {
	font-size: 11px;
	opacity: 0.7;
	flex-basis: 100%;
}

.lego-card__save-state.is-error {
	color: #C0392B;
	opacity: 1;
	font-weight: 600;
}

.lego-card.is-expanded .lego-card__save-state.is-error {
	color: #FFD6D6;
}

/* Single set page */

.lego-single .lego-grid {
	grid-template-columns: minmax(0, 420px);
	justify-content: center;
}

.lego-single .lego-back-link {
	display: inline-block;
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lego-ink);
}

@media (max-width: 600px) {
	.lego-page {
		padding: 140px 16px 64px;
	}

	.lego-page__title {
		font-size: 28px;
	}

	/* Stacked, the controls would otherwise each size to their own
	   longest option and read as a ragged column. */
	.lego-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.lego-filters__field select,
	.lego-filters__check {
		width: 100%;
		min-width: 0;
	}
}