/*
 * Photographicon: album cards, album and image pages, keyword / place / search pages, index pages, homepage
 * slider, full-screen slideshow. Part of the Photographicon plugin (enqueued on the site and in the editor).
 *
 * Values measured from photographicon.com (zpReBoot) on 17–19 Oct 2026. Moved from the Astra child theme on
 * 24 Oct 2026; the Astra-specific overrides are gone, and the page offsets now come from the plugin's templates
 * (.pgi-main). Site-wide look (fonts, colours, header, footer) belongs to the theme, not here.
 *
 * 2.3.0 (24 Oct 2026): .pgi-main offsets are padding, not margin, and the grid gap is 12px, both formerly set by
 * the picon-tt25 theme as overrides.
 * 2.4.1 (25 Oct 2026): no space above the breadcrumbs (.pgi-main top padding 0, was 40px); image page title 12px
 * above the pills (was 24px); breadcrumbs keep their 1em below on album pages too (see "Breadcrumbs" below).
 * 2.4.2 (25 Oct 2026): album (and Gallery page) title 12px above the pills (was 24px); the spacing rules here now
 * win over WordPress's constrained-layout block gap on album pages (see "Page frame" below).
 * 2.5.0 (25 Oct 2026): on every page type the count line is above the top pills and the title below them; the
 * keyword and place indexes and the empty search page show their filter or search box in the title's place, and
 * search results put the title under the box.
 * 2.5.1 (25 Oct 2026): breadcrumbs 0.7em above the count line (was 1em), count line 0.5em above the pills (was
 * 0.4em); the empty search page has blank count lines and bottom pills.
 * 2.5.2 (25 Oct 2026): the top pills line up on every page (no extra 3px under a count line with Sort / Show).
 * 2.5.3 (25 Oct 2026): search results show the box without a title, the cards starting at the album pages'
 * height; bottom count line 0.6em below the pills (was 0.4em); page numbers 1em below it (was 1.5em).
 * 2.5.4 (25 Oct 2026): page titles 1.3rem on phones (below 600px; 1.6rem otherwise), as --pgi-page-title-size.
 * 2.8.3 (26 Oct 2026): card thumbnails are sized from their own pixel size (--pgi-w, --pgi-h, set on each <img>)
 * instead of width/height: auto, which Chrome reports as "lazy-loaded image without dimensions" (see "Album grid").
 * 2.9.1 (27 Oct 2026, final code review): .screen-reader-text without the deprecated clip property (clip-path does
 * the job) and with overflow-wrap in place of its old alias word-wrap.
 */

:root {
	/* Album card: the "slide mount" (zpReBoot .card.thumb-panel) */
	--pgi-card-bg: #ffffff;
	--pgi-card-border: 1px solid #888888;
	--pgi-card-radius: 4px;
	--pgi-card-padding: 10px 10px 0;
	--pgi-card-shadow: none;

	/* The thumbnail itself: square-cornered black border hugging the image (zpReBoot img.img-fluid) */
	--pgi-thumb-border: 1px solid #000000;
	--pgi-thumb-padding: 0;
	--pgi-thumb-bg: transparent;
	/* What the border and padding above add to a thumbnail's width and height (both sides): 2 × (1px + 0).
	   Change it with them. */
	--pgi-thumb-frame: 2px;

	/* Card text: title in Bootstrap link blue, ID in black */
	--pgi-title-size: 1.0rem;
	--pgi-title-color: #007bff;
	--pgi-id-size: 1.0rem;
	--pgi-id-color: #000000;

	/* Grid: 12px gutters, four cards across the 1200px content column (decided 24 Oct 2026; zpReBoot had 11px
	   in an 870px column) */
	--pgi-gap: 12px;

	/* Image page: 1px black border straight on the image, no mat (zpReBoot .image-full img) */
	--pgi-frame-border: 1px solid #000000;
	--pgi-frame-padding: 0;
	--pgi-frame-bg: transparent;

	--pgi-link: #007bff;
	--pgi-link-hover: #0056b3;

	/* Page titles (album, image, keyword, place): 1.6rem; on phones 1.3rem (2.5.4, see the media query below the
	   title rule). The search results' spacing is worked out from it too. */
	--pgi-page-title-size: 1.6rem;
}

