/* ============================================================================
 * cards
 * ============================================================================
 *
 * listings formatted in flexbox divs as formatting content within lists was
 * proved more trouble that it was worth.
 * where:
 * .listing
 * 	- contaner for cards
 * .listing-colums-x-y-z
 * 	- number of columns within a .listing container
 *
 * .card
 * 	- universal characteristics of a card
 * .listing-card
 * 	- characteristics of a listing card
 * 	- there is currently litte reason to have both .card and .listing-card
 *
 *  .card_style_x {}
 *
 *	.card_text_x {}
 *
 *	.card_image_x {}
 *
 *	.card_arrow_x {}
 *
 *
 * .card-cw-n
 * 	- broadly the colours and visual layout
 * .card-arrow
 * 	- link arrow indicator
 * .card-arrow-cw-n
 * 	- style of the arrow
 *
 * css image filter generator
 * https://www.cssfiltergenerator.com/
 *
 */
				

/* ----------------------------------------------------------------------------
 * cards in general
 * ----------------------------------------------------------------------------
 *
 * .cards {} is used to reference child <li> elements.
 */

.card, .card_with_pillar {

	/**
	 * global characteristics of a card
	 */

	box-shadow: var(--box_shadow_card);
	}

ul.cards {

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

	display: flex;

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

	padding-left: 0
	}

	.cards li {

		/** <ul class="cards"> --> <li> */

		display: flex;

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

		margin-bottom: var(--space_normal);
		}

	ul.card_shadow li:not(ul.card_shadow li div ul li) { box-shadow: var(--box_shadow_card); }

	ul.card_radius-full li { border-radius: var(--border_radius_card); }

	ul.card_radius-bottom li { border-radius: 0 0 var(--border_radius_card) var(--border_radius_card); }


/* ----------------------------------------------------------------------------
 * card colours
 * ----------------------------------------------------------------------------
 */

.card_style_1 {

	/* white background
	 *
	 * pair with:	.on_light
	 *
	 * work article
	 * when displayed at foot of page, they are in a box
	 * div --> image + heading + paragraph + subhead - white over image & toned down image
	 * top left | top right | bottom right | bottom left
	 */

	background-color: var(--theme_background);
	border-radius: 0 0 var(--border_radius_card) var(--border_radius_card);
	}

.card-cw-01 li {

	/* white background
	 *
	 * pair with:	.on_light
	 * */

	background-color: var(--theme_background);
	border-radius: 0 0 var(--border_radius_card) var(--border_radius_card);
	}

.card-cw-02 li {

	/** white off
	 *
	 * pair with:	.on_light
	 *
	 * flat cards
	 */

	background-color: var(--theme_white_off);
	box-sizing: border-box;
	padding: var(--space_extra_large) var(--space_extra_large) var(--space_extra_large) var(--space_extra_large);
	}

		.card-cw-02.clickable-children .description {
			background: url("../images/icon-card-arrow-on-light.svg") left 0 bottom 0 no-repeat;
			background-size: var(--space_tiny);
			}

		.card-cw-02.clickable-children:hover .description {
			background: url("../images/icon-card-arrow-on-light-hover.svg") left 0 bottom 0 no-repeat;
			background-size: var(--space_tiny);
			}


.card-cw-03 li {

	/** plain grey card
	  *
	 * pair with:	.on_light
	 *
	 */

	background-color: var(--theme_tone_darker);
	}

