/*
 * GP Frontend Library. Values follow the generatepress.com design system (website-system repo,
 * tools/global-styles.py: gbp-filter-bar, gbp-chip, gbp-search, gbp-library-grid, gbp-tile-caption,
 * gbp-button). Tokens fall back to design-system/tokens.json, so the gallery looks the same where
 * the site's Design Tokens aren't registered.
 */
.gp-public-sites {
	--gpps-ink: var(--gb-contrast, #0c0e0f);
	--gpps-ink-hover: #22282c;
	--gpps-muted: var(--gb-contrast-3, #68758c);
	--gpps-chip-text: #3d4657;
	--gpps-rule: #d5dcea;
	--gpps-hairline: rgba(104, 117, 140, 0.28);
	--gpps-line: var(--gb-base, #e6eaf5);
	--gpps-page: var(--gb-base-2, #fafbff);
	--gpps-white: var(--gb-base-3, #ffffff);
	--gpps-wash: var(--gb-tint, #ebf0fc);
	--gpps-panel: var(--gb-tint-2, #f2f7ff);
	--gpps-pill: var(--gb-radius-pill, 100px);
	--gpps-card: var(--gb-radius-card, 14px);
	--gpps-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--gpps-ring: 0 0 0 2px var(--gpps-page), 0 0 0 4px var(--gb-accent-4, #6417ff);
	font-family: var(--gb-font-body, inherit);
	color: var(--gpps-ink);
}

.gp-public-sites *,
.gp-public-sites *::before,
.gp-public-sites *::after {
	box-sizing: border-box;
}

.gp-public-sites [hidden] {
	display: none !important;
}

.gp-public-sites p,
.gp-public-sites h2 {
	margin: 0;
	padding: 0;
}

.gp-public-sites .gpps-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* The filter bar: chips, then search; on phones the search sits above the chips. */
.gp-public-sites .gpps-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 40px;
	padding: 20px 0;
	border-top: 1px solid var(--gpps-line);
	border-bottom: 1px solid var(--gpps-line);
}

.gp-public-sites .gpps-chips,
.gp-public-sites .gpps-devices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gp-public-sites .gpps-chip {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 8px 17px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--gpps-chip-text);
	background: transparent;
	border: 1px solid var(--gpps-rule);
	border-radius: var(--gpps-pill);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 240ms var(--gpps-ease), color 240ms var(--gpps-ease);
}

.gp-public-sites .gpps-chip:hover {
	color: var(--gpps-ink);
	background: rgba(12, 14, 15, 0.06);
}

.gp-public-sites .gpps-chip[aria-pressed="true"],
.gp-public-sites .gpps-chip[aria-checked="true"] {
	color: var(--gpps-page);
	background: var(--gpps-ink);
	border-color: var(--gpps-ink);
}

.gp-public-sites .gpps-chip[aria-pressed="true"]:hover,
.gp-public-sites .gpps-chip[aria-checked="true"]:hover {
	background: var(--gpps-ink-hover);
	border-color: var(--gpps-ink-hover);
}

.gp-public-sites .gpps-search {
	display: flex;
	align-items: center;
	column-gap: 10px;
	min-width: 260px;
	margin: 0;
	padding: 9px 17px;
	font-size: 14px;
	line-height: 1.25;
	color: var(--gpps-ink);
	background: var(--gpps-white);
	border: 1px solid var(--gpps-rule);
	border-radius: var(--gpps-pill);
	cursor: text;
}

.gp-public-sites .gpps-search svg {
	flex-shrink: 0;
	color: var(--gpps-muted);
}

.gp-public-sites .gpps-search input {
	flex-grow: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
}

.gp-public-sites .gpps-search input::placeholder {
	color: var(--gpps-muted);
	opacity: 1;
}

.gp-public-sites .gpps-search:focus-within,
.gp-public-sites .gpps-chip:focus-visible,
.gp-public-sites .gpps-button:focus-visible,
.gp-public-sites .gpps-text-link:focus-visible,
.gp-public-sites .gpps-open:focus-visible .gpps-tile {
	outline: none;
	box-shadow: var(--gpps-ring);
}

/* Three across, one on phones. Each tile is a 16:10 window onto the site's homepage. */
.gp-public-sites .gpps-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 32px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.gp-public-sites .gpps-card {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.gp-public-sites .gpps-open {
	display: flex;
	flex-direction: column;
	row-gap: 14px;
	color: inherit;
	text-decoration: none;
	outline: none;
}

.gp-public-sites .gpps-tile {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--gpps-panel);
	border-radius: var(--gpps-card);
	transition: box-shadow 240ms var(--gpps-ease);
}

/* The window hairline, drawn over the frame so the live page never covers it. */
.gp-public-sites .gpps-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--gpps-hairline);
	pointer-events: none;
	transition: box-shadow 240ms var(--gpps-ease);
}

.gp-public-sites .gpps-open:hover .gpps-tile::after {
	box-shadow: inset 0 0 0 1px rgba(12, 14, 15, 0.35);
}

.gp-public-sites .gpps-tile iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 1280px;
	max-width: none;
	height: 800px;
	margin: 0;
	border: 0;
	background: var(--gpps-white);
	transform: scale(var(--gpps-scale, 0.33));
	transform-origin: 0 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 320ms var(--gpps-ease);
}

.gp-public-sites .gpps-tile.is-loaded iframe {
	opacity: 1;
}

.gp-public-sites .gpps-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
}

.gp-public-sites .gpps-caption {
	font-size: 17px;
	line-height: 1.4;
	color: var(--gpps-ink);
}

.gp-public-sites .gpps-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 20px;
	padding-top: 64px;
	text-align: center;
}

.gp-public-sites .gpps-empty p,
.gp-public-sites .gpps-unavailable {
	font-size: 17px;
	line-height: 1.6;
	color: var(--gpps-muted);
}

.gp-public-sites .gpps-unavailable {
	padding: 48px 0;
}

.gp-public-sites .gpps-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 14px;
	margin-top: 56px;
}