/* ---------------------------------------------------------------- Page frame (plugin templates) */

/* Breadcrumbs straight under the header on every gallery page (no top padding since 2.4.1, was 40px), 40px of
   white panel below the content. Padding, not margin: a theme that paints main (picon-tt25's white panel) would
   otherwise show a strip of page background above and below it. Top and bottom only, so the theme's side padding
   (root padding) is untouched. */
.pgi-main {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 40px;
}

/* The spacing inside the gallery frame is this stylesheet's, not WordPress's (2.4.2).
   The templates' <main> Group and the album's Post Content block both use the constrained layout, and WordPress
   gives every child of such a block ":root :where(.is-layout-constrained) > * { margin-block-start: 1.2rem;
   margin-block-end: 0 }" (the theme's block gap). That selector weighs as much as one class, and global styles
   print after this stylesheet, so it beat every single-class rule here on the elements it reaches: on album pages
   the breadcrumbs, pills, count line, grids and description lost their own margins and got 1.2rem above instead.
   Image, keyword, place and search pages wrap their content in one element, so they were never affected.
   So: <main>'s children start from no margin, and each rule below that styles something placed straight inside
   <main> or Post Content has its margin repeated under ".pgi-main", to outweigh WordPress's rule (margins only:
   weighting a whole rule would also let it beat the media queries, e.g. the grid's column count). WordPress's
   ":last-child { margin-block-end: 0 }" still wins for the last block in Post Content, which is right: Post
   Content is display: flow-root, so that margin would add to the bottom pills' 1em instead of merging with it. */
.pgi-main.pgi-main > * { margin-block: 0; }

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	overflow-wrap: normal !important;
}

.pgi-block-placeholder {
	padding: 12px 16px;
	border: 1px dashed #bbbbbb;
	color: #555555;
	background: #fafafa;
	font-size: 14px;
	text-align: center;
}
.pgi-block-placeholder p { margin: 0; }

/* ---------------------------------------------------------------- Breadcrumbs and titles */

/* Weighted with .pgi-main (2.4.1): on album pages the breadcrumbs are a direct child of <main> (see Page frame). */
.pgi-breadcrumbs {
	text-align: center;
	margin: 0 0 0.7em;
	font-size: 1.0rem;
}
.pgi-main .pgi-breadcrumbs { margin: 0 0 0.7em; }
.pgi-breadcrumbs a { color: var(--pgi-link); text-decoration: none; }
.pgi-breadcrumbs a:hover,
.pgi-breadcrumbs a:focus { color: var(--pgi-link-hover); text-decoration: underline; }

/* Album page title (core Post Title block), image page title and keyword/place/search titles all alike. */
.pgi-main h1.wp-block-post-title,
.pgi-main h1.pgi-image-title,
.pgi-main h1.pgi-term-title {
	margin: 0 0 24px;
	text-align: center;
	font-size: var(--pgi-page-title-size);
	font-weight: 500;
	line-height: 1.2;
}
/* Phones (below 600px, where the theme's menu becomes the ☰ button and the grid goes to two columns or one):
   titles about 19% smaller, 20.8px instead of 25.6px, still larger than the 16px count line. */
@media (max-width: 599.98px) {
	:root { --pgi-page-title-size: 1.3rem; }
}
/* Since 2.5.0 the title sits under the pills (12px: the top pills' margin) and over the content, 16px above it:
   album, Gallery and image pages, and the keyword, place and search headers (title and description, or search
   box and title). */
