/*
 * Article layout hardening overrides.
 *
 * Keep this small and loaded after the SvelteKit CSS bundle. It fixes article
 * templates where decorative art columns can steal width from prose/code on
 * mid-sized screens, and protects narrow mobile webviews from horizontal overflow.
 */

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

.site-header,
.nav,
.home-hero,
.hero,
.layout,
.article-grid,
.article-index-shell,
.dev-log-featured,
.dev-log-feed,
.site-footer,
.article-footer,
.drafts-footer,
.drafts-error {
	max-width: 100%;
}

.nav,
.nav-cluster,
.nav-links,
.nav-actions,
.home-hero,
.home-hero-copy,
.home-hero-card,
.article-card,
.meta-grid,
.hero-meta,
.home-primary-actions,
.article-column,
.article-shell,
.article-inner,
.article-section,
.article-section-body,
.table-wrap,
.code-block,
.mermaid-diagram,
.article-figure {
	min-width: 0;
	max-width: 100%;
}

.article-inner p,
.article-inner ul,
.article-inner ol,
.article-inner blockquote,
.article-inner .callout,
.article-inner .table-wrap,
.article-inner .code-block,
.article-inner .mermaid-diagram,
.article-inner figure.article-figure {
	max-width: min(100%, 82ch);
}

.article-inner .article-section--lead p,
.article-inner .article-section--lead ul,
.article-inner .article-section--lead ol,
.article-inner .article-section--lead blockquote,
.article-inner .article-section--lead .callout,
.article-inner .article-section--lead .table-wrap,
.article-inner .article-section--lead .code-block {
	max-width: 100%;
}

.article-section--lead .article-lede {
	max-width: min(100%, 68ch);
}

.code-block,
.mermaid-diagram,
.table-wrap {
	width: 100%;
}

.code-block code {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: normal;
}

.article-inner pre,
.article-inner code {
	max-width: 100%;
}

@media (max-width: 1440px) {
	.article-section--lead {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.article-section--lead .article-section-art {
		display: none;
	}
}

@media (max-width: 1320px) {
	.hero {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	}

	.article-hero-visual {
		display: none;
	}
}

@media (max-width: 1050px) {
	.hero {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.article-hero-copy,
	.article-hero-side {
		grid-column: 1 / -1 !important;
		width: 100%;
	}
}

@media (max-width: 1150px) {
	.home-hero,
	.dev-log-featured-grid,
	.section-head-with-art {
		grid-template-columns: minmax(0, 1fr);
	}

	.section-head-art {
		justify-self: start;
		max-width: 180px;
	}
}

@media (max-width: 760px) {
	.nav,
	.home-hero,
	.hero,
	.layout,
	.article-grid,
	.article-index-shell,
	.dev-log-featured,
	.dev-log-feed,
	.site-footer,
	.article-footer,
	.drafts-footer,
	.drafts-error {
		width: calc(100vw - 32px) !important;
	}

	.nav {
		align-items: flex-start;
	}

	.nav-branding,
	.nav-cluster,
	.nav-links,
	.nav-actions {
		width: 100%;
		justify-content: flex-start;
	}

	.nav-links {
		gap: 10px;
		overflow-x: auto;
		padding-bottom: 6px;
	}

	.home-hero h1,
	.compact-section-head h1 {
		max-width: 100%;
		font-size: clamp(32px, 10vw, 44px);
		line-height: 1.04;
	}

	.home-primary-actions {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
	}

	.home-primary-actions a,
	.home-hero-links a,
	.site-footer-links a,
	.article-footer-links a {
		width: 100%;
		max-width: 100%;
	}

	.home-meta,
	.article-meta,
	.home-hero-card .hero-meta {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.home-hero-card,
	.article-card,
	.related-article-card,
	.article-empty,
	.hero-card,
	.rail-card {
		width: 100%;
		max-width: 100%;
	}

	#articles.article-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}
/* Article layout overlap guards:
   keep right-column content from visually overlaying article content
   when long tokens or sticky columns are present. */
.article-page .article-hero-side,
.article-page .toc,
.article-page .toc-accordion-panel,
.article-page .rail-card {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.article-page .layout {
	position: relative;
	isolation: isolate;
}

.article-page .article-column {
	position: relative;
	z-index: 3;
}

.article-page .toc,
.article-page .article-hero-side,
.article-page .rail-card {
	z-index: 2;
}