/**
 * Smart Columns Advanced - Frontend Stylesheet
 * Supports modern Flexbox layout with CSS variables + full legacy Genesis Columns classes.
 */

/* ==========================================================================
   Modern Grid & Column Layouts (Flexbox Engine)
   ========================================================================== */

:root {
	--sca-gap: 24px;
	--sca-breakpoint: 768px;
}

.smart-columns-wrap,
.sca-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sca-gap, 24px);
	width: 100%;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	box-sizing: border-box;
}

.smart-columns-wrap *,
.sca-grid * {
	box-sizing: border-box;
}

.smart-column,
.sca-col {
	flex: 1 1 0%;
	min-width: 0; /* Prevents overflow issues with long text/code */
	box-sizing: border-box;
}

/* Specific Flex Column Widths */
.sca-col-1,
.sca-col-2,
.sca-col-3,
.sca-col-4,
.sca-col-5,
.sca-col-6 {
	flex-grow: 0;
	flex-shrink: 0;
}

/* Horizontal Alignments */
.sca-grid.sca-align-center {
	justify-content: center;
}
.sca-grid.sca-align-flex-start,
.sca-grid.sca-align-left {
	justify-content: flex-start;
}
.sca-grid.sca-align-flex-end,
.sca-grid.sca-align-right {
	justify-content: flex-end;
}
.sca-grid.sca-align-space-between {
	justify-content: space-between;
}
.sca-grid.sca-align-space-around {
	justify-content: space-around;
}

/* Vertical Alignments */
.sca-grid.sca-valign-top {
	align-items: flex-start;
}
.sca-grid.sca-valign-center,
.sca-grid.sca-valign-middle {
	align-items: center;
}
.sca-grid.sca-valign-bottom {
	align-items: flex-end;
}
.sca-grid.sca-valign-stretch,
.sca-grid.sca-equal-height {
	align-items: stretch;
}

/* Column Self Alignment */
.sca-col.sca-self-top {
	align-self: flex-start;
}
.sca-col.sca-self-center {
	align-self: center;
}
.sca-col.sca-self-bottom {
	align-self: flex-end;
}
.sca-col.sca-self-stretch {
	align-self: stretch;
}

/* Responsive Mobile Stacking */
@media screen and (max-width: 768px) {
	.smart-columns-wrap,
	.sca-grid {
		flex-direction: column;
		gap: calc(var(--sca-gap, 24px) * 0.75);
	}

	.smart-column,
	.sca-col {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.sca-grid.sca-reverse-mobile {
		flex-direction: column-reverse;
	}
}


/* ==========================================================================
   Legacy Genesis Columns Advanced Classes (100% Backward Compatible)
   ========================================================================== */

.five-sixths,
.four-sixths,
.four-fifths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-fifths,
.three-sixths,
.two-fourths,
.two-fifths,
.two-sixths,
.two-thirds {
	float: left;
	margin-left: 2.564102564102564%;
	box-sizing: border-box;
}

.one-half,
.three-sixths,
.two-fourths {
	width: 48.717948717948715%;
}

.one-third,
.two-sixths {
	width: 31.623931623931625%;
}

.four-sixths,
.two-thirds {
	width: 65.81196581196582%;
}

.one-fourth {
	width: 23.076923076923077%;
}

.three-fourths {
	width: 74.35897435897435%;
}

.one-fifth {
	width: 17.94871794871795%;
}

.two-fifths {
	width: 38.46153846153846%;
}

.three-fifths {
	width: 58.97435897435898%;
}

.four-fifths {
	width: 79.48717948717949%;
}

.one-sixth {
	width: 14.52991452991453%;
}

.five-sixths {
	width: 82.90598290598291%;
}

.first {
	clear: both;
	margin-left: 0;
}

/* Legacy Utility Classes */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.vertical-spacer {
	clear: both;
	margin-bottom: 30px;
}

.columns-container {
	clear: both;
	overflow: hidden;
}

/* Legacy Media Queries */
@media only screen and (max-width: 800px) {
	.five-sixths,
	.four-fifths,
	.four-sixths,
	.one-fifth,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fifths,
	.three-fourths,
	.three-sixths,
	.two-fifths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin-left: 0;
		width: 100%;
		float: none;
		clear: both;
	}
}