/* ============================================================================
 * cards
 * ============================================================================
 * Sketch Club Theme
 *
 * where:
 * ul.cards
 * 	- contaner for cards
 *
 * .listing-columnns-x-y-z
 * 	- number of columns within a .listing container
 *
 * ul.cards li
 * 	- universal characteristics of a card
 *
 * .card-cw-n
 * 	- broadly the colours and visual layout
 *
 * .card-arrow
 * 	- link arrow indicator
 *
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * css image filter generator
 * https://www.cssfiltergenerator.com/
 */


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

 ul.cards, ul.cards_sp {

	/**
	 * 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:not(#sb_events li) {

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

	display: flex;

	/* children */

	/* 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(--wp--preset--spacing--60);
	}

.columns_sp li { margin-bottom: var(--wp--preset--spacing--110); }

	.cards .description, .cards figure figcaption {

		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 colours
 * ----------------------------------------------------------------------------
 */

.card-cw-01 li {

	/* 1. White */
	background-color: var(--wp--preset--color--global-white);
	}

.card-cw-02 li {

	/* off white dark background */
	background-color: var(--wp--preset--color--white-warm-light);
	}

.card-cw-21 li {

	/* border: keyline on white */
	border: var(--wp--custom--border-meta);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	}

	.card-cw-21 h2, .card-cw-21 h3 {
		
		/* counteract the effect of the line height */
		margin: -0.5rem 0 0 0;
		}

	.card-cw-21 h2 {

		/* make h2s the same size as h3s */
		font-size: var(--wp--preset--font-size--fs-large);
		line-height: var(--wp--custom--lh-large);
		}

	.card-cw-21 li p:last-of-type {
		margin-bottom: 0 !important
		}

	.card-cw-21 p {
		
		/* break email address on skeching archives page */
		overflow-wrap: break-word;
		}

	.card-cw-21 dl {
	
		/* replacement for the correct line height, use of which pushes the heading out of aligment with the card top */
		margin-top: var(--wp--preset--spacing--60);
		}

.card-cw-sp li {

	/*is this used anywhere? */

	/* sketch pad */
	background-color: var(--wp--preset--color--global-white);
	margin-left: 0;
	}


/* ----------------------------------------------------------------------------
 * card types
 * ----------------------------------------------------------------------------
 * 
 * .card-child-pages li
 * .card-article li
 * .card-event li
 * .card-sketch li
 * .card-copy-box li
 */


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

.event_content_wrapper {
	display: flex;

	/* children */

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

.inset-card-none div.description{

	/* event and sketch pad */
	margin-top: var(--wp--preset--spacing--50);
	padding: 0 0 var(--wp--preset--spacing--50) 0;
	}

.inset-card-small .description { 
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	}

.inset-card-medium .description, .card-copy-box.inset-card-medium li { 
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}


.columns_sp div.description {

	/* sketch pad */
	margin-top: var(--wp--preset--spacing--60);
	padding: 0 0 var(--wp--preset--spacing--50) 0;
	}


/* ----------------------------------------------------------------------------
 * .card-arrow
 * ----------------------------------------------------------------------------
 * apply an arrow background image to cards
 *
 * all applications are via 'ul.card-arrow li'
 * which is set by break point
 */

.card-arrow .description, .card-arrow figure figcaption, #sb_events .clickable-this .event_content_wrapper {
	padding-bottom: var(--wp--preset--spacing--40);
	}

.card-arrow .description p:last-of-type:not(p.taxonomy-category):not(p.wp-block-post-excerpt__excerpt) {

	/* not: sketch pad cards */
	margin-bottom: var(--wp--preset--spacing--70);
	}

ul#sb_events li .clickable-this.event_content_wrapper { padding-bottom: var(--wp--preset--spacing--50); }

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

	/** 'mobile' */
	
	#sb_events li {
		
		/* expand to fill width: flex-grow, flex-shrink, flex-basis
		flex: 0 0 100%; */
		margin: var(--wp--preset--spacing--70);
		}


	.card-arrow figcaption {
		background: url("../images/icon_card-arrow-on-light.svg") left 3vmin bottom 3vmin no-repeat;
		background-size: 3vmin;
		}

	.card-arrow.inset-card-none .description {
		background: url("../images/icon_card-arrow-on-light.svg") left 0 bottom 3vmin no-repeat;
		background-size: 3vmin;
		}
	
	.card-arrow.inset-card-medium .description {
		background: url("../images/icon_card-arrow-on-light.svg") left var(--wp--preset--spacing--60) bottom 3vmin no-repeat;
		background-size: 3vmin;
		}

	.card-arrow.columns_sp .description, ul#sb_events li .clickable-this.event_content_wrapper {
		background: url("../images/icon_card-arrow-on-light.svg") left 0 bottom 3vmin no-repeat;
		background-position: left 0 bottom 3vmin no-repeat;
		background-size: 3vmin;
		}
	
		.clickable-child-card li:hover > .description:not(.clickable-child-card.columns_sp li:hover > .description), .card-arrow li:hover > .description, ul#sb_events li .clickable-this.event_content_wrapper:hover {
			background-image: url("../images/icon_card-arrow-hover.svg");
			background-position: left 3vmin bottom 3vmin no-repeat;
			background-size: 3vmin;
			}

		.clickable-child-card.columns_sp li:hover > .description {
			background-image: url("../images/icon_card-arrow-hover.svg");
			background-position: left 0 bottom 3vmin no-repeat;
			background-size: 3vmin;
		 	}

	}


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

	/** 'tablet' */

	.card-arrow figcaption {
		background: url("../images/icon_card-arrow-on-light.svg") left var(--wp--preset--spacing--60) bottom 2.4vmin no-repeat;
		background-size: 2.5vmin;
		}

	.card-arrow.inset-card-medium .description {
		background: url("../images/icon_card-arrow-on-light.svg") left var(--wp--preset--spacing--60) bottom 2.4vmin no-repeat;
		background-size: 2.5vmin;
		}

	.card-arrow.columns_sp .description, ul#sb_events li .clickable-this.event_content_wrapper {
		background: url("../images/icon_card-arrow-on-light.svg") left 0 bottom 2.4vmin no-repeat;
		background-size: 2.5vmin;
		}

		.clickable-child-card li:hover > .description:not(.clickable-child-card.columns_sp li:hover > .description), .card-arrow li:hover > .description, ul#sb_events li .clickable-this.event_content_wrapper:hover {
			background-image: url("../images/icon_card-arrow-hover.svg");
			background-position: left 1.9vmin bottom 2.4vmin no-repeat;
			background-size: 2.5vmin;
			}

		.clickable-child-card.columns_sp li:hover > .description {
			background-image: url("../images/icon_card-arrow-hover.svg");
			background-position: left 0 bottom 2.4vmin no-repeat;
			background-size: 2.5vmin;
			}

	}


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

	/** 'large tablet' and 'desktop' */

	.card-arrow figcaption {
		background: url("../images/icon_card-arrow-on-light.svg") left 1.9vmin bottom 1.9vmin no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}

	.card-arrow.inset-card-medium .description, .card-arrow.inset-card-small .description {
		background: url("../images/icon_card-arrow-on-light.svg") left var(--wp--preset--spacing--60) bottom 1.9vmin no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}

		.card-arrow.inset-card-medium li:hover > .description, .card-arrow.inset-card-small li:hover > .description {
			background-image: url("../images/icon_card-arrow-hover.svg");
			background-position: left var(--wp--preset--spacing--60) bottom 1.9vmin;
			background-size: var(--wp--preset--spacing--40);
			}

	.card-arrow.columns_sp .description, .sb_block-list-articles .description, ul#sb_events li .clickable-this.event_content_wrapper {
		background: url("../images/icon_card-arrow-on-light.svg") left 0 bottom 2.2vmin no-repeat;
		background-size: var(--wp--preset--spacing--40);
		}

		.clickable-child-card.columns_sp li:hover > .description, .sb_block-list-articles .description:hover, ul#sb_events li .clickable-this.event_content_wrapper:hover {
			background-image: url("../images/icon_card-arrow-hover.svg");
			background-position: left 0 bottom 2.2vmin;
			background-size: var(--wp--preset--spacing--40);
			}

		.card-arrow.inset-card-none li:hover > .description {
			background: url("../images/icon_card-arrow-hover.svg") left 0 bottom 2.2vmin no-repeat;
			background-size: var(--wp--preset--spacing--40);
			}

	}


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

.sb_block-list-chld-pages .description h2 {
	font-size: var(--wp--preset--font-size--fs-large);
	line-height: var(--wp--custom--lh-large);
	}

.sb_block-list-articles h2 { line-height: var(--wp--custom--lh-large-part-step); }

.cards figcaption { text-align: left; }

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

	/* to ensure text wraps */
	display: inline-block;
	overflow-wrap: break-word;
	text-wrap: wrap;
	word-wrap: break-word;
	width: 100%;
	}


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

.cards img {

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

	width: 100%;
	height: auto;
	}

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

	.sp_listing_thumbnail:not(.sb_block-list-articles .sp_listing_thumbnail) {

		/* the image masking in sketch pad listings does not play nicely with a
		 * margin applied to the <figure>, so the margin must instead be applied
		 * to this div
		 */

		/* excluding sketch pad list as the whole <li> is inset */

		margin: var(--wp--preset--spacing--70);
		}

	

	}
	


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

	/** 'tablet' */

	.cards img {

		/* force landscape images to fill the height of the picture element */
		min-height: 100%;
		}

	}