/**
 * Food gallery.
 *
 * A square grid of managed photography with a Load more control and a
 * lightbox. Every image is already in the document when the page arrives, so
 * Load more reveals rather than fetches: with 32 to 50 items the whole set is
 * cheaper to ship once than to request in pages, and it means the control
 * works with no network at all.
 *
 * The overflow items carry the `hidden` attribute from the server, and a
 * noscript block in the markup unhides them. A reader without JavaScript
 * therefore sees the complete gallery rather than eight images and a button
 * that does nothing.
 */

.ca-gallery {
	--ca-gallery-gap: var(--wp--preset--spacing--30);
}

/*
 * The grid never reaches one column.
 *
 * app.css steps the site's grids to two up at 900px and one up at 600px,
 * which is right for anything carrying a paragraph. A photograph carries no
 * text, so a single column just makes the reader scroll past the same picture
 * at twice the size. This is its own class rather than a block layout grid,
 * so that global rule does not reach it and no specificity fight is needed.
 */
.ca-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ca-gallery-gap);
}

@media (max-width: 1100px) {
	.ca-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.ca-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}
}

.ca-gallery__item {
	margin: 0;
}

/*
 * The link is the no-JavaScript fallback: it points at the full size file, so
 * a click still gets the reader a larger image. The lightbox intercepts it
 * when the script is running.
 */
.ca-gallery__link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--mist);
	cursor: zoom-in;
}

.ca-gallery__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.ca-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* The house grade, same values as .ca-graded in app.css. */
	filter: saturate(1.04) contrast(1.02);
	transition: transform 400ms ease;
}

.ca-gallery__link:hover .ca-gallery__img,
.ca-gallery__link:focus-visible .ca-gallery__img {
	transform: scale(1.04);
}

/* ---------------------------------------------------------------------------
   Load more

   Deliberately the same control as .ca-infinite__more on the insights
   listing. Two buttons that do the same job in the reader's mind should not
   look like two different buttons.
   ------------------------------------------------------------------------- */

.ca-gallery__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--60);
}

.ca-gallery__more {
	appearance: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	padding: 15px 30px;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--tap),
		color var(--wp--custom--transition--tap);
}

.ca-gallery__more:hover,
.ca-gallery__more:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/*
 * On the two dark tones the ink button would disappear into the ground.
 */
.is-style-teal .ca-gallery__more,
.is-style-ink .ca-gallery__more {
	border-color: var(--wp--custom--tint--on-dark-line);
	color: var(--wp--preset--color--base);
}

.is-style-teal .ca-gallery__more:hover,
.is-style-teal .ca-gallery__more:focus-visible,
.is-style-ink .ca-gallery__more:hover,
.is-style-ink .ca-gallery__more:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/*
 * A live region holds its height whether or not it has anything to say,
 * so revealing a row does not move the button under the reader's cursor.
 */
.ca-gallery__status {
	margin: 0;
	min-height: 1.4em;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.is-style-teal .ca-gallery__status,
.is-style-ink .ca-gallery__status {
	color: inherit;
	opacity: 0.75;
}

.ca-gallery__item.is-revealed {
	animation: ca-gallery-fade 220ms ease-out both;
}

@keyframes ca-gallery-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

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

.ca-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 94%, transparent);
	animation: ca-lightbox-in 160ms ease-out both;
}

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

@keyframes ca-lightbox-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.ca-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: 100%;
	max-height: 100%;
}

.ca-lightbox__img {
	display: block;
	max-width: min(1100px, 100%);
	/* Room for the counter under it, and the padding above and below. */
	max-height: calc(100vh - 160px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--media);
	filter: saturate(1.04) contrast(1.02);
}

.ca-lightbox__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	opacity: 0.7;
}

.ca-lightbox__btn {
	position: absolute;
	appearance: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--wp--custom--tint--on-dark-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--tint--on-dark-fill);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--tap),
		color var(--wp--custom--transition--tap);
}

.ca-lightbox__btn:hover,
.ca-lightbox__btn:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.ca-lightbox__btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ca-lightbox__close {
	top: clamp(12px, 3vw, 28px);
	right: clamp(12px, 3vw, 28px);
}

.ca-lightbox__prev {
	left: clamp(12px, 3vw, 28px);
	top: 50%;
	transform: translateY(-50%);
}

.ca-lightbox__next {
	right: clamp(12px, 3vw, 28px);
	top: 50%;
	transform: translateY(-50%);
}

/*
 * On a phone the side buttons would sit on top of the photograph. They move
 * to the bottom, either side of the counter, where the thumb already is.
 */
@media (max-width: 700px) {
	.ca-lightbox__img {
		max-height: calc(100vh - 220px);
	}

	.ca-lightbox__prev,
	.ca-lightbox__next {
		top: auto;
		bottom: clamp(16px, 5vw, 32px);
		transform: none;
	}

	.ca-lightbox__prev {
		left: calc(50% - 76px);
	}

	.ca-lightbox__next {
		right: calc(50% - 76px);
	}
}

/* The page must not scroll behind an open lightbox. */
.ca-lightbox-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

	.ca-gallery__img,
	.ca-gallery__link:hover .ca-gallery__img,
	.ca-gallery__link:focus-visible .ca-gallery__img {
		transition: none;
		transform: none;
	}

	.ca-gallery__item.is-revealed,
	.ca-lightbox {
		animation: none;
	}
}