/**
 * Blog single — responsive layout breakpoints.
 * Typography and spacing scale via clamp() in detail.css.
 * Breakpoints: 1200, 992, 768, 640, 480 (see ai summary/breakpoints.md).
 */

/* ─── 1200px — narrow desktop column tightening ─ */
@media (max-width: 1200px) {
	:root {
		--sp-blog-detail-sidebar-min: clamp(240px, calc(260 / var(--spaciefy-artboard) * 100vw), 280px);
		--sp-blog-detail-layout-gap: clamp(20px, calc(32 / var(--spaciefy-artboard) * 100vw), 32px);
	}
}

/* ─── 992px — tablet stack (theme-standard stack point) ─ */
@media (max-width: 992px) {
	:root {
		--sp-blog-detail-layout-container: 100%;
		--sp-blog-detail-content-pct: 100%;
		--sp-blog-detail-sidebar-pct: 100%;
		--sp-blog-detail-sidebar-min: 0;
	}

	.sp-blog-detail__container {
		padding-left: clamp(20px, 4vw, 40px);
		padding-right: clamp(20px, 4vw, 40px);
	}

	.sp-blog-detail__layout-container {
		margin-left: auto;
		margin-right: auto;
	}

	.sp-blog-detail__layout {
		flex-direction: column;
		gap: var(--sp-blog-detail-layout-gap);
	}

	.sp-blog-detail__main {
		flex: 1 1 auto;
		width: 100%;
	}

	/* Flatten article/aside so children can be reordered on mobile */
	.sp-blog-detail__main,
	.sp-blog-detail__sidebar {
		display: contents;
	}

	.sp-blog-detail__breadcrumb {
		order: 1;
	}

	.sp-blog-detail__header {
		order: 2;
	}

	.sp-blog-detail__toc {
		order: 3;
	}

	.sp-blog-detail__content {
		order: 4;
	}

	.sp-blog-detail__tags {
		order: 5;
		margin-bottom: 0;
	}

	.sp-blog-detail__sidebar {
		position: static;
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}
}

/* ─── 768px — mobile ─ */
@media (max-width: 768px) {
	.sp-blog-detail__meta {
		gap: 6px;
	}

	.sp-blog-detail__toc-item--level-3 .sp-blog-detail__toc-link {
		padding-left: 8px;
	}

	.sp-blog-detail__toc-item--level-4 .sp-blog-detail__toc-link {
		padding-left: 16px;
	}

	.sp-blog-detail__toc-item--level-5 .sp-blog-detail__toc-link,
	.sp-blog-detail__toc-item--level-6 .sp-blog-detail__toc-link {
		padding-left: 24px;
	}
}

/* ─── 640px — small polish ─ */
@media (max-width: 640px) {
	.sp-blog-detail__layout {
		gap: clamp(20px, calc(24 / var(--spaciefy-artboard) * 100vw), 24px);
	}
}

/* ─── 480px — small phone polish ─ */
@media (max-width: 480px) {
	.sp-blog-detail__container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.sp-blog-detail__breadcrumb-list {
		gap: 0 6px;
	}

	.sp-blog-detail__breadcrumb-item:not(:last-child)::after {
		margin-left: 6px;
	}
}