/**
 * ACF Extended Grid System CSS
 * Grid system for Flexible Content
 * Based on Bootstrap 4 Grid System
 *
 * @package Experis_Academy
 */

/* Base Row */
.acfe-flexible-grid,
.row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
}

/* Force each col-12 to take a new row by adding margin-bottom and clearing */
.acfe-flexible-grid > .col-12 {
	flex-basis: 100%;
	max-width: 100%;
	width: 100%;
	clear: both;
}

/* Ensure new row after col-12 */
.acfe-flexible-grid > .col-12 + * {
	clear: both;
}

/* No Wrap */
.nowrap {
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

/* Wrap */
.wrap {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* Column Sizes */
.col-12 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

.col-11 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 91.666667%;
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}

.col-10 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 83.333333%;
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}

.col-9 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 75%;
	flex: 0 0 75%;
	max-width: 75%;
}

.col-8 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.col-7 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

.col-6 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}

.col-5 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

.col-4 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.col-3 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}

.col-2 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}

.col-1 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}

.col-auto {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	max-width: 100%;
}

/* Horizontal Alignment */
.align-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.align-left {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.align-right {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.align-space-evenly {
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
}

.align-space-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.align-space-around {
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

/* Vertical Alignment */
.valign-stretch {
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.valign-top {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.valign-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.valign-bottom {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

/* Container */
.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}

/* Responsive Columns */
@media (max-width: 768px) {
	.col-1,
	.col-2,
	.col-3,
	.col-4,
	.col-5,
	.col-6,
	.col-7,
	.col-8,
	.col-9,
	.col-10,
	.col-11,
	.col-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Gap between columns */
.acfe-flexible-grid > * {
	padding: 0 15px;
}

/* Optional: Add margin between rows */
.acfe-flexible-grid {
	margin-bottom: 30px;
}

.acfe-flexible-grid:last-child {
	margin-bottom: 0;
}