/**
 * GDC Spacing & Layout System
 *
 * Responsive grid, container widths, touch targets, utility classes,
 * and zone spacing. Built on the 8px spacing scale from tokens.css.
 *
 * Mobile-first approach: base styles = mobile, enhanced via min-width.
 * RTL support via CSS logical properties throughout.
 *
 * Breakpoints:
 *   Mobile:  < 768px  (base)
 *   Tablet:  >= 768px
 *   Desktop: >= 1200px
 *
 * @package GDC
 * @since   1.0.0
 */

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

.gdc-container {
	width: 100%;
	max-inline-size: 100%;
	padding-inline: var(--gdc-space-2);  /* 16px */
	margin-inline: auto;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.gdc-container {
		width: 90%;
		padding-inline: var(--gdc-space-6);  /* 48px */
	}
}

@media (min-width: 1200px) {
	.gdc-container {
		width: 100%;
		max-inline-size: var(--gdc-max-content);  /* 1200px */
		padding-inline: 0;
	}
}

/* ==========================================================
   GRID SYSTEM — CSS Grid, responsive 1→2→3 columns
   ========================================================== */

.gdc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gdc-space-3);  /* 24px */
}

@media (min-width: 768px) {
	.gdc-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--gdc-space-3);  /* 24px */
	}
}

@media (min-width: 1200px) {
	.gdc-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--gdc-space-4);  /* 32px */
	}
}

/* Auto-fit variant for responsive card layouts */
.gdc-grid--auto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--gdc-space-3);  /* 24px */
}

@media (min-width: 1200px) {
	.gdc-grid--auto {
		gap: var(--gdc-space-4);  /* 32px */
	}
}

/* Explicit column variants */
.gdc-grid--2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gdc-space-3);
}

@media (min-width: 768px) {
	.gdc-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.gdc-grid--4 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gdc-space-3);
}

@media (min-width: 768px) {
	.gdc-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.gdc-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================
   TOUCH TARGET SIZES — WCAG AA compliant
   ========================================================== */

.gdc-touch-primary {
	min-block-size: var(--gdc-tap-target-primary);    /* 56px */
	min-inline-size: var(--gdc-tap-target-primary);
}

.gdc-touch-secondary {
	min-block-size: var(--gdc-tap-target-secondary);  /* 44px */
	min-inline-size: var(--gdc-tap-target-secondary);
}

.gdc-touch-inline {
	min-block-size: var(--gdc-tap-target-inline);     /* 24px */
	min-inline-size: var(--gdc-tap-target-inline);
}

/* Thumb zone — sticky bottom bar optimized for one-hand reach */
.gdc-thumb-zone {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--gdc-space-12);  /* 96px */
	z-index: 100;
}

/* ==========================================================
   ZONE SPACING — content margins within containers
   ========================================================== */

.gdc-zone {
	padding: var(--gdc-space-4);  /* 32px on mobile */
}

@media (min-width: 1200px) {
	.gdc-zone {
		padding: var(--gdc-space-6);  /* 48px on desktop */
	}
}

.gdc-zone + .gdc-zone {
	margin-block-start: var(--gdc-space-6);  /* 48px between zones */
}

/* Card internal padding */
.gdc-card-pad {
	padding: var(--gdc-space-4);  /* 32px */
}

/* ==========================================================
   UTILITY CLASSES — spacing helpers
   ========================================================== */

/* Stack (margin-block-end) */
.u-space-stack-1  { margin-block-end: var(--gdc-space-1); }
.u-space-stack-2  { margin-block-end: var(--gdc-space-2); }
.u-space-stack-3  { margin-block-end: var(--gdc-space-3); }
.u-space-stack-4  { margin-block-end: var(--gdc-space-4); }
.u-space-stack-5  { margin-block-end: var(--gdc-space-5); }
.u-space-stack-6  { margin-block-end: var(--gdc-space-6); }
.u-space-stack-7  { margin-block-end: var(--gdc-space-7); }
.u-space-stack-8  { margin-block-end: var(--gdc-space-8); }
.u-space-stack-9  { margin-block-end: var(--gdc-space-9); }
.u-space-stack-10 { margin-block-end: var(--gdc-space-10); }
.u-space-stack-11 { margin-block-end: var(--gdc-space-11); }
.u-space-stack-12 { margin-block-end: var(--gdc-space-12); }

/* Inline (margin-inline) */
.u-space-inline-1  { margin-inline: var(--gdc-space-1); }
.u-space-inline-2  { margin-inline: var(--gdc-space-2); }
.u-space-inline-3  { margin-inline: var(--gdc-space-3); }
.u-space-inline-4  { margin-inline: var(--gdc-space-4); }
.u-space-inline-5  { margin-inline: var(--gdc-space-5); }
.u-space-inline-6  { margin-inline: var(--gdc-space-6); }
.u-space-inline-7  { margin-inline: var(--gdc-space-7); }
.u-space-inline-8  { margin-inline: var(--gdc-space-8); }
.u-space-inline-9  { margin-inline: var(--gdc-space-9); }
.u-space-inline-10 { margin-inline: var(--gdc-space-10); }
.u-space-inline-11 { margin-inline: var(--gdc-space-11); }
.u-space-inline-12 { margin-inline: var(--gdc-space-12); }

/* Padding (all sides) */
.u-pad-1  { padding: var(--gdc-space-1); }
.u-pad-2  { padding: var(--gdc-space-2); }
.u-pad-3  { padding: var(--gdc-space-3); }
.u-pad-4  { padding: var(--gdc-space-4); }
.u-pad-5  { padding: var(--gdc-space-5); }
.u-pad-6  { padding: var(--gdc-space-6); }
.u-pad-7  { padding: var(--gdc-space-7); }
.u-pad-8  { padding: var(--gdc-space-8); }
.u-pad-9  { padding: var(--gdc-space-9); }
.u-pad-10 { padding: var(--gdc-space-10); }
.u-pad-11 { padding: var(--gdc-space-11); }
.u-pad-12 { padding: var(--gdc-space-12); }