/*
 * Gutenberg Utility Classes
 *
 * Drop these into a block's Additional CSS Class(es) field. Named after the
 * property they set so the markup reads without a lookup.
 *
 * Breakpoints (WordPress owns these numbers, expect to revisit)
 *   mobile-max 781px | desktop-min 782px | tablet-max 960px | phone-max 599px
 */

.flex {
	display: flex;
}
.flex-col {
	flex-direction: column;
}
.flex-grow {
	flex-grow: 1;
}
.wp-block-columns.align-center {
	align-items: center;
}
.justify-center {
	justify-content: center;
}
.space-evenly {
	justify-content: space-evenly !important;
}
.align-items-flex-start {
	align-items: flex-start;
}
.align-items-flex-end {
	align-items: flex-end;
}
.align-self-stretch {
	align-self: stretch;
}

.position-absolute {
	position: absolute;
}
.position-relative {
	position: relative;
}
.nowrap {
	white-space: nowrap;
}
.object-fit-cover img {
	object-fit: cover;
}

/* Use with row blocks. */
.img-max-width-none img {
	max-width: none;
}

.border-radius {
	border-radius: 12px;
}
.border-radius img {
	border-radius: 10px;
}
.box-shadow {
	box-shadow: 0 0 18px 10px rgba(0, 0, 0, .05);
}
.neg-top {
	margin-top: -90px !important;
}
.width-100 {
	width: 100%;
}
.width-100 img {
	width: 100% !important;
}
.z-index {
	z-index: 1;
}

/* Tablet range, which the editor still has no control for. */
@media (min-width: 782px) and (max-width: 960px) {

	.tablet-hide {
		display: none !important;
	}
	.tablet-justify-center {
		justify-content: center !important;
	}

}

/* Mobile range, which the editor still has no control for. */
@media (max-width: 781px) {

	.mobile-hide {
		display: none !important;
	}
	.mobile-flex-row {
		flex-direction: row !important;
	}
	.mobile-flex-col {
		flex-direction: column !important;
	}
	.mobile-flex-100 {
		flex-basis: 100% !important;
	}
	.mobile-justify-center {
		justify-content: center !important;
	}
	.mobile-justify-space-between {
		justify-content: space-between !important;
	}
	.mobile-align-center {
		align-items: center !important;
	}
	.mobile-order-first {
		order: -1;
	}
	.mobile-order-last {
		order: 2;
	}

	/* Generally for images. */
	.mobile-aligncenter {
		float: none !important;
		text-align: center;
		margin-inline-start: auto !important;
		margin-inline-end: auto !important;
	}

}

/* Blocks cannot set per-breakpoint defaults yet, so this undoes desktop
   alignment choices on small phones. */
@media (max-width: 599px) {

	.mobile-ignore[class*='has-text-align'] {
		text-align: inherit !important;
	}
	.mobile-ignore[class*='is-content-justification'] {
		justify-content: center !important;
	}
	.mobile-ignore p {
		text-align: center !important;
	}
	.mobile-ignore > figure {
		float: none !important;
		margin: 0 auto !important;
	}

}