/* ===============================================================
   Tile Surrounds: slide viewer for the photo grid (home + gallery).
   Pairs with assets/js/viewer.js. The grid itself is styled in
   home.css / gallery.css; this file only adds the tap target and
   the full-screen viewer.
   =============================================================== */

/* Each photo in the grid is a link to its large picture. */
.masonry-link { display: block; cursor: zoom-in; }
.masonry-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.masonry-caption { pointer-events: none; }   /* a tap on the caption still opens the photo */

/* ---------- The viewer ---------- */
/* While the viewer is open the page behind it does not scroll. Done here, not in the script, so the page
   can never stay locked after the viewer closes. */
html:has(dialog.viewer[open]) { overflow: hidden; }

dialog.viewer {
	position: fixed; inset: 0;
	width: 100%; height: 100%;
	max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0;
	background: rgba(22, 20, 18, 0.97);
	color: #FAF7F2;
	overflow: hidden;
}
dialog.viewer::backdrop { background: rgba(22, 20, 18, 0.97); }

/* One photo per screen; the browser's own swipe scrolling does the sliding. */
.viewer-track {
	position: absolute; inset: 0;
	display: flex;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior: contain;
	touch-action: pan-x pinch-zoom;
	scrollbar-width: none;
	-webkit-tap-highlight-color: transparent;
}
/* Pinched in (viewer.js sets this): one finger moves around the enlarged photo; photos do not change. */
.viewer.is-zoomed .viewer-track { overflow-x: hidden; touch-action: auto; overscroll-behavior: auto; }
.viewer-track::-webkit-scrollbar { display: none; }

.viewer-slide {
	flex: 0 0 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 64px 12px 60px;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.viewer-slide img {
	display: block;
	width: 100%; height: 100%;
	object-fit: contain;
	cursor: default;
}

/* ---------- Buttons ---------- */
.viewer-btn {
	position: absolute; z-index: 2;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	margin: 0; padding: 0; border: 0; border-radius: 50%;
	background: rgba(22, 20, 18, 0.6);
	color: #FAF7F2;
	cursor: pointer;
	touch-action: manipulation;   /* quick taps on an arrow never zoom the page */
	-webkit-tap-highlight-color: transparent;
	transition: background 160ms ease;
}
@media (hover: hover) {
	.viewer-btn:hover { background: rgba(181, 101, 74, 0.9); }   /* the site's terracotta */
}
/* Touch screens: a tapped grid photo does not stay enlarged after the viewer closes. */
@media (hover: none) {
	.masonry-item:hover img { transform: none; }
}
.viewer-btn:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }
.viewer-btn svg { width: 22px; height: 22px; display: block; }

.viewer-close { top: 8px; right: 8px; }
.viewer-prev  { left: 8px;  top: 50%; transform: translateY(-50%); }
.viewer-next  { right: 8px; top: 50%; transform: translateY(-50%); }

/* ---------- Caption + "3 / 14" ---------- */
.viewer-bar {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 0 16px 20px;
	display: flex; justify-content: center; align-items: baseline; gap: 18px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	pointer-events: none;
}
.viewer-cap   { font-weight: 500; }
.viewer-count { opacity: 0.75; white-space: nowrap; }

@media (min-width: 821px) {
	.viewer-slide { padding: 56px 96px 64px; }
	.viewer-close { top: 16px; right: 16px; }
	.viewer-prev  { left: 24px; }
	.viewer-next  { right: 24px; }
}

/* A phone held sideways: little height, so give nearly all of it to the photo. */
@media (max-height: 520px) {
	.viewer-slide { padding: 8px 64px 30px; }
	.viewer-bar   { padding-bottom: 8px; }
	.viewer-close { top: 8px; right: 8px; }
	.viewer-prev  { left: 8px; }
	.viewer-next  { right: 8px; }
}

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