/* ==========================================================================
   works.css — Genva Interior

   Ported from the mock.

   The three figures under each pair of photos are a wp:table. Core writes
   `.wp-block-table th, .wp-block-table td { border: 1px solid; }` with no
   colour, so the border falls back to currentColor and every cell ends up
   outlined in near black. Resetting only one edge leaves the other three, so
   the reset here clears all four before anything else is set.
   ========================================================================== */

.works {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (width >= 1024px) {

	.works {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.work {
	background: var(--surface-container-lowest);
	border-radius: var(--rounded-xl);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
}

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

/* --------------------------------------------------------------------------
   Before and after

   The two shots sit in one tinted tray with a hairline between them, so they
   read as a pair rather than as two separate photos.
   -------------------------------------------------------------------------- */
.work__images {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--surface-container);
}

.work__images > .work__shot {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Before / After sits on the photograph by sharing its grid cell. Taking it
   out of flow instead needs a positioned ancestor, and the site editor's own
   wrappers come between the two and break that. */
.work__shot {
	position: relative;
	display: grid;
	grid-template-areas: "stack";
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--rounded);
}

.work__shot > * {
	grid-area: stack;
}

.work__shot .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.work__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.work__tag {
	align-self: start;
	justify-self: start;
	z-index: 2;
	margin: 0;
	transform: translate(0.5rem, 0.5rem);
	padding: 0.125rem 0.5rem;
	border-radius: var(--rounded);
	background: rgba(25, 28, 30, 0.8);
	color: var(--on-primary);
	backdrop-filter: blur(4px);
}

.work__tag--after {
	background: var(--secondary);
	color: var(--on-secondary);
	box-shadow: var(--shadow-sm);
	backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */
.work__body {
	padding: var(--space-lg);
	flex: 1;
	display: flex;
	flex-direction: column;
}

@media (width < 782px) {

	.work__body {
		padding: var(--space-md);
	}
}

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

.work__title {
	color: var(--on-surface);
	font-weight: 700;
	margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   The three figures
   -------------------------------------------------------------------------- */
.work__meta {
	background: var(--surface-container-low);
	padding: var(--space-sm);
	border-radius: var(--rounded);
	margin-bottom: var(--space-md);
}

.work__meta table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.work__meta th,
.work__meta td {
	border: none;
	padding: 0;
	text-align: center;
	word-break: break-word;
}

/* Three equal columns split 「さいたま市見沼区」 across two lines and left the
   card taller than its neighbours for no good reason. The three figures are
   not the same length by nature: a place name runs to eight characters or
   more, a duration rarely past three. The widths follow that rather than the
   column count. `word-break` stays as the last resort for a longer name. */
.work__meta th:nth-child(1),
.work__meta td:nth-child(1) {
	width: 44%;
}

.work__meta th:nth-child(2),
.work__meta td:nth-child(2) {
	width: 32%;
}

.work__meta th:nth-child(3),
.work__meta td:nth-child(3) {
	width: 24%;
}

.work__meta th {
	color: var(--on-surface-variant);
	font-size: var(--label-sm-size);
	line-height: var(--label-sm-line);
	letter-spacing: var(--label-sm-track);
	font-weight: 700;
}

.work__meta td {
	color: var(--on-surface);
	font-size: var(--label-md-size);
	line-height: var(--label-md-line);
	letter-spacing: var(--label-md-track);
	font-weight: 600;
	padding-top: 0.125rem;
}

/* The cost is the figure a visitor came for, so it is the one that carries
   the accent colour. Second column, matching the header order above. */
.work__meta td:nth-child(2) {
	color: var(--secondary);
	font-family: var(--font-number);
	font-weight: 700;
}

.work__note {
	color: var(--on-surface-variant);
	margin-top: auto;
}

/* The tag is placed by its grid cell, so the block gap has nothing to space it
   from. The site editor applies that gap anyway — 24px measured on the second
   child of every container — and a single class is not enough to clear it
   there. The class is repeated to carry the weight without leaning on :root,
   and it lives here, beside the rule that positions the tag, rather than in a
   shared file. */
.work__tag.work__tag {
	margin-block: 0;
}