/**
 * Fluid 12-column grid system
 * Bright Horizons Psychiatry
 *
 * Depends on variables.css (--bhp-container-*, --bhp-gutter).
 */

.bhp-container {
	width: 100%;
	max-width: 100%;
	padding-left: var(--bhp-container-pad);
	padding-right: var(--bhp-container-pad);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.bhp-container--wide {
	max-width: var(--bhp-container-wide);
}

.bhp-container--default {
	max-width: var(--bhp-container-default);
}

.bhp-container--narrow {
	max-width: var(--bhp-container-narrow);
}

.bhp-container--legal {
	max-width: var(--bhp-container-legal);
}

.bhp-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--bhp-gutter) * -1);
	margin-right: calc(var(--bhp-gutter) * -1);
	box-sizing: border-box;
}

.bhp-row > [class*="bhp-col-"] {
	padding-left: var(--bhp-gutter);
	padding-right: var(--bhp-gutter);
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

/* Base columns — fluid % of row */
.bhp-col-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.bhp-col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.bhp-col-3  { flex: 0 0 25%;        max-width: 25%; }
.bhp-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.bhp-col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.bhp-col-6  { flex: 0 0 50%;        max-width: 50%; }
.bhp-col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.bhp-col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.bhp-col-9  { flex: 0 0 75%;        max-width: 75%; }
.bhp-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.bhp-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.bhp-col-12 { flex: 0 0 100%;       max-width: 100%; }

/* Small (≥576px) */
@media (min-width: 576px) {
	.bhp-col-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
	.bhp-col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.bhp-col-sm-3  { flex: 0 0 25%;        max-width: 25%; }
	.bhp-col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.bhp-col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.bhp-col-sm-6  { flex: 0 0 50%;        max-width: 50%; }
	.bhp-col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.bhp-col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.bhp-col-sm-9  { flex: 0 0 75%;        max-width: 75%; }
	.bhp-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.bhp-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.bhp-col-sm-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* Medium (≥768px) */
@media (min-width: 768px) {
	.bhp-col-md-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
	.bhp-col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.bhp-col-md-3  { flex: 0 0 25%;        max-width: 25%; }
	.bhp-col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.bhp-col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.bhp-col-md-6  { flex: 0 0 50%;        max-width: 50%; }
	.bhp-col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.bhp-col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.bhp-col-md-9  { flex: 0 0 75%;        max-width: 75%; }
	.bhp-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.bhp-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.bhp-col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* Large (≥992px) */
@media (min-width: 992px) {
	.bhp-col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
	.bhp-col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.bhp-col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
	.bhp-col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.bhp-col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.bhp-col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
	.bhp-col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.bhp-col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.bhp-col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
	.bhp-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.bhp-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.bhp-col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* Extra large (≥1200px) */
@media (min-width: 1200px) {
	.bhp-col-xl-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
	.bhp-col-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.bhp-col-xl-3  { flex: 0 0 25%;        max-width: 25%; }
	.bhp-col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.bhp-col-xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.bhp-col-xl-6  { flex: 0 0 50%;        max-width: 50%; }
	.bhp-col-xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.bhp-col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.bhp-col-xl-9  { flex: 0 0 75%;        max-width: 75%; }
	.bhp-col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.bhp-col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.bhp-col-xl-12 { flex: 0 0 100%;       max-width: 100%; }
}

.bhp-row--align-center { align-items: center; }
.bhp-row--align-end    { align-items: flex-end; }
.bhp-row--justify-between { justify-content: space-between; }
.bhp-row--justify-center  { justify-content: center; }
.bhp-row--no-gutters {
	margin-left: 0;
	margin-right: 0;
}
.bhp-row--no-gutters > [class*="bhp-col-"] {
	padding-left: 0;
	padding-right: 0;
}
