/**
 * Booknetic for Theme V4 — Design System layout primitives.
 *
 * Composable building blocks (Every Layout pattern, modernized):
 *   .ds-container      — responsive content cradle with gutter
 *   .ds-section        — vertical rhythm spacing
 *   .ds-stack          — vertical flow with consistent gap
 *   .ds-cluster        — wrap-friendly horizontal group
 *   .ds-row            — single-line horizontal with gap
 *   .ds-split          — first/last anchored, middle grows
 *   .ds-grid           — responsive grid with min/max sizing
 *   .ds-grid--{2,3,4}  — fixed column counts
 *   .ds-sidebar-layout — sidebar that flips to single column under bp
 *   .ds-center         — center content with max width
 *   .ds-spacer         — generic vertical gap
 *
 * Modifiers:
 *   .ds-gap-{1..16}    — utility gap overrides
 *   .ds-pad-{1..12}    — utility padding overrides
 *   .ds-mt-{1..12}     — utility margin-top
 *   .ds-mb-{1..12}     — utility margin-bottom
 *
 * Breakpoints used (CSS-only — no JS):
 *   sm: 480 / md: 768 / lg: 1024 / xl: 1280 / 2xl: 1536
 */

/* ============================================================ */
/* CONTAINER                                                     */
/* ============================================================ */

.ds-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ds-gutter);
	padding-right: var(--ds-gutter);
	max-width: var(--ds-container-xl);
}
.ds-container--xs    { max-width: var(--ds-container-xs); }
.ds-container--sm    { max-width: var(--ds-container-sm); }
.ds-container--md    { max-width: var(--ds-container-md); }
.ds-container--lg    { max-width: var(--ds-container-lg); }
.ds-container--xl    { max-width: var(--ds-container-xl); }
.ds-container--2xl   { max-width: var(--ds-container-2xl); }
.ds-container--prose { max-width: var(--ds-container-prose); }
.ds-container--fluid { max-width: none; }

@media (min-width: 768px) {
	.ds-container {
		padding-left: var(--ds-gutter-md);
		padding-right: var(--ds-gutter-md);
	}
}
@media (min-width: 1280px) {
	.ds-container {
		padding-left: var(--ds-gutter-lg);
		padding-right: var(--ds-gutter-lg);
	}
}

/* ============================================================ */
/* SECTION                                                       */
/* ============================================================ */

.ds-section {
	padding-top: var(--ds-section-y);
	padding-bottom: var(--ds-section-y);
}
.ds-section--sm { padding-top: var(--ds-section-y-sm); padding-bottom: var(--ds-section-y-sm); }
.ds-section--lg { padding-top: var(--ds-section-y-lg); padding-bottom: var(--ds-section-y-lg); }
.ds-section--flush { padding-top: 0; padding-bottom: 0; }

/* ============================================================ */
/* STACK — vertical flow                                         */
/* ============================================================ */

.ds-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ds-stack-gap, var(--ds-space-4));
}
.ds-stack--xs   { --ds-stack-gap: var(--ds-space-2); }
.ds-stack--sm   { --ds-stack-gap: var(--ds-space-3); }
.ds-stack--md   { --ds-stack-gap: var(--ds-space-4); }
.ds-stack--lg   { --ds-stack-gap: var(--ds-space-6); }
.ds-stack--xl   { --ds-stack-gap: var(--ds-space-8); }
.ds-stack--2xl  { --ds-stack-gap: var(--ds-space-12); }

.ds-stack--center { align-items: center; text-align: center; }
.ds-stack--end    { align-items: flex-end; }

/* ============================================================ */
/* CLUSTER — wrap-friendly horizontal                            */
/* ============================================================ */

.ds-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-cluster-gap, var(--ds-space-3));
}
.ds-cluster--xs { --ds-cluster-gap: var(--ds-space-1_5); }
.ds-cluster--sm { --ds-cluster-gap: var(--ds-space-2); }
.ds-cluster--lg { --ds-cluster-gap: var(--ds-space-4); }
.ds-cluster--xl { --ds-cluster-gap: var(--ds-space-6); }

