/**
 * Utility Classes for Rowan 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
   ============================================ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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