.pgi-main h1.wp-block-post-title,
.pgi-main h1.pgi-image-title { margin-bottom: 16px; }
.pgi-term-archive .pgi-term-header { margin: 0 0 16px; }
.pgi-term-archive .pgi-term-header h1.pgi-term-title { margin: 0; }
.pgi-term-archive .pgi-term-header .pgi-album-description { margin: 0.75em 0 0; }

/* ---------------------------------------------------------------- Album grid */

.pgi-album {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pgi-gap);
	margin: 0 0 2em;
}
.pgi-main .pgi-album { margin: 0 0 2em; }
@media (min-width: 768px) {
	.pgi-album { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.pgi-album { grid-template-columns: repeat(var(--pgi-cols, 4), minmax(0, 1fr)); }
}
@media (max-width: 380px) {
	.pgi-album { grid-template-columns: minmax(0, 1fr); }
}

.pgi-card {
	margin: 0;
	padding: var(--pgi-card-padding);
	background: var(--pgi-card-bg);
	border: var(--pgi-card-border);
	border-radius: var(--pgi-card-radius);
	box-shadow: var(--pgi-card-shadow);
	text-align: center;
	display: flex;
	flex-direction: column;
}

/* A square window; the image sits centred inside it at its own aspect ratio, never cropped. Positioned
   absolutely so a portrait image can't stretch the square (Chrome can't resolve max-height: 100% against a
   height that comes from aspect-ratio on a flex item). */
.pgi-thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	min-height: 0;
}
.pgi-thumb img {
	position: absolute;
	inset: 0;
	margin: auto;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	box-sizing: border-box;
	border: var(--pgi-thumb-border);
	padding: var(--pgi-thumb-padding);
	background: var(--pgi-thumb-bg);
	border-radius: 0;
}
/* Card thumbnails with their pixel size on the tag (style="--pgi-w:320;--pgi-h:213", pgi_thumb_html() in the
   display module; 2.8.3): an explicit width and height, so the browser knows the box before the image loads.
   Chrome reports lazy-loaded images sized "auto" (the rule above) as having no dimensions, whatever their width
   and height attributes say. Same result as the rule above: fitted in the square, never enlarged, never cropped.
   For a square of side S, 100% is S both ways, so each side is the smallest of: S, the image's own size plus its
   border and padding, and S scaled by the image's shape. */
.pgi-thumb img[style*="--pgi-w"] {
	width: min(100%, calc(var(--pgi-w) * 1px + var(--pgi-thumb-frame)), calc(100% * var(--pgi-w) / var(--pgi-h)));
	height: min(100%, calc(var(--pgi-h) * 1px + var(--pgi-thumb-frame)), calc(100% * var(--pgi-h) / var(--pgi-w)));
	max-width: none;
	max-height: none;
}

/* Two lines (title, ID) under the image; card bottom padding 0 */
.pgi-card figcaption { margin: 0; padding: 0 0 2px; line-height: 1.5; }
.pgi-card-title {
	margin: 0;
	font-family: inherit;
	font-size: var(--pgi-title-size);
	font-weight: 500;
	line-height: 1.5;
}
.pgi-album .pgi-card .pgi-card-title,
.pgi-album .pgi-card .pgi-card-title a {
	text-decoration: none;
	color: var(--pgi-title-color);
}
.pgi-album .pgi-card .pgi-card-title a:hover,
.pgi-album .pgi-card .pgi-card-title a:focus { text-decoration: underline; }
.pgi-card-id {
	display: block;
	font-family: inherit;
	font-size: var(--pgi-id-size);
	font-weight: 500;
	line-height: 1.5;
	color: var(--pgi-id-color);
}

/* Child-album cards: same frame as image cards, title only. The "stack of slides" edge is zpReBoot's
   .album-thumb .thumb-panel rule: 2px solid top/left, 3px double right/bottom, #888, soft drop shadow. */
