/*
 * The public template gallery.
 *
 * Matched to Metro Pitch, which is the seller's own page and therefore already
 * the answer to "what does our marketing look like". Same ink, same violet and
 * cyan, same dark ground - so the gallery reads as part of the same site rather
 * than as an admin screen somebody exposed to the public.
 *
 * The values are repeated here rather than imported from PitchTemplates because
 * that file is PHP building a page tree, not a stylesheet, and it is deleted
 * from the public build. A customer never sees this file either, but a
 * stylesheet that breaks when a template is removed is a bad trade for four
 * colours.
 *
 * @license GNU General Public License version 2 or later
 */

.mpb-gal {
	--gal-ink: #08070f;
	--gal-panel: #12101f;
	--gal-violet: #7c5cff;
	--gal-cyan: #22d3ee;
	--gal-paper: #f6f6fb;
	--gal-muted: #a5a3b8;
	--gal-line: rgba(255, 255, 255, .09);

	background: var(--gal-ink);
	color: var(--gal-paper);
	/* Full-bleed inside a template that boxes its content. A shop window with
	   a 40px gutter of the site template either side looks like a widget. */
	margin-inline: calc(50% - 50vw);
	padding-inline: max(24px, calc(50vw - 640px));
	padding-block: 72px 96px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- the head ---------------------------------------------------------- */

.mpb-gal__head { max-width: 46rem; margin-bottom: 40px; }

.mpb-gal__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--gal-cyan); margin-bottom: 1rem;
}

.mpb-gal__title {
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	font-weight: 800;
	margin: 0 0 1rem;
}

.mpb-gal__title em {
	font-style: normal;
	background: linear-gradient(90deg, var(--gal-violet), var(--gal-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	/* Transparent text is what makes background-clip visible at all - without
	   it the gradient is painted and then covered by the glyphs. */
	color: transparent;
}

.mpb-gal__intro { color: var(--gal-muted); font-size: 1.06rem; line-height: 1.6; margin: 0; }

/* ---- search and filters ------------------------------------------------ */

.mpb-gal__tools { margin: 28px 0 32px; }

/*
 * THE HIDDEN ATTRIBUTE HAS TO WIN (2.30.1).
 *
 * The filter script narrows the grid by setting `hidden` on cards and chips.
 * The browser's own [hidden] rule is the weakest there is, and .mpb-gal__card
 * sets display:flex - so every hidden card stayed on screen and search, the
 * category row and the section row all looked as if they did nothing. A site
 * template's button styles did the same to the chips and the clear button.
 */
.mpb-gal [hidden] { display: none !important; }

/* The label is for screen readers. Not every site template defines
   .visually-hidden, and where it does not the label pushed the field down
   and the icon (centred on the wrapper) out of line with it. */
.mpb-gal__sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mpb-gal__search { position: relative; max-width: 30rem; }

.mpb-gal__search i {
	position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
	display: flex; align-items: center; line-height: 1; font-size: 1rem;
	color: var(--gal-muted); pointer-events: none; z-index: 1;
}

.mpb-gal__search input {
	/* border-box, whatever the template says: with content-box the field was
	   wider than its wrapper and the clear button sat outside it. */
	box-sizing: border-box; display: block; margin: 0; height: 3.1rem;
	width: 100%; padding: 0 3rem 0 3rem;
	background: var(--gal-panel); color: var(--gal-paper);
	border: 1px solid var(--gal-line); border-radius: 999px;
	font-size: .95rem; line-height: 1; font-family: inherit;
	-webkit-appearance: none; appearance: none;
}

/* One clear button, not two: the browser's own search-field cross is removed. */
.mpb-gal__search input::-webkit-search-cancel-button,
.mpb-gal__search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.mpb-gal__search input::placeholder { color: var(--gal-muted); }
.mpb-gal__search input:focus { outline: 2px solid var(--gal-violet); outline-offset: 1px; }

.mpb-gal__clear {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center;
	width: 2.1rem; height: 2.1rem; margin: 0; box-shadow: none;
	background: none; border: 0; color: var(--gal-muted); cursor: pointer;
	padding: 0; line-height: 1; border-radius: 50%;
}

.mpb-gal__clear:hover { color: var(--gal-paper); }

.mpb-gal__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }

.mpb-gal__chip {
	background: var(--gal-panel); color: var(--gal-muted);
	border: 1px solid var(--gal-line); border-radius: 999px;
	padding: .42rem .95rem; font-size: .82rem; font-weight: 600;
	cursor: pointer; font-family: inherit;
}

.mpb-gal__chip:hover { color: var(--gal-paper); border-color: rgba(255, 255, 255, .22); }

.mpb-gal__chip.is-on {
	background: var(--gal-paper); color: var(--gal-ink); border-color: var(--gal-paper);
}

.mpb-gal__chip b { font-weight: 600; opacity: .55; margin-left: .35rem; }

/* The second row: sections inside the chosen category. Set apart from the
   category row so the two read as a hierarchy rather than one long wrap. */
.mpb-gal__chips--sub {
	margin-top: .55rem;
	padding-top: .7rem;
	border-top: 1px solid var(--gal-line);
}

.mpb-gal__chips--sub .mpb-gal__chip { font-size: .78rem; padding: .34rem .8rem; }

.mpb-gal__chips--sub .mpb-gal__chip.is-on {
	background: var(--gal-violet); color: #fff; border-color: var(--gal-violet);
}

/* ---- the grid ---------------------------------------------------------- */

.mpb-gal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 26px;
}

