/* ==========================================================================
   work.css — Genva Craft

   A single work: the Work starter's two-column layout (photographs left,
   details right), the details table, and the single template around it.
   ========================================================================== */

/* The starter carries its own title in the right column. When it is present
   the template's title steps aside, so the page keeps one h1. A post written
   without the starter keeps the template title. */
.single:has(.work-detail) > .single__title {
	display: none;
}

.single > * + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   Two columns: 3fr photographs, 2fr details, from 900px.
   A grid in CSS because the split only happens on wide screens.
   -------------------------------------------------------------------------- */

.work-detail {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

@media (width >= 900px) {

	.work-detail {
		grid-template-columns: 3fr 2fr;
		align-items: start;
	}
}

.work-detail > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Gallery: one large photograph, three small ones below.
   -------------------------------------------------------------------------- */

.work-gallery > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.work-gallery .wp-block-image {
	margin: 0;
}

.work-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.work-gallery .work-gallery__main img {
	aspect-ratio: 4 / 3;
}

.work-gallery .work-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30);
}

.work-gallery .work-gallery__thumbs img {
	aspect-ratio: 1 / 1;
}

/* With work-gallery.js running: a small photograph swaps with the large one,
   and the large one opens in a dialog. */
.work-gallery.is-interactive .work-gallery__main {
	cursor: zoom-in;
}

.work-gallery.is-interactive .work-gallery__thumbs > .wp-block-image {
	cursor: pointer;
}

.work-gallery.is-interactive .work-gallery__thumbs > .wp-block-image:hover img {
	opacity: 0.8;
}

.work-gallery__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Enlarged photograph (dialog)
   -------------------------------------------------------------------------- */

.work-lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.work-lightbox::backdrop {
	background: rgb(0 0 0 / 0.88);
}

.work-lightbox__frame {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	box-sizing: border-box;
}

.work-lightbox .work-lightbox__photo {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.work-lightbox__close {
	position: fixed;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	z-index: 1;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.4);
	color: #fff;
	cursor: pointer;
}

.work-lightbox__close::before,
.work-lightbox__close::after {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 1.1rem;
	height: 1px;
	background: currentcolor;
	content: "";
}

.work-lightbox__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.work-lightbox__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.work-lightbox__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Details column
   -------------------------------------------------------------------------- */

.work-detail__info > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.work-detail__info > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.work-detail .work-detail__category a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.work-detail .work-detail__title {
	font-size: var(--wp--preset--font-size--xlarge);
	letter-spacing: 0.05em;
}

/* The details table. Core draws `border: 1px solid` on every cell with no
   colour, so the borders are reset first and only the gold rules above and
   below the table are drawn. */
.work-details table {
	width: 100%;
	border-collapse: collapse;
	border-block: 1px solid var(--wp--preset--color--line);
}

.work-details th,
.work-details td {
	border: none;
	padding-block: var(--wp--preset--spacing--20);
	text-align: start;
	vertical-align: baseline;
}

.work-details th {
	width: 1%;
	padding-inline-end: var(--wp--preset--spacing--50);
	font-family: var(--font-latin);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0.12em;
	white-space: nowrap;
	color: var(--wp--preset--color--primary);
}

.work-details tr:first-child > * {
	padding-top: var(--wp--preset--spacing--40);
}

.work-details tr:last-child > * {
	padding-bottom: var(--wp--preset--spacing--40);
}

.work-detail__actions {
	gap: var(--wp--preset--spacing--30);
}

.work-detail__notes {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

.work-detail__notes > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.work-detail__notes > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* --------------------------------------------------------------------------
   Previous / next
   -------------------------------------------------------------------------- */

.single__nav {
	padding-block: var(--wp--preset--spacing--40);
	border-block: 1px solid var(--wp--preset--color--line);
}

.single__nav a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.single__nav a:hover {
	text-decoration: underline;
}