/* Gallery Switcher — full-width two-tab bar (Gallery page).
   Active tab:   solid gold fill, light text, no arrow.
   Inactive tab: cream, dark-green text, trailing → arrow.
   Section background + padding/margin are overridable via block.json supports. */

.galleryswitcher--section {
	background-color: var(--color-body-cream);
	border-top: 1px solid var(--color-gold);
	border-bottom: 1px solid var(--color-gold);
}

.galleryswitcher--menu {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.galleryswitcher--menu li {
	flex: 1 1 50%;
	min-width: 0;
	border-right: 1px solid var(--color-gold);
}

.galleryswitcher--menu li:last-child {
	border-right: none;
}

.galleryswitcher--menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	padding: 16px 15px;
	color: var(--color-text-black);
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s, color .3s;
}

/* Trailing arrow — grey-arrow.svg as a mask so background-color drives the
   tint; currentColor makes it track the link text (gold on hover). */
.galleryswitcher--menu a::after {
	content: "";
	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;
}

/* Active tab — gold fill, light text, no arrow. */
.galleryswitcher--menu .current-menu-item > a,
.galleryswitcher--menu .current_page_item > a,
.galleryswitcher--menu .current-menu-ancestor > a {
	background-color: var(--color-gold);
	color: var(--color-text-white);
}

.galleryswitcher--menu .current-menu-item > a::after,
.galleryswitcher--menu .current_page_item > a::after,
.galleryswitcher--menu .current-menu-ancestor > a::after {
	display: none;
}

/* Hover — inactive tabs turn gold; the active tab keeps its light text
   so it stays readable against the gold fill. */
.galleryswitcher--menu a:hover {
	color: var(--color-gold);
}

.galleryswitcher--menu .current-menu-item > a:hover,
.galleryswitcher--menu .current_page_item > a:hover,
.galleryswitcher--menu .current-menu-ancestor > a:hover {
	color: var(--color-text-white);
}

/* Under 600px — stack the tabs vertically; divider becomes a bottom border. */
@media (max-width: 599px) {
	.galleryswitcher--menu {
		flex-direction: column;
	}

	.galleryswitcher--menu li {
		border-right: none;
		border-bottom: 1px solid var(--color-gold);
	}

	.galleryswitcher--menu li:last-child {
		border-bottom: none;
	}
}

@media (min-width: 992px) {

	.galleryswitcher--menu a::after{
		width: 40px;
		height: 40px;
	}

	.galleryswitcher--menu a {
		gap: 1em;
		padding: 16px 20px;
		font-size: 15px;
		line-height: 40px;
	}
}