/* The hosted workstation's showcase (app/showcase/): the site's components (site.css) plus the
   filter chips and the cards, which tools/site/showcase.py writes. */

.showcase-hero { padding: 64px 0 28px; }
.showcase-hero h1 { font-size: clamp(34px, 3.2vw, 48px); line-height: 1.06; letter-spacing: -.012em; }
.showcase-hero .site-lede { max-width: 62ch; margin-top: 14px; color: var(--site-text-3); }

.showcase-list { padding-bottom: 72px; }
.showcase-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.showcase-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.showcase-filters[hidden] { display: none; }
.showcase-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--site-hair);
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	color: var(--site-text-2);
	font: 500 13.5px/1 var(--site-font-text);
	cursor: pointer;
	transition: background-color .12s var(--site-ease), border-color .12s var(--site-ease), color .12s var(--site-ease);
}
.showcase-chip:hover { border-color: rgba(255, 255, 255, .28); color: var(--site-text); }
.showcase-chip[aria-pressed="true"] {
	border-color: rgba(86, 211, 218, .42);
	background: linear-gradient(180deg, rgba(86, 211, 218, .20), rgba(86, 211, 218, .08));
	color: #c9f7f9;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(86, 211, 218, .75);
}
.showcase-chip-count { color: var(--site-text-4); font: 500 12px/1 var(--site-font-mono); }
.showcase-chip[aria-pressed="true"] .showcase-chip-count { color: #9fe6ea; }
.showcase-status { color: var(--site-text-3); font: 500 12.5px/1.3 var(--site-font-mono); }

.showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; }
.showcase-item { display: flex; min-width: 0; }
.showcase-item[hidden] { display: none; }
.showcase-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--site-hair);
	border-radius: var(--site-r-tile);
	background: linear-gradient(180deg, var(--site-glass-top), var(--site-glass-bottom));
	box-shadow: var(--site-shadow);
	color: inherit;
	text-decoration: none;
	transition: border-color .12s var(--site-ease);
}
.showcase-card:hover { border-color: rgba(255, 255, 255, .24); }
.showcase-card:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }
.showcase-media { aspect-ratio: 16 / 10; }
.showcase-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.showcase-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.showcase-tag { padding: 3px 7px; border: 1px solid var(--site-hair-soft); border-radius: 4px; background: rgba(255, 255, 255, .05); color: var(--site-text-2); font: 500 11.5px/1.3 var(--site-font-mono); }
.showcase-tag.is-kind { color: var(--site-text-4); }
.showcase-title { color: var(--site-text); font: 600 18px/1.25 var(--site-font-display); }
.showcase-line { color: var(--site-text-3); font-size: 14.5px; line-height: 1.45; }
.showcase-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--site-hair-soft); list-style: none; color: var(--site-text-3); font: 400 12px/1.4 var(--site-font-mono); }
.showcase-open { align-self: flex-start; margin-top: auto; }
.showcase-body .showcase-open { margin-top: 6px; }
.showcase-card:hover .showcase-open::before { background: var(--site-accent-hover); }

.showcase-footnote { max-width: 76ch; margin-bottom: 24px; color: var(--site-text-3); font-size: 14px; line-height: 1.55; }

@media (max-width: 1179px) {
	.showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Fifteen cards in two columns: the last one takes the whole row, picture beside its text. */
	.showcase-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.showcase-item:last-child:nth-child(odd) .showcase-card { flex-direction: row; }
	.showcase-item:last-child:nth-child(odd) .showcase-media { flex: 0 0 50%; aspect-ratio: auto; min-height: 240px; }
}
@media (max-width: 640px) {
	.showcase-hero { padding: 40px 0 20px; }
	.showcase-hero h1 { font-size: 32px; }
	.showcase-grid { grid-template-columns: 1fr; }
	.showcase-item:last-child:nth-child(odd) .showcase-card { flex-direction: column; }
	.showcase-item:last-child:nth-child(odd) .showcase-media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
	.showcase-facts { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
	.showcase-card, .showcase-chip { border: 1px solid CanvasText; }
	.showcase-chip[aria-pressed="true"] { border: 2px solid Highlight; background: Highlight; color: HighlightText; forced-color-adjust: none; }
}