/**
 * Utility Classes for DP Electric Webparts
 *
 * Generic layout utilities with fluid, full-width assumptions.
 * Assumes components are placed in full-width Elementor containers.
 */

/* ============================================
   Base Reset & Normalization
   ============================================ */

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ============================================
   Section Container
   ============================================ */

.dp-section {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding-inline: var(--dp-space-container);
	box-sizing: border-box;
}

/* ============================================
   Flexbox Utilities
   ============================================ */

.dp-flex {
	display: flex;
	gap: var(--dp-space-md);
}

.dp-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--dp-space-md);
}

.dp-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-space-md);
}

.dp-flex-start {
	display: flex;
	align-items: flex-start;
	gap: var(--dp-space-md);
}

.dp-flex-end {
	display: flex;
	align-items: flex-end;
	gap: var(--dp-space-md);
}

.dp-flex-column {
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-md);
}

.dp-flex-wrap {
	flex-wrap: wrap;
}

.dp-flex-nowrap {
	flex-wrap: nowrap;
}

/* ============================================
   Grid Utilities
   ============================================ */

.dp-grid {
	display: grid;
	gap: var(--dp-space-md);
}

.dp-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--dp-space-md);
}

.dp-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: var(--dp-space-md);
}

.dp-grid-4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--dp-space-md);
}

/* ============================================
   Spacing Utilities
   ============================================ */

.dp-mt-xs {
	margin-top: var(--dp-space-xs);
}

.dp-mt-sm {
	margin-top: var(--dp-space-sm);
}

.dp-mt-md {
	margin-top: var(--dp-space-md);
}

.dp-mt-lg {
	margin-top: var(--dp-space-lg);
}

.dp-mt-xl {
	margin-top: var(--dp-space-xl);
}

.dp-mb-xs {
	margin-bottom: var(--dp-space-xs);
}

.dp-mb-sm {
	margin-bottom: var(--dp-space-sm);
}

.dp-mb-md {
	margin-bottom: var(--dp-space-md);
}

.dp-mb-lg {
	margin-bottom: var(--dp-space-lg);
}

.dp-mb-xl {
	margin-bottom: var(--dp-space-xl);
}

.dp-pt-xs {
	padding-top: var(--dp-space-xs);
}

.dp-pt-sm {
	padding-top: var(--dp-space-sm);
}

.dp-pt-md {
	padding-top: var(--dp-space-md);
}

.dp-pt-lg {
	padding-top: var(--dp-space-lg);
}

.dp-pt-xl {
	padding-top: var(--dp-space-xl);
}

.dp-pb-xs {
	padding-bottom: var(--dp-space-xs);
}

.dp-pb-sm {
	padding-bottom: var(--dp-space-sm);
}

.dp-pb-md {
	padding-bottom: var(--dp-space-md);
}

.dp-pb-lg {
	padding-bottom: var(--dp-space-lg);
}

.dp-pb-xl {
	padding-bottom: var(--dp-space-xl);
}

.dp-py-xs {
	padding-top: var(--dp-space-xs);
	padding-bottom: var(--dp-space-xs);
}

.dp-py-sm {
	padding-top: var(--dp-space-sm);
	padding-bottom: var(--dp-space-sm);
}

.dp-py-md {
	padding-top: var(--dp-space-md);
	padding-bottom: var(--dp-space-md);
}

.dp-py-lg {
	padding-top: var(--dp-space-lg);
	padding-bottom: var(--dp-space-lg);
}

.dp-py-xl {
	padding-top: var(--dp-space-xl);
	padding-bottom: var(--dp-space-xl);
}

/* ============================================
   Typography Utilities
   ============================================ */

.dp-text-xs {
	font-size: var(--dp-font-size-xs);
}

.dp-text-sm {
	font-size: var(--dp-font-size-sm);
}

.dp-text-md {
	font-size: var(--dp-font-size-md);
}

.dp-text-lg {
	font-size: var(--dp-font-size-lg);
}

.dp-text-xl {
	font-size: var(--dp-font-size-xl);
}

.dp-text-2xl {
	font-size: var(--dp-font-size-2xl);
}

.dp-text-3xl {
	font-size: var(--dp-font-size-3xl);
}

.dp-font-normal {
	font-weight: var(--dp-font-weight-normal);
}

.dp-font-medium {
	font-weight: var(--dp-font-weight-medium);
}

.dp-font-semibold {
	font-weight: var(--dp-font-weight-semibold);
}

.dp-font-bold {
	font-weight: var(--dp-font-weight-bold);
}

.dp-text-center {
	text-align: center;
}

.dp-text-left {
	text-align: left;
}

.dp-text-right {
	text-align: right;
}

/* ============================================
   Responsive Utilities
   ============================================ */

/* Hide on mobile */
@media (max-width: 767px) {
	.dp-hide-mobile {
		display: none !important;
	}
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	.dp-hide-tablet {
		display: none !important;
	}
}

/* Hide on desktop */
@media (min-width: 1025px) {
	.dp-hide-desktop {
		display: none !important;
	}
}

/* Show only on mobile */
.dp-show-mobile {
	display: none !important;
}

@media (max-width: 767px) {
	.dp-show-mobile {
		display: block !important;
	}
}

/* Show only on tablet */
.dp-show-tablet {
	display: none !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.dp-show-tablet {
		display: block !important;
	}
}

/* Show only on desktop */
.dp-show-desktop {
	display: none !important;
}

@media (min-width: 1025px) {
	.dp-show-desktop {
		display: block !important;
	}
}