.gp-public-sites .gpps-more p {
	font-size: var(--gb-size-caption, 16px);
	line-height: 1.6;
	color: var(--gpps-muted);
	font-variant-numeric: tabular-nums;
}

/* Buttons: one size for primary and secondary, the border included. */
.gp-public-sites .gpps-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 14px 31px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	color: var(--gpps-page);
	background: var(--gpps-ink);
	border: 1px solid var(--gpps-ink);
	border-radius: var(--gpps-pill);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 240ms var(--gpps-ease), border-color 240ms var(--gpps-ease), color 240ms var(--gpps-ease);
}

.gp-public-sites .gpps-button:hover,
.gp-public-sites .gpps-button:focus {
	color: var(--gpps-page);
	background: var(--gpps-ink-hover);
	border-color: var(--gpps-ink-hover);
}

.gp-public-sites .gpps-button-md {
	padding: 12px 26px;
	font-size: 15px;
}

.gp-public-sites .gpps-button-sm {
	padding: 11px 22px;
	font-size: 15px;
}

.gp-public-sites .gpps-button-secondary {
	color: var(--gpps-ink);
	background: transparent;
}

.gp-public-sites .gpps-button-secondary:hover,
.gp-public-sites .gpps-button-secondary:focus {
	color: var(--gpps-ink);
	background: rgba(12, 14, 15, 0.06);
	border-color: var(--gpps-ink);
}

.gp-public-sites .gpps-button:disabled {
	color: var(--gpps-muted);
	background: var(--gpps-line);
	border-color: var(--gpps-line);
	cursor: not-allowed;
	pointer-events: none;
}

.gp-public-sites .gpps-text-link {
	padding-bottom: 2px;
	font-size: 15px;
	line-height: 1.25;
	color: var(--gpps-ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(12, 14, 15, 0.35);
	transition: border-color 240ms var(--gpps-ease);
}

.gp-public-sites .gpps-text-link:hover {
	color: var(--gpps-ink);
	border-bottom-color: var(--gpps-ink);
}

/* The preview fills the screen: one bar of controls, then the demo at the visitor's own width.
   Tablet and Mobile sit centred on the soft wash. */
.gp-public-sites .gpps-dialog {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--gpps-ink);
	background: var(--gpps-page);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.gp-public-sites .gpps-dialog[open] {
	display: flex;
	flex-direction: column;
}

.gp-public-sites .gpps-dialog::backdrop {
	background: rgba(12, 14, 15, 0.55);
}

.gp-public-sites .gpps-bar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding: 12px 24px;
	border-bottom: 1px solid var(--gpps-line);
}

.gp-public-sites .gpps-bar-title {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
}

.gp-public-sites .gpps-dialog-title {
	overflow: hidden;
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--gpps-ink);
	border-radius: 4px;
	outline: none;
}

.gp-public-sites .gpps-dialog-title:focus-visible {
	box-shadow: var(--gpps-ring);
}