.card-cw-21 li {

	/* --theme_dark background
	 *
	 * pair with:	.on_dark
	 *
	 * child sevice on a services category page
	 * figure --> image + caption - white over image & toned down image
	 */

	background-color: var(--theme_dark);
	border-radius: var(--border_radius_card);
	box-sizing: border-box;
	padding: var(--space_normal);
	}



	/* declare cards as clickable:
	 * at parent level: .clickable-children
	 * at card level: .clickable-this
	 */

	.clickable-child-card .card_style_4 p,
	.clickable-child-card .card-cw-20 p {
		padding-bottom: var(--space_extra_large);
		}

		.clickable-child-card .card_style_4 .description,
		.clickable-child-card .card-cw-02 .description {
			background: url("../images/card-arrow-theme-dark.svg") left 0 bottom 0 no-repeat;
			background-size: var(--space_tiny);
			}

		.clickable-child-card .card_style_4:hover .description,
		.clickable-child-card .card-cw-02:hover .description  {
			background: url("../images/icon-card-arrow-on-light.svg") left 0 bottom 0 no-repeat;
			background-size: var(--space_tiny);

			}


	/* set hover styles for clickable cards */

	.clickable-children li:hover a, .clickable-children li:hover h2 a, .clickable-this:hover a {
		color: var(--link_hover);
		text-decoration: underline;
		}

	.card_style_4 .description h3 a:link, .card_style_4 .description h3 a:visited,
	.card-cw-02 .description h3 a:link, .card-cw-02 .description h3 a:visited { text-decoration: none; }	

	.card_style_4 .description h3 a:hover,
	.card-cw-02 .description h3 a:hover { text-decoration: underline; }




	.card_style_4 .description h2, .card_style_4 .description h2 a,
	.card-cw-02 .description h2, .card-cw-02 .description h2 a { font-size: var(--fs_large); }
	
	.card-arrow.arrow-on-light .description {
		background: url("../images/icon-card-arrow-on-light.svg") left var(--space_extra_small) bottom var(--space_small) no-repeat;
		background-size: var(--space_tiny);
		}


/* ----------------------------------------------------------------------------
 * card inners
 * ----------------------------------------------------------------------------
 */

ul.cards .description:not(.card_style_4 .description):not(.card-cw-02 .description):not( ul.cards.copy-inset-medium .description ), figure.card figcaption {
	padding: var(--space_extra_small);
	}


ul.cards.copy-inset-small li .description { padding: var(--space_small); }

ul.cards.copy-inset-medium li .description { padding: var(--space_small) var(--space_large) }


div.card_arrow_1 div.description, figure.card_arrow_1 figcaption {
	padding-bottom: var(--space_extra_small);
	}

	.card_with_pillar div.description_wrapper {
		display: flex;
		align-self: stretch;
		}
	
.card_with_pillar div.description {
	display: flex;
	align-self: stretch;
	padding: var(--space_extra_small);
	}
		


/* ----------------------------------------------------------------------------
 * card text
 * ----------------------------------------------------------------------------
 */

.card_text_small div.description p {
	font-size: var(--fs_small);
	line-height: var(--lh_small);
	}

.card_text_small div.description p:not(.card_text_small div.description p:last-of-type):not(.subheading):not(p.card-project-tag):not(p.card-service-tag) {
	margin-bottom: var(--space_small);
	}

	.cards.card-arrow .description p {
		margin-bottom: var(--space_normal);
		}

.card figcaption { text-align: left; }

.card_text_small p:nth-of-type(1):not(p.card_subheading-pillar) { flex-grow: 1; }

.card p:not(.card_text_small p):not(:last-child):not(.card-stat p) { margin-bottom: var(--space_small); }

.main ul.cards .description h2, .description h3 {
	font-family: var(--font_heading_main);
	font-size: var(--fs_large-part_step);
	font-weight: var(--fw_heading_subsidiary);
	line-height: var(--lh_normal);
	}

.description h2, .description h3 { margin-bottom: var(--space_small); }

.card_text_small caption { color: var(--black_off); }

.card_text_small p { color: var(--black_off); }

p.card_subheading-pillar, .cb_list-services p.card_subheading-pillar {
	color: var(--black_off);
	font-weight: var(--fw_bold);
	margin-bottom: 0;
	padding: var(--space_miniscule) var(--space_large);
	}

.card_style_2 div.description p.subheading { margin-right: var(--space_small); }

.card_style_3 p, .card-cw-21 p {
	color: var(--theme_background);
	}


p.card-service-tag { margin-bottom: 0 !important }

	p.card-project-tag span, p.card-service-tag span {
		background-color: var(--theme_tone_darker);
		border-radius: 1rem;
		display: inline-block;
		padding: 0.2rem 0.8rem;
		}

		p.card-project-tag span a:link, p.card-project-tag span a:visited { text-decoration: none; }

		p.card-project-tag span a:hover { text-decoration: underline; }