.ds-cluster--between { justify-content: space-between; }
.ds-cluster--around  { justify-content: space-around; }
.ds-cluster--end     { justify-content: flex-end; }
.ds-cluster--center  { justify-content: center; }

/* ============================================================ */
/* ROW — single line horizontal (overflow: hidden friendly)      */
/* ============================================================ */

.ds-row {
	display: flex;
	align-items: center;
	gap: var(--ds-row-gap, var(--ds-space-3));
	min-width: 0;
}
.ds-row > * { min-width: 0; }
.ds-row--between { justify-content: space-between; }
.ds-row--end     { justify-content: flex-end; }
.ds-row--center  { justify-content: center; }
.ds-row--start   { justify-content: flex-start; }

/* ============================================================ */
/* SPLIT — first/last anchored, middle grows (perfect for nav)   */
/* ============================================================ */

.ds-split {
	display: flex;
	align-items: center;
	gap: var(--ds-space-4);
}
.ds-split > :nth-child(2) { flex: 1; min-width: 0; }

/* ============================================================ */
/* GRID                                                           */
/* ============================================================ */

.ds-grid {
	display: grid;
	gap: var(--ds-grid-gap, var(--ds-space-4));
}

/* Auto-fill grid with a min column width  */
.ds-grid--auto    { grid-template-columns: repeat(auto-fill, minmax(var(--ds-grid-min, 240px), 1fr)); }
.ds-grid--auto-sm { --ds-grid-min: 180px; }
.ds-grid--auto-md { --ds-grid-min: 240px; }
.ds-grid--auto-lg { --ds-grid-min: 320px; }

