/* ============================================================================
 * list row styles for Be More P.U.N.K. - 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> */

	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-direction: row-reverse;
	}

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

		border-radius: var(--wp--preset--spacing--10);
		display: block;
		height: auto;
		width: 100%;
		}

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


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

	.list_rows li { margin-bottom: var(--space_huge); }

	.flex-row-parent:not(#tff_sponsors .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--80) var(--wp--preset--spacing--80) var(--wp--preset--spacing--80);
			}

	}


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

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

	.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;
		}

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

		.flex-row-child:not(.row-reverse .flex-row-child):not(.flex-row-child.no_image) { margin-left: var(--wp--preset--spacing--50); }

		.row-reverse .flex-row-child:not(.row-reverse .flex-row-child.no_image) { margin-right: var(--wp--preset--spacing--50); }

		.flex-row-picture {

			/* prevent image from either being bullied into small space or occupying to big a spacce */

			min-width: 40%;
    		max-width: 60%;
			}


	}