/* Layout dimensions are in px, deliberately, NOT rem.
   The ANC themes set `html { font-size: 10px }`, so every rem here would compute at 62.5%
   of its intended value: a 14rem tile cap became 140px and clamped every tile in the
   gallery rather than just a leftover one. Tile geometry must not track the theme's font
   scale. Type-relative sizing (captions) uses em so it still follows surrounding text. */
.cng-gallery {
	--cng-columns: 3;
	/* 5px matches Jetpack's mosaic spacing on the legacy site. */
	--cng-gap: 5px;
	display: grid;
	gap: var(--cng-gap);
	margin: 24px 0;
}

.cng-layout-grid,
.cng-layout-square {
	grid-template-columns: repeat(var(--cng-columns), minmax(0, 1fr));
}

.cng-layout-masonry {
	display: block;
	columns: var(--cng-columns);
	column-gap: var(--cng-gap);
}

.cng-layout-masonry .cng-item {
	break-inside: avoid;
	margin: 0 0 var(--cng-gap);
}

/* Aspect-ratio driven rows. Images keep their true proportions, so nothing crops.
   Not a bin-packing build — the last row grows wider than a true justified layout. */
.cng-layout-justified {
	/* Target row height, derived from the editor's Columns setting: fewer columns means
	   taller rows and fewer images per row. 525px / 3 = 175px at the default of 3 columns,
	   which is the value calibrated against Jetpack's mosaic on a 690px content column —
	   it reproduces Jetpack's row structure (4 across, then 4 + 2) within ~5px. Changing
	   the default column count therefore changes density without recalibration.

	   Mosaic rows hold as many images as fit, so "columns" is really "landscape-sized
	   images per row" — a row of narrow portraits will hold more than the number set. */
	--cng-row-height: calc(525px / var(--cng-columns, 3));
	/* Ceiling on a tile's effective height. Its only job is to stop a lone leftover tile
	   on the last row from stretching to the full container width — a portrait would
	   otherwise reach ~1035px tall in a 690px column.

	   A flat height, deliberately NOT derived from --cng-row-height. Tying it to the row
	   height meant a low column count produced a ceiling barely above its own target, so
	   whole rows hit the cap, stopped growing, and stopped short of the right edge: at 2
	   per row a last row of two portraits wanted 513px against a 472px ceiling and came up
	   55px short. Measured across 2-5 per row on the reference galleries, 520px leaves
	   every row filling the width while still bounding the pathological single-tile case. */
	--cng-max-tile-height: 520px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cng-gap);
}

.cng-layout-justified .cng-item {
	flex-grow: var(--cng-ratio, 1.5);
	flex-shrink: 1;
	flex-basis: calc(var(--cng-ratio, 1.5) * var(--cng-row-height));
	/* width = ratio x height, so bounding the width bounds the height. */
	max-width: min(100%, calc(var(--cng-ratio, 1.5) * var(--cng-max-tile-height)));
}

.cng-item {
	margin: 0;
	min-width: 0;
}

.cng-link {
	display: block;
	background: #eee;
	overflow: hidden;
}

.cng-image {
	display: block;
	width: 100%;
	height: auto;
}

.cng-layout-grid .cng-image {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.cng-layout-square .cng-image {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.cng-layout-justified .cng-image {
	aspect-ratio: var(--cng-ratio, 1.5);
	object-fit: cover;
}

/* The lightbox is our own fixed overlay and must render identically on every theme, so
   nothing below is rem-based either. Captions render here only, never under tiles. */
.cng-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-rows: auto 1fr auto;
	/* Fully opaque. At 98% the page behind ghosted through — unnoticeable against the old
	   black backdrop, but on white it reads as a rendering fault. */
	background: #fff;
	color: #1a1a1a;
	padding: 16px;
}

.cng-lightbox[hidden] {
	display: none;
}

.cng-lightbox-toolbar {
	display: flex;
	justify-content: flex-end;
}

.cng-lightbox-button {
	border: 0;
	background: transparent;
	color: #444;
	font: inherit;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 8px;
	/* Keep the arrows and close button a usable touch target. */
	min-width: 44px;
	min-height: 44px;
	border-radius: 4px;
	/* Centre the glyph inside that 44px box. Without this the min-width/min-height grow the
	   button around text that stays at its natural position, so the hover background sits
	   visibly off-centre from the arrow or cross it is meant to highlight. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cng-lightbox-button:hover,
.cng-lightbox-button:focus-visible {
	color: #000;
	background: rgba(0, 0, 0, 0.06);
}

.cng-lightbox-button:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

.cng-lightbox-stage {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	min-height: 0;
	/* On the stage, not the image: the swipe pointer listeners are bound here, so the
	   browser must stop claiming horizontal pans across this whole element. */
	touch-action: pan-y;
}

.cng-lightbox-image {
	display: block;
	max-width: 100%;
	/* Reserve room for the 16px padding, the toolbar, and the caption. As 9rem this
	   reserved only 90px on a 10px-rem theme and the caption could be pushed off screen. */
	max-height: calc(100vh - 144px);
	margin: auto;
	object-fit: contain;
	/* On a white backdrop a pale or white-edged photo would bleed into the background with
	   no visible boundary. A hairline does the job without reading as a frame. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.cng-lightbox-caption {
	text-align: center;
	min-height: 1.5em;
	padding-top: 12px;
	font-size: 15px;
	line-height: 1.4;
	color: #444;
	/* Long captions on a narrow phone should not push the image out of the viewport. */
	max-height: 20vh;
	overflow-y: auto;
	overflow-wrap: break-word;
}

body.cng-lightbox-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.cng-lightbox-image {
		transition: none;
	}
}

@media (max-width: 700px) {
	.cng-layout-grid,
	.cng-layout-square {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cng-layout-masonry {
		columns: 2;
	}

	/* Shorter target rows on a tablet, so tiles stay 2-3 across rather than packing in.
	   Same column-derived form: 390px / 3 = 130px at the default. */
	.cng-layout-justified {
		--cng-row-height: calc(390px / var(--cng-columns, 3));
	}
}

@media (max-width: 420px) {
	.cng-layout-grid,
	.cng-layout-square {
		grid-template-columns: 1fr;
	}

	.cng-layout-masonry {
		columns: 1;
	}

	/* One tile per row. Without this a 1.5-ratio image gets a 216px basis and phones
	   pack two tiles per row — and mosaic is the overwhelming majority of content. */
	.cng-layout-justified .cng-item {
		flex-basis: 100%;
	}
}