/* ----------------------------------------------------------------------------
 * card images
 * ----------------------------------------------------------------------------
 */

.wp-block-image { margin-bottom: 0 !important }


.cards picture, .cards figure {

	/* the 'before' pseudo element is positioned absolutely within this element */
	position: relative;
	}


.cards img {

	/* removes the unwanted space between bottom of image and closing of picture tag */
	display: block;
	}


.cards a img:hover {
	opacity: 0.8;
	transition: opacity .55s ease-in-out;
	-moz-transition: opacity .55s ease-in-out;
	-webkit-transition: opacity .55s ease-in-out;
	}

	.image-style-01 picture:before, .image-style-02 picture:before, .image-style-02 figure:before, .card_image_3 picture:before {

		/* place colour tone over images */

		content: "";
		border-radius: var(--border_radius_card) var(--border_radius_card) 0 0 ;
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		transition: all .3s linear;
		z-index: 3;
		}

/**
 * image-style-01 - case study images
 * -------------------------------------------------------------------------
 * warm gradient with bottom inner shadow
 */


.image-style-01 picture:before {

	/* where:
	* the greater the angle value, the closer to horizontal the hightlight
	* colours - bottom  | middle | top
	*/

	background: linear-gradient(355deg, rgba(80,80,80,0.25) 0%, rgba(225,225,225,0) 40%, rgba(200,200,200,0.18) 70%);
	mix-blend-mode: multiply;

	/* horizontal | Vertical | blur | spread radius */
	-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_light) inset;
	-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_light) inset;
	box-shadow: 0px -10px 10px -10px var(--image_shadow_light) inset;
	}

/**
 * cimage-style-02 - services images
 * -------------------------------------------------------------------------
 * dark blue with bottom inner shadow
 */


.image-style-02 picture:before, .image-style-02 figure:before {
	background: rgba(87,141,246,1);
	mix-blend-mode: color;

	/* horizontal | Vertical | blur | spread radius */
	-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	}

	.image-style-02 picture, .image-style-02 figure {
		/* border-top: var(--border_image_colour_flash); */
		background: rgba(87,141,246,1);

		/* horizontal | Vertical | blur | spread radius */
		-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
		-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
		box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;

		}

		.image-style-02 picture img, .image-style-02 figure img {
			filter: invert(1) opacity(66%);
			border-radius: var(--border_radius_card) var(--border_radius_card) 0 0 ;
			}

/**
 * image-style-03
 * -------------------------------------------------------------------------
 * white border around images
 * used on --> templates/category-services.html
 */


.image-style-03 picture img { border-radius: var(--border_radius_card) var(--border_radius_card) 0 0 ; }


/**
 * image-style-04 - not used
 * -------------------------------------------------------------------------
 * dark blue with a kind of negative effect
 */

.image-style-04 picture:before {
	background: rgb(61, 20, 123);
	mix-blend-mode: color;

	/* horizontal | Vertical | blur | spread radius */
	-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	}

	.image-style-04 picture {
		/* border-top: var(--border_image_colour_flash); */
		background: rgb(61, 20, 123);

		/* horizontal | Vertical | blur | spread radius */
		-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
		-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
		box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;

		}	

		.image-style-04 picture img {
			filter: invert(1) opacity(66%);
			border-radius: var(--border_radius_card) var(--border_radius_card) 0 0 ;
			}



/* LEGACY */
/* LEGACY */
/* LEGACY */


.card_image_1 picture:before, .card_image_2 picture:before, .card_image_2 figure:before {

	/* place colour tone over images */

	content: "";
	border-radius: var(--border_radius_card) var(--border_radius_card) 0 0 ;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: all .3s linear;
	z-index: 3;
	}

.card picture, .card figure {

	/* the 'before' pseudo element is positioned absolutely within this element */
	position: relative;
	}


.card img {

	/* removes the unwanted space between bottom of image and closing of picture tag */
	display: block;
	}


.card a img:hover {
	opacity: 0.8;
	transition: opacity .55s ease-in-out;
	-moz-transition: opacity .55s ease-in-out;
	-webkit-transition: opacity .55s ease-in-out;
	}


