/**
 * LCLS Summer Reading Challenge — prizes grid + filter.
 * Theming: override the CSS custom properties below to match the site (Bricks).
 */

.lcls-prizes {
	/* Defaults piggyback on the site's Automatic.css tokens (lclsonline.org:
	   primary #124473, accent #BFD730, base #0a2434, --radius 5px) and fall
	   back to neutral values on installs without ACSS. */
	--lcls-cols: 3;
	--lcls-gap: var(--grid-gap, 1.5rem);
	--lcls-radius: var(--radius, 5px);
	--lcls-card-bg: var(--white, #fff);
	--lcls-card-border: var(--neutral-ultra-light, #e5e7eb);
	--lcls-shadow: var(--box-shadow-m, 0 1px 3px rgba(0, 0, 0, .08));
	--lcls-accent: var(--primary-hex, #124473);
	--lcls-badge-bg: var(--primary-ultra-light, #e7eef5);
	--lcls-badge-fg: var(--primary-dark, #0d3356);
	--lcls-text: var(--base-hex, #0a2434);
	--lcls-muted: var(--neutral-dark, #51606b);
	/* Default vertical breathing room around the whole block; override via the
	   margin="" shortcode attribute (e.g. margin="0"). */
	--lcls-margin-y: var(--section-space-m, 2.5rem);

	color: var(--lcls-text);
	margin-block: var(--lcls-margin-y);
}

/* ---- Filter bar ---------------------------------------------------------- */
.lcls-prizes__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.lcls-combobox {
	position: relative;
	min-width: 220px;
	flex: 1 1 220px;
}

.lcls-combobox__label {
	display: block;
	font-weight: 600;
	font-size: .85rem;
	margin-bottom: .35rem;
}

.lcls-combobox__control {
	display: flex;
	align-items: center;
	gap: .35rem;
	flex-wrap: wrap;
	min-height: 44px;
	padding: .25rem .5rem;
	border: 1px solid var(--lcls-card-border);
	border-radius: var(--lcls-radius);
	background: #fff;
	cursor: pointer;
}

.lcls-combobox__control:focus-within {
	border-color: var(--lcls-accent);
	box-shadow: 0 0 0 3px rgb(var(--primary-rgb, 18 68 115) / .15);
}

.lcls-combobox__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.lcls-chip {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .15rem .5rem;
	font-size: .8rem;
	background: var(--lcls-badge-bg);
	color: var(--lcls-badge-fg);
	border-radius: 999px;
}

.lcls-chip__remove {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	color: inherit;
	padding: 0;
}

.lcls-combobox__toggle {
	flex: 1;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	color: var(--lcls-muted);
	min-height: 32px;
}

.lcls-combobox__placeholder {
	pointer-events: none;
}

.lcls-combobox__list {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: .25rem 0 0;
	padding: .25rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--lcls-card-border);
	border-radius: var(--lcls-radius);
	box-shadow: var(--lcls-shadow);
	max-height: 260px;
	overflow-y: auto;
}

.lcls-combobox__option {
	padding: .5rem .6rem;
	border-radius: 6px;
	cursor: pointer;
}

.lcls-combobox__option:hover,
.lcls-combobox__option:focus {
	background: var(--lcls-badge-bg);
	outline: none;
}

.lcls-combobox__option[aria-selected="true"] {
	background: var(--lcls-accent);
	color: #fff;
}

.lcls-combobox__option[aria-selected="true"]::after {
	content: " ✓";
}

.lcls-prizes__clear {
	border: 1px solid var(--lcls-card-border);
	background: #fff;
	border-radius: var(--lcls-radius);
	padding: .6rem 1rem;
	cursor: pointer;
	align-self: flex-end;
}

.lcls-prizes__count {
	color: var(--lcls-muted);
	font-size: .9rem;
	margin: .25rem 0 1rem;
}

/* ---- Grid ---------------------------------------------------------------- */
.lcls-prizes__grid {
	display: grid;
	grid-template-columns: repeat(var(--lcls-cols), minmax(0, 1fr));
	gap: var(--lcls-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lcls-prize-card {
	display: flex;
	flex-direction: column;
	background: var(--lcls-card-bg);
	border: 1px solid var(--lcls-card-border);
	/* 8px to match the blog/news cards on production (ACSS --radius is 5px,
	   but the card pattern there uses 8px). */
	border-radius: var(--lcls-card-radius, 8px);
	box-shadow: var(--lcls-shadow);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.lcls-prize-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--box-shadow-l, 0 8px 24px rgba(0, 0, 0, .14));
}

.lcls-prize-card[hidden] {
	display: none;
}

.lcls-prize-card__media {
	/* Square matches both the 600×600 images editors upload (zero crop) and
	   the site's blog-card pattern. */
	aspect-ratio: var(--lcls-media-ratio, 1 / 1);
	overflow: hidden;
	background: #f3f4f6;
}

.lcls-prize-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.lcls-prize-card:hover .lcls-prize-card__img {
	transform: scale(1.04);
}

/* Generated banner shown when a prize has no featured image: a solid brand
   color with faint blurred color blobs and the prize's initial in a circle. */
.lcls-prize-card__media--placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--lcls-ph-bg, #05635b);
}

/* The blob layer lives on a pseudo-element so the whole wash can be
   transformed on hover without moving the initial. */
.lcls-prize-card__media--placeholder::before {
	content: "";
	position: absolute;
	inset: -20%;
	background-image:
		radial-gradient(45% 60% at 86% 12%, var(--lcls-ph-blob-a, rgb(255 255 255 / .14)) 0%, transparent 70%),
		radial-gradient(55% 70% at 8% 92%, var(--lcls-ph-blob-b, rgb(255 255 255 / .10)) 0%, transparent 70%),
		radial-gradient(35% 50% at 22% 18%, rgb(0 0 0 / .10) 0%, transparent 70%),
		radial-gradient(30% 45% at 70% 80%, rgb(255 255 255 / .07) 0%, transparent 70%);
	transition: transform .6s ease;
}

.lcls-prize-card:hover .lcls-prize-card__media--placeholder::before {
	transform: rotate(8deg) scale(1.12);
}

.lcls-placeholder__initial {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgb(255 255 255 / .18);
	color: #fff;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	user-select: none;
	transition: transform .3s ease, background-color .3s ease;
}

.lcls-prize-card:hover .lcls-placeholder__initial {
	transform: scale(1.08);
	background: rgb(255 255 255 / .26);
}

@media (prefers-reduced-motion: reduce) {
	.lcls-prize-card,
	.lcls-prize-card__img,
	.lcls-prize-card__media--placeholder::before,
	.lcls-placeholder__initial {
		transition: none;
	}

	.lcls-prize-card:hover {
		transform: none;
	}
}

/* Color variants, assigned deterministically from the post ID. Tinted blobs
   (not just white/black) give each banner a subtle two-tone wash. */
.lcls-prize-card__media--v0 { --lcls-ph-bg: #124473; --lcls-ph-blob-a: rgb(53 141 205 / .35); --lcls-ph-blob-b: rgb(191 215 48 / .14); }
.lcls-prize-card__media--v1 { --lcls-ph-bg: #05635b; --lcls-ph-blob-a: rgb(191 215 48 / .22); --lcls-ph-blob-b: rgb(213 238 252 / .16); }
.lcls-prize-card__media--v2 { --lcls-ph-bg: #2f855a; --lcls-ph-blob-a: rgb(236 234 105 / .22); --lcls-ph-blob-b: rgb(5 99 91 / .45); }
.lcls-prize-card__media--v3 { --lcls-ph-bg: #6b46c1; --lcls-ph-blob-a: rgb(213 238 252 / .18); --lcls-ph-blob-b: rgb(255 121 85 / .18); }
.lcls-prize-card__media--v4 { --lcls-ph-bg: #b9541e; --lcls-ph-blob-a: rgb(236 234 105 / .25); --lcls-ph-blob-b: rgb(18 68 115 / .30); }
.lcls-prize-card__media--v5 { --lcls-ph-bg: #358dcd; --lcls-ph-blob-a: rgb(18 68 115 / .40); --lcls-ph-blob-b: rgb(236 234 105 / .20); }

.lcls-prize-card__body {
	padding: 1rem 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.lcls-prize-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
}

.lcls-prize-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.lcls-badge {
	display: inline-block;
	padding: .15rem .55rem;
	font-size: .75rem;
	font-weight: 600;
	border-radius: 999px;
	background: var(--lcls-badge-bg);
	color: var(--lcls-badge-fg);
}

.lcls-prize-card__desc {
	color: var(--lcls-text);
	font-size: .95rem;
}

.lcls-prize-card__desc :last-child {
	margin-bottom: 0;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
	.lcls-prizes__grid { --lcls-cols: 2; }
}

@media (max-width: 600px) {
	.lcls-prizes__grid { --lcls-cols: 1; }
	.lcls-combobox { flex-basis: 100%; }
}