/* ======================================================================
   page-section.standard-content

   Structure:
   section.page-section.standard-content[.cols_6_6|.cols_8_4|.cols_4_8|.cols_9_3|.cols_3_9|
                                          .cols_4_4_4|.cols_6_3_3|.cols_3_3_6|
                                          .cols_12|.cols_10|.cols_8_centered|.cols_6_centered]
                                         [.bg-*]
       .pad
           .container
               .section-intro                          (optional)
                   .intro-outro-wrap
               .columns-wrap
                   .col.cell-N[.bg-*][.va_*]
                       .content-wrap[.pad-default|.pad-extra-vertical|.pad-extra-horizontal|
                                     .pad-extra-both|.pad-only-vertical|.pad-only-horizontal|.pad-nopad]
               .section-outro                          (optional)
                   .intro-outro-wrap
   ====================================================================== */
   
   
   /*
   Additional css classes 
   
   .standard-content.reverse-on-mobile
   .standard-content.bg-bleed-left 
   .standard-content.bg-bleed-right

   
   */


/* ----------------------------------------------------------------------
   Base — mobile first
   ---------------------------------------------------------------------- */

.page-section.standard-content .container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
}

.page-section.standard-content .columns-wrap {
    display: flex;
    flex-direction: column;
}

.standard-content .col {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	
	border-radius: var(--border-radius);
	overflow: hidden;
}

/* Make sure empty cells with background images aren't too small */
.col.bg-image{
	min-height: 10em;
}

.standard-content.rounded .col {
	border-radius: var(--border-radius);
}

.standard-content .content-wrap {
	width: 100%;
	max-width: var(--content-wrap-max-width);
	display: flex;
	flex-flow: column;
}

/* Should content-wrap be padded or not? */
/* Auto — driven by the bg class already on .col */
.col.bg-transparent .content-wrap { padding: 0; }
.col:not(.bg-transparent) .content-wrap { padding: var(--padding-content) var(--padding-content); }

/* Manual overrides — win because they're more specific or come later */

.col .content-wrap.pad-nopad { padding: 0; }
.col .content-wrap.pad-only-vertical { padding: var(--padding-content) 0; }
.col .content-wrap.pad-only-horizontal { padding: 0 var(--padding-content); }
.col .content-wrap.pad-extra-vertical { padding-block:  calc(var(--padding-content)   * 2); }
.col .content-wrap.pad-extra-horizontal { padding-inline: calc(var(--padding-content) * 2); }
.col .content-wrap.pad-extra-both { padding: calc(var(--padding-content) * 2) calc(var(--padding-content) * 2); }