.mpb-gal__card {
	background: var(--gal-panel);
	border: 1px solid var(--gal-line);
	border-radius: 18px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform .18s ease, border-color .18s ease;
}

.mpb-gal__card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .2); }

.mpb-gal__shot {
	display: block; position: relative;
	/* A page is tall; a card is not. 4:3 shows the top of a design, which is
	   the part that decides whether somebody clicks. */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	text-decoration: none;
}

.mpb-gal__shot img {
	width: 100%; height: 100%; object-fit: cover; object-position: top center;
	display: block;
}

/* The drawn tile, for a template with no picture of its own. Derived from the
   key, so it is the same on every visit and on every install. */
.mpb-gal__tile {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em;
	color: rgba(255, 255, 255, .9);
}

.mpb-gal__open {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end; justify-content: center;
	padding-bottom: 1.1rem;
	background: linear-gradient(180deg, transparent 55%, rgba(8, 7, 15, .82));
	opacity: 0; transition: opacity .18s ease;
}

.mpb-gal__shot:hover .mpb-gal__open,
.mpb-gal__shot:focus-visible .mpb-gal__open { opacity: 1; }

.mpb-gal__open span {
	background: var(--gal-paper); color: var(--gal-ink);
	border-radius: 999px; padding: .5rem 1.1rem;
	font-size: .82rem; font-weight: 700;
	display: inline-flex; align-items: center; gap: .4rem;
}

.mpb-gal__body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }

.mpb-gal__name { font-size: 1.02rem; font-weight: 700; margin: 0 0 .3rem; letter-spacing: -.01em; }

.mpb-gal__desc {
	color: var(--gal-muted); font-size: .87rem; line-height: 1.5; margin: 0 0 .9rem; flex: 1;
}

.mpb-gal__meta {
	display: flex; align-items: center; gap: .5rem;
	font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--gal-muted);
}

.mpb-gal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gal-violet); }

.mpb-gal__empty {
	background: var(--gal-panel); border: 1px solid var(--gal-line); border-radius: 18px;
	padding: 2.5rem; text-align: center; color: var(--gal-muted);
}

.mpb-gal__count { color: var(--gal-muted); font-size: .85rem; margin: 0 0 1rem; }

/* Nothing here moves for anybody who has asked it not to. The hover lift is
   decoration; the information is in the card either way. */
