/**
 * Ignite Gallery v6 — frontend stylesheet.
 * Semantic class contract (documented): ig-gallery, ig-menu, ig-tile*, ig-thumbs,
 * ig-thumb*, ig-tag-filter*, ig-grid-{by-rows|by-columns|by-columns-aligned|justified|metro},
 * ig-span-{tall|wide|big}, ig-hover-{scale|scale-icon|grey|none}, ig-prev-next, ig-password.
 * Logical properties throughout (RTL).
 */

.ig-gallery {
	--ig-gap: 10px;
	--ig-thumb-w: 130px;
	--ig-thumb-h: 100px;
	--ig-menu-w: 400px;
	--ig-menu-h: 280px;
	container-type: inline-size;
	margin-block-end: 1.5em;
}
/* With a slideshow, nothing in the gallery (thumb grid, menu, descriptions, comments) is
   wider than the slideshow: the widest main image, plus its side columns in a stage. */
.ig-gallery-capped { max-inline-size: var(--ig-gallery-w, none); }
.ig-align-center.ig-gallery-capped { margin-inline: auto; }

.ig-gallery ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ig-gallery-title { margin-block: 0 0.5em; }

/* Site templates colour every <button> on hover and while pressed (button:hover / :active
   outweigh one class): the gallery's buttons keep their own background (and the page
   buttons their text colour) in those states. First in the file: the states the gallery
   styles itself further down (same weight, later) still win. */
:is(.ig-nav, .ig-playpause, .ig-download, .ig-share, .ig-rating, .ig-scr-btn, .ig-dot, .ig-consent-button, .ig-lbox-thumb):is(:hover, :focus, :active) {
	background-color: transparent;
}
:is(.ig-tag-filter, .ig-hpager-btn, .ig-add-comment-text, .ig-comment-submit):is(:hover, :focus, :active) {
	background-color: transparent;
	color: inherit;
}
.ig-lbox-btn:is(:hover, :focus, :active) { background-color: rgba(0, 0, 0, 0.5); }

/* Search box (profile show_search). */
.ig-gallery-search { position: relative; max-inline-size: 320px; margin-block-end: 1em; }
.ig-gallery-search-icon { position: absolute; inset-block: 0; inset-inline-start: 10px; margin-block: auto; opacity: 0.6; pointer-events: none; }
.ig-gallery-search-input {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 40px;
	padding: 0 10px 0 38px;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
}
.ig-gallery-search-input:focus { border-color: color-mix(in srgb, currentColor 60%, transparent); }
.ig-gallery-description { margin-block-end: 1em; }
.ig-prev-next + .ig-gallery-description, .ig-gallery > .ig-gallery-description:last-child { margin-block: 1em 0; }
.ig-cat-extra-title { font-weight: 600; }
.ig-empty { padding: 1em; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 4px; opacity: 0.8; }

/* ---------- Shared tile/thumb basics ---------- */

