/* ------------------------------------------------------------
   13. PROTOTYPE — restyled dynamic cards (scoped overrides)
   ------------------------------------------------------------ */
.ord-prototype-section {
	background: var(--mist);
	border-top: 2.5px solid var(--ink);
	border-bottom: 2.5px solid var(--ink);
}

.ord-page .prototype-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.ord-page .prototype-card {
	border: 2.5px solid var(--ink) !important;
	border-radius: var(--ord-radius) !important;
	box-shadow: 6px 6px 0 0 var(--ink) !important;
	background: var(--paper) !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.ord-page .prototype-card:hover {
	transform: translate(-4px, -4px) !important;
	box-shadow: 12px 12px 0 0 var(--ink) !important;
}

.ord-page .prototype-thumb {
	border-radius: 14px 14px 0 0 !important;
}

.ord-page .prototype-title {
	font-family: var(--ord-font-heading) !important;
	color: var(--ink) !important;
}

.ord-page .prototype-category {
	color: var(--mint-deep) !important;
	font-weight: 700 !important;
}

.ord-page .demo-cta-btn {
	border: 2px solid var(--ink) !important;
	border-radius: var(--ord-pill) !important;
	box-shadow: 3px 3px 0 0 var(--ink) !important;
	background: var(--paper) !important;
	color: var(--ink) !important;
	font-weight: 700 !important;
}

/* Homepage prototype cards — restore neat vertical rhythm.
   v4's `.ord-page * { padding:0; margin:0 }` reset + the renamed
   wrapper (.prototype-preview-section → .ord-prototype-section) broke
   the demo card spacing: CTA sat flush against the title, no gaps.
   These (0,3,0) scoped rules rebuild the tidy card layout. */
.ord-page .ord-prototype-section .prototype-card {
	display: flex;
	flex-direction: column;
}

.ord-page .ord-prototype-section .prototype-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 14px;
	padding: 1.25rem 1.4rem 1.4rem;
}

.ord-page .ord-prototype-section .prototype-category {
	margin-bottom: 0;
}

.ord-page .ord-prototype-section .prototype-title {
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ord-page .ord-prototype-section .demo-cta-btn {
	margin-top: auto;
}

@media (max-width: 480px) {
	.ord-page .ord-prototype-section .prototype-info {
		padding: 1rem 1.1rem 1.1rem;
	}
	.ord-page .ord-prototype-section .demo-cta-btn {
		padding: 10px 14px;
	}
	.ord-page .ord-prototype-section .prototype-play {
		width: 44px;
		height: 44px;
		font-size: 12px;
	}
	.ord-page .ord-prototype-section .prototype-category,
	.ord-page .ord-prototype-section .placeholder-label {
		font-size: 0.62rem;
		letter-spacing: 1px;
	}
	.ord-page .section-actions .btn.btn-outline {
		padding: 13px 26px;
		font-size: 0.9rem;
	}
}

.ord-page .ord-prototype-section .section-actions {
	margin-top: 42px;
}

.ord-page .section-actions .btn.btn-outline {
	/* `.ord-page * { padding: 0 }` in the scoped reset strips the theme's
	   .btn padding — restate it here or the CTA collapses to a 24px bar. */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 34px;
	border: 2.5px solid var(--ink) !important;
	border-radius: var(--ord-pill) !important;
	box-shadow: 5px 5px 0 0 var(--ink) !important;
	color: var(--ink) !important;
	background: var(--paper) !important;
	font-size: 0.95rem;
	font-weight: 700;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.ord-page .section-actions .btn.btn-outline:hover {
	transform: translate(-3px, -3px) !important;
	box-shadow: 9px 9px 0 0 var(--ink) !important;
	background: var(--mint) !important;
	color: var(--ink) !important;
}

.ord-page .prototype-all-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.ord-page .section-actions .btn.btn-outline:hover .prototype-all-arrow {
	transform: translateX(5px);
}

/* ---- Homepage preview cards: neo-brutalist thumbnail details ----
   These live here (not in demo.css) because every demo.css rule loses to
   `.ord-page *` at equal specificity — only a (0,3,0) selector can win. */
.ord-page .ord-prototype-section .prototype-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding-left: 3px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	font-size: 14px;
	line-height: 1;
	z-index: 3;
	pointer-events: none;
	box-shadow: 3px 3px 0 0 var(--ink);
	transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.ord-page .ord-prototype-section .prototype-card:hover .prototype-play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--demo-color, var(--violet));
	color: var(--paper);
	box-shadow: 4px 4px 0 0 var(--ink);
}

.ord-page .ord-prototype-section .placeholder-label {
	position: relative;
	display: inline-block;
	padding: 5px 14px;
	border: 2px solid var(--ink);
	border-radius: var(--ord-pill);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	z-index: 2;
}

.ord-page .ord-prototype-section .prototype-category {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 12px;
	border: 2px solid var(--ink);
	border-radius: var(--ord-pill);
	background: color-mix(in srgb, var(--demo-color, var(--mint)) 22%, #fff);
	color: var(--ink) !important;
	font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

.ord-page .ord-prototype-section .demo-cta-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 0 var(--ink) !important;
	background: color-mix(in srgb, var(--demo-color, var(--violet)) 22%, #fff) !important;
	filter: none;
}