/* ============================================================
   Joybunch — Layout utilities (container, grid, sections, stack)
   v0.0.2 — element 4
   References tokens from tokens.css. No component styles.
   ============================================================ */

/* ---------- Container ---------- */
.joy-container {
	width: 100%;
	max-width: var(--joy-container-lg);
	margin-inline: auto;
	padding-inline: var(--joy-space-md);
}
@media (min-width: 641px) { .joy-container { padding-inline: var(--joy-space-lg); } }
@media (min-width: 768px) { .joy-container { padding-inline: var(--joy-space-xl); } }

.joy-container--narrow { max-width: var(--joy-container-narrow); }
.joy-container--sm     { max-width: var(--joy-container-sm); }
.joy-container--md     { max-width: var(--joy-container-md); }
.joy-container--xl     { max-width: var(--joy-container-xl); }
.joy-container--fluid  { max-width: 100%; padding-inline: 0; }

/* ---------- Section vertical padding ---------- */
.joy-section { padding-block: var(--joy-space-2xl); }
@media (max-width: 767px) { .joy-section { padding-block: var(--joy-space-xl); } }

.joy-section--tight { padding-block: var(--joy-space-xl); }
@media (max-width: 767px) { .joy-section--tight { padding-block: var(--joy-space-lg); } }

.joy-section--loose { padding-block: var(--joy-space-3xl); }
@media (max-width: 767px) { .joy-section--loose { padding-block: var(--joy-space-2xl); } }

.joy-section--hero  { padding-block: var(--joy-space-4xl); }
@media (max-width: 767px) { .joy-section--hero  { padding-block: var(--joy-space-2xl); } }

/* ---------- 12-col grid (scales 4 -> 8 -> 12 by breakpoint) ---------- */
.joy-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--joy-space-md);
}
@media (min-width: 641px) {
	.joy-grid { grid-template-columns: repeat(8, 1fr); gap: var(--joy-space-md); }
}
@media (min-width: 768px) {
	.joy-grid { grid-template-columns: repeat(12, 1fr); gap: var(--joy-space-lg); }
}

/* Span utilities — mobile first */
.col-1     { grid-column: span 1; }
.col-2     { grid-column: span 2; }
.col-3     { grid-column: span 3; }
.col-4     { grid-column: span 4; }
.col-full  { grid-column: 1 / -1; }

/* Tablet breakpoint overrides */
@media (min-width: 641px) {
	.col-md-2    { grid-column: span 2; }
	.col-md-3    { grid-column: span 3; }
	.col-md-4    { grid-column: span 4; }
	.col-md-6    { grid-column: span 6; }
	.col-md-8    { grid-column: span 8; }
	.col-md-full { grid-column: 1 / -1; }
}

/* Desktop breakpoint overrides */
@media (min-width: 768px) {
	.col-lg-3   { grid-column: span 3; }
	.col-lg-4   { grid-column: span 4; }
	.col-lg-5   { grid-column: span 5; }
	.col-lg-6   { grid-column: span 6; }
	.col-lg-7   { grid-column: span 7; }
	.col-lg-8   { grid-column: span 8; }
	.col-lg-9   { grid-column: span 9; }
	.col-lg-12  { grid-column: span 12; }
}

/* ---------- Stack (vertical flow with consistent gap) ---------- */
.joy-stack       { display: flex; flex-direction: column; gap: var(--joy-space-md); }
.joy-stack--sm   { gap: var(--joy-space-sm); }
.joy-stack--lg   { gap: var(--joy-space-lg); }
.joy-stack--xl   { gap: var(--joy-space-xl); }

/* ---------- Cluster (horizontal wrapping flex) ---------- */
.joy-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--joy-space-sm);
	align-items: center;
}
.joy-cluster--md      { gap: var(--joy-space-md); }
.joy-cluster--between { justify-content: space-between; }
.joy-cluster--end     { justify-content: flex-end; }

/* ---------- Reading width cap (paragraphs, articles) ---------- */
.prose-readable { max-width: 65ch; }