/** ===========================================================================
 * responsive card behaviour for Company Theme
 * ============================================================================
 */

/* there must be a way to dequeue these styles */

.wp-block-columns { box-sizing: content-box; }

.wp-block-columns, .wp-container-9 {
	
	/* over ride wordpress to wrap cards */

	flex-wrap: wrap !important
	}

.wp-block-columns, .is-layout-flex {

	/* over ride wordpress to wrap cards */

	row-gap: 0 !important
	}

div.listing, section.listing {

	/**
	 * confers upon a container the attributes required to display a
	 * row, or grid of cards
	 */

	display: flex;

	/* children */
	flex-flow: row wrap;
	justify-content: flex-start;
	}

div.listing.cards div, figure.listing-card, div.card_with_pillar, ul.listing.cards li {

	/**
	 * characteristics of a card within a 'listing' container
	 */

	display: flex;

	margin-bottom: var(--space_extra_small);

	/* children */

	/* display content as rows within a column */
	flex-flow: column nowrap;
	/* stretch children to fill the whole height of card */
	align-items: stretch;
	}


div.listing.carda div.description, figure.listing-card figcaption, div.card_with_pillar div.description, ul.listing.cards li div.description {

	display: flex;
	/* expand to fill remaining height of parent */
	flex-grow: 1;

	/* children */

	/* display content as rows within a column */
	flex-flow: column wrap;
	}

.card p.subheading, p.subheading {

	/* align to bottom of parent */
	font-family: var(--font_heading_subsidiary);
	font-weight: var(--fw_bold);
	margin-top: auto;
	}



/** ---------------------------------------------------------------------------
 * responsive - fundamentals
 * ----------------------------------------------------------------------------
 * .cb_list-services:
 * - works in conunction with .columns-1-2-3
 * - styles the pre-header on cards
 */


@media screen and (max-width: 600px) {

	/**
	 * 'mobile'
	 * no content margin
	 * single column layout for 1-1-3 and 1-2-3
	 * double column layout for 2-3-3
	 * body { background-color: Yellow; }
	 */
	
	.card img, .cards img {
		width: 100%;
		height: auto;
		}

	.columns-1-1-3.columns li, .columns-1-2-3.columns li:not(.cb_list-services.columns li), .columns-1-3-3.columns li {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		/* full width */
		width: 100%;
		}

		.cb_list-services.columns li {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			/* full width */
			width: 100%;
			}

			.cb_list-services img {
				width: 100%;
				height: auto;
				}

	.columns-1-1-3.cards picture, .columns-1-2-3.cards picture:not(.cb_list-services.cards picture), .columns-1-3-3.cards picture {
		display: flex;
		min-width: 30%;
		max-width: 30%;

		/* mask image */
		overflow: hidden;
		}

	.columns-1-1-3.cards img, .columns-1-2-3.cards img, .columns-1-3-3.cards img, .columns-1-2-3.cards img {

		/* ensure image fills picture element */
		object-fit: cover;
		/* as long at there is a style that places a border at the top of the image
		 * at other screen widths
		 */
		border-top: none !important
		}

	.columns-1-1-3 .description, .columns-1-2-3 .description, .columns-1-3-3 .description {
		display: flex;
		flex-flow: column;
		align-content: flex-start;
		}

	.columns-1-1-3.cards li:nth-child(even), .columns-1-2-3.cards li:nth-child(even):not(.cb_list-services.cards li), .columns-1-3-3.cards li:nth-child(even):not(.card-stat) { flex-direction: row-reverse; }

	.columns-1-1-3.cards li:nth-child(odd), .columns-1-2-3.cards li:nth-child(odd):not(.cb_list-services.cards li), .columns-1-3-3.cards li:nth-child(odd) { flex-direction: row; }

	.columns-1-3-3 .card-stat {

		align-items: center;
		flex-direction: row;

		}

	.columns-1-3-3 .card-stat:not(:last-child) { margin-bottom: var(--space_small); }

	.columns-1-3-3 .card-stat .stat-figure { margin-right: var(--space_miniscule); }

	.columns-2-3-3 {

		/* columns between cards specified via parent container */
		column-gap: 4%;
		}

	.columns-2-4-4 { row-gap: 0.66rem; }

	.columns-2-4-4 .card-stat:nth-child(odd) { border-right: var(--border_card_stat); }

	.columns-1-2-2.columns:not(#footer-credit):not(#footer-privacy), .columns-1-3-3.columns li {

		/* here the width is simply 100% */
		width: 100%;
		}

	.columns-1-2-2 #footer-credit { flex-grow: 2; }

	.columns-2-3-3.columns, .columns-2-4-4.columns {

		/* where the minus is 1x column-gap divided by 2 columns ( (2/2 = 1 ) */
		width: calc(100% * (1/2) - 2%)
		}

	.card_arrow_1:nth-child(even):not(.cb_list-services .card_arrow_1), .card_arrow_2:nth-child(even) {
		background: var(--white) url("../images/icon-card-arrow-on-light.svg") left 65% bottom 4.5vmin no-repeat;
		background-size: 4vmin;
		}
	
	.card_arrow_1:nth-child(odd), .card_arrow_2:nth-child(odd), .cb_list-services .card_arrow_1:nth-child(even) {
		background: var(--white) url("../images/icon-card-arrow-on-light.svg") right 3vmin bottom 4.5vmin no-repeat;
		background-size: 4vmin;
		}


	/** standalone landing pages */

	.listing .child_quote:first-child {
		margin-bottom: var(--space_huge);

		}

	}