.pgi-album .pgi-card.pgi-card--album {
	border-width: 2px 3px 3px 2px;
	border-style: solid double double solid;
	border-color: #888888;
	box-shadow: 2px 2px 3px rgba(34, 25, 25, 0.4);
}
.pgi-card--album figcaption { padding-bottom: 6px; }
.pgi-thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #000000;
	background: #f5f5f5;
}
.pgi-album--subalbums + .pgi-album { margin-top: 2em; }

/* Search results: the albums above it ("Festivals » Glastonbury") under the title, smaller and grey */
.pgi-album .pgi-card .pgi-card-path {
	font-size: 0.85rem;
	font-weight: 400;
	color: #6c757d;
}

/* Album description: the text below the album grid */
.pgi-album-description {
	margin: 0 0 1.5em;
	text-align: center;
	font-size: 1.0rem;
}
.pgi-main .pgi-album-description { margin: 0 0 1.5em; }
.pgi-album-description > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Nav pills (Previous / Up / Slideshow / Next) */

@font-face {
	font-family: "Glyphicons Halflings";
	src: url("fonts/glyphicons-halflings-regular.woff2") format("woff2"),
	     url("fonts/glyphicons-halflings-regular.woff") format("woff");
	font-display: block;
}
.glyphicon {
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: "Glyphicons Halflings";
	font-style: normal;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.glyphicon-chevron-left::before  { content: "\e079"; }
.glyphicon-chevron-right::before { content: "\e080"; }
.glyphicon-chevron-up::before    { content: "\e113"; }
.glyphicon-film::before          { content: "\e009"; } /* View as Slideshow, as zpReBoot */
.glyphicon-play::before          { content: "\e072"; }
.glyphicon-pause::before         { content: "\e073"; }
.glyphicon-remove::before        { content: "\e014"; }
.glyphicon-search::before        { content: "\e003"; }

.pgi-album-nav,
.pgi-main .pgi-album-nav { margin: 0 0 1em; }
.pgi-album-nav.pgi-album-nav--bottom { margin: 1em 0 0; }
/* The top pills: the count line above them, the title (or a filter or search box) 12px below (2.5.0). */
.pgi-album-nav.pgi-album-nav--top,
.pgi-main .pgi-album-nav.pgi-album-nav--top { margin-bottom: 12px; }

.pgi-album-nav .pgi-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pgi-album-nav .pgi-pills .pgi-pill-item { margin: 0; padding: 0; }
.pgi-album-nav .pgi-pills .pgi-pill {
	display: block;
	padding: 5px 14px;
	margin-right: 0.25rem;
	margin-left: 0.25rem;
	border: 1px solid #dddddd;
	border-radius: 15px;
	line-height: 1.5;
	color: var(--pgi-link);
	background-color: #f5f5f5;
	text-decoration: none;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.pgi-album-nav .pgi-pills a.pgi-pill:hover,
.pgi-album-nav .pgi-pills a.pgi-pill:focus {
	color: var(--pgi-link-hover);
	background-color: #eeeeee;
	text-decoration: none;
}
.pgi-album-nav .pgi-pills a.pgi-pill:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.pgi-album-nav .pgi-pills .pgi-pill.is-disabled { color: #cccccc; }

/* ---------------------------------------------------------------- Count line under the pills */

/* "12 albums, 340 images" / "Image 3 of 24" / "340 images, page 2 of 8": above the top pills (since 2.5.0, 0.5em
   from them since 2.5.1) and below the bottom ones (0.6em since 2.5.3). The empty search page has a blank line in its place
   (.pgi-count--blank), so its pills sit where they do on every other page. */
.pgi-count {
	margin: 0 0 1em;
	text-align: center;
	font-size: 1.0rem;
	line-height: 1.5;
}
.pgi-main .pgi-count { margin: 0 0 1em; }
.pgi-album-nav:has(+ .pgi-count) { margin-bottom: 0.4em; }
.pgi-count.pgi-count--bottom { margin: 0.6em 0 0; }
.pgi-count.pgi-count--top,
.pgi-main .pgi-count.pgi-count--top { margin-bottom: 0.5em; }
/* No extra room where Sort / Show controls overhang the line (2.5.2): the top pills line up on every page, the
   controls sitting 3px closer to them. */

/* Count with Sort (and Show) after it on one centred line; the controls wrap under the count on narrow phones.
   30px controls overhang the 24px text line (-3px margins), so the grid starts where it does on album pages. */
.pgi-count.pgi-count--with-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4em 1em;
}
.pgi-sort {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	height: 24px;
	margin: 0;
}
.pgi-sort-label { font-weight: 700; }
.pgi-sort select.pgi-sort-field {
	width: auto;
	height: 30px;
	margin: -3px 0;
	padding: 0 2em 0 0.6em;
	font-size: 1.0rem;
	line-height: 1.2;
	color: #333333;
	background-color: #f5f5f5;
	border: 1px solid #dddddd;
	border-radius: 15px;
}
.pgi-sort .pgi-sort-dir,
.pgi-sort .pgi-sort-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	margin: -3px 0;
	padding: 0 0.6em;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--pgi-link);
	background-color: #f5f5f5;
	border: 1px solid #dddddd;
	border-radius: 15px;
	text-decoration: none;
	cursor: pointer;
}
.pgi-sort a.pgi-sort-dir:hover,
.pgi-sort a.pgi-sort-dir:focus {
	color: var(--pgi-link-hover);
	background-color: #eeeeee;
	text-decoration: none;
}
.pgi-sort select.pgi-sort-field:focus-visible,
.pgi-sort a.pgi-sort-dir:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ---------------------------------------------------------------- Page numbers (keyword, place and search pages) */

