/*
Theme Name: Robertix.
Przełącznik wyglądu galerii na KLIK!: Wygląd A / Wygląd B.
Ładowany tylko na stronie /kliki/ (obydwa warianty).
*/

.view-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.view-switcher .widget-title {
	flex-basis: 100%;
}

.view-switcher__link {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: center;
	transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.view-switcher__link:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.view-switcher__link.is-active,
.view-switcher__link.is-active:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

.view-switcher__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.view-switcher__link {
		min-height: 44px;
	}
}

/* Wygląd B — cofnięcie JS-owego przypinania wstążki (.gallery-pane.is-fixed):
	wstążka wraca do normalnego przepływu strony i przewija się razem z nią,
	pozostając zawsze nad siatką (3×3), nigdy na nią nie nachodząc. Nadpisujemy
	position:fixed oraz inline top/left/width nadawane przez JavaScript
	(wymaga !important), a także wysokość .gallery-pane-spacer i pseudoelementy
	cienia .is-pinned. Poziome przewijanie wstążki i pionowe przewijanie siatki
	pozostają bez zmian. */
.gallery-pane.is-fixed .gallery-picker-wrap {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
}

.gallery-pane.is-fixed .gallery-pane-spacer {
	height: 0 !important;
}

.gallery-pane.is-fixed .gallery-picker-wrap.is-pinned::before,
.gallery-pane.is-fixed .gallery-picker-wrap.is-pinned::after {
	display: none;
}