/* ============================================================================
 * cards for Tommy Flowers Foundation - 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
 */


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

 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;

	/* children */

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

    border-radius: var(--wp--preset--spacing--40);

    /* place border inside */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

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

.cards li figure img, .cards li picture img {
	border-radius: var(--wp--preset--spacing--10);
	max-width: 100%;
	height: auto;
	}

	ul.cards li div.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;
        margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30);
		}


/* ----------------------------------------------------------------------------
 * card colourways
 * ----------------------------------------------------------------------------
 *
 * -01 on-dark (white)
 * -02 on-dark (manilla)
 * -03 on-dark (red)
 * -11 on-dark (black)
 *
 * -21 on-light (outline)
 */

.card-cw-01 li { background-color: var(--wp--preset--color--global-white); }

.card-cw-02 li { background-color: var(--wp--preset--color--theme-manilla); }

.card-cw-03 li { background-color: var(--wp--preset--color--theme-red); }

.card-cw-11 li { background-color: var(--wp--preset--color--theme-black-off); }

.card-cw-21 li { border: 3px var(--wp--preset--color--theme-red) solid; }


/* ----------------------------------------------------------------------------
 * card typography
 * --------------------------------------------------------------------------*/

ul.cards li div.description h2 { margin-bottom: var(--wp--preset--spacing--20); }

ul.cards li div.description p.taxonomy-category, div.description p.subheading {margin-bottom: 0 !important }


div.description p:not(p.taxonomy-category):not(ul.cards li div.description p.subheading) { margin: var(--wp--preset--spacing--40) 0 0 0 !important; }


/* ----------------------------------------------------------------------------
 * card arrows and card hover styles
 * --------------------------------------------------------------------------*/


.card-arrow li {
	background-position: left var(--wp--preset--spacing--60) bottom var(--wp--preset--spacing--60);
	background-repeat: no-repeat;
	background-size: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--110);
	}

	.card-arrow.on_light li { background-image: url("../images/icon_card-arrow-on-light.svg"); }

	.card-arrow.on_light li:hover { background-image: url("../images/icon_card-arrow-hover-on-light.svg"); }

	.card-arrow.on_dark li { background-image: url("../images/icon_card-arrow-on-dark.svg"); }

	.card-arrow.on_dark li:hover { background-image: url("../images/icon_card-arrow-hover-on-dark.svg"); }

	.card-arrow li:hover .description > h2 a {

		/* apply link style to heading on card hover */

		text-decoration: underline;
		color: var(--wp--preset--color--theme-hover);
	}