/**
 * card_image_1 - project listing images
 * -------------------------------------------------------------------------
 */


.card_image_1 picture:before, .card_image_2 figure:before {

	/* where:
	* the greater the angle value, the closer to horizontal the hightlight
	* colours - bottom  | middle | top
	*/

	background: linear-gradient(355deg, rgba(80,80,80,0.25) 0%, rgba(225,225,225,0) 40%, rgba(200,200,200,0.18) 70%);
	mix-blend-mode: multiply;

	/* horizontal | Vertical | blur | spread radius */
	-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_light) inset;
	-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_light) inset;
	box-shadow: 0px -10px 10px -10px var(--image_shadow_light) inset;
	}


/**
 * card_image_2 - services images
 * -------------------------------------------------------------------------
 */


.card_image_2 picture:before, .card_image_2 figure:before {
	background: rgba(87,141,246,1);
	mix-blend-mode: color;

	/* horizontal | Vertical | blur | spread radius */
	-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	}

	.card_image_2 picture, .card_image_2 figure {
		/* border-top: var(--border_image_colour_flash); */
		background: rgba(87,141,246,1);

		/* horizontal | Vertical | blur | spread radius */
		-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
		-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
		box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;

		}

		.card_image_2 picture img, .card_image_2 figure img {
			filter: invert(1) opacity(66%);
			border-radius: var(--border_radius_card) var(--border_radius_card) 0 0 ;
			}

/**
 * card_image_3
 * -------------------------------------------------------------------------
 * used on --> templates/category-services.html
 *
 * previously:
 *
 * picture::before
 * background: rgb(208, 211, 212);
 * mix-blend-mode: color;
 */


.card_image_3 picture img { border-radius: var(--border_radius_card) var(--border_radius_card) 0 0 ; }

/**
 * card_image_4 - not used
 * -------------------------------------------------------------------------
 */

.card_image_4 picture:before {
	background: rgb(61, 20, 123);
	mix-blend-mode: color;

	/* horizontal | Vertical | blur | spread radius */
	-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
	}

	.card_image_4 picture {
		/* border-top: var(--border_image_colour_flash); */
		background: rgb(61, 20, 123);

		/* horizontal | Vertical | blur | spread radius */
		-webkit-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
		-moz-box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;
		box-shadow: 0px -10px 10px -10px var(--image_shadow_dark) inset;

		}	

		.card_image_4 picture img {
			filter: invert(1) opacity(66%);
			border-radius: var(--border_radius_card) var(--border_radius_card) 0 0 ;
			}

/* ----------------------------------------------------------------------------
 * card links
 * ----------------------------------------------------------------------------
 */


.cards h2 a:link, .cards h3 a:link, .cards h4 a:link, .cards h2 a:visited, .cards h3 a:visited, .cards h4 a:visited {
	color: var(--link_visited_cw_1);
	text-decoration: none;
	}

.cards h2 a:hover, .cards h3 a:hover, .cards h4 a:hover {
	color: var(--link_hover);
	text-decoration: underline;
	}


/* LEGACY */
/* LEGACY */
/* LEGACY */


.card_text_small h2 a:link, .card_text_small h3 a:link, .card_text_small h4 a:link, .card_style_2 h3 a:link, h2 a:link {
	text-decoration: none;
	}

.card_text_small .description p a:visited, .card_style_2 p .description a:visited, .card_text_small figure a:visited, .card_style_2 figure a:visited {
	color: var(--link_visited_cw_1);
	text-decoration: none;
	}

.card_text_small h4 a:visited { color: var(--link_active_cw_1); }

.card_with_pillar .description h3 a:link, .card_with_pillar .description h3 a:visited { color: var( --theme_dark ); }

.card .description h2 a:hover, .card .description h3 a:hover, .card .description h4 a:hover, .card .description p a:hover, .card_with_pillar .description h3 a:hover, .card_with_pillar .description p a:hover, .card figcaption p a:hover {
	color: var(--link_hover);
	text-decoration: underline;
	}

	.card:hover a, .card_with_pillar:hover a {

		/* hover style for card h2 but not p */
	
		text-decoration: underline;
		color: var(--link_hover) !important
		}