/**
 * aw-flex.css - RTL-Aware Flexbox Grid
 * 
 * Use alongside W3.CSS for multilingual sites.
 * These classes respect dir="rtl" and dir="ltr" for proper column ordering.
 * 
 * Usage:
 *   <div class="aw-row" dir="{{@LNG.dir}}">
 *     <div class="aw-half">...</div>
 *     <div class="aw-quarter">...</div>
 *     <div class="aw-quarter">...</div>
 *   </div>
 * 
 * W3.CSS equivalents:
 *   w3-row     → aw-row
 *   w3-half    → aw-half
 *   w3-third   → aw-third
 *   w3-quarter → aw-quarter
 *   w3-twothird → aw-twothird
 *   w3-threequarter → aw-threequarter
 *   w3-col (with l/m/s sizes) → aw-col with aw-l6, aw-m4, etc.
 */

/* ============================================
   FLEX ROW CONTAINER
   ============================================ */
.aw-row {
	display: flex;
	flex-wrap: wrap;
}

/* Clear any inherited floats */
.aw-row > div,
.aw-row > section,
.aw-row > article {
	float: none !important;
}

/* ============================================
   FIXED-WIDTH COLUMNS (Desktop)
   ============================================ */
@media (min-width: 993px) {
	.aw-half {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.aw-third {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
	.aw-twothird {
		flex: 0 0 66.666%;
		max-width: 66.666%;
	}
	.aw-quarter {
		flex: 0 0 25%;
		max-width: 25%;
	}
	.aw-threequarter {
		flex: 0 0 75%;
		max-width: 75%;
	}
	.aw-fifth {
		flex: 0 0 20%;
		max-width: 20%;
	}
	.aw-twofifth {
		flex: 0 0 40%;
		max-width: 40%;
	}
	.aw-threefifth {
		flex: 0 0 60%;
		max-width: 60%;
	}
	.aw-fourfifth {
		flex: 0 0 80%;
		max-width: 80%;
	}
}

/* ============================================
   RESPONSIVE COLUMNS (12-column grid)
   Large screens (>992px)
   ============================================ */
@media (min-width: 993px) {
	.aw-l1  { flex: 0 0 8.333%;  max-width: 8.333%; }
	.aw-l2  { flex: 0 0 16.666%; max-width: 16.666%; }
	.aw-l3  { flex: 0 0 25%;     max-width: 25%; }
	.aw-l4  { flex: 0 0 33.333%; max-width: 33.333%; }
	.aw-l5  { flex: 0 0 41.666%; max-width: 41.666%; }
	.aw-l6  { flex: 0 0 50%;     max-width: 50%; }
	.aw-l7  { flex: 0 0 58.333%; max-width: 58.333%; }
	.aw-l8  { flex: 0 0 66.666%; max-width: 66.666%; }
	.aw-l9  { flex: 0 0 75%;     max-width: 75%; }
	.aw-l10 { flex: 0 0 83.333%; max-width: 83.333%; }
	.aw-l11 { flex: 0 0 91.666%; max-width: 91.666%; }
	.aw-l12 { flex: 0 0 100%;    max-width: 100%; }
}

/* ============================================
   Medium screens (601px - 992px)
   ============================================ */
@media (min-width: 601px) and (max-width: 992px) {
	.aw-m1  { flex: 0 0 8.333%;  max-width: 8.333%; }
	.aw-m2  { flex: 0 0 16.666%; max-width: 16.666%; }
	.aw-m3  { flex: 0 0 25%;     max-width: 25%; }
	.aw-m4  { flex: 0 0 33.333%; max-width: 33.333%; }
	.aw-m5  { flex: 0 0 41.666%; max-width: 41.666%; }
	.aw-m6  { flex: 0 0 50%;     max-width: 50%; }
	.aw-m7  { flex: 0 0 58.333%; max-width: 58.333%; }
	.aw-m8  { flex: 0 0 66.666%; max-width: 66.666%; }
	.aw-m9  { flex: 0 0 75%;     max-width: 75%; }
	.aw-m10 { flex: 0 0 83.333%; max-width: 83.333%; }
	.aw-m11 { flex: 0 0 91.666%; max-width: 91.666%; }
	.aw-m12 { flex: 0 0 100%;    max-width: 100%; }
}

/* ============================================
   Small screens (<601px)
   - Named columns (aw-half, etc.) stack to 100%
   - aw-l* and aw-m* stack to 100% UNLESS aw-s* is also present
   - aw-s* classes always apply their specific widths
   NOTE: No flex-direction:column here - we want aw-s* to work!
   ============================================ */
@media (max-width: 600px) {
	/* Named columns default to full width on mobile */
	.aw-half,
	.aw-third,
	.aw-twothird,
	.aw-quarter,
	.aw-threequarter,
	.aw-fifth,
	.aw-twofifth,
	.aw-threefifth,
	.aw-fourfifth {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* aw-l* and aw-m* default to 100% on small screens
	   UNLESS an aw-s* class is also present */
	[class*="aw-l"]:not([class*="aw-s"]),
	[class*="aw-m"]:not([class*="aw-s"]) {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Small-screen specific sizes - these ALWAYS apply */
	.aw-s1  { flex: 0 0 8.333%  !important; max-width: 8.333%  !important; }
	.aw-s2  { flex: 0 0 16.666% !important; max-width: 16.666% !important; }
	.aw-s3  { flex: 0 0 25%     !important; max-width: 25%     !important; }
	.aw-s4  { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
	.aw-s5  { flex: 0 0 41.666% !important; max-width: 41.666% !important; }
	.aw-s6  { flex: 0 0 50%     !important; max-width: 50%     !important; }
	.aw-s7  { flex: 0 0 58.333% !important; max-width: 58.333% !important; }
	.aw-s8  { flex: 0 0 66.666% !important; max-width: 66.666% !important; }
	.aw-s9  { flex: 0 0 75%     !important; max-width: 75%     !important; }
	.aw-s10 { flex: 0 0 83.333% !important; max-width: 83.333% !important; }
	.aw-s11 { flex: 0 0 91.666% !important; max-width: 91.666% !important; }
	.aw-s12 { flex: 0 0 100%    !important; max-width: 100%    !important; }
}

/* ============================================
   FLEX UTILITIES
   ============================================ */

/* Alignment */
.aw-row.aw-center {
	justify-content: center;
}
.aw-row.aw-space-between {
	justify-content: space-between;
}
.aw-row.aw-space-around {
	justify-content: space-around;
}
.aw-row.aw-align-top {
	align-items: flex-start;
}
.aw-row.aw-align-center {
	align-items: center;
}
.aw-row.aw-align-bottom {
	align-items: flex-end;
}
.aw-row.aw-stretch {
	align-items: stretch;
}

/* Prevent stacking on mobile (keep side-by-side) */
.aw-row.aw-no-stack {
	flex-direction: row !important;
}

/* Force stacking on all screens */
.aw-row.aw-stack {
	flex-direction: column !important;
}

/* Gap between columns */
.aw-row.aw-gap {
	gap: 16px;
}
.aw-row.aw-gap-small {
	gap: 8px;
}
.aw-row.aw-gap-large {
	gap: 32px;
}