.pgi-term-archive .pgi-count--bottom + .pgi-pagination,
.pgi-term-archive .pgi-album-nav--bottom + .pgi-pagination { margin-top: 1.0em; }
.pgi-term-archive .pgi-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 1em;
}
.pgi-term-archive .pgi-pagination .page-numbers {
	display: block;
	padding: 5px 14px;
	border: 1px solid #dddddd;
	border-radius: 15px;
	line-height: 1.5;
	color: var(--pgi-link);
	background-color: #f5f5f5;
	text-decoration: none;
}
.pgi-term-archive .pgi-pagination a.page-numbers:hover,
.pgi-term-archive .pgi-pagination a.page-numbers:focus {
	color: var(--pgi-link-hover);
	background-color: #eeeeee;
	text-decoration: none;
}
.pgi-term-archive .pgi-pagination .page-numbers.current { color: #ffffff; background-color: var(--pgi-link); border-color: var(--pgi-link); }
.pgi-term-archive .pgi-pagination .page-numbers.dots { border-color: transparent; background: transparent; color: #6c757d; }
.pgi-term-empty { text-align: center; }

/* ---------------------------------------------------------------- Image page */

/* Measured from zpReBoot's image page on 18 Oct 2026: blocks spaced 16px (Bootstrap pb-md-3); metadata lines
   tight, with 16px after each group. */

/* The image: 720px on its long edge at most, centred, 1px black border, no shadow. */
.pgi-image-page figure.pgi-image-frame {
	margin: 0 0 16px;
	padding: 0;
	text-align: center;
	box-shadow: none;
}
.pgi-image-page .pgi-image-frame a { display: inline-block; }
.pgi-image-page .pgi-image-frame img {
	display: block;
	margin: 0 auto;
	width: auto;
	height: auto;
	max-width: min(100%, 720px);
	max-height: 720px;
	box-sizing: border-box;
	border: var(--pgi-frame-border);
	padding: var(--pgi-frame-padding);
	background: var(--pgi-frame-bg);
	border-radius: 0;
	box-shadow: none;
}

/* Everything below the image is centred, body size */
.pgi-image-page .pgi-image-description {
	text-align: center;
	font-size: 1.0rem;
	line-height: 1.5;
}
.pgi-image-page .pgi-image-caption { margin: 0 0 16px; }
.pgi-image-page .pgi-meta-group { margin: 0 0 16px; }
.pgi-image-page .pgi-meta { margin: 0; }
.pgi-image-page .pgi-meta-label { font-weight: 700; }
.pgi-image-page .pgi-image-description .pgi-meta a {
	color: var(--pgi-link);
	text-decoration: none;
}
.pgi-image-page .pgi-image-description .pgi-meta a:hover,
.pgi-image-page .pgi-image-description .pgi-meta a:focus {
	color: var(--pgi-link-hover);
	text-decoration: underline;
}

/* Places and Keywords / Tags: heading on its own line, then Bootstrap 4 btn-primary btn-sm buttons, 4px apart. */
.pgi-image-page .pgi-pill-block { margin: 24px 0 16px; }
.pgi-image-page .pgi-pill-block .pgi-meta-label { display: block; }
.pgi-image-page .pgi-album-nav.pgi-album-nav--bottom { margin: 0; }

.pgi-tag-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0 -4px;
	padding: 0;
}
.pgi-tag-list li { margin: 0; padding: 4px; }
.pgi-tag-list a.pgi-tag {
	display: inline-block;
	padding: 4px 8px;
	font-size: 14px;
	line-height: 1.5;
	color: #ffffff;
	background-color: #007bff;
	border: 1px solid #007bff;
	border-radius: 0.2rem;
	text-decoration: none;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.pgi-tag-list a.pgi-tag:hover,
.pgi-tag-list a.pgi-tag:focus {
	color: #ffffff;
	background-color: #0069d9;
	border-color: #0062cc;
	text-decoration: none;
}
.pgi-tag-list a.pgi-tag:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

/* ---------------------------------------------------------------- Homepage slider */

/* As zpReBoot's FlexSlider: 0.5 s fade, no caption, dots only. All slides share one grid cell, so the box is as
   tall as the tallest image; only the slide showing can be clicked. */
.pgi-slider {
	position: relative;
	max-width: 760px;
	margin: 0 auto 2em;
}
.pgi-slides { display: grid; }
.pgi-slide {
	grid-area: 1 / 1;
	margin: 0;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.pgi-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.5s ease;
}
.pgi-slide img {
	display: block;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	border: var(--pgi-frame-border);
	padding: var(--pgi-frame-padding);
	background: var(--pgi-frame-bg);
}

/* Dots as zpReBoot's FlexSlider paging (measured 19 Oct 2026): 11px circles, black at 50% (70% hover, 90% for the
   slide showing), faint inner shadow, 12px apart, about 18px below the image. Weighted selectors so the theme's
   button styles don't apply. */
.pgi-slider .pgi-dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 18px 0 0;
	line-height: 0;
}
.pgi-slider .pgi-dots button.pgi-dot {
	display: block;
	flex: none;
	width: 11px;
	height: 11px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	color: transparent;
	font-size: 0;
	line-height: 0;
	opacity: 1;
	cursor: pointer;
}
.pgi-slider .pgi-dots button.pgi-dot:hover,
.pgi-slider .pgi-dots button.pgi-dot:focus { background: rgba(0, 0, 0, 0.7); }
.pgi-slider .pgi-dots button.pgi-dot.is-active { background: rgba(0, 0, 0, 0.9); cursor: default; }
.pgi-slider .pgi-dots button.pgi-dot:focus-visible {
	outline: 0;
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
.pgi-slider.is-single .pgi-dots { display: none; }

@media (prefers-reduced-motion: reduce) {
	.pgi-slide, .pgi-slide.is-active { transition: none; }
}

/* ---------------------------------------------------------------- Index pages: /keywords/ and /location/ */

/* Filter box: full width up to 420px, centred, 40px tall for touch */
.pgi-term-index .pgi-index-filter { max-width: 420px; margin: 0 auto 1.5em; }
.pgi-term-index .pgi-index-filter input.pgi-index-filter-input {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 1em;
	font-size: 1.0rem; /* 16px: stops iOS zooming in on focus */
	color: #333333;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 20px;
}
.pgi-term-index .pgi-index-filter input.pgi-index-filter-input:focus {
	outline: 0;
	border-color: #80bdff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.pgi-term-index .pgi-index-none { text-align: center; color: #6c757d; }

/* Keywords: A–Z jump bar, then each letter's keywords as the image page's blue tag buttons */
.pgi-term-index .pgi-az {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin: 0 0 1.5em;
}
.pgi-term-index .pgi-az a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 4px;
	color: var(--pgi-link);
	background-color: #f5f5f5;
	border: 1px solid #dddddd;
	border-radius: 15px;
	text-decoration: none;
}
.pgi-term-index .pgi-az a:hover,
.pgi-term-index .pgi-az a:focus { color: var(--pgi-link-hover); background-color: #eeeeee; text-decoration: none; }
.pgi-term-index .pgi-az-group { margin: 0 0 1.25em; scroll-margin-top: 1em; }
.pgi-term-index h2.pgi-az-letter {
	margin: 0 0 0.25em;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}
.pgi-term-index .pgi-tag-count {
	display: inline-block;
	margin-left: 0.3em;
	padding: 0 0.4em;
	font-size: 12px;
	border-radius: 0.6em;
	background: rgba(255, 255, 255, 0.25);
}

/* Places: a tree of collapsible sections; rows at least 40px for touch; the name links to its images, the rest
   of the row (and the arrow) opens and closes it. */
.pgi-term-index ul.pgi-tree { list-style: none; margin: 0; padding: 0; }
.pgi-term-index ul.pgi-tree--root { max-width: 640px; margin: 0 auto 2em; }
.pgi-term-index ul.pgi-tree ul.pgi-tree {
	margin-left: 0.9em;
	padding-left: 0.8em;
	border-left: 1px solid #dddddd;
}
.pgi-term-index .pgi-tree li { margin: 0; padding: 0; }
.pgi-term-index .pgi-tree summary,
.pgi-term-index .pgi-tree .pgi-tree-leaf {
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-height: 40px;
	padding: 0 0.25em;
	border-bottom: 1px solid #eeeeee;
}
.pgi-term-index .pgi-tree summary { cursor: pointer; list-style: none; }
.pgi-term-index .pgi-tree summary::-webkit-details-marker { display: none; }
.pgi-term-index .pgi-tree summary::before {
	content: "\e080"; /* Glyphicons chevron-right, turned down when open */
	font-family: "Glyphicons Halflings";
	font-size: 0.8rem;
	color: #6c757d;
	transition: transform 0.15s ease-in-out;
}
.pgi-term-index .pgi-tree details[open] > summary::before { transform: rotate(90deg); }
.pgi-term-index .pgi-tree .pgi-tree-leaf { padding-left: calc(0.25em + 0.8rem + 0.5em); }
.pgi-term-index .pgi-tree a { color: var(--pgi-link); text-decoration: none; }
.pgi-term-index .pgi-tree a:hover,
.pgi-term-index .pgi-tree a:focus { color: var(--pgi-link-hover); text-decoration: underline; }
.pgi-term-index .pgi-tree-count {
	margin-left: auto;
	padding: 0 0.5em;
	font-size: 0.85rem;
	color: #6c757d;
	background: #f5f5f5;
	border: 1px solid #dddddd;
	border-radius: 0.8em;
}

/* ---------------------------------------------------------------- Search (/search/…) */

.pgi-search .pgi-search-form {
	display: flex;
	gap: 6px;
	max-width: 420px;
	margin: 0 auto;
}
/* Results (2.5.3): the box stands in for the title, so the cards start where they do on album pages. The space
   under it makes up the difference between the 40px box and an album title's line (the title size × 1.2). */
.pgi-search .pgi-term-header.is-results { margin-bottom: calc(var(--pgi-page-title-size) * 1.2 + 16px - 40px); }
.pgi-search .pgi-search-form input.pgi-search-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	padding: 0 1em;
	font-size: 1.0rem;
	color: #333333;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 20px;
}
.pgi-search .pgi-search-form input.pgi-search-input:focus {
	outline: 0;
	border-color: #80bdff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.pgi-search .pgi-search-form button.pgi-search-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	color: var(--pgi-link);
	background-color: #f5f5f5;
	border: 1px solid #dddddd;
	border-radius: 20px;
	cursor: pointer;
}
.pgi-search .pgi-search-form button.pgi-search-submit:hover,
.pgi-search .pgi-search-form button.pgi-search-submit:focus {
	color: var(--pgi-link-hover);
	background-color: #eeeeee;
}
.pgi-search .pgi-search-form button.pgi-search-submit:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.pgi-search .pgi-search-submit .glyphicon { top: 0; font-size: 1rem; }

.pgi-search p.pgi-search-help {
	max-width: 640px;
	margin: 16px auto 0;
	text-align: center;
	font-size: 1.0rem;
	line-height: 1.5;
}
.pgi-search p.pgi-search-help a { color: var(--pgi-link); text-decoration: none; }
.pgi-search p.pgi-search-help a:hover,
.pgi-search p.pgi-search-help a:focus { color: var(--pgi-link-hover); text-decoration: underline; }

/* ---------------------------------------------------------------- Full-screen slideshow (pgi-slideshow.js) */

/* Black, filling the screen. Images at their own size, scaled down to fit but never up, crossfading over 0.5 s.
   Caption and controls show on start and on mouse movement or touch, then fade after 5 s. Buttons 44px for touch. */
html.pgi-ss-open,
html.pgi-ss-open body { overflow: hidden; }

.pgi-ss {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: #000000;
	color: #ffffff;
	outline: 0;
	font-size: 1.0rem;
	line-height: 1.5;
	-webkit-user-select: none;
	user-select: none;
	touch-action: pan-y pinch-zoom;
}
.pgi-ss:not(.is-ui) { cursor: none; }

.pgi-ss-stage {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template: 100% / 100%;
	place-items: center;
}
.pgi-ss .pgi-ss-img {
	grid-area: 1 / 1;
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	border: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.pgi-ss .pgi-ss-img:not([src]) { visibility: hidden; }
.pgi-ss .pgi-ss-img.is-on { opacity: 1; }

.pgi-ss .pgi-ss-status {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0;
	transform: translateY(-50%);
	text-align: center;
	color: #cccccc;
}
.pgi-ss .pgi-ss-status:empty { display: none; }

.pgi-ss-ui {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.pgi-ss.is-ui .pgi-ss-ui {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

.pgi-ss .pgi-ss-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	text-align: center;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 40%);
}
.pgi-ss .pgi-ss-controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 0 0 8px;
}
.pgi-ss .pgi-ss-caption {
	max-width: 900px;
	margin: 0 auto;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.pgi-ss .pgi-ss-caption strong { font-weight: 700; }

.pgi-ss button.pgi-ss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 22px;
	box-shadow: none;
	cursor: pointer;
	line-height: 1;
}
.pgi-ss button.pgi-ss-btn:hover,
.pgi-ss button.pgi-ss-btn:focus {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.3);
}
.pgi-ss button.pgi-ss-btn:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.6);
}
.pgi-ss .pgi-ss-btn .glyphicon { top: 0; font-size: 1.1rem; }
.pgi-ss button.pgi-ss-close {
	position: absolute;
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.pgi-ss .pgi-ss-img,
	.pgi-ss-ui,
	.pgi-ss.is-ui .pgi-ss-ui { transition: none; }
}