/*
 * offline.css - restores behaviour the static capture lost.
 * Written for the offline snapshot; not part of the original Cargo output.
 *
 * 1. Lightbox ("quick-view") chrome, matching the live site: white backdrop,
 *    circular edge arrows, circular close button, caption under the image.
 * 2. A few mobile tweaks that ride on Cargo's own `.mobile` class, which
 *    offline.js re-adds (Cargo's JS used to).
 */

/* ---------------------------------------------------------------- affordance */

media-item.zoomable::part(media) {
	cursor: zoom-in;
}

/* ------------------------------------------------------------------ lightbox */

.ol-lightbox {
	position: fixed;
	inset: 0;
	z-index: 5001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	opacity: 0;
	/* A closed overlay must not sit over the page swallowing clicks. */
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s;
	overscroll-behavior: contain;
}

.ol-lightbox[data-open="true"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.22s ease, visibility 0s;
}

.ol-lb-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	/* Leave the edges clear so the arrows never sit on top of the artwork. */
	max-width: min(92vw, calc(100vw - 7.5rem));
	transform: scale(0.985);
	transition: transform 0.22s ease;
}

.ol-lightbox[data-open="true"] .ol-lb-figure {
	transform: none;
}

.ol-lb-img {
	display: block;
	max-width: 100%;
	max-height: 84vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ol-lb-caption {
	font-family: "Diatype Variable", system-ui, sans-serif;
	font-size: 0.85rem;
	font-weight: 300;
	line-height: 1.3;
	text-align: center;
	color: rgba(0, 0, 0, 0.4);
	max-width: 46em;
}

.ol-lb-caption:empty {
	display: none;
}

/* buttons ------------------------------------------------------------------ */

.ol-lb-btn {
	position: fixed;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.055);
	color: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.ol-lb-btn:hover {
	background: rgba(0, 0, 0, 0.11);
	color: rgba(0, 0, 0, 0.8);
}

.ol-lb-btn:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.55);
	outline-offset: 2px;
}

.ol-lb-btn svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ol-lb-prev  { left: 1.25rem;  top: 50%; margin-top: -1.3rem; }
.ol-lb-next  { right: 1.25rem; top: 50%; margin-top: -1.3rem; }
.ol-lb-close { right: 1.25rem; top: 1.25rem; }

.ol-lb-btn[hidden] {
	display: none;
}

/* page state while the lightbox is open ------------------------------------ */

html.ol-lb-open,
html.ol-lb-open body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.ol-lightbox,
	.ol-lb-figure {
		transition: none;
	}
}

/* ---------------------------------------------------------------- navigation */

/* The pinned header is position:fixed and transparent, so artwork scrolls
   under the links. Give the band the page's own background. */
.page.pinned.pinned-top {
	background-color: #fff;
}

/* The nav ("PAINTING / LETTERPRESS / ILLUSTRATION / ABOUT") needs 742px on one
   line and sits in a span-6 grid column, with an empty span-2 spacer column to
   its left holding ~200px of nothing. Flexbox shrinks proportionally, so the
   spacer surrendered only 71px and the nav landed on 739.4 - two pixels short,
   and it wrapped with "/ ABOUT" stranded on a second line.

   The spacer is genuinely empty on every page, so drop it from the flow rather
   than tuning shrink factors, and let the nav size to its content. The name is
   left-aligned and the nav right-aligned, so both text edges stay exactly where
   they were - this only reclaims dead space. The nav now wraps solely when it
   truly cannot fit (below roughly 1050px).

   Outer-tree rules beat the column-set shadow's ::slotted() declarations. */
column-unit[slot="1"] {
	display: none;
}

column-unit[slot="2"] {
	flex-basis: auto;
	width: auto;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
}

/* On mobile the columns are too narrow for content-sizing the name column -
   it would starve the nav - so leave the grid percentage alone there. */
html:not(.mobile) column-unit[slot="0"] {
	flex-basis: auto;
	width: auto;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------- mobile */

/* Cargo halves the page padding on mobile via --mobile-padding-offset; the
   capture froze the desktop value, so restore the intent here. */
.mobile .page-layout {
	padding-left: calc(2rem * var(--mobile-padding-offset, 1));
	padding-right: calc(2rem * var(--mobile-padding-offset, 1));
}

/* Captions are absolute-sized while the freeform canvas is proportional, so at
   phone widths they swamp the artwork. Track the canvas below the design width. */
.mobile gallery-freeform figcaption.caption,
.mobile gallery-justify figcaption.caption,
.mobile gallery-columnized figcaption.caption {
	font-size: min(0.85rem, 2.6cqw);
}

/* The header grid keeps its two columns at phone widths (that is the whole
   point), but `word-wrap: break-word` then snaps words mid-syllable
   ("MICHEL / LE BAKER"). Wrap at spaces and let the heading track the grid
   instead — --font-size is Cargo's own lever, so --font-scale still applies. */
.mobile column-unit {
	overflow-wrap: normal;
	word-break: normal;
}

.mobile column-unit h2 {
	--font-size: clamp(1rem, 5cqw, 2rem);
}

.mobile .ol-lb-btn {
	width: 2.2rem;
	height: 2.2rem;
}

.mobile .ol-lb-prev  { left: 0.5rem;  margin-top: -1.1rem; }
.mobile .ol-lb-next  { right: 0.5rem; margin-top: -1.1rem; }
.mobile .ol-lb-close { right: 0.5rem; top: 0.5rem; }

.mobile .ol-lb-img {
	max-height: 74vh;
}

.mobile .ol-lb-figure {
	max-width: calc(100vw - 5.5rem);
}