.gp-public-sites .gpps-position,
.gp-public-sites .gpps-dimensions {
	flex-shrink: 0;
	font-size: 14px;
	white-space: nowrap;
	color: var(--gpps-muted);
	font-variant-numeric: tabular-nums;
}

.gp-public-sites .gpps-devices {
	align-items: center;
	gap: 8px;
}

.gp-public-sites .gpps-dimensions {
	min-width: 56px;
	margin-left: 4px;
}

.gp-public-sites .gpps-bar-actions,
.gp-public-sites .gpps-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.gp-public-sites .gpps-bar-actions {
	gap: 10px 16px;
}

.gp-public-sites .gpps-nav {
	gap: 8px;
}

.gp-public-sites .gpps-nav-button {
	gap: 6px;
	padding-left: 14px;
	padding-right: 14px;
}

.gp-public-sites .gpps-nav-button svg {
	flex-shrink: 0;
}

.gp-public-sites .gpps-demo-link svg {
	display: none;
}

.gp-public-sites .gpps-dialog-scroll {
	flex: 1;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	background: var(--gpps-white);
}

.gp-public-sites .gpps-dialog.is-device .gpps-dialog-scroll {
	padding: 24px;
	background: var(--gpps-wash);
}

.gp-public-sites .gpps-dialog-stage {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	background: var(--gpps-white);
}

.gp-public-sites .gpps-dialog.is-device .gpps-dialog-stage {
	border-radius: 12px;
}

.gp-public-sites .gpps-dialog.is-device .gpps-dialog-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--gpps-hairline);
	pointer-events: none;
}

.gp-public-sites .gpps-dialog-stage iframe {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	margin: 0;
	border: 0;
	background: var(--gpps-white);
	transform-origin: 0 0;
}

@media (max-width: 767px) {
	.gp-public-sites .gpps-filter-bar {
		flex-direction: column;
		align-items: stretch;
		row-gap: 14px;
		padding: 16px 0;
	}

	.gp-public-sites .gpps-search {
		order: -1;
		min-width: 0;
	}

	.gp-public-sites .gpps-chips,
	.gp-public-sites .gpps-devices {
		gap: 8px;
	}

	/* One row that scrolls sideways, as on the Patterns page, however many categories there are. */
	.gp-public-sites .gpps-chips {
		flex-wrap: nowrap;
		padding: 4px 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.gp-public-sites .gpps-chips::-webkit-scrollbar {
		display: none;
	}

	.gp-public-sites .gpps-chip {
		flex-shrink: 0;
		padding: 7px 14px;
		font-size: 13px;
	}

	.gp-public-sites .gpps-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 26px;
		margin-top: 28px;
	}

	.gp-public-sites .gpps-open {
		row-gap: 12px;
	}

	.gp-public-sites .gpps-caption {
		font-size: 16px;
	}

	.gp-public-sites .gpps-more {
		margin-top: 40px;
	}

	.gp-public-sites .gpps-button-sm {
		padding: 9px 16px;
		font-size: 14px;
	}

	/* Two rows: the name with Close beside it, then the arrows and the links. Device widths hide (they'd
	   all be wider than the phone), and Previous and Next keep their names for screen readers only. */
	.gp-public-sites .gpps-bar {
		gap: 10px 12px;
		padding: 10px 12px;
	}

	.gp-public-sites .gpps-bar-title {
		align-items: center;
		min-height: 38px;
		padding-right: 84px;
	}

	.gp-public-sites .gpps-dialog-title {
		font-size: 16px;
	}

	.gp-public-sites .gpps-close {
		position: absolute;
		top: 10px;
		right: 12px;
	}

	.gp-public-sites .gpps-bar-actions {
		width: 100%;
		gap: 8px 12px;
	}

	.gp-public-sites .gpps-nav-button {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* The demo link becomes an icon button beside the arrows, keeping its full name for screen readers. */
	.gp-public-sites .gpps-demo-link {
		display: inline-flex;
		align-items: center;
		padding: 9px 10px;
		border: 1px solid var(--gpps-ink);
		border-radius: var(--gpps-pill);
	}

	.gp-public-sites .gpps-demo-link svg {
		display: block;
	}

	.gp-public-sites .gpps-demo-link:hover {
		background: rgba(12, 14, 15, 0.06);
		border-bottom-color: var(--gpps-ink);
	}

	.gp-public-sites .gpps-nav-label,
	.gp-public-sites .gpps-demo-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.gp-public-sites .gpps-dialog.is-device .gpps-dialog-scroll {
		padding: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gp-public-sites *,
	.gp-public-sites *::before,
	.gp-public-sites *::after {
		transition: none !important;
	}
}