/* Quick Links Block */

/*
alpha : Images
beta : Text
gamma : Image Collage
*/

.block-quick-links {

}

.block-quick-links .block-quick-links__header {
	--wp--style--block-gap: 5px; /* override spacing */
	text-align: center;
}

.block-quick-links .block-quick-links__header > *:last-child {
	margin-bottom: 16px;
}

.block-quick-links .block-quick-links__header h2 {
	font-size: var(--wp--preset--font-size--huge);
	margin-bottom: 5px;
}

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

.block-quick-links .block-quick-links__inner span {
	display: block;
	line-height: var(--wp--custom--line-height--small);
}

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

/* alpha : Images ------------------------------------------------------ */
.block-quick-links:is(.style-alpha) .block-quick-links__inner {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.block-quick-links:is(.style-alpha) img {
	border-radius: 50%;
	aspect-ratio: 1/1;
}

.block-quick-links:is(.style-alpha) .block-quick-links__inner a {
	text-transform: uppercase;
	color: black;
}

.block-quick-links:is(.style-alpha) .block-quick-links__inner a:hover {
	color: var(--wp--custom--color--link);
}

@media only screen and (max-width: 767px) {
	.block-quick-links:is(.style-alpha) .block-quick-links__inner {
		gap: 20px;
	}

	.block-quick-links:is(.style-alpha) .block-quick-links__inner span {
		padding: 6px 0 0;
	}

	.block-quick-links:is(.style-alpha) .block-quick-links__inner a {
		font-size: var(--wp--preset--font-size--tiny);
		width: 100px;
	}

	.block-quick-links:is(.style-alpha) .block-quick-links__inner svg {
		height: 100px;
		width: 100px;
	}

}

@media only screen and (min-width: 768px) {
	.block-quick-links:is(.style-alpha) .block-quick-links__inner {
		gap: 11px;
	}

	.block-quick-links:is(.style-alpha) .block-quick-links__inner span {
		padding: 9px 0 5px;
	}

	.block-quick-links:is(.style-alpha) .block-quick-links__inner a {
		font-size: var(--wp--preset--font-size--small);
		width: 120px;
	}

	.block-quick-links:is(.style-alpha) .block-quick-links__inner svg {
		height: 120px;
		width: 120px;
	}
}


/* beta : Text ------------------------------------------------------ */
.block-quick-links:is(.style-beta) .block-quick-links__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.block-quick-links:is(.style-beta) .block-quick-links__inner a {
	background: var(--wp--custom--color--neutral-900);
	font-size: 1.0625rem;
	color: white;
	padding: 15px 22px;
}

.block-quick-links:is(.style-beta) .block-quick-links__inner a:hover {
	background: var(--wp--custom--color--link);
}

@media only screen and (max-width: 767px) {
}

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


/* gamma : Image Collage ------------------------------------------------------ */
.block-quick-links:is(.style-gamma) .block-quick-links__inner {
	display: grid;
	position: relative;
	isolation: isolate;
}

.block-quick-links:is(.style-gamma) .block-quick-links__inner a {
	box-shadow: var(--wp--custom--box-shadow--1);
	border-radius: var(--wp--custom--border-radius--small);
	overflow: hidden;
	color: white;
	letter-spacing: .01em;
	text-transform: uppercase;
	font-size: 1rem;
	position: relative;
	isolation: isolate;
}

.block-quick-links:is(.style-gamma) .block-quick-links__inner a:is(:hover, :focus) span {
	filter: brightness(.85);
}

.block-quick-links:is(.style-gamma) .block-quick-links__inner img {
	width: 100%;
}

.block-quick-links:is(.style-gamma) .block-quick-links__inner span {
	background-color: var(--wp--preset--color--tertiary);
	position: absolute;
	padding: 10px 17px 8px;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: max-content;
	max-width: calc( 100% - 24px);
}


@media only screen and (max-width: 767px) {
	.block-quick-links:is(.style-gamma) .block-quick-links__inner {
		grid-template-columns: repeat( 2, minmax( 0, 1fr) );
		grid-gap: 16px;
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner a {
		font-size: 0.875rem;
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner a:is(:first-child, :last-child) {
		grid-column: 1/-1;
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner a:is(:first-child, :last-child) img {
		height: 53.33333333vw;
		object-fit: cover;
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner span {
	}
}

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

	.block-quick-links:is(.style-gamma) .block-quick-links__inner {
		grid-template-columns: repeat( 4, minmax( 0, 1fr) );
		grid-gap: 16px;
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner a {
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner a:hover span {
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner a:is(:nth-child(1),:nth-child(6)) {
		grid-row: 1 / span 2;
		height: 368px;
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner a:is(:nth-child(1),:nth-child(6)) img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	/* need to specify the grid rows of the smaller items to prevent the order of the elements from changing */
	.block-quick-links:is(.style-gamma) .block-quick-links__inner a:is(:nth-child(2),:nth-child(3)) {
		grid-row: 1;
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner a:is(:nth-child(4),:nth-child(5)) {
		grid-row: 2;
	}


	.block-quick-links:is(.style-gamma) .block-quick-links__inner a:is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5)) img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		position: absolute;
		z-index: -1;
	}

	.block-quick-links:is(.style-gamma) .block-quick-links__inner span {
	}

}

@media only screen and (min-width: 992px) {
	.block-quick-links:is(.style-gamma) .block-quick-links__inner {
		grid-gap: 32px;
	}
}