/* Shared by every Gallery template: spacing, the figure, and captions. A theme sets the look once
   through these custom properties (for example in theme.json styles.css or its own stylesheet). */
.leimer-gallery {
	--leimer-gallery-gap: var(--wp--preset--spacing--20, 0.5rem);
	--leimer-gallery-row: 260px;
	--leimer-gallery-caption-bg: linear-gradient(transparent, rgb(0 0 0 / 72%));
	--leimer-gallery-caption-color: #fff;
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
}

@media (max-width: 640px) {
	.leimer-gallery {
		--leimer-gallery-row: 105px;
		--leimer-gallery-gap: 4px;
	}
}

.leimer-gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.leimer-gallery__link {
	display: block;
	color: inherit;
}

.leimer-gallery__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #1a73e8);
	outline-offset: -3px;
}

.leimer-gallery__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Captions stay in the page for screen readers; they fade in on hover (real pointers only) and
   always on keyboard focus. Phones show a clean grid. */
.leimer-gallery__caption {
	position: absolute;
	inset: auto 0 0;
	padding: 1.75rem 0.75rem 0.6rem;
	background: var(--leimer-gallery-caption-bg);
	color: var(--leimer-gallery-caption-color);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.leimer-gallery__item:hover .leimer-gallery__caption {
		opacity: 1;
	}
}

.leimer-gallery__link:focus-visible + .leimer-gallery__caption {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.leimer-gallery__caption {
		transition: none;
	}
}

/* Featured hero (Work type pages, Ticket #181): the first Featured Photo large across the full width,
   the other Featured Photos in a row of even tiles under it, then the template's own layout. The hero
   spans the whole Gallery in any template (flex rows, CSS columns or a grid). */
.leimer-gallery__hero {
	flex: 0 0 100%;
	grid-column: 1 / -1;
	column-span: all;
	display: grid;
	gap: var(--leimer-gallery-gap);
	margin-block-end: var(--leimer-gallery-gap);
}

.leimer-gallery__hero .leimer-gallery__item {
	margin: 0;
}

/* Two classes deep, to win over each template's own image shape rule (loaded after this file). */
.leimer-gallery .leimer-gallery__hero-lead .leimer-gallery__img {
	aspect-ratio: var(--ar);
	max-height: min(75vh, 760px);
	object-fit: cover;
}

.leimer-gallery__hero-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--leimer-gallery-gap);
}

.leimer-gallery .leimer-gallery__hero-row .leimer-gallery__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 640px) {
	.leimer-gallery__hero-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* One Work type's tile on its own (Services). The name stays for screen readers; the heading
   beside it already says it, so it shows only on the placeholder tint. */
.leimer-work-type-links.leimer-work-type-links--single {
	display: block;
	margin: 0;
}

.leimer-work-type-links--single .leimer-work-type-tile:not(.leimer-work-type-tile--no-photo) .leimer-work-type-tile__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	padding: 0;
}

/* Editor-only note when a Gallery has nothing to show. */
.leimer-gallery__notice {
	padding: 1em;
	border: 1px dashed currentColor;
}

/* "Link copied" note from the share control (Work type pages). */
.leimer-share__note {
	margin-inline-start: 0.5rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* Work type pages: the share button and the link back to Our Work. */
.leimer-work-type-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.leimer-share {
	padding: 0.4em 1em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.leimer-share:hover,
.leimer-share:focus-visible {
	background: rgb(0 0 0 / 6%);
}

/* The Our Work filter and the Work type links: a wrapping row of buttons. */
.leimer-work-type-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: var(--wp--preset--spacing--30, 1rem);
}

.leimer-work-type-links .wp-block-button__link {
	display: inline-block;
	padding: 0.5em 1.1em;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
}

/* The Our Work filter stays in view, just under the site header, while the photos scroll (Ticket #273).
   header.js publishes the header's height as --leimer-header-h; while the header has slid away on a
   scroll down, the filter moves up to the top edge, and back down when the header returns. */
.leimer-our-work-filter {
	position: sticky;
	top: var(--leimer-header-h, 4.5rem);
	z-index: 40;
	padding-block: 0.25rem;
	background: var(--wp--preset--color--paper, #fff);
	transition: top 0.25s ease;
}

body:has(.wp-block-template-part.is-header-hidden) .leimer-our-work-filter {
	top: 0;
}

.admin-bar .leimer-our-work-filter {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--leimer-header-h, 4.5rem));
}

