/* ==========================================================================
   AppNova Persian — Responsive Utilities & Helpers
   Mobile-first utility classes for layout flexibility
   ========================================================================== */

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.anova-hide-mobile {
	display: none;
}

.anova-hide-tablet {
	display: inherit;
}

.anova-hide-desktop {
	display: inherit;
}

@media (min-width: 768px) {
	.anova-hide-mobile {
		display: inherit;
	}

	.anova-hide-tablet {
		display: none;
	}
}

@media (min-width: 1024px) {
	.anova-hide-desktop {
		display: none;
	}
}

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

.anova-flex {
	display: flex;
}

.anova-flex-col {
	flex-direction: column;
}

.anova-flex-col-reverse {
	flex-direction: column-reverse;
}

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

.anova-gap-1 {
	gap: var(--space-1);
}

.anova-gap-2 {
	gap: var(--space-2);
}

.anova-gap-3 {
	gap: var(--space-3);
}

.anova-gap-4 {
	gap: var(--space-4);
}

.anova-gap-5 {
	gap: var(--space-5);
}

.anova-gap-6 {
	gap: var(--space-6);
}

/* Responsive gap adjustments */
@media (min-width: 768px) {
	.anova-gap-md-8 {
		gap: var(--space-8);
	}
}

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

.anova-grid {
	display: grid;
}

.anova-grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

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

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

/* Responsive grid: 1 column on mobile, 2 on tablet, 3+ on desktop */
.anova-grid-auto {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (min-width: 640px) {
	.anova-grid-sm-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.anova-grid-auto {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

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

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

	.anova-grid-auto {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

@media (min-width: 1024px) {
	.anova-grid-lg-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.anova-grid-auto {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media (min-width: 1280px) {
	.anova-grid-xl-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.anova-grid-xl-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Width & Height Utilities
   ========================================================================== */

.anova-w-full {
	width: 100%;
}

.anova-w-screen {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.anova-h-auto {
	height: auto;
}

.anova-h-screen {
	height: 100vh;
}

/* ==========================================================================
   Aspect Ratio Utilities
   ========================================================================== */

.anova-aspect-auto {
	aspect-ratio: auto;
}

.anova-aspect-square {
	aspect-ratio: 1 / 1;
}

.anova-aspect-video {
	aspect-ratio: 16 / 9;
}

.anova-aspect-portrait {
	aspect-ratio: 3 / 4;
}

/* ==========================================================================
   Padding & Margin Utilities
   ========================================================================== */

.anova-p-mobile {
	padding: var(--anova-padding-mobile);
}

@media (min-width: 768px) {
	.anova-p-tablet {
		padding: var(--anova-padding-tablet);
	}
}

@media (min-width: 1024px) {
	.anova-p-desktop {
		padding: var(--anova-padding-desktop);
	}
}

.anova-px-mobile {
	padding-left: var(--anova-padding-mobile);
	padding-right: var(--anova-padding-mobile);
}

@media (min-width: 768px) {
	.anova-px-tablet {
		padding-left: var(--anova-padding-tablet);
		padding-right: var(--anova-padding-tablet);
	}
}

.anova-py-4 {
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}

.anova-py-6 {
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}

.anova-py-8 {
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}

.anova-mb-auto {
	margin-bottom: auto;
}

.anova-mt-auto {
	margin-top: auto;
}

/* ==========================================================================
   Text Alignment Utilities
   ========================================================================== */

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

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

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

@media (min-width: 768px) {
	.anova-md-text-right {
		text-align: right;
	}

	.anova-md-text-left {
		text-align: left;
	}
}

/* ==========================================================================
   Responsive Column Layouts
   ========================================================================== */

@media (min-width: 768px) {
	.anova-cols-2 {
		column-count: 2;
		column-gap: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.anova-cols-3 {
		column-count: 3;
		column-gap: var(--space-6);
	}
}

/* ==========================================================================
   Responsive Container Widths
   ========================================================================== */

.anova-max-w-sm {
	max-width: 640px;
}

.anova-max-w-md {
	max-width: 768px;
}

.anova-max-w-lg {
	max-width: 1024px;
}

.anova-max-w-xl {
	max-width: 1280px;
}

.anova-max-w-2xl {
	max-width: 1536px;
}

.anova-mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Responsive Overflow & Text Truncation
   ========================================================================== */

.anova-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.anova-line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.anova-line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Responsive Visibility Helpers
   ========================================================================== */

.anova-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ==========================================================================
   Responsive Scale & Zoom
   ========================================================================== */

.anova-scale-100 {
	transform: scale(1);
}

.anova-scale-105 {
	transform: scale(1.05);
}

.anova-scale-110 {
	transform: scale(1.1);
}

.anova-transition-all {
	transition: all var(--anova-transition);
}

/* ==========================================================================
   Responsive Images
   ========================================================================== */

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

.anova-img-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.anova-img-contain {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==========================================================================
   Responsive Shadows
   ========================================================================== */

.anova-shadow-sm {
	box-shadow: var(--anova-shadow-soft);
}

.anova-shadow-md {
	box-shadow: var(--anova-shadow-medium);
}

.anova-shadow-lg {
	box-shadow: var(--anova-shadow-strong);
}

.anova-shadow-brand {
	box-shadow: var(--anova-shadow-brand);
}

/* ==========================================================================
   Touch Device Specific Styles
   ========================================================================== */

body.has-touch .anova-btn,
body.has-touch a {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

body.has-touch .anova-btn:active {
	background-filter: brightness(0.95);
}

/* ==========================================================================
   RTL (Right-to-Left) Responsive Adjustments
   ========================================================================== */

[dir="rtl"] .anova-text-right {
	text-align: left;
}

[dir="rtl"] .anova-text-left {
	text-align: right;
}

@media (min-width: 768px) {
	[dir="rtl"] .anova-md-text-right {
		text-align: left;
	}

	[dir="rtl"] .anova-md-text-left {
		text-align: right;
	}
}

/* ==========================================================================
   Print Media Utilities
   ========================================================================== */

@media print {
	.anova-no-print {
		display: none;
	}

	.anova-print-block {
		display: block;
	}
}

/* ==========================================================================
   Dark Mode Responsive Utilities
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.anova-dark\:bg-surface {
		background: var(--anova-surface);
	}

	.anova-dark\:text-muted {
		color: var(--anova-text-muted);
	}
}