/* ZYNGLE — case study single and archive. */

.zg-cs-hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--zg-12); }
.zg-cs-hero__meta { display: flex; flex-wrap: wrap; gap: var(--zg-6); margin-top: var(--zg-8); padding-top: var(--zg-6); border-top: 1px solid var(--zg-border); }
.zg-cs-hero__meta div { display: grid; gap: var(--zg-1); }
.zg-cs-hero__meta dt { font-family: var(--zg-font-mono); font-size: var(--zg-text-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--zg-text-muted); }
.zg-cs-hero__meta dd { margin: 0; font-size: var(--zg-text-sm); }

.zg-cs-media { border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm); overflow: hidden; }
.zg-cs-media img { width: 100%; object-fit: cover; }

.zg-cs-narrative { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: var(--zg-8); padding-block: var(--zg-12); border-bottom: 1px solid var(--zg-border); }
.zg-cs-narrative:last-of-type { border-bottom: 0; }
.zg-cs-narrative__label { font-family: var(--zg-font-mono); font-size: var(--zg-text-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--zg-text-muted); }
.zg-cs-narrative__body { max-width: 68ch; color: var(--zg-text-secondary); }
.zg-cs-narrative__body p + p { margin-top: var(--zg-4); }
@media (max-width: 780px) { .zg-cs-narrative { grid-template-columns: 1fr; gap: var(--zg-3); } }

.zg-quote { display: grid; gap: var(--zg-6); max-width: 60ch; }
.zg-quote__text { font-family: var(--zg-font-display); font-size: var(--zg-text-h3); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; }
.zg-quote__cite { display: flex; align-items: center; gap: var(--zg-3); font-style: normal; font-size: var(--zg-text-sm); color: var(--zg-text-secondary); }
.zg-quote__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.zg-work-index { display: grid; gap: var(--zg-16); margin-top: var(--zg-12); }

.zg-empty {
	display: grid;
	gap: var(--zg-3);
	padding: var(--zg-16) var(--zg-8);
	border: 1px dashed var(--zg-border-strong);
	border-radius: var(--zg-radius-sm);
	text-align: center;
	color: var(--zg-text-secondary);
}