body.admin-bar:has(.wp-block-template-part.is-header-hidden) .leimer-our-work-filter {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .leimer-our-work-filter {
		top: var(--leimer-header-h, 4.5rem);
	}

	body.admin-bar:has(.wp-block-template-part.is-header-hidden) .leimer-our-work-filter {
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.leimer-our-work-filter {
		transition: none;
	}
}

/* The Our Work tabs (Ticket #330): slim text tabs in one row, the current one underlined. On a phone
   the row scrolls sideways, with a fade at the right edge to hint there is more. */
.leimer-our-work-filter .leimer-work-type-links {
	flex-wrap: nowrap;
	gap: 0.25rem 1.25rem;
	position: relative; /* the script that scrolls the current tab into view measures from here */
	margin-block: 0;
	padding-inline: 0.25rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}

.leimer-our-work-filter .leimer-work-type-links::-webkit-scrollbar {
	display: none;
}

.leimer-work-tab {
	flex: 0 0 auto;
	padding: 0.4em 0.1em;
	border-bottom: 2px solid transparent;
	color: inherit;
	font-size: var(--wp--preset--font-size--md, 1rem);
	text-decoration: none;
	white-space: nowrap;
}

.leimer-work-tab:hover {
	border-bottom-color: var(--wp--preset--color--line, #ccc);
}

.leimer-work-tab[aria-current="true"] {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
	text-decoration-color: var(--wp--preset--color--accent, #2f5d3a);
}

.leimer-work-tab:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #2f5d3a);
	outline-offset: -3px; /* inside the tab: the scrolling row would clip a ring drawn outside it */
}

/* On a wide screen all the tabs fit: no fade. */
@media (min-width: 900px) {
	.leimer-our-work-filter .leimer-work-type-links {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* The small card after the picked Work type's photos: a link to its Service page. */
.leimer-our-work-service-card {
	margin-block: var(--wp--preset--spacing--40, 1.5rem) 0;
	padding: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.5rem);
	border-top: 3px solid var(--wp--preset--color--accent, #2f5d3a);
	border-radius: 6px;
	background: var(--wp--preset--color--base, #fff);
}

.leimer-our-work-service-card p {
	margin: 0;
}

.leimer-our-work-service-card__ask {
	font-weight: 600;
}

/* The tiles display of the Work type links (Home and Services): a self-filling grid of photo
   tiles, the Work type's name over its photo. Three across on wide screens, two on phones. */
.leimer-work-type-links--tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--leimer-gallery-gap, 0.5rem);
}

@media (max-width: 640px) {
	.leimer-work-type-links--tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

.leimer-work-type-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	color: var(--leimer-gallery-caption-color, #fff);
	background: var(--wp--preset--color--tint, #ece7dd);
	text-decoration: none;
}

.leimer-work-type-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leimer-work-type-tile__name {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 2.5em 0.9em 0.8em;
	background: var(--leimer-gallery-caption-bg, linear-gradient(transparent, rgb(0 0 0 / 72%)));
	font-size: var(--wp--preset--font-size--md, 1.1rem);
	font-weight: 600;
	line-height: 1.2;
}

.leimer-work-type-tile--no-photo {
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink, #1f1f1c);
}

.leimer-work-type-tile--no-photo .leimer-work-type-tile__name {
	padding: 0.8em;
	background: none;
	text-align: center;
}

.leimer-work-type-tile:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #1a73e8);
	outline-offset: -3px;
}

/* Before & After: the two sides next to each other at one shared shape, stacked on phones, each
   clearly labelled. */
/* A clear gap between the Before and the After photo (they no longer touch). */
.leimer-ba__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--leimer-ba-gap);
	align-items: start;
}

.leimer-ba__side {
	position: relative;
	display: grid;
	gap: var(--leimer-ba-gap);
}

.leimer-ba {
	--leimer-ba-ratio: 4 / 3;
	--leimer-ba-gap: var(--wp--preset--spacing--30, 1rem);
}

/* Both sides use one shape, so Before and After read as a straight comparison. The Lightbox still
   opens each whole photo. */
.leimer-ba__side .leimer-gallery__img {
	aspect-ratio: var(--leimer-ba-ratio);
	object-fit: cover;
}

.leimer-ba__label {
	position: absolute;
	z-index: 1;
	inset: 0.6rem auto auto 0.6rem;
	padding: 0.2em 0.7em;
	border-radius: 3px;
	background: rgb(0 0 0 / 70%);
	color: #fff;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.leimer-ba__side--after .leimer-ba__label {
	background: var(--wp--preset--color--accent, #1d4e3a);
}

.leimer-ba__town {
	margin-block: 0.5rem 0;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	opacity: 0.8;
}

@media (max-width: 700px) {
	.leimer-ba__pair {
		grid-template-columns: 1fr;
	}
}

.leimer-ba-teaser__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--wp--preset--spacing--50, 2rem);
}

/* The Our Work page strip: photos only, each small thumb filled by its photo, with space between.
   The Before and After labels stay for screen readers. */
.leimer-ba--bare {
	--leimer-ba-gap: 0.75rem;
}

.leimer-ba--bare .leimer-ba__pair {
	grid-template-columns: 1fr 1fr;
}

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

/* The Before & After list: each job is a card in the colour its row gives cards (white on the medium
   cream row the templates put it in), so the jobs read apart. */
.leimer-ba-list .wp-block-post-template {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	padding: 0;
	list-style: none;
}

.leimer-ba-list .wp-block-post-template > li {
	margin: 0;
	padding: var(--wp--preset--spacing--50, 2rem) var(--wp--preset--spacing--40, 1.5rem);
	background-color: var(--leimer-card, #fff);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(31, 31, 28, 0.06), 0 8px 24px -10px rgba(31, 31, 28, 0.16);
}

.leimer-ba-list .wp-block-post-title {
	margin-block: 0 0.5rem;
}

.leimer-ba-list .wp-block-post-excerpt {
	max-width: 780px;
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
}

.leimer-ba-list .wp-block-post-excerpt__excerpt {
	margin: 0;
}

@media (max-width: 640px) {
	.leimer-ba-list .wp-block-post-template > li {
		padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--30, 1rem);
	}
}

/* Home: four across; two by two on tablets; on phones one row that swipes sideways and snaps,
   with the next item peeking in. */
.leimer-ba-teaser--home .leimer-ba-teaser__items {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1000px) {
	.leimer-ba-teaser--home .leimer-ba-teaser__items {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.leimer-ba-teaser--home .leimer-ba-teaser__items {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: var(--wp--preset--spacing--30, 1rem);
	}

	.leimer-ba-teaser--home .leimer-ba-teaser__item {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
}

.leimer-ba-teaser__item {
	padding: var(--wp--preset--spacing--30, 1rem);
	background-color: var(--leimer-card, #fff);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(31, 31, 28, 0.06), 0 8px 24px -10px rgba(31, 31, 28, 0.16);
}

.leimer-ba-teaser__item h3 {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--md, 1.1rem);
}

/* Work type page: the "See all <work type> work" link under the Gallery. */
.leimer-work-type-see-all {
	margin-block: var(--wp--preset--spacing--40, 1rem);
	font-weight: 600;
}