.inner-bg .container{
	border-radius: var(--border-radius);
	overflow: hidden;
}
.inner-bg .container .col .content-wrap{
	padding: var(--padding-content);
}
.inner-bg .col.cell-1{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.inner-bg .col.cell-2{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}


@media (max-width: 1023px) {
	/* Flip visual cell order on mobile */
	.page-section.standard-content.reverse-on-mobile .columns-wrap,
	.page-section.standard-content.rev-on-mobile .columns-wrap {
		direction: rtl;
	}
	.page-section.standard-content.reverse-on-mobile .columns-wrap > *,
	.page-section.standard-content.rev-on-mobile .columns-wrap > * {
		direction: ltr;
	}
}


/* ----------------------------------------------------------------------
   Desktop
   ---------------------------------------------------------------------- */

@media screen and (min-width: 1024px) {
	
	
	.page-section.standard-content .columns-wrap {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--gap-columns);
		align-items: stretch;
	}

	/* Reset mobile order flip */
	.standard-content.reverse-on-mobile .cell-1,
	.standard-content.reverse-on-mobile .cell-2 {
		order: unset;
	}
	
	/* --- Column widths --- */
	
	/* 6+6 layout (50+50) */
	.cols_6_6 .cell-1,
	.cols_6_6 .cell-2{
		grid-column: span 6;
	}
	
	/* 8+4 layout (66+33) */
	.cols_8_4 .cell-1 { grid-column: span 8; }
	.cols_8_4 .cell-2 { grid-column: span 4; }

	/* 4+8 layout (33+66) */
	.cols_4_8 .cell-1 { grid-column: span 4; }
	.cols_4_8 .cell-2 { grid-column: span 8; }
	
	/* 9+3 layout (75+25) */
	.cols_9_3 .cell-1 { grid-column: span 9; }
	.cols_9_3 .cell-2 { grid-column: span 3; }

	/* 3+9 layout (25+75) */
	.cols_3_9 .cell-1 { grid-column: span 3; }
	.cols_3_9 .cell-2 { grid-column: span 9; }
	
	/* 4+4+4 layout (33+33+33) */
	.cols_4_4_4 .cell-1,
	.cols_4_4_4 .cell-2,
	.cols_4_4_4 .cell-3{
		grid-column: span 4;
	}
	
	/* 6+3+3 layout (50+25+25) */
	.cols_6_3_3 .cell-1 { grid-column: span 6; }
	.cols_6_3_3 .cell-2 { grid-column: span 3; }
	.cols_6_3_3 .cell-3 { grid-column: span 3; }
	
	/* 3+3+6 layout (25+25+50) */
	.cols_3_3_6 .cell-1 { grid-column: span 3; }
	.cols_3_3_6 .cell-2 { grid-column: span 3; }
	.cols_3_3_6 .cell-3 { grid-column: span 6; }

	/* 3+6+3 layout (25+50+25) */
	.cols_3_6_3 .cell-1 { grid-column: span 3; }
	.cols_3_6_3 .cell-2 { grid-column: span 6; }
	.cols_3_6_3 .cell-3 { grid-column: span 3; }

	/* 12 layout */
	.cols_12 .cell-1{ grid-column: span 12;	}
	.cols_8_centered .cell-1{ grid-column: 3 / span 8; }
	.cols_6_centered .cell-1{ grid-column: 4 / span 6; }
	
	
	/* Reset old percentage widths/margins for grid children */
	.standard-content .columns-wrap > .col {
		width: auto;
		margin-left: 0;
	}
	
	
	
	.inner-bg .col.cell-1{
		border-radius: var(--border-radius);
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.inner-bg .col.cell-2{
		border-radius: var(--border-radius);
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.inner-bg .col.cell-1 .content-wrap{
		padding-right: 0;
	}
	.inner-bg .col.cell-2 .content-wrap{
		padding-left: 0;
	}

	/* --- Col base on desktop --- */

	.col {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
	}

	/* --- Background image bleed (extends cell bg beyond container) --- */

	.standard-content.bg-bleed-left .cell-1,
	.standard-content.bg-bleed-right .cell-2 {
		overflow: visible;
	}

	.standard-content.bg-bleed-left .cell-1::before,
	.standard-content.bg-bleed-right .cell-2::before {
		content: "";
		position: absolute;
		top: 0;
		display: block;
		width: 50vw;
		height: 100%;
		background: inherit;
	}

	.standard-content.bg-bleed-left .cell-1::before  { right: 0; }
	.standard-content.bg-bleed-right .cell-2::before { left: 0;  }
	
	
	
	
	
	
	
	
	
	
	/* Are these orphans? Are they used by any element at all?
	.col{
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.inner-bg .col.cell-1{
		border-radius: var(--border-radius) 0 0 var(--border-radius);
	}
	.inner-bg .col.cell-2{
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
	}
	.inner-bg .col.cell-1 .content-wrap.pad-auto,
	.inner-bg .col.cell-1 .content-wrap.pad-default{
		padding-right: 0;
	}
	.inner-bg .col.cell-2  .content-wrap.pad-auto,
	.inner-bg .col.cell-2  .content-wrap.pad-default{
		padding-left: 0;
	}
	

	.page-section.w66 .items-container,
	.page-section.w66 .section-wrap,
	.page-section.w50 .items-container,
	.page-section.w50 .section-wrap{
		margin-left: auto;
		margin-right: auto;
	}
	.page-section.w66 .items-container,
	.page-section.w66 .section-wrap{
		max-width: 66.66%;

	}
	.page-section.w50 .items-container,
	.page-section.w50 .section-wrap{
		max-width: 50%;
	}
	*/
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

}