@media (prefers-reduced-motion: reduce) {
	.mpb-gal__card, .mpb-gal__open { transition: none; }
	.mpb-gal__card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   THE SITE TEMPLATE DOES NOT PAINT THIS PAGE.
   ---------------------------------------------------------------------------
   Reported as "the template name and the gallery heading are missing". They
   were there: the headings had no colour of their own and only inherited the
   gallery's, and a site template's own `h1`/`h2` rule beats inheritance from an
   ancestor every time. On a template whose heading colour is near-black that
   put black type on this page's near-black ground, so the words vanished while
   the intro - which does set its own colour - stayed readable.
   Everything with type on it therefore states its colour here, two classes
   deep, and !important where a template's id-scoped rule would otherwise win.
   This is a page of ours rendered inside somebody's template; it is not a
   surface the template is meant to theme.
   ========================================================================= */

.mpb-gal.mpb-gal { background: var(--gal-ink); color: var(--gal-paper); color-scheme: dark; }

.mpb-gal .mpb-gal__title,
.mpb-gal .mpb-gal__name { color: var(--gal-paper) !important; }

.mpb-gal .mpb-gal__title em {
	/* The gradient is painted through the glyphs, so the fill must be
	   transparent - and a template that sets -webkit-text-fill-color would
	   otherwise paint over it. */
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

.mpb-gal .mpb-gal__eyebrow { color: var(--gal-cyan) !important; }

.mpb-gal .mpb-gal__intro,
.mpb-gal .mpb-gal__desc,
.mpb-gal .mpb-gal__meta,
.mpb-gal .mpb-gal__count,
.mpb-gal .mpb-gal__empty { color: var(--gal-muted) !important; }

.mpb-gal .mpb-gal__empty strong { color: var(--gal-paper); }

/* A card is a link, and a template's link colour would repaint the picture
   frame and the "View full screen" pill inside it. */
.mpb-gal .mpb-gal__shot,
.mpb-gal .mpb-gal__shot:hover,
.mpb-gal .mpb-gal__shot:focus { color: var(--gal-paper) !important; text-decoration: none; }

.mpb-gal .mpb-gal__open span { color: var(--gal-ink) !important; background: var(--gal-paper); }

.mpb-gal .mpb-gal__tile { color: #ffffff !important; }

/* Controls: a template's form styles are written for its own forms. */
.mpb-gal .mpb-gal__search input { color: var(--gal-paper) !important; background: var(--gal-panel); }

.mpb-gal .mpb-gal__chip { color: var(--gal-paper) !important; }

.mpb-gal .mpb-gal__chip.is-on { color: var(--gal-ink) !important; }

.mpb-gal .mpb-gal__clear { color: var(--gal-muted) !important; }

/* Headings the page has not named - anything a description or a future card
   adds - still read on this ground rather than in the template's ink. */
.mpb-gal :is(h1, h2, h3, h4, h5, h6) { color: var(--gal-paper); }

/* ---------------------------------------------------------------------------
   THE MODULE: the same gallery in a module position.
   ---------------------------------------------------------------------------
   Edge to edge by default, exactly as the menu item's page. Boxed keeps it
   inside the position - a sidebar or a boxed layout, where breaking out to the
   viewport edges would run over the neighbouring column.
   ========================================================================= */

.mpb-gal--boxed {
	margin-inline: 0;
	padding: 40px clamp(18px, 4vw, 40px) 48px;
	border-radius: 20px;
}

/* Pages built on this site, ahead of the templates. */
.mpb-gal__featured { margin: 0 0 56px; }

.mpb-gal .mpb-gal__subhead {
	color: var(--gal-paper) !important;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 18px;
}

.mpb-gal__badge {
	position: absolute; top: 12px; left: 12px;
	padding: .28rem .7rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--gal-violet), var(--gal-cyan));
	color: #fff;
	font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

/* A rendered thumbnail: the page itself at a quarter of its size. The iframe
   is laid out at four times the card and scaled down, so the page sees a
   desktop-width viewport and draws its desktop layout. It is a picture, not a
   page to use - the card's own link is what a click reaches. */
.mpb-gal__live { position: absolute; inset: 0; overflow: hidden; background: var(--gal-panel); }
/* !important on the size, because nearly every site template has a responsive
   `iframe { max-width: 100% }` rule. It capped the 400% width at the card's
   own width, so the page laid out at phone width and the scaled result was a
   quarter-wide strip of a mobile page instead of the desktop hero. */
.mpb-gal__live iframe {
	position: absolute !important; top: 0 !important; left: 0 !important;
	width: 400% !important; height: 400% !important;
	max-width: none !important; max-height: none !important;
	min-width: 0 !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important;
	border: 0 !important; pointer-events: none;
	transform: scale(.25); transform-origin: 0 0;
}

/* Laid out while it loads, so the page inside sees its real width, but not
   seen until the script has checked it is a page and not an error. The
   picture or tile underneath shows until then. */
.mpb-gal .mpb-gal__live[hidden] { display: block !important; opacity: 0; }
.mpb-gal__live { transition: opacity .35s ease; }

/* ---- pages of templates ------------------------------------------------- */

.mpb-gal__pager {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 8px; margin: 36px 0 0;
}

.mpb-gal .mpb-gal__page {
	appearance: none;
	min-width: 40px; height: 40px; padding: 0 14px;
	border: 1px solid var(--gal-line); border-radius: 999px;
	background: var(--gal-panel); color: var(--gal-paper) !important;
	font: 600 .88rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

.mpb-gal .mpb-gal__page:hover:not(:disabled) { border-color: rgba(255, 255, 255, .3); }
.mpb-gal .mpb-gal__page:focus-visible { outline: 2px solid var(--gal-cyan); outline-offset: 2px; }
.mpb-gal .mpb-gal__page.is-on { background: var(--gal-violet); border-color: var(--gal-violet); color: #fff !important; }
.mpb-gal .mpb-gal__page:disabled { opacity: .4; cursor: default; }
.mpb-gal__gap { color: var(--gal-muted); padding: 0 4px; }

@media (prefers-reduced-motion: reduce) {
	.mpb-gal__live { transition: none; }
}