/**
 * DigitalHub — Custom Homepage Sections
 * ---------------------------------------------------------------
 * Styles for user-added custom sections (Appearance/Dashboard →
 * "أقسام الصفحة الرئيسية"). Every section is responsive by default
 * across desktop / tablet / mobile, the same way Elementor sections
 * behave, without the admin needing to write any CSS.
 */

.dh-custom-section {
	position: relative;
	width: 100%;
	overflow-x: hidden;
}

/* Never let embedded media or wide elements break layout on any device */
.dh-custom-section img,
.dh-custom-section video,
.dh-custom-section iframe,
.dh-custom-section embed {
	max-width: 100%;
	height: auto;
}

.dh-custom-section table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
}

.dh-custom-section pre {
	max-width: 100%;
	overflow-x: auto;
}

/* ---------- Width variants ---------- */

.dh-container-wide {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 24px;
}

.dh-container-full {
	width: 100%;
	padding: 0;
}

@media (max-width: 480px) {
	.dh-container-wide {
		padding: 0 14px;
	}
}

/* ---------- Responsive spacing presets ---------- */
/* Desktop (default) */
.dh-custom-section.dh-spacing-none {
	padding: 0;
}
.dh-custom-section.dh-spacing-small {
	padding: 32px 0;
}
.dh-custom-section.dh-spacing-medium {
	padding: 64px 0;
}
.dh-custom-section.dh-spacing-large {
	padding: 100px 0;
}

/* Tablet */
@media (max-width: 991px) {
	.dh-custom-section.dh-spacing-small {
		padding: 24px 0;
	}
	.dh-custom-section.dh-spacing-medium {
		padding: 48px 0;
	}
	.dh-custom-section.dh-spacing-large {
		padding: 72px 0;
	}
}

/* Mobile */
@media (max-width: 576px) {
	.dh-custom-section.dh-spacing-small {
		padding: 18px 0;
	}
	.dh-custom-section.dh-spacing-medium {
		padding: 32px 0;
	}
	.dh-custom-section.dh-spacing-large {
		padding: 48px 0;
	}
}

/* Visual editor content: keep sane default typography spacing */
.dh-custom-section .dh-custom-section-content > *:first-child {
	margin-top: 0;
}
.dh-custom-section .dh-custom-section-content > *:last-child {
	margin-bottom: 0;
}