/* Showcase: Plate card, DeviceFrame, FilterBar and the card grid (COMPONENTS 11, 13, 17). */

.plate {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	isolation: isolate;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ink-700) 50%, transparent), color-mix(in srgb, var(--ink-950) 86%, transparent));
	border: var(--hairline) solid var(--ln-s);
	border-radius: var(--radius-plate);
	color: var(--white);
	transition: border-color var(--d-base) var(--ease);
}

.plate::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(420px circle at 50% 0%, color-mix(in srgb, var(--gold-300) 13%, transparent), transparent 60%);
	opacity: 0;
	transition: opacity var(--d-slow) var(--ease);
}

.plate:hover::before,
.plate:focus-within::before {
	opacity: 1;
}

.plate:hover,
.plate:focus-within {
	border-color: color-mix(in srgb, var(--gold-300) 60%, transparent);
}

.cm {
	position: absolute;
	width: 12px;
	height: 12px;
	border: 0 solid var(--gold-300);
	transition:
		width var(--d-slow) var(--ease),
		height var(--d-slow) var(--ease);
}

.cm.tl {
	inset-block-start: -5px;
	inset-inline-start: -5px;
	border-block-start-width: 2px;
	border-inline-start-width: 2px;
}

.cm.tr {
	inset-block-start: -5px;
	inset-inline-end: -5px;
	border-block-start-width: 2px;
	border-inline-end-width: 2px;
}

.cm.bl {
	inset-block-end: -5px;
	inset-inline-start: -5px;
	border-block-end-width: 2px;
	border-inline-start-width: 2px;
}

.cm.br {
	inset-block-end: -5px;
	inset-inline-end: -5px;
	border-block-end-width: 2px;
	border-inline-end-width: 2px;
}

.plate:hover .cm,
.plate:focus-within .cm {
	width: 34px;
	height: 34px;
}

.pbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-block-end: var(--hairline) solid var(--ln);
	color: var(--gray-300);
}

.pbar b {
	color: var(--gold-300);
	font-weight: 500;
	direction: ltr;
	unicode-bidi: isolate;
}

.part {
	position: relative;
	display: grid;
	padding: 18px 18px 0;
	overflow: hidden;
	background: radial-gradient(70% 80% at 50% 105%, color-mix(in srgb, var(--blue-500) 40%, transparent), transparent 72%);
}

.pfoot {
	display: grid;
	gap: 6px;
	padding: 18px 22px 20px;
	border-block-start: var(--hairline) solid var(--ln);
}

.pfoot h3 {
	font-size: var(--fs-h3);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.pfoot p {
	color: var(--gray-300);
}

/* the arrow link stretches over the whole card (its ::before covers the Plate): one link per card */
.go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-self: start;
	margin-block-start: var(--sp-8);
	font-weight: 700;
	font-size: 14px;
	color: var(--gold-300);
}

.go::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.go span {
	position: relative;
	padding-block: 6px;
}

.go span::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: var(--hairline);
	background: currentColor;
	transform-origin: left;
	transform: scaleX(0.28);
	transition: transform 0.6s var(--ease);
}

html[dir="rtl"] .go span::after {
	transform-origin: right;
}

.plate:hover .go span::after,
.plate:focus-within .go span::after {
	transform: scaleX(1);
}

.go .arr {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform var(--d-slow) var(--ease);
}

html[dir="rtl"] .go .arr {
	transform: scaleX(-1);
}

.plate:hover .go .arr {
	transform: translateX(calc(var(--dir) * 5px));
}

html[dir="rtl"] .plate:hover .go .arr {
	transform: scaleX(-1) translateX(calc(var(--dir) * -5px));
}

/* DeviceFrame */
.dvf {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--ink-900);
	border: var(--hairline) solid var(--ln-s);
	border-block-end: 0;
}

.dvf .wb {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding-inline: 12px;
	border-block-end: var(--hairline) solid var(--ln);
	background: var(--ink-800);
}

.dvf .wb i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: var(--hairline) solid var(--ln-s);
}

.dvf .wb span {
	margin-inline-start: 10px;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	color: var(--gray-300);
	direction: ltr;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dvv {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.dvv img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: transform 1.2s var(--ease);
}

.plate:hover .dvv img,
.plate:focus-within .dvv img {
	transform: scale(1.04);
}

.imgerr {
	display: none;
	position: absolute;
	inset: 30px 0 0;
	place-items: center;
	text-align: center;
	color: var(--gray-300);
	background: repeating-linear-gradient(135deg, var(--ink-900) 0 10px, var(--ink-800) 10px 20px);
}

.dvf.is-broken .imgerr {
	display: grid;
}

.dvf.is-broken img {
	visibility: hidden;
}

/* FilterBar */
.fbar {
	position: sticky;
	inset-block-start: var(--hdr-h);
	z-index: 20;
	padding-block: var(--sp-16);
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	border-block: var(--hairline) solid var(--ln);
	backdrop-filter: blur(10px);
}

.fbar form {
	display: grid;
	gap: var(--sp-12);
}

.fgrp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-8);
}

.fgrp > .mono {
	min-width: 84px;
	color: var(--fg2);
}

.frow {
	display: flex;
	justify-content: flex-end;
}

.rdout {
	color: var(--fg2);
}

.rdout b {
	color: var(--hi);
	font-weight: 500;
	direction: ltr;
	unicode-bidi: isolate;
}

/* card grid: 3 across, then 2, then 1 */
.tgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-32) var(--sp-24);
}

.list-s {
	padding-block: var(--sp-64) var(--sec);
}

@media (max-width: 1100px) {
	.tgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1000px) {
	.fbar {
		position: static;
	}
}

@media (max-width: 680px) {
	.tgrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.go:focus-visible {
	outline: none;
}

.go:focus-visible::before {
	outline: var(--focus-width) solid var(--focus);
	outline-offset: var(--focus-offset);
}