/**
 * Layout - Grid, containers, responsive utilities
 *
 * Elementor-parity: 1280px max-width, 64px desktop margins, 20px mobile margins
 */

/* Base reset and box model */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background-color: var(--color-background);
	color: var(--color-on-background);
	direction: rtl;
}

/* Container system */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--margin-desktop);
	padding-left: var(--margin-desktop);
}

/* Grid system - 12 columns */
.grid {
	display: grid;
	gap: var(--gutter);
}

.grid--12 {
	grid-template-columns: repeat(12, 1fr);
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

/* RTL-aware spacing */
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* RTL margin utilities - inverted for RTL */
.mr-auto { margin-right: auto; }
.ml-auto { margin-left: auto; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Stack utilities (vertical spacing) */
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-xl > * + * { margin-top: var(--space-xl); }

/* Blog / archive layout */
.site-main {
	padding: var(--space-2xl) 0;
}

.site-main .container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--margin-desktop);
}

/* Elementor pages: theme container must not clip full-width sections */
.site-main--elementor,
.elementor-page .site-main {
	padding: 0;
	max-width: none;
	width: 100%;
}

.site-main--elementor .entry-content,
.elementor-page .site-main .entry-content {
	max-width: none;
	padding: 0;
	margin: 0;
}

.site-main--elementor > article,
.elementor-page .site-main > article {
	margin: 0;
}

/* Tablet responsive */
@media (max-width: 1024px) {
	.container {
		padding-right: 40px;
		padding-left: 40px;
	}
}

/* Mobile responsive - 100% width with 15px side padding */
@media (max-width: 767px) {
	.container {
		max-width: 100%;
		padding-right: 15px;
		padding-left: 15px;
	}

	.grid--12,
	.grid--4,
	.grid--3 {
		grid-template-columns: 1fr;
	}

	.site-main .container {
		padding-inline: var(--margin-mobile);
	}
}