/**
 * JSYK Astra – Layout Primitives
 *
 * Structural layout classes: containers, stacks, clusters,
 * grids, splits, article layout, and main/section wrappers.
 *
 * Uses modern CSS (grid, flexbox, clamp, logical properties).
 * Prevents horizontal overflow at every level.
 *
 * @since 0.2.0
 */

/* ==========================================================================
   1. MAIN & SECTION
   ========================================================================== */

.jsyk-main {
	min-height: 50vh;
	padding-block: var(--jsyk-space-8);
}

.jsyk-section {
	padding-block: var(--jsyk-space-10);
}

/* ==========================================================================
   2. CONTAINERS
   ========================================================================== */

.jsyk-container {
	width: 100%;
	max-width: var(--jsyk-width-default);
	margin-inline: auto;
	padding-inline: var(--jsyk-gutter);
}

.jsyk-container--narrow {
	max-width: var(--jsyk-width-narrow);
}

.jsyk-container--wide {
	max-width: var(--jsyk-width-wide);
}

/* ==========================================================================
   3. STACK (Vertical spacing)
   ========================================================================== */

.jsyk-stack {
	display: flex;
	flex-direction: column;
	gap: var(--jsyk-space-4);
}

.jsyk-stack > * {
	margin-block: 0;
}

/* ==========================================================================
   4. CLUSTER (Horizontal wrapping group)
   ========================================================================== */

.jsyk-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jsyk-space-3);
	align-items: center;
}

/* ==========================================================================
   5. GRID
   ========================================================================== */

.jsyk-grid {
	display: grid;
	gap: var(--jsyk-gutter);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.jsyk-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.jsyk-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* ==========================================================================
   6. SPLIT (Two-panel side-by-side)
   ========================================================================== */

.jsyk-split {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jsyk-gutter);
}

.jsyk-split > * {
	flex: 1 1 20rem;
}

/* ==========================================================================
   7. ARTICLE LAYOUT (Content + Sidebar)
   ========================================================================== */

.jsyk-article-layout {
	display: grid;
	gap: var(--jsyk-gutter);
	grid-template-columns: 1fr;
	max-width: var(--jsyk-width-wide);
	margin-inline: auto;
	padding-inline: var(--jsyk-gutter);
}

.jsyk-content {
	min-width: 0; /* Prevent content from overflowing grid */
}

.jsyk-sidebar {
	min-width: 0;
}

/* Desktop: content + sidebar */
@media (min-width: 56rem) {
	.jsyk-article-layout {
		grid-template-columns: 1fr var(--jsyk-sidebar-width);
	}
}

/* ==========================================================================
   8. OVERFLOW PREVENTION
   ========================================================================== */

body {
	overflow-x: hidden;
}

.jsyk-main,
.jsyk-section,
.jsyk-container,
.jsyk-content {
	overflow-wrap: break-word;
	word-break: break-word;
}