@media screen and (min-width: 601px) and (max-width: 768px) {

	/**
	 * display columns as rows for 1-1-3
	 * Three columns for 2-3-3
	 * body { background-color: Red; }
	 */

	.listing:not(.columns-2-4-4), div.listing, section.listing, ul.listing {

		/* columns between cards specified via parent container */
		column-gap: 2%;
		width: 100%;
		}

	.columns-1-2-2 {
		display: flex;
		flex-wrap: wrap;
		}

	.columns-1-2-2 .column:not(#footer-credit):not(#footer-privacy) { flex: 1 1 49%; }

	.columns-1-2-2 .column figure img {
		width:100%;
		height:auto;
		}

	.columns-1-2-2 #footer-credit { width: calc(100% * (2/3) - 1.333%); }

	.columns-2-3-3 .column, .columns-1-3-3.columns li {

		/* where the minus is 2x column-gap divided by 3 columns ( (2x2)/3 = 1.333 ) */
		width: calc(100% * (1/3) - 1.333%);
		}
	
	.columns-2-4-4 {row-gap: 0.66rem; }

		.columns-2-4-4 .card-stat {

			/* where the minus is 2x column-gap divided by 4 columns ( (2x2)/4 = 1 ) */
			width: calc(47%)
			}

		.columns-2-4-4 .card-stat:nth-child(odd) { border-right: var(--border_card_stat); }

		.columns-1-3-3 .card-stat:not(:last-child) { border-right: var(--border_card_stat); }

	ul.listing.columns-1-1-3.columns {
		display: flex;
		flex-direction: row;
		flex-wrap: rap;
		/* full width */
		width: 100%;
		}

	ul.columns-1-1-3.cards li:nth-child(even) { flex-direction: row-reverse; }

	ul.columns-1-1-3.cards li:nth-child(odd) { flex-direction: row; }


	.columns-1-1-3.cards picture {
		display: flex;
		min-width: 30%;
   		max-width: 30%;

		/* mask image */
		overflow: hidden;
		}

	.columns-1-1-3.cards img {

		/* ensure image fills picture element */
		object-fit: cover;
		/* as long at there is a style that places a border at the top of the image
		 * at other screen widths
		 */
		border-top: none !important
		}

	.columns-1-1-3 .description {
		display: flex;
		flex-flow: column;
		align-content: flex-start;
		}

	.columns-1-2-2 .child_quote:first-child {
		border-right: var(--border_card_stat);
		padding-right: var(--space_small);
		}

	.columns-1-2-2 .child_quote:last-child {
		padding-left: var(--space_small);
		}

	.columns-1-2-2 .child_quote {
		box-sizing: border-box;
		max-width: 40%;
		padding: 0 var(--space_small);
		}

	.columns-1-2-2.columns div {

		/* .columns-1-2-2.columns div affects .contact-method-row */

		flex: 1 1 49%; 
		min-width: 49%
		}

	.columns-1-2-3.columns li {

		/* where the minus is 1x column-gap divided by 2 columns ( (2/2 = 1 ) */
		width: calc(100% * (1/2) - 1%);
		}

	.columns-2-3-3.cards img, .columns-1-2-3.cards img, .columns-2-3-3.cards img, .columns-1-3-3.cards img {
		width: 100%;
		height: auto;
		}

	.card_arrow_1 .description, figure.card_arrow_1 figcaption, .card_arrow_2 .description {
		background: var(--white) url("../images/icon-card-arrow-on-light.svg") right 3vmin bottom 2.4vmin no-repeat;
		background-size: 2.5vmin;
		}

	}

	.description_wrapper {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		flex-wrap: nowrap;
		}


@media screen and (min-width: 769px) {

	/**
	 * Three columns for all card types
	 * body { background-color: Red; }
	 */

	.listing:not(.olumns-2-4-4), div.listing section.listing, ul.listing {

		/* columns between cards specified via parent container */
		column-gap: 2%;
		width: 100%;
		}

	.is-layout-flow {
	
		/* to override unwanted WordPress styles */

		box-sizing: content-box;
		}

	.columns-1-2-2.columns li:not(#footer-credit):not(#footer-privacy), .columns-1-2-2.columns div {

		/* .columns-1-2-2.columns div affects .contact-method-row */

		flex: 1 1 49%; 
		min-width: 49%
		}
	
	.columns-1-2-2 #footer-credit { flex-grow: 6; }

	.columns-1-2-2 .child_quote:first-child {
		border-right: var(--border_card_stat);
		padding-right: var(--space_small);
		}

	.columns-1-2-2 .child_quote:last-child {
		padding-left: var(--space_small);
		}

	.columns-1-2-2 .child_quote {
		box-sizing: border-box;
		max-width: 40%;
		padding: 0 var(--space_small);
		}

	.columns-2-3-3.columns li, .columns-1-1-3.columns li, .columns-1-2-3.columns li, .columns-1-3-3.columns li {

		/* where the minus is 2x column-gap divided by 3 columns ( (2x2)/3 = 1.333 ) */
		width: calc(100% * (1/3) - 1.333%);
		}

	.columns-2-4-4 { column-gap: 0; }

		.columns-2-4-4 .card-stat {

			/* where the minus is 2x column-gap divided by 4 columns ( (2x2)/4 = 1 ) */
			width: calc( 100% * (1/4) - 3px);
			}

		.columns-2-4-4 .card-stat:not(:last-child) { border-right: var(--border_card_stat); }

		.columns-1-3-3 .card-stat:not(:last-child) { border-right: var(--border_card_stat); }

	.card img,.cards img {
		width: 100%;
		height: auto;
		}

	.card_arrow_1 .description, .card_arrow_1 figcaption {
		background: var(--white) url("../images/icon-card-arrow-on-light.svg") right 2vmin bottom 2.8vmin no-repeat;
		background-size: var(--space_extra_small);
		}

	.description_wrapper {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		flex-wrap: nowrap;
		}

	}