/* Large Arrow CTA — centered uppercase link with a large trailing arrow
   (grey-arrow.svg). Sits under the gallery grid on the Gallery page.
   Default: dark-green text + arrow. Hover: both turn gold.
   Section background + padding/margin are overridable via block.json supports. */

.large-arrow-cta--container {
	display: flex;
	justify-content: center;
}

.large-arrow-cta--link {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	color: var(--color-text-black);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .3s;
}

.large-arrow-cta--link:hover {
	color: var(--color-gold);
}

/* Trailing arrow — grey-arrow.svg as a mask so it follows the link color
   (dark green by default, gold on hover via currentColor). */
.large-arrow-cta--arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../../images/grey-arrow.svg") no-repeat center / contain;
	mask: url("../../images/grey-arrow.svg") no-repeat center / contain;
}

@media (min-width: 600px) {
	.large-arrow-cta--link {
		gap: 1.1em;
		font-size: 16px;
	}

	.large-arrow-cta--arrow {
		width: 40px;
		height: 40px;
	}
}