/* Insights list cards and post content. Page chrome is the shared layout. */

.text-orka-secondary { color: var(--orka-secondary); }

.insights-index .insights-intro { margin: 1rem auto 0; color: var(--orka-text-muted); }
.insights-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}
.insights-card { flex: 1 1 100%; max-width: 100%; }
@media (min-width: 768px) {
	.insights-card { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (min-width: 1024px) {
	.insights-card { flex-basis: calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); }
}

/* Same panel as the Creators "The plug" card. */
.insights-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--orka-card);
	border: 1px solid var(--orka-line);
	border-radius: 16px;
	overflow: hidden;
	color: var(--orka-ink);
}
.insights-card figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--orka-navy); }
.insights-card figure a { display: block; height: 100%; }
.insights-card figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insights-panel__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 28px 28px 30px;
}
.insights-title { margin: 0 0 16px; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.insights-panel .insights-title a { color: var(--orka-white); text-decoration: none; }
.insights-panel .insights-title a:hover { color: var(--orka-cyan); }
.insights-excerpt {
	margin: 0;
	color: var(--orka-ink);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.insights-meta { margin: 16px 0 0; color: var(--orka-muted); font-size: .8125rem; line-height: 1.4; }
.insights-sep { margin: 0 .35rem; }
.insights-panel .insights-more {
	margin-top: 20px;
	color: var(--orka-muted);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}
.insights-panel .insights-more:hover { color: var(--orka-cyan); }
@media (max-width: 767px) {
	.insights-panel__body { padding: 22px 20px 24px; }
}

.insights-post { margin: 0 auto; }
.insights-byline { margin: 0 0 1.5rem; color: var(--orka-text-muted); font-size: 0.85rem; }
.insights-byline a { color: var(--orka-link); }
.insights-dot { margin: 0 0.35rem; color: var(--orka-text-faint); }
.insights-cover { margin: 0 0 1.75rem; }
.insights-cover img { display: block; width: 100%; height: auto; border-radius: 0.75rem; }

.insights-body { font-size: 1.0625rem; line-height: 1.7; color: var(--orka-text-soft); }
.insights-body p,
.insights-body ul,
.insights-body ol,
.insights-body blockquote,
.insights-body figure,
.insights-body pre { margin: 0 0 1rem; }
.insights-body h2,
.insights-body h3,
.insights-body h4 { color: var(--orka-white); font-weight: 700; line-height: 1.25; }
.insights-body h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; }
.insights-body h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.insights-body h4 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.insights-body a { color: var(--orka-link); }
.insights-body a:hover { color: var(--orka-link-hover); }
.insights-body ul,
.insights-body ol { padding-left: 1.25rem; }
.insights-body li { margin: 0.35rem 0; }
.insights-body blockquote { border-left: 3px solid var(--orka-link); padding-left: 1rem; color: var(--orka-text-soft); }
.insights-body img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.insights-body hr { border: 0; border-top: 1px solid var(--orka-rule); margin: 2rem 0; }
.insights-body pre,
.insights-body pre { overflow: auto; padding: 1rem; background: var(--orka-code); border: 1px solid var(--orka-line-strong); border-radius: 0.5rem; font-size: 0.85rem; }
.insights-body table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.insights-body th,
.insights-body td { border-bottom: 1px solid var(--orka-line-strong); padding: 0.5rem 0.75rem; text-align: left; }
.insights-video,
.insights-embed { position: relative; margin: 0 0 1rem; }
.insights-video { aspect-ratio: 16 / 9; }
.insights-video iframe,
.insights-embed iframe { width: 100%; border: 0; border-radius: 0.75rem; }
.insights-video iframe { height: 100%; }