/*
 * Shared block furniture. Per-block rules live in assets/css/blocks/, which
 * inc/blocks.php attaches to each block so a page only pays for the blocks on
 * it (§6).
 */

.wp-block-image,
.wp-block-gallery {
	margin-block: 1.6em;
}

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

.wp-block-separator {
	margin-block: var(--seam-block);
	border: 0;
	border-top: 1px solid var(--rule);
}

.wp-block-table {
	font-size: var(--copy-small);
}

.wp-block-table td,
.wp-block-table th {
	padding: 8px 12px;
	border-bottom: 1px solid var(--rule);
	text-align: left;
}

.wp-block-code {
	padding: 14px 16px;
	background: var(--paper-2);
	font-size: var(--copy-small);
	overflow-x: auto;
}

.wp-block-embed__wrapper {
	position: relative;
}

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

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: 20px;
	padding: 24px;
	background: rgba(6, 5, 5, .94);
	color: #FFFFFF;
	--focus: #FFFFFF;
}

.lightbox.is-open {
	display: grid;
}

.lightbox__figure {
	grid-column: 2;
	margin: 0;
	text-align: center;
}

.lightbox__img {
	max-height: 88vh;
	max-width: 100%;
	object-fit: contain;
}

.lightbox__caption {
	margin-top: 14px;
	font-family: var(--serif);
	font-style: italic;
	font-size: var(--copy-small);
	color: rgba(255, 255, 255, .84);
}

.lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	min-width: 44px;
	min-height: 44px;
	font-family: var(--sans);
	font-size: var(--label);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lightbox__nav {
	min-width: 44px;
	min-height: 44px;
	font-family: var(--sans);
	font-size: var(--label);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }

.lightbox__counter {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
}