.ig-tile,
.ig-thumb-link {
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.ig-tile-img,
.ig-thumb-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.ig-tile-empty {
	background: color-mix(in srgb, currentColor 18%, transparent);
	block-size: auto;
	aspect-ratio: var(--ig-menu-ar, 3 / 2);
}

/* Hover effects (reduced-motion aware) */
.ig-hover-scale .ig-tile:hover .ig-tile-img,
.ig-hover-scale .ig-thumb-link:hover .ig-thumb-img,
.ig-hover-scale-icon .ig-tile:hover .ig-tile-img,
.ig-hover-scale-icon .ig-thumb-link:hover .ig-thumb-img { transform: scale(1.06); }

/* fade_to_grey: the image fades toward a light grey behind it — only the image is
   affected (captions below or overlaid stay untouched). */
.ig-hover-grey .ig-tile-img,
.ig-hover-grey .ig-thumb-img { background: #e9e9e9; }
.ig-hover-grey .ig-tile:hover .ig-tile-img,
.ig-hover-grey .ig-thumb-link:hover .ig-thumb-img { opacity: 0.4; }
/* Tile text stays above any hover treatment. */
.ig-tile-text { position: relative; z-index: 1; }

/* scale_icon: scale plus a zoom badge fading in at the centre. */
.ig-hover-scale-icon .ig-tile::after,
.ig-hover-scale-icon .ig-thumb-link::after {
	/* The cross is two 2px bars drawn on the circle, not a "+" character: where a font puts
	   its "+" glyph differs per site font, so it would not sit in the centre. */
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background:
		linear-gradient(#fff, #fff) center / 18px 2px no-repeat,
		linear-gradient(#fff, #fff) center / 2px 18px no-repeat,
		rgba(34, 34, 34, 0.7);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.ig-hover-scale-icon .ig-tile:hover::after,
.ig-hover-scale-icon .ig-thumb-link:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.ig-tile-img, .ig-thumb-img { transition: none; }
	.ig-hover-scale .ig-tile:hover .ig-tile-img { transform: none; }
}

/* Video play badge */
.ig-play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
}
.ig-play::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 54%;
	translate: -50% -50%;
	border-block: 9px solid transparent;
	border-inline-start: 14px solid #fff;
}

/* ---------- Sub-gallery menu ---------- */

.ig-menu .ig-menu-list {
	display: grid;
	gap: var(--ig-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(var(--ig-menu-w), 100%), 1fr));
}

/* by_rows menu: JS sets --ig-cols so every row packs exactly — tiles shrink to share
   the row (equal gaps) but the column count never lets a tile exceed the configured
   menu size (downscale only, no upscaling). */
.ig-menu.ig-grid-by-rows .ig-menu-list[style*="--ig-cols"] {
	grid-template-columns: repeat(var(--ig-cols), minmax(0, 1fr));
}

/* justified menu: JS sets row heights/widths from natural ratios (same pass as the
   thumbs justified grid); flex fallback before JS runs. */
.ig-menu.ig-grid-justified .ig-menu-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ig-gap);
}
.ig-menu.ig-grid-justified .ig-menu-item { flex: 1 1 auto; block-size: var(--ig-menu-h); }
.ig-menu.ig-grid-justified .ig-tile { block-size: 100%; }
.ig-menu.ig-grid-justified .ig-tile-img {
	aspect-ratio: auto;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.ig-menu.ig-grid-justified .ig-menu-list.ig-justified-done .ig-menu-item { flex-grow: 0; }

/* by_columns menu: masonry via CSS columns — natural heights per tile; the same
   --ig-cols count keeps columns at or below the configured menu width. */
.ig-menu.ig-grid-by-columns .ig-menu-list {
	display: block;
	columns: var(--ig-cols, 3);
	column-gap: var(--ig-gap);
}
.ig-menu.ig-grid-by-columns .ig-menu-item {
	break-inside: avoid;
	margin-block-end: var(--ig-gap);
}
.ig-menu.ig-grid-by-columns .ig-tile-img {
	aspect-ratio: var(--ig-ar, auto);
	block-size: auto;
}
/* Uncropped masonry: never upscale past the derivative's natural width; the tile
   shrink-wraps so the text overlay matches the image. */
.ig-menu.ig-grid-by-columns.ig-uncropped .ig-tile {
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-inline: auto;
}
.ig-menu.ig-grid-by-columns.ig-uncropped .ig-tile-img {
	inline-size: var(--ig-w, auto);
	max-inline-size: 100%;
}

.ig-menu .ig-tile-img { aspect-ratio: var(--ig-menu-ar, 3 / 2); }

.ig-menu .ig-tile-title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
/* Profile "Heading Type": each level a step apart (h3, the default, as above). */
.ig-menu h1.ig-tile-title { font-size: 1.35rem; }
.ig-menu h2.ig-tile-title { font-size: 1.2rem; }
.ig-menu h4.ig-tile-title { font-size: 0.95rem; }
.ig-menu h5.ig-tile-title { font-size: 0.875rem; }
.ig-menu h6.ig-tile-title { font-size: 0.8rem; }
.ig-menu .ig-tile-description { margin-block-start: 0.25em; font-size: 0.9rem; line-height: 1.4; }
.ig-menu .ig-tile-description > :first-child { margin-block-start: 0; }
.ig-menu .ig-tile-description > :last-child { margin-block-end: 0; }
.ig-menu .ig-tile-meta { display: flex; gap: 0.75em; font-size: 0.8rem; opacity: 0.85; flex-wrap: wrap; }

/* Text overlay vs below */
.ig-text-overlay .ig-tile-text {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 0.6em 0.8em;
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}
/* Everything on the dark overlay is white: templates colour headings (h1-h6, .uk-h5 ...) and
   links themselves, which beats the inherited colour. A template !important still wins. */
.ig-text-overlay .ig-tile-text * { color: inherit; }
.ig-text-below .ig-tile-text { display: block; padding: 0.5em 0.15em; }

/* Menu metro: square cells (row height = column width via JS-set --ig-cell); spans
   double a tile's rows/columns. JS-set --ig-cols keeps cells at or below the square
   base size — downscale only, never upscale. */
.ig-menu.ig-grid-metro .ig-menu-list {
	grid-auto-flow: dense;
	grid-auto-rows: var(--ig-cell, var(--ig-menu-h));
	grid-template-columns: repeat(auto-fill, minmax(min(var(--ig-menu-w), 100%), 1fr));
}
.ig-menu.ig-grid-metro .ig-menu-list[style*="--ig-cols"] {
	grid-template-columns: repeat(var(--ig-cols), minmax(0, 1fr));
}
.ig-menu.ig-grid-metro .ig-menu-item .ig-tile,
.ig-menu.ig-grid-metro .ig-menu-item .ig-tile-img { block-size: 100%; aspect-ratio: auto; }
.ig-menu.ig-grid-metro .ig-span-tall { grid-row: span 2; }
.ig-menu.ig-grid-metro .ig-span-wide { grid-column: span 2; }
.ig-menu.ig-grid-metro .ig-span-big { grid-row: span 2; grid-column: span 2; }

/* ---------- Tag filters ---------- */

.ig-tag-filters { display: flex; flex-wrap: wrap; gap: 0.4em; margin-block: 0.75em; }
.ig-tag-filter {
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	background: transparent;
	color: inherit;
	border-radius: 999px;
	margin: 0;
	padding: 0.25em 0.9em;
	line-height: 1.4;
	cursor: pointer;
	font-size: 0.85rem;
}
.ig-tag-filter.ig-active {
	background: var(--ig-accent, #333);
	border-color: var(--ig-accent, #333);
	color: var(--ig-accent-contrast, #fff);
}
.ig-thumb.ig-tag-hidden { display: none !important; }

/* ---------- Thumbnail grids ---------- */

/* No lightbox (and no slideshow for a scroller): the link stays in the HTML but does nothing (gallery.js). */
.ig-thumbs-static .ig-thumb-link { cursor: default; }

.ig-thumbs { display: grid; gap: var(--ig-gap); margin-block: 1em; }

/* by_rows: uniform tiles */
.ig-thumbs.ig-grid-by-rows {
	grid-template-columns: repeat(var(--ig-per-row, auto-fill), minmax(min(var(--ig-thumb-w), 100%), 1fr));
}
.ig-thumbs.ig-grid-by-rows:not([style*="--ig-per-row"]) {
	grid-template-columns: repeat(auto-fill, minmax(min(var(--ig-thumb-w), 100%), 1fr));
}
/* JS sets --ig-cols: rows pack exactly, tiles shrink to share the row, never upscale. */
.ig-thumbs.ig-grid-by-rows[style*="--ig-cols"] {
	grid-template-columns: repeat(var(--ig-cols), minmax(0, 1fr));
}
.ig-thumbs.ig-grid-by-rows .ig-thumb-link { aspect-ratio: var(--ig-thumb-ar, 4 / 3); }
.ig-thumbs.ig-grid-by-rows .ig-thumb-img { block-size: 100%; }

/* Uncropped thumbs (crop_thumbs = 0): keep the image's own aspect, never upscale —
   the derivative is at most thumb_width wide; it centers in a wider cell. */
.ig-thumbs.ig-grid-by-rows.ig-uncropped { align-items: start; }
/* The link shrink-wraps the image so the info overlay spans the image, not the cell. */
.ig-thumbs.ig-grid-by-rows.ig-uncropped .ig-thumb-link {
	aspect-ratio: auto;
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-inline: auto;
}
.ig-thumbs.ig-grid-by-rows.ig-uncropped .ig-thumb-img {
	inline-size: var(--ig-w, auto);
	block-size: auto;
	max-inline-size: 100%;
	aspect-ratio: var(--ig-ar, auto);
}

/* Uncropped menu tiles (crop_menu = 0): same rule for the sub-gallery grid — natural
   aspect, never upscaled beyond the derivative's size, centered in the cell. The tile
   shrink-wraps the image so the text overlay matches the image width. */
.ig-menu.ig-grid-by-rows.ig-uncropped .ig-menu-list { align-items: start; }
.ig-menu.ig-grid-by-rows.ig-uncropped .ig-tile {
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-inline: auto;
}
.ig-menu.ig-grid-by-rows.ig-uncropped .ig-tile-img {
	aspect-ratio: var(--ig-ar, auto);
	inline-size: var(--ig-w, auto);
	block-size: auto;
	max-inline-size: 100%;
}

/* by_columns: masonry via CSS columns (JS sets --ig-cols so columns never exceed
   thumb_width; images_per_row still wins when configured) */
.ig-thumbs.ig-grid-by-columns {
	display: block;
	columns: var(--ig-cols, var(--ig-per-row, 4));
	column-gap: var(--ig-gap);
}
.ig-thumbs.ig-grid-by-columns .ig-thumb {
	break-inside: avoid;
	margin-block-end: var(--ig-gap);
}
.ig-thumbs.ig-grid-by-columns .ig-thumb-img { block-size: auto; aspect-ratio: var(--ig-ar, auto); }
/* Uncropped masonry thumbs: never upscale past the derivative's natural width. */
.ig-thumbs.ig-grid-by-columns.ig-uncropped .ig-thumb-link {
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-inline: auto;
}
.ig-thumbs.ig-grid-by-columns.ig-uncropped .ig-thumb-img {
	inline-size: var(--ig-w, auto);
	max-inline-size: 100%;
}

/* by_columns_aligned (thumbs and sub-gallery menu): masonry columns whose bottoms line
   up. Before gallery.js runs it is the plain masonry above; gallery.js then places each
   tile in a column (shortest first, so the order reads left to right) and gives every
   column the width that makes it end on the same line — images are never cropped, the
   columns' widths differ slightly instead. */
.ig-thumbs.ig-grid-by-columns-aligned,
.ig-menu.ig-grid-by-columns-aligned .ig-menu-list {
	display: block;
	columns: var(--ig-cols, var(--ig-per-row, 4));
	column-gap: var(--ig-gap);
}
.ig-thumbs.ig-grid-by-columns-aligned .ig-thumb,
.ig-menu.ig-grid-by-columns-aligned .ig-menu-item {
	break-inside: avoid;
	margin-block-end: var(--ig-gap);
}
.ig-thumbs.ig-grid-by-columns-aligned .ig-thumb-img,
.ig-menu.ig-grid-by-columns-aligned .ig-tile-img { block-size: auto; aspect-ratio: var(--ig-ar, auto); }
.ig-grid-by-columns-aligned .ig-tile-empty { aspect-ratio: var(--ig-menu-ar, 3 / 2); }
/* Placed by gallery.js: absolute tiles, JS-set widths / image heights / list height. */
.ig-thumbs.ig-grid-by-columns-aligned.ig-aligned-done,
.ig-menu.ig-grid-by-columns-aligned .ig-menu-list.ig-aligned-done {
	position: relative;
	columns: auto;
}
.ig-aligned-done > .ig-thumb,
.ig-aligned-done > .ig-menu-item {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
}
.ig-aligned-done .ig-thumb-img,
.ig-aligned-done .ig-tile-img {
	inline-size: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* justified: JS sets flex-basis widths; graceful flex fallback before JS runs */
.ig-thumbs.ig-grid-justified {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ig-gap);
}
.ig-thumbs.ig-grid-justified .ig-thumb { flex: 1 1 auto; block-size: var(--ig-thumb-h); }
.ig-thumbs.ig-grid-justified .ig-thumb-link { block-size: 100%; }
.ig-thumbs.ig-grid-justified .ig-thumb-img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ig-thumbs.ig-grid-justified.ig-justified-done .ig-thumb { flex-grow: 0; }

/* metro: dense grid with double cells (JS-set --ig-cols/--ig-cell keep cells square
   and at or below thumb size — downscale only) */
.ig-thumbs.ig-grid-metro {
	grid-auto-flow: dense;
	grid-auto-rows: var(--ig-cell, var(--ig-thumb-h));
	grid-template-columns: repeat(auto-fill, minmax(min(var(--ig-thumb-w), 100%), 1fr));
}
.ig-thumbs.ig-grid-metro[style*="--ig-cols"] {
	grid-template-columns: repeat(var(--ig-cols), minmax(0, 1fr));
}
.ig-thumbs.ig-grid-metro .ig-thumb-link { block-size: 100%; }
.ig-thumbs.ig-grid-metro .ig-thumb-img { block-size: 100%; aspect-ratio: auto; }
.ig-thumbs.ig-grid-metro .ig-span-tall { grid-row: span 2; }
.ig-thumbs.ig-grid-metro .ig-span-wide { grid-column: span 2; }
.ig-thumbs.ig-grid-metro .ig-span-big { grid-row: span 2; grid-column: span 2; }

/* Horizontal pages (thumb_grid_overflow = horizontal): gallery.js splits the grid into
   pages side by side; swipe, trackpad or the buttons below move between them. */
.ig-hpager { margin-block: 1em; }
.ig-hpager-track {
	display: flex;
	align-items: flex-start;
	gap: var(--ig-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ig-hpager-track::-webkit-scrollbar { display: none; }
.ig-hpager-track > .ig-thumbs {
	flex: 0 0 100%;
	min-inline-size: 0;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.ig-hpager-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	margin-block-start: 0.75em;
}
.ig-hpager-nav[hidden] { display: none; }
.ig-hpager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	margin: 0;
	padding: 0;
	line-height: 1;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.ig-hpager-btn svg { inline-size: 12px; block-size: 20px; }
.ig-hpager-btn:hover:not(:disabled) { border-color: currentColor; }
.ig-hpager-btn:focus-visible { outline: 2px solid var(--ig-accent, #333); outline-offset: 2px; }
.ig-hpager-btn:disabled { opacity: 0.35; cursor: default; }
.ig-hpager-count { min-inline-size: 4em; text-align: center; font-variant-numeric: tabular-nums; }
[dir="rtl"] .ig-hpager-btn svg { transform: scaleX(-1); }

/* Narrow container fallback: single column under 300px */
@container (max-width: 300px) {
	.ig-thumbs, .ig-menu .ig-menu-list { grid-template-columns: 1fr !important; display: grid; columns: auto; }
}

/* Thumb info */
.ig-thumb { position: relative; }
span.ig-thumb-info {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 0.35em 0.6em;
	font-size: 0.78rem;
	color: #fff;
	/* Dark enough behind the text on any photo (WCAG 1.4.3): 0.55 black is the lightest that
	   keeps white text at 4.5:1 on a white photo. */
	background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7));
	pointer-events: none;
}
div.ig-thumb-info { font-size: 0.78rem; padding-block: 0.3em; opacity: 0.85; }
/* "… On Hover": the same overlay, hidden until the thumb is hovered or keyboard-focused.
   Touch screens cannot hover, so there it always shows (as the plain overlay options). */
.ig-info-hover span.ig-thumb-info { opacity: 0; transition: opacity 0.25s ease; }
.ig-info-hover .ig-thumb-link:hover span.ig-thumb-info,
.ig-info-hover .ig-thumb-link:focus-visible span.ig-thumb-info { opacity: 1; }
@media (hover: none) {
	.ig-info-hover span.ig-thumb-info { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.ig-info-hover span.ig-thumb-info { transition: none; }
}

/* ---------- Slideshow ---------- */

.ig-slideshow {
	position: relative;
	margin-block: 1em;
	overflow: hidden;
	/* Ratio box on the shell (largest main file on disk);
	   the track is out of flow so no single image can stretch it. Shorter uncropped
	   images sit centred with transparent space around them. */
	aspect-ratio: var(--ig-main-ar, 4 / 3);
	background: transparent;
	/* Never wider than the main image (standalone slideshow; the stage caps it otherwise). */
	max-inline-size: var(--ig-main-w, none);
	/* Horizontal swipes are the slideshow's (gallery.js); touch browsers would otherwise take
	   the gesture over and cancel the pointer before it ends. Page scroll and zoom still work. */
	touch-action: pan-y pinch-zoom;
	/* Full width up to that cap, also as a flex item in the stage: centre alignment's auto
	   margins would otherwise shrink it to its content — none, the track is out of flow. */
	inline-size: 100%;
}
.ig-slideshow .ig-slides {
	position: absolute;
	inset: 0;
	display: flex;
	transition: transform var(--ig-duration, 400ms) ease;
}
.ig-slideshow .ig-slide {
	flex: 0 0 100%;
	position: relative;
	/* One-cell grid: the media centres in it and an overlay caption (same cell, end-aligned)
	   spans exactly the image, not the slide. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	justify-content: center;
	align-content: center;
	background: transparent;
}
/* The slide's own image link (direct child) only — not links inside the description. */
.ig-slide > *, .ig-slide > a > .ig-slide-media { grid-area: 1 / 1; }
.ig-slide > a { display: contents; }
.ig-slide-media, .ig-slide-video, .ig-slide-video iframe, .ig-slide-video video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	border: 0;
}
/* Images keep their own size (never upscaled, ratio preserved) and are centred in the
   slide's grid cell — an 800×433 file occupies exactly 800×433 of an 800×600 box. */
img.ig-slide-media {
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 100%;
	align-self: center;
	justify-self: center;
}

/* Description on top of the image (photo_des_position = overlay).
   Positioned over the image's rendered box by gallery.js (placeOverlay); the CSS default
   spans the slide until it runs. */
.ig-description-overlay {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	inline-size: 100%;
	box-sizing: border-box;
	padding: 15px;
	/* The lightest black that keeps white text at 4.5:1 on a white photo (WCAG 1.4.3). */
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.5;
	z-index: 1;
}
.ig-description-overlay a, .ig-description-overlay .ig-exif-gps a { color: rgba(255, 255, 255, 0.7); text-decoration: underline; }
.ig-slideshow:has(.ig-dotnav) .ig-description-overlay { padding-block-end: 40px; } /* room for the dots */
.ig-description-overlay .ig-exif { margin-block-start: 5px; font-size: 12px; }
.ig-description-overlay .ig-exif > span { display: inline-block; padding: 0 10px; }
.ig-description-overlay .ig-exif > span:first-child { padding-inline-start: 0; }
.ig-slide-video { position: relative; }
.ig-slide-video iframe { position: absolute; inset: 0; }
/* A <video> from an embed code fills the slide from the start too (without this it shows at
   the browser's 300x150 default until its metadata loads, then at its own size). */
.ig-slide-video video { position: absolute; inset: 0; }

/* Video consent (gdpr_consent): poster + message + button until the visitor agrees. */
.ig-consent {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111 center / cover no-repeat;
}
.ig-consent-box {
	max-inline-size: min(90%, 420px);
	padding: 14px 18px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: center;
}
.ig-consent-message a { color: #fff; text-decoration: underline; }
.ig-consent-button {
	margin-block-start: 10px;
	padding: 6px 18px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 3px;
	background: transparent;
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.ig-consent-button:hover, .ig-consent-button:focus-visible { background: rgba(255, 255, 255, 0.15); }

/* fade / scale: slides stack, active on top (row pinned to the box — intrinsic image
   sizes must never grow it) */
.ig-transition-fade .ig-slides, .ig-transition-scale .ig-slides {
	display: grid;
	grid-template-rows: 100%;
	grid-template-columns: 100%;
	transition: none;
}
.ig-transition-fade .ig-slide, .ig-transition-scale .ig-slide {
	grid-area: 1 / 1;
	min-block-size: 0;
	min-inline-size: 0;
	opacity: 0;
	transition: opacity var(--ig-duration, 400ms) ease, transform var(--ig-duration, 400ms) ease;
	pointer-events: none;
}
.ig-transition-scale .ig-slide { transform: scale(1.08); }
.ig-transition-fade .ig-slide.ig-active, .ig-transition-scale .ig-slide.ig-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Ken Burns */
.ig-kenburns .ig-slide.ig-active img { animation: ig-kenburns 9s ease-out both; }
@keyframes ig-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.12); }
}

/* Prev/next arrows: flush to the edge, 25×40 chevron on a
   translucent block, 25px of extra click area towards the image. */
.ig-nav {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	border: 0;
	margin: 0;
	padding: 25px;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	line-height: 0;
	cursor: pointer;
	z-index: 2;
}
.ig-nav-prev { inset-inline-start: 0; padding-inline-start: 0; }
.ig-nav-next { inset-inline-end: 0; padding-inline-end: 0; }
.ig-nav svg {
	display: block;
	inline-size: 25px;
	block-size: 40px;
	padding: 10px;
	box-sizing: content-box;
	background: rgba(0, 0, 0, 0.5);
}
.ig-nav:hover { color: #fff; }

/* Dot nav: bottom centre, 10px rings, 12px apart, filled when active. */
.ig-dotnav {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 0;
	translate: -50% 0;
	margin: 15px;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	inline-size: max-content;
	max-inline-size: calc(100% - 30px);
	justify-content: center;
	z-index: 2;
}
/* The button is a 24px target (WCAG 2.5.8); the 10px ring is drawn inside it, with a dark
   edge so it shows on light photos (WCAG 1.4.11). */
.ig-dot {
	inline-size: 24px;
	block-size: 24px;
	margin: 0;
	padding: 0;
	line-height: 1;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.ig-dot::before {
	content: "";
	inline-size: 10px;
	block-size: 10px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
	transition: background-color 0.2s ease-in-out;
}
.ig-dot:hover::before, .ig-dot.ig-active::before { background: rgba(255, 255, 255, 0.9); }

/* Top-right overlay: play/pause, numbering, share, download,
   rating and hits. */
.ig-slideshow-overlay {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 15px;
	background: rgba(0, 0, 0, 0.6);
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	line-height: 24px;
	z-index: 2;
}
.ig-slideshow-overlay svg { inline-size: 20px; block-size: 20px; fill: currentColor; display: block; }
.ig-playpause, .ig-download, .ig-share, .ig-rating {
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}
.ig-playpause:hover, .ig-download:hover, .ig-share:hover, .ig-rating:hover { color: #fff; }
/* Like: heart with the vote count tucked in its lower-right corner. */
.ig-rating { position: relative; inline-size: 24px; block-size: 20px; text-align: start; }
.ig-rating svg { display: block; }
.ig-rating .ig-rating-number {
	position: absolute;
	inset-inline-end: -2px;
	inset-block-end: -4px;
	font-size: 10px;
	line-height: 10px;
	color: #fff;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}
.ig-toast {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-end: 0;
	margin-block-start: 6px;
	padding: 0.4em 0.7em;
	font-size: 0.8rem;
	line-height: 1.3;
	white-space: nowrap;
	color: #fff;
	background: rgba(34, 34, 34, 0.9);
	border-radius: 3px;
	z-index: 5;
}
.ig-playpause .ig-icon-pause { display: none; }
.ig-playpause[data-ig-playing="1"] .ig-icon-play { display: none; }
.ig-playpause[data-ig-playing="1"] .ig-icon-pause { display: block; }
.ig-counter, .ig-hits { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.ig-slideshow .ig-slides, .ig-transition-fade .ig-slide, .ig-transition-scale .ig-slide { transition: none; }
	.ig-kenburns .ig-slide.ig-active img { animation: none; }
}

/* ---------- Thumb scroller ---------- */

.ig-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* never size the column to strip content */
	gap: var(--ig-gap, 10px);
	margin-block: 1em;
	align-items: stretch;
	max-inline-size: var(--ig-stage-w, none); /* never wider than the main image (+ side strip) */
}
.ig-stage .ig-slideshow { margin-block: 0; min-inline-size: 0; }
/* Profile "gallery alignment": center the stage/slideshow when narrower than the page. */
.ig-align-center .ig-stage,
.ig-align-center .ig-slideshow { margin-inline: auto; }
/* Side columns (thumbs left/right, descriptions left/right): fixed widths from PHP; their
   content is absolutely positioned so the row height comes from the main column only
   and the column scrolls/fills to the slideshow height. */
.ig-stage-cols-l  { grid-template-columns: var(--ig-left-w) minmax(0, 1fr); }
.ig-stage-cols-r  { grid-template-columns: minmax(0, 1fr) var(--ig-right-w); }
.ig-stage-cols-lr { grid-template-columns: var(--ig-left-w) minmax(0, 1fr) var(--ig-right-w); }
.ig-stage-main { display: flex; flex-direction: column; gap: var(--ig-gap, 10px); min-inline-size: 0; }
.ig-stage-side { position: relative; min-block-size: 0; }
.ig-stage-side-inner { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--ig-gap, 10px); }
.ig-stage-side .ig-scroller-v { flex: 1 1 auto; min-block-size: 0; inline-size: 100%; }
.ig-stage-side .ig-image-descriptions { flex: 0 1 auto; min-block-size: 0; overflow: auto; }
.ig-stage-side .ig-image-descriptions:only-child { flex: 1 1 auto; }
.ig-stage-side .ig-comments { flex: 0 1 auto; min-block-size: 0; overflow: auto; }
.ig-stage-side .ig-comments:only-child { flex: 1 1 auto; }

/* ---------- Comments ---------- */
.ig-comments { font-size: 0.9rem; }
.ig-comments-below { padding-block-start: 5px; inline-size: 100%; }
.ig-comments-left { padding-inline-end: 5px; }
.ig-comments-right { padding-inline-start: 10px; }
.ig-comment { padding-block: 4px 3px; border-block-end: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.ig-comment-data { font-style: italic; font-size: 12px; opacity: 0.85; }
.ig-comment-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ig-comments-summary { margin-block: 6px; font-size: 10px; }
.ig-comments-form { position: relative; }
.ig-add-comment-text {
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}
.ig-comments-textarea-wrapper { clear: both; margin-block-start: 6px; }
.ig-comments-form-textarea {
	display: block;
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: 80px;
	margin-block-end: 5px;
	padding: 6px;
	font: inherit;
	font-size: 0.9rem;
}
.ig-recaptcha { margin-block-end: 5px; }
.ig-recaptcha-missing { margin-block-end: 5px; font-size: 0.85em; color: #b42318; }
.ig-comment-submit {
	padding: 5px 15px;
	background: none;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 0;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}
.ig-comment-submit:hover { border-color: currentColor; }

/* Main-image descriptions (photo_des_position left/right/above/below) */
.ig-image-descriptions { inline-size: 100%; box-sizing: border-box; overflow: auto; }
.ig-image-description { display: none; }
.ig-image-description.ig-active { display: block; }
.ig-image-descriptions-left .ig-image-description { padding-inline-end: 5px; }
.ig-image-descriptions-right .ig-image-description { padding-inline-start: 8px; }
.ig-des-filename { display: block; margin-block-end: 5px; }
.ig-tags-wrapper { margin-block-start: 4px; }
.ig-tags-link { display: inline-block; margin-inline-end: 0.4em; }
.ig-description-overlay .ig-tags-link { color: #fff; }
.ig-img-extra { padding-block-start: 4px; }
.ig-img-extra-title, .ig-exif-title { font-weight: 600; }
.ig-has-exif-info .ig-image-description { text-align: center; }
.ig-image-descriptions-above .ig-exif, .ig-image-descriptions-below .ig-exif { margin-block-start: 5px; text-align: center; }
.ig-image-descriptions-above .ig-exif > span, .ig-image-descriptions-below .ig-exif > span { display: inline-block; padding: 3px 10px; }
.ig-image-descriptions-left .ig-exif, .ig-image-descriptions-right .ig-exif { margin-block: 5px; }
.ig-image-descriptions-left .ig-exif > span, .ig-image-descriptions-right .ig-exif > span { display: block; }

.ig-scroller { position: relative; min-inline-size: 0; min-block-size: 0; }
.ig-scroller-viewport {
	overflow: auto;
	scrollbar-width: none;
}
.ig-scroller-viewport::-webkit-scrollbar { display: none; }

.ig-thumbs.ig-layout-scroller {
	display: flex;
	gap: var(--ig-gap, 10px);
	margin-block: 0;
}
.ig-layout-scroller .ig-thumb {
	flex: 0 0 auto;
	inline-size: var(--ig-thumb-w, 130px);
}
.ig-layout-scroller .ig-thumb-link { display: block; aspect-ratio: var(--ig-thumb-ar, 4 / 3); }
.ig-layout-scroller .ig-thumb-img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Uncropped scroller (each thumb at its file's own size, bounded by the profile
   thumb size, never upscaled); thumbs centre on the cross axis. */
.ig-layout-scroller.ig-uncropped { align-items: center; }
.ig-layout-scroller.ig-uncropped .ig-thumb { inline-size: auto; }
.ig-layout-scroller.ig-uncropped .ig-thumb-link { aspect-ratio: auto; inline-size: fit-content; }
.ig-layout-scroller.ig-uncropped .ig-thumb-img {
	inline-size: var(--ig-w, auto);
	block-size: auto;
	aspect-ratio: var(--ig-ar, auto);
	max-inline-size: var(--ig-thumb-w, 130px);
	max-block-size: var(--ig-thumb-h, 100px);
}
.ig-scroller-v .ig-layout-scroller.ig-uncropped .ig-thumb { inline-size: 100%; }
.ig-scroller-v .ig-layout-scroller.ig-uncropped .ig-thumb-link { margin-inline: auto; }
.ig-layout-scroller .ig-thumb.ig-scr-active .ig-thumb-link {
	outline: 2px solid var(--ig-accent, #333);
	outline-offset: -2px;
}

/* Arrows sit ON the strip: the viewport spans the
   full stage width and the 25×40 chevrons float 15px in from each end. */
.ig-scr-btn {
	position: absolute;
	z-index: 2;
	border: 0;
	margin: 0;
	padding: 10px;
	background: transparent;
	color: rgba(255, 255, 255, 0.95);
	line-height: 0;
	cursor: pointer;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
.ig-scr-btn svg { display: block; inline-size: 25px; block-size: 40px; }
.ig-scr-btn:hover { color: #fff; }

/* Horizontal strip */
.ig-scroller-h .ig-scr-btn { inset-block-start: 50%; translate: 0 -50%; }
.ig-scroller-h .ig-scr-prev { inset-inline-start: 15px; }
.ig-scroller-h .ig-scr-next { inset-inline-end: 15px; }

/* Vertical strip (left/right of the slideshow): chevrons rotated to point up/down */
.ig-scroller-v {
	inline-size: var(--ig-thumb-w, 130px);
	min-block-size: 0;
}
.ig-scroller-v .ig-scroller-viewport { position: absolute; inset: 0; }
.ig-scroller-v .ig-thumbs.ig-layout-scroller { flex-direction: column; }
.ig-scroller-v .ig-scr-btn { inset-inline-start: 50%; translate: -50% 0; }
.ig-scroller-v .ig-scr-prev { inset-block-start: 15px; rotate: 90deg; }
.ig-scroller-v .ig-scr-next { inset-block-end: 15px; rotate: 90deg; }

.ig-scroller.ig-fits .ig-scr-btn { display: none; }

/* ---------- Lightbox ---------- */

body.ig-lbox-lock { overflow: hidden; }

.ig-lbox { position: fixed; inset: 0; z-index: 10000; display: none; }
/* Layout: [left side] [stage / description-below] [right side], and the thumb strip
   below everything. A side column (lbox_photo_des_position / comments / thumbs
   left|right) stacks its blocks beside the stage and description; thumbs set to
   "below" always span the full width, under the side columns too. */
.ig-lbox.ig-open {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: minmax(0, 1fr) auto auto;
	grid-template-areas: "left stage right" "left caption right" "thumbs thumbs thumbs";
}
/* stage, caption and right are placed in their own rules below. */
.ig-lbox > .ig-lbox-scroller { grid-area: thumbs; }
.ig-lbox-side-left { grid-area: left; }
.ig-lbox-side { position: relative; z-index: 2; display: flex; flex-direction: column; min-block-size: 0; max-block-size: 100vh; box-sizing: border-box; }
/* The right column starts below the toolbar (top-right; its measured height, set by gallery.js). */
.ig-lbox-side-right { grid-area: right; padding-block-start: var(--ig-lbox-chrome-h, 60px); }
.ig-lbox-side .ig-lbox-caption { flex: 0 1 auto; min-block-size: 0; overflow: auto; inline-size: var(--ig-lbox-des-w, 200px); box-sizing: border-box; text-align: start; }
.ig-lbox-side .ig-lbox-caption:only-child { flex: 1 1 auto; }
.ig-lbox-side .ig-lbox-scroller { flex: 1 1 auto; }
/* Lightbox comments column (lbox_comments_position left/right) */
.ig-lbox-side .ig-comments {
	flex: 0 1 auto;
	min-block-size: 0;
	overflow: auto;
	inline-size: 200px;
	box-sizing: border-box;
	padding: 10px;
	color: rgba(255, 255, 255, 0.85);
}
.ig-lbox-side .ig-comments:only-child { flex: 1 1 auto; }
.ig-lbox-side .ig-comment { border-block-end-color: rgba(255, 255, 255, 0.2); }
.ig-lbox-side .ig-comments-form-textarea { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.ig-lbox-side .ig-comment-submit { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
/* The strip wrapper reuses the page scroller's arrow rules (.ig-scroller-h/-v .ig-scr-btn). */
.ig-lbox-scroller { position: relative; z-index: 2; min-inline-size: 0; min-block-size: 0; }
.ig-lbox-scroller.ig-scroller-v { inline-size: auto; display: flex; }
.ig-lbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / var(--ig-lbox-opacity, 0.7));
	backdrop-filter: blur(2px);
}
/* The image fills whatever the stage row leaves it (the caption/thumb rows below take
   their own space) with a 10px margin all round — no fixed vw/vh caps. */
.ig-lbox-stage {
	grid-area: stage;
	position: relative;
	z-index: 1;
	min-block-size: 0;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ig-lbox-media { position: relative; inline-size: 100%; block-size: 100%; overflow: hidden; }
/* Pinch and swipe gestures belong to the lightbox: the page does not zoom or scroll under them. */
.ig-lbox-media { touch-action: none; }
/* One frame per image; the outgoing one is pinned over the stage while it animates out
   (lbox_transition fade/slide/scale). */
.ig-lbox-frame { position: relative; inline-size: 100%; block-size: 100%; display: flex; align-items: center; justify-content: center; }
.ig-lbox-frame-out { position: absolute; inset: 0; pointer-events: none; }
/* ---------- Rounded corners (profile round_large / round_thumb / round_menu) ---------- */

/* Main image: the slideshow box and the image inside it (uncropped images are smaller than the box). */
.ig-round-large .ig-slideshow,
.ig-round-large .ig-slide-media,
.ig-round-large .ig-slide-video iframe, .ig-round-large .ig-slide-video video { border-radius: 10px; }
/* Lightbox image. */
.ig-lbox.ig-round-large .ig-lbox-media img,
.ig-lbox.ig-round-large .ig-lbox-media video,
.ig-lbox.ig-round-large .ig-lbox-video { border-radius: 10px; overflow: hidden; }
/* Thumbnails: grid / scroller (incl. text inside the tile) and the lightbox strip. */
.ig-round-thumb .ig-thumb-link,
.ig-round-thumb .ig-thumb-img,
.ig-lbox.ig-round-thumb .ig-lbox-thumb,
.ig-lbox.ig-round-thumb .ig-lbox-thumb img { border-radius: 8px; }
.ig-lbox.ig-round-thumb .ig-lbox-thumb { overflow: hidden; }
/* Category (menu) images. */
.ig-round-menu .ig-tile,
.ig-round-menu .ig-tile-img { border-radius: 8px; }

.ig-lbox-media img, .ig-lbox-media video {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	transition: transform 0.2s ease;
	user-select: none;
}
.ig-lbox.ig-zoomed .ig-lbox-media img,
.ig-lbox.ig-pinching .ig-lbox-media img { cursor: grab; transition: none; }
.ig-lbox-video { inline-size: min(100%, 1280px); max-block-size: 100%; aspect-ratio: 16 / 9; position: relative; }
.ig-lbox-video iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.ig-lbox-video video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; object-fit: contain; }

.ig-lbox-btn {
	border: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	inline-size: 40px;
	block-size: 40px;
	/* Site templates style every <button> (padding, line-height, margin): a padded button
	   would no longer be a 40px circle. */
	margin: 0;
	padding: 0;
	line-height: 1;
	box-sizing: border-box;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.ig-lbox-btn:hover { background: rgba(0, 0, 0, 0.8); }
.ig-lbox-btn.ig-share svg, .ig-lbox-btn.ig-lbox-play svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.ig-lbox-btn.ig-lbox-rating { position: relative; }
.ig-lbox-btn.ig-lbox-rating svg { inline-size: 18px; block-size: 18px; }
.ig-lbox-btn.ig-lbox-rating .ig-rating-number { position: absolute; inset-inline-end: 3px; inset-block-end: 3px; font-size: 10px; line-height: 10px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); }
.ig-lbox-play .ig-icon-pause { display: none; }
.ig-lbox-play[data-ig-playing="1"] .ig-icon-play { display: none; }
.ig-lbox-play[data-ig-playing="1"] .ig-icon-pause { display: block; }
.ig-lbox-prev, .ig-lbox-next { position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 2; }
.ig-lbox-prev { inset-inline-start: 16px; }
.ig-lbox-next { inset-inline-end: 16px; }

.ig-lbox-chrome {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 14px;
	display: flex;
	gap: 0.5em;
	align-items: center;
	z-index: 3;
}
.ig-lbox-counter, .ig-lbox-hits { color: #fff; font-size: 0.9rem; margin-inline-end: 0.5em; white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 1px #000; }
/* Phones (portrait): smaller buttons, tighter spacing, and the toolbar never wider than the
   screen — what still does not fit wraps onto a second row (close stays top right). The
   prev / next arrows keep their size. */
@media (max-width: 600px) {
	.ig-lbox-chrome {
		inset-block-start: 8px;
		inset-inline-end: 8px;
		max-inline-size: calc(100% - 16px);
		/* wrap-reverse: the last buttons (close) take the top row. */
		flex-wrap: wrap-reverse;
		justify-content: flex-end;
		gap: 4px;
	}
	.ig-lbox-chrome .ig-lbox-btn { inline-size: 32px; block-size: 32px; }
	.ig-lbox-chrome .ig-lbox-btn svg { inline-size: 16px; block-size: 16px; }
	.ig-lbox-counter, .ig-lbox-hits { font-size: 0.8rem; margin-inline-end: 0.25em; }
}

/* Lightbox description (lbox_show_descriptions) */
.ig-lbox-caption {
	position: relative;
	z-index: 2;
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
	padding: 0.6em 1em;
	overflow: auto;
	font-size: 0.9rem;
	line-height: 1.5;
}
.ig-lbox-caption-below { grid-area: caption; max-block-size: var(--ig-lbox-des-h, 22vh); block-size: var(--ig-lbox-des-h, auto); }
.ig-lbox-caption a { color: inherit; text-decoration: underline; }
/* On top of the image: absolutely positioned over the image's rendered box (placeOverlay). */
.ig-lbox-caption-overlay {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	inline-size: 100%;
	box-sizing: border-box;
	padding: 15px;
	/* The lightest black that keeps white text at 4.5:1 on a white photo (WCAG 1.4.3). */
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	text-align: start;
	/* gallery.js caps it at 40% of the image's height (this until it has measured); a longer
	   description scrolls. touch-action: the finger scrolls the text (the media area itself
	   takes every touch: touch-action none); a sideways swipe still changes the image. */
	max-block-size: 40%;
	overflow-y: auto;
	overscroll-behavior: contain;
	touch-action: pan-y;
}
.ig-lbox-caption .ig-exif { margin-block-start: 5px; font-size: 12px; }
.ig-lbox-caption .ig-exif > span { display: inline-block; padding: 0 10px; }
.ig-lbox-caption .ig-exif > span:first-child { padding-inline-start: 0; }
.ig-lbox-side .ig-lbox-caption .ig-exif > span { display: block; padding: 0; }
/* Lightbox thumb strip — sized by the "lightbox thumbnails" profile tab
   (--ig-lbox-thumb-w/h from lbox_thumb_width/height; cropped thumbs fill that box,
   uncropped keep their file's size within it). */
.ig-lbox-thumbs {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 10px;
	padding: 8px 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	justify-content: safe center;
	background: rgba(0, 0, 0, 0.6);
}
.ig-lbox-thumbs::-webkit-scrollbar { display: none; }
.ig-lbox-scroller.ig-scroller-v .ig-lbox-thumbs {
	block-size: 100%;
	box-sizing: border-box;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	min-block-size: 0;
	padding: 12px 8px;
	justify-content: flex-start;
}
.ig-lbox-thumb {
	position: relative;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 3px;
	overflow: hidden;
	line-height: 0;
}
/* Inactive strip thumbs: only the image is dimmed, so their caption text keeps its contrast. */
.ig-lbox-thumb img { opacity: 0.55; }
.ig-lbox-thumb.ig-active img, .ig-lbox-thumb:hover img, .ig-lbox-thumb:focus-visible img { opacity: 1; }
.ig-lbox-thumb img { display: block; max-inline-size: var(--ig-lbox-thumb-w, 130px); max-block-size: var(--ig-lbox-thumb-h, 100px); object-fit: contain; }
.ig-lbox-thumbs-crop .ig-lbox-thumb img { inline-size: var(--ig-lbox-thumb-w, 130px); block-size: var(--ig-lbox-thumb-h, 100px); object-fit: cover; }
.ig-lbox-thumb.ig-active, .ig-lbox-thumb:hover, .ig-lbox-thumb:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.ig-lbox-thumb-info {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 0.3em 0.5em;
	font-size: 0.72rem;
	line-height: 1.3;
	color: #fff;
	text-align: start;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

/* ---------- Pagination / prev-next / password ---------- */

.ig-pagination { margin-block: 1em; }
.ig-pagination ul { display: flex; gap: 0.3em; flex-wrap: wrap; }

.ig-prev-next {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin-block: 1.5em;
	padding-block-start: 0.75em;
	border-block-start: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.ig-prev-next a { text-decoration: none; }
.ig-prev-next .ig-next { margin-inline-start: auto; }

.ig-password { max-width: 30rem; }
.ig-password-form { display: flex; gap: 0.5em; align-items: center; flex-wrap: wrap; margin-block: 1em; }

/* Component option "Disable Saving Images With Right Click Or Drag" (JS guard + no native drag). */
.ig-nosave .ig-slide img,
.ig-nosave .ig-thumb img,
.ig-nosave .ig-lbox-media img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* ---- Accessibility (WCAG 2.2 AA) ---- */

/* Keyboard focus (2.4.7): a white ring with a black edge, visible on light and dark photos and
   on the page background alike. Overrides the per-control hover colours above. */
.ig-gallery :focus-visible,
.ig-lbox :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #000;
}
/* Thumbs inside a scrolling strip would have an outer ring clipped: the ring goes inside,
   white on the button and black on its image. */
.ig-layout-scroller .ig-thumb-link:focus-visible,
.ig-lbox .ig-lbox-thumb:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
	box-shadow: none;
}
.ig-layout-scroller .ig-thumb-link:focus-visible img,
.ig-lbox .ig-lbox-thumb:focus-visible img {
	outline: 2px solid #000;
	outline-offset: -4px;
}
/* The slideshow image opens the lightbox from the keyboard: its ring goes inside the image. */
.ig-slide img[role="button"]:focus-visible {
	outline-offset: -4px;
	box-shadow: none;
	cursor: zoom-in;
}
.ig-slide img[role="button"] { cursor: zoom-in; }

/* Text for screen readers only (lightbox announcements). */
.ig-sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}