/* Fixed column counts (mobile-first: collapse on narrow widths) */
.ds-grid--1 { grid-template-columns: 1fr; }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ds-grid--12{ grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (max-width: 1023px) {
	.ds-grid--3,
	.ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ds-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.ds-grid--2,
	.ds-grid--3,
	.ds-grid--4 { grid-template-columns: 1fr; }
	.ds-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Gap modifiers */
.ds-grid--gap-xs { --ds-grid-gap: var(--ds-space-2); }
.ds-grid--gap-sm { --ds-grid-gap: var(--ds-space-3); }
.ds-grid--gap-md { --ds-grid-gap: var(--ds-space-4); }
.ds-grid--gap-lg { --ds-grid-gap: var(--ds-space-6); }
.ds-grid--gap-xl { --ds-grid-gap: var(--ds-space-8); }

/* ============================================================ */
/* SIDEBAR LAYOUT (sidebar + main)                                */
/* ============================================================ */

.ds-sidebar-layout {
	display: grid;
	gap: var(--ds-space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.ds-sidebar-layout {
		grid-template-columns: 280px minmax(0, 1fr);
	}
	.ds-sidebar-layout--right {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
	.ds-sidebar-layout--wide {
		grid-template-columns: 320px minmax(0, 1fr);
	}
}

/* ============================================================ */
/* CENTER                                                         */
/* ============================================================ */

.ds-center {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--ds-center-max, 60ch);
	text-align: center;
}
.ds-center--narrow { --ds-center-max: 42ch; }
.ds-center--wide   { --ds-center-max: 80ch; }
.ds-center--prose  { --ds-center-max: var(--ds-container-prose); }

/* ============================================================ */
/* SPACER                                                         */
/* ============================================================ */

.ds-spacer        { display: block; height: var(--ds-space-6); }
.ds-spacer--xs    { height: var(--ds-space-2); }
.ds-spacer--sm    { height: var(--ds-space-4); }
.ds-spacer--md    { height: var(--ds-space-6); }
.ds-spacer--lg    { height: var(--ds-space-8); }
.ds-spacer--xl    { height: var(--ds-space-12); }
.ds-spacer--2xl   { height: var(--ds-space-16); }

/* ============================================================ */
/* DIVIDER                                                        */
/* ============================================================ */

.ds-divider {
	border: 0;
	border-top: 1px solid var(--ds-color-border-subtle);
	margin: var(--ds-space-6) 0;
}
.ds-divider--strong { border-top-color: var(--ds-color-border); }
.ds-divider--vertical {
	width: 1px;
	height: 1em;
	background: var(--ds-color-border-subtle);
	border: 0;
	margin: 0 var(--ds-space-3);
	display: inline-block;
}

/* ============================================================ */
/* UTILITY OVERRIDES (gap / padding / margin)                     */
/* ============================================================ */

.ds-gap-0  { gap: 0; }
.ds-gap-1  { gap: var(--ds-space-1); }
.ds-gap-2  { gap: var(--ds-space-2); }
.ds-gap-3  { gap: var(--ds-space-3); }
.ds-gap-4  { gap: var(--ds-space-4); }
.ds-gap-5  { gap: var(--ds-space-5); }
.ds-gap-6  { gap: var(--ds-space-6); }
.ds-gap-8  { gap: var(--ds-space-8); }
.ds-gap-10 { gap: var(--ds-space-10); }
.ds-gap-12 { gap: var(--ds-space-12); }
.ds-gap-16 { gap: var(--ds-space-16); }

.ds-pad-0  { padding: 0; }
.ds-pad-1  { padding: var(--ds-space-1); }
.ds-pad-2  { padding: var(--ds-space-2); }
.ds-pad-3  { padding: var(--ds-space-3); }
.ds-pad-4  { padding: var(--ds-space-4); }
.ds-pad-5  { padding: var(--ds-space-5); }
.ds-pad-6  { padding: var(--ds-space-6); }
.ds-pad-8  { padding: var(--ds-space-8); }
.ds-pad-12 { padding: var(--ds-space-12); }

.ds-mt-0  { margin-top: 0; }
.ds-mt-1  { margin-top: var(--ds-space-1); }
.ds-mt-2  { margin-top: var(--ds-space-2); }
.ds-mt-3  { margin-top: var(--ds-space-3); }
.ds-mt-4  { margin-top: var(--ds-space-4); }
.ds-mt-6  { margin-top: var(--ds-space-6); }
.ds-mt-8  { margin-top: var(--ds-space-8); }
.ds-mt-12 { margin-top: var(--ds-space-12); }

.ds-mb-0  { margin-bottom: 0; }
.ds-mb-1  { margin-bottom: var(--ds-space-1); }
.ds-mb-2  { margin-bottom: var(--ds-space-2); }
.ds-mb-3  { margin-bottom: var(--ds-space-3); }
.ds-mb-4  { margin-bottom: var(--ds-space-4); }
.ds-mb-6  { margin-bottom: var(--ds-space-6); }
.ds-mb-8  { margin-bottom: var(--ds-space-8); }
.ds-mb-12 { margin-bottom: var(--ds-space-12); }

/* Safe-area padding (mobile notch) */
.ds-pad-safe-bottom { padding-bottom: max(var(--ds-space-4), env(safe-area-inset-bottom)); }
.ds-pad-safe-top    { padding-top:    max(var(--ds-space-4), env(safe-area-inset-top)); }

/* ============================================================ */
/* RESPONSIVE VISIBILITY                                          */
/* ============================================================ */

.ds-hide          { display: none !important; }
.ds-block         { display: block !important; }
.ds-inline        { display: inline !important; }
.ds-inline-block  { display: inline-block !important; }
.ds-inline-flex   { display: inline-flex !important; }
.ds-flex          { display: flex !important; }

@media (max-width: 767px)   { .ds-hide-mobile  { display: none !important; } }
@media (min-width: 768px)   { .ds-show-mobile  { display: none !important; } }
@media (max-width: 1023px)  { .ds-hide-tablet  { display: none !important; } }
@media (min-width: 1024px)  { .ds-show-tablet  { display: none !important; } }
@media (max-width: 1279px)  { .ds-hide-desktop { display: none !important; } }
@media (min-width: 1280px)  { .ds-show-desktop { display: none !important; } }