/* Flag Style */
.style-square.label-position-flag .block-quick-links__inner span {
	position: absolute;
	top: 16px;
	left: 0px;
	z-index: 2;
}
/* End Flag Style */

/* Centered Style */
.style-square.label-position-centered .block-quick-links__inner a {
	display: grid;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
}

.style-square.label-position-centered .block-quick-links__inner img {
	grid-area: 1 / 1 / 2 / 2;
	z-index: 1;
}

.style-square.label-position-centered .block-quick-links__inner span {
	max-width: calc( 100% - 40px ); /* clear of the 12px hover frame on both sides */
	margin: 0 auto;
	grid-area: 1 / 1 / 2 / 2;
	z-index: 3; /* over the hover frame */
	text-wrap: wrap;
}
/* End Centered Style */

/* Lower Style */
.style-square.label-position-lower .block-quick-links__inner span {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
}
/* End Lower Style */

/* Bottom Style */
.style-square.label-position-bottom .block-quick-links__inner span {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
}
/* End Bottom Style */

/* Corner Style */
.style-square.label-position-corner .block-quick-links__inner span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: max-content;
}
/* End Corner Style */

/* Under Style */
.style-square.label-position-under .block-quick-links__inner span,
.style-circle .block-quick-links__inner span {
	background: transparent;
	color: inherit;
}
/* End Under Style */


.block-quick-links {
	--cwp-columns: 2;
	--cwp-gap: var(--wp--custom--layout--padding);
	overflow: hidden;
}

/* The optional title above the tiles (render.php prints nothing when it's left empty) */
.block-quick-links__header:has(.wp-block-heading, .wp-block-paragraph) {
	margin-bottom: var(--wp--custom--layout--block-gap);
}

.block-quick-links__inner {
	display: grid;
	grid-template-columns: repeat( var(--cwp-columns), minmax( 0, 1fr ) );
	gap: var(--cwp-gap);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* The label on each tile: a linen tag with Brass Dark caps (the site's label caps). On hover or
   keyboard focus the tag turns dark green with ivory words and the photo gets the shared brass
   frame (_blocks-core.scss, "Brass photo frame"), so the tile reads as one link. */
.block-quick-links__inner span {
	display: inline-block;
	padding: 9px 14px;
	background: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--custom--caps--label);
	letter-spacing: var(--wp--custom--caps--tracking-label);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
	transition: background-color var(--wp--custom--transition--speed) ease, color var(--wp--custom--transition--speed) ease;
}

.style-square:not(.label-position-under) .block-quick-links__inner a:is(:hover, :focus-visible) span {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}



.block-quick-links__inner a {
	color: var(--wp--preset--color--primary);
	display: block;
	position: relative;
	font-weight: 700;
	text-decoration: none;
	z-index: 2;
}

.style-square:not(.label-position-under) .block-quick-links__inner a {
	color: var(--wp--preset--color--primary);
}

.block-quick-links__inner img {	z-index: 1;
	width: 100%;
	aspect-ratio: var(--wp--custom--quick-links--aspect-ratio);
	object-fit: cover;
}

.block-quick-links.style-circle {
	--cwp-columns: 3;
}

.block-quick-links.style-circle img {
	border-radius: 50%;
	aspect-ratio: 1;
}

.style-circle .block-quick-links__inner {
	text-align: center;
}

.layout-flex .block-quick-links__inner a {
	flex-basis: 150px;
	flex-grow: 1;
}

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

	.block-quick-links {
		--cwp-gap: 16px;
	}

	.block-quick-links.style-circle {
		--cwp-columns: 4;
	}

	.layout-flex .block-quick-links__inner {
		display: flex;
	}
}

@media only screen and (max-width: 900px) {
	.layout-flex .block-quick-links__inner {
		flex-wrap: wrap;
	}
}
@media only screen and (min-width: 900px) {
	.block-quick-links {
		--cwp-columns: 4;
	}

	.block-quick-links.style-circle {
		--cwp-columns: 6;
	}
}