/* ============================================================================
 * list row styles
 * ============================================================================
 * Sketch Club Theme
 */

ul.list_rows {

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

	display: flex;

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

	padding-left: 0
	}

.list_rows li {

	/* <ul class="list_rows"> > <li>
	 *
	 * also confers <h2> link styles on .sb_club_notices
	 */

	align-items: center;

	/* expand to fill width: flex-grow, flex-shrink, flex-basis */
	flex: 0 0 100%;
	}


/* ----------------------------------------------------------------------------
 * .flex-row-parent
 * ----------------------------------------------------------------------------
 * use:								basic structure for a row
 * extensions:
 *
 *		- .list_rows				<-- currently only confers styles on ul.list_rows li .flex-row-picture
 *		- .row						<-- image on right (flex-direction: row;) default state that should never have to be specified
 *		- .reverse-rows				<-- applied at <ul> level
 *		- .row-reverse				<-- image on left (singular)
 */

.flex-row-parent {
	display:flex;
	}

	.flex-row-child {
		flex-grow: 2;
		}


	.flex-row-picture img {

		/* when accopanied by 'margin-below: 0 !important'
		 * removes the unwanted space between bottom of image and closing of picture tag
		 */

		display: block;
		height: auto;
		width: 100%;
		}

.row-reverse {
	
	/*
	 * only for use in club-blocks
	 * extends:			.flex-row-parent
	 */
	
	flex-direction: row-reverse;
	}


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

	.list_rows li { margin-bottom: var(--wp--preset--spacing--90); }

	.flex-row-parent {

		/* stack the content of .flex-row-parent on mobile */

		flex-direction: column-reverse;
		justify-content: center;
		}

		.flex-row-child.description { width: 100%; }

		.flex-row-picture { 
			align-self: center;
			margin: 0 var(--wp--preset--spacing--70) var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
			}

	}


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

	.list_rows li:not(.list_rows.sb_club_notices li):not(#sb_events li:last-of-type) { margin-bottom: var(--wp--preset--spacing--110); }

	.reverse_rows li {

		/* 
		* .reverse_rows
		*
		* extends:			<ul> .listing.list_rows
		* acts upon: 		.flex-row-parent
		* effect:			should only 1) reverse direction of the flow of child <li> 2) change the side of the .flex-row-image's margin
		* 
		* this condition is only required on tablet and desktop
		*/

		flex-direction: row-reverse;
		}

	.flex-row-parent { align-items: center; }


	}