/* ============================================================================
 * cards
 * ============================================================================
 * Be More P.U.N.K. - Theme
 *
 *	
 * .glide is the class that triggers the glide js. all glide carousels must
 * have this class
 * 
 * where: .cards-glide mimicks closely .cards
 * difference: .cards-glide allows glide.js the control it needs of the layout
 * to do: there is scope to tidy up
 */


.glide__track {
	box-sizing: border-box;
	margin-bottom: var(--wp--preset--spacing--70);
	overflow: hidden;
	width: 100%;
	}

ul.cards-glide {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	}

	.cards-glide li.glide__slide {

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

		flex: 0 0 auto;

		/* display content as rows within a column */
		flex-flow: column nowrap;
		
		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: 0 var(--wp--preset--spacing--50) !important;
		max-width: 21rem !important;
		}

	ul.cards-glide .glide__slide {

		/* this to counteract declarations in glide.core.min.js that prevent equal height children */

		display: flex;		  /* allow inner flex children to stretch */
		align-items: stretch;
		height: auto;			/* let flex control the height instead of Glide’s 100% */
		}

	ul.cards-glide .glide__slide > div {

		/* this to counteract declarations in glide.core.min.js that prevent equal height children */

		flex: 1;
		align-self: stretch;
		}

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

		/* removes the unwanted space between bottom of image and closing of picture tag (prevent remove stop) */
		display: block;
		}

		ul.cards-glide li div.description, ul.cards-glide figure figcaption {

			display: flex;
			flex-flow: column wrap;

			/* expand to fill remaining height of parent */
			flex-grow: 1;

			/* children */

			/* display content as rows within a column */
			margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30);
			}

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

			.cards-glide li figcaption ul { padding-left: 0; }

				.cards-glide li figcaption ul li {
					list-style: none;
					margin-left: 0;
					}


div.glide__arrows {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	}

	div.glide__arrows button { position: static; }

	button.glide__arrow {
		
		/* glide arrow basics */

		border: none;
		height: var(--wp--preset--spacing--80);
		width: var(--wp--preset--spacing--80);
		}

		.on_dark button.glide__arrow--right {

			/* right */

			justify-content: flex-end;
			margin-left: var(--wp--preset--spacing--30);

			/* right - default */

			background: url("../images/icon_button-arrow-right-on-dark.svg") right 0 center no-repeat;
			background-size: var(--wp--preset--spacing--80);

			}

			.on_dark button.glide__arrow--right:hover {

				/* right - hover */

				background: url("../images/icon_button-arrow-right-hover-on-dark.svg") right 0 center no-repeat;
				background-size: var(--wp--preset--spacing--80);
				}

		.on_light button.glide__arrow--right {

			/* right */

			justify-content: flex-end;
			margin-left: var(--wp--preset--spacing--30);

			/* right - default */

			background: url("../images/icon_button-arrow-left-on-right.svg") right 0 center no-repeat;
			background-size: var(--wp--preset--spacing--80);

			}

				.on_light button.glide__arrow--right:hover {

					/* right - hover */

					background: url("../images/icon_button-arrow-right-on-light-hover.svg") right 0 center no-repeat;
					background-size: var(--wp--preset--spacing--80);
					}

		
		.on_dark button.glide__arrow--left {

			/* right - default */

			background: url("../images/icon_button-arrow-left-on-light.svg") left 0 center no-repeat;
			background-size: var(--wp--preset--spacing--80);
			}

			.on_dark button.glide__arrow--left:hover {

					/* left - hover */

					background: url("../images/icon_arrow-left-hover-on-dark.svg") left 0 center no-repeat;
					background-size: var(--wp--preset--spacing--80);
					}

		.on_light button.glide__arrow--left {

			/* right - default */

			background: url("../images/icon_arrow-left-on-light.svg") left 0 center no-repeat;
			background-size: var(--wp--preset--spacing--80);
			}

			.on_light button.glide__arrow--left:hover {

					/* left - hover */

					background: url("../images/icon_button-arrow-left-on-light-hover.svg") left 0 center no-repeat;
					background-size: var(--wp--preset--spacing--80);
					}

		

		#glide_controls button { padding: 0; }

		#glide_controls button.glide__arrow--left {

			/* left - on dark override */

			background: url("../images/icon_button-arrow-left-on-light.svg") 0 55% no-repeat;
			background-size: var(--wp--preset--spacing--50);
			}

			#glide_controls button.glide__arrow--left:hover {

				/* left - hover */

				background: url("../images/icon_button-arrow-left-on-light-hover.svg") 0 55% no-repeat;
				background-size: var(--wp--preset--spacing--50);
				}

		#glide_controls button.glide__arrow--right {

			/* left - on dark override */

			background: url("../images/icon_button-arrow-right-on-light.svg") 0 55% no-repeat;
			background-size: var(--wp--preset--spacing--50);
			}

			
			#glide_controls button.glide__arrow--right:hover {

				/* left - hover */

				background: url("../images/icon_button-arrow-right-on-light-hover.svg") 0 55% no-repeat;
				background-size: var(--wp--preset--spacing--50);
				}


	
		/* new glide button styles */

		#glide_controls { margin-bottom: var(--wp--preset--spacing--90); }

			#glide_controls button.glide__arrow--left.glide-button-surface-dark {
				background: var(--wp--preset--color--theme-black-off) url("../images/icon_button-arrow-left-on-dark.svg") center no-repeat;
				background-size: var(--wp--preset--spacing--60);
				}

			#glide_controls button.glide__arrow--left.glide-button-surface-dark:hover {
				background: var(--wp--preset--color--theme-green) url("../images/icon_button-arrow-left-on-dark.svg") center no-repeat;
				background-size: var(--wp--preset--spacing--60);
				}


			#glide_controls button.glide__arrow--right.glide-button-surface-dark {
				background: var(--wp--preset--color--theme-black-off) url("../images/icon_button-arrow-right-on-dark.svg") center no-repeat;
				background-size: var(--wp--preset--spacing--60);
				}

			#glide_controls button.glide__arrow--right.glide-button-surface-dark:hover {
				background: var(--wp--preset--color--theme-green) url("../images/icon_button-arrow-right-on-dark.svg") center no-repeat;
				background-size: var(--wp--preset--spacing--60);
				}


	/* hide the previous and next wording */

	button.glide__arrow span {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important;
		}


		button.glide__arrow span:focus {
			background-color: #eee;
			clip-path: none;
			color: #444;
			display: block;
			font-size: 1em;
			height: auto;
			left: 5px;
			line-height: normal;
			padding: 15px 23px 14px;
			text-decoration: none;
			top: 5px;
			width: auto;
			z-index: 100000;
		}