/* Dynamic Projects — gallery.
   One markup, three layouts:
     .dp-gallery--masonry  packed columns of natural-height images
     .dp-gallery--slider   one row that scrolls, with prev/next buttons
     .dp-gallery--grid     equal cards, every image the same shape

   Caption treatment is independent of layout:
     .dp-gallery--cap-hover  label fades in over the image
     .dp-gallery--cap-under  label sits under the image, always visible
     .dp-gallery--cap-none   image only
*/

.dp-gallery {
/* 	--dpg-bg: #f5efe7; */
	--dpg-radius: 18px;
	--dpg-gap: 16px;
/* 	--dpg-ratio: 4 / 3; */

	/* The shortcode sets the three counts below as separate properties rather
	   than setting --dpg-cols directly. An inline style always beats a
	   stylesheet rule, so a gallery that wrote --dpg-cols inline could never
	   be stepped down by the media queries at the end of this file. Switching
	   which property --dpg-cols reads from keeps that override working. */
	--dpg-cols-d: 3;
	--dpg-cols-t: 2;
	--dpg-cols-m: 1;
	--dpg-cols: var(--dpg-cols-d);
	--dpg-accent: #384538;
	--dpg-text: #1c1c1c;
	--dpg-muted: #7d7268;
	--dpg-line: rgba(28, 24, 20, 0.14);
	--dpg-nav-line: rgba(28, 24, 20, 0.78);
	--dpg-nav-muted: rgba(28, 24, 20, 0.25);

	box-sizing: border-box;
	width: 100%;
	background: var(--dpg-bg);
	padding: 44px 26px;
}

.dp-gallery *,
.dp-gallery *::before,
.dp-gallery *::after {
	box-sizing: border-box;
}

.dp-gallery--plain {
	background: transparent;
	padding: 0;
}

.dp-gallery__inner {
/* 	max-width: 1180px; */
	margin: 0 auto;
}

/* ==========================================================================
   Layout 1 — masonry
   CSS multi-column is the base; JS upgrades it to balanced columns so the
   tiles read left to right instead of top to bottom.
   ========================================================================== */

.dp-gallery--masonry .dp-gallery__items {
	columns: var(--dpg-cols);
	column-gap: var(--dpg-gap);
}

.dp-gallery--masonry .dp-gallery__items.is-balanced {
	columns: auto;
	display: flex;
	align-items: flex-start;
	gap: var(--dpg-gap);
}

.dp-gallery--masonry .dp-col {
	display: flex;
	flex-direction: column;
	gap: var(--dpg-gap);
	flex: 1 1 0;
	min-width: 0;
}

.dp-gallery--masonry .dp-gallery__items.is-balanced .dp-tile {
	margin-bottom: 0;
}

.dp-gallery--masonry .dp-tile {
	margin-bottom: var(--dpg-gap);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* Masonry keeps each image's own proportions — that is the whole point of it,
   and it is also why masonry looks like a plain grid when every uploaded photo
   is the same shape. heights="varied" sets --dpt-ratio per tile to impose a
   repeating mix of shapes instead, cropping rather than distorting. */
.dp-gallery--masonry .dp-tile__media img {
	height: auto;
	aspect-ratio: var(--dpt-ratio, auto);
}

/* ==========================================================================
   Layout 2 — slider

   A native horizontal scroller with snap points. Touch swipe and trackpad
   scrolling come free from the browser; the two arrow buttons just scroll it
   along. Deliberately flat: no hover zoom, no overlay, no focus ring on the
   track, so nothing appears on the cards that is not in the design.
   ========================================================================== */

.dp-gallery--slider .dp-slider {
	position: relative;
}

.dp-gallery--slider .dp-slider__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dp-gallery--slider .dp-slider__viewport::-webkit-scrollbar {
	display: none;
}

.dp-gallery--slider .dp-gallery__items {
	display: flex;
	gap: var(--dpg-gap);
	align-items: flex-start;
}

.dp-gallery--slider .dp-tile {
	/* Exactly --dpg-cols cards visible, gaps included. */
	flex: 0 0 calc((100% - (var(--dpg-cols) - 1) * var(--dpg-gap)) / var(--dpg-cols));
	scroll-snap-align: start;
	margin-bottom: 0;
}

/* Square corners: the slider is a flat editorial row. */
.dp-gallery--slider .dp-tile__media {
	border-radius: 0;
	height:430px;
}

/* ---------- Arrow navigation ----------
   Two square buttons sharing a single hairline frame, as one control. */

.dp-slider__controls {
	display: flex;
	margin-top: 34px;
}

.dp-slider__controls--left {
	justify-content: flex-start;
}

.dp-slider__controls--center {
	justify-content: center;
}

.dp-slider__controls--right {
	justify-content: flex-end;
}

.dp-slider__nav {
	display: inline-flex;
	border: 1px solid var(--dpg-nav-line);
}

.dp-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 42px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--dpg-nav-line);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* The shared middle rule, so the pair reads as one box rather than two. */
.dp-slider__btn--next {
	border-left: 1px solid var(--dpg-nav-line);
}

.dp-slider__btn svg {
	width: 19px;
	height: 19px;
	display: block;
}

.dp-slider__btn:hover,
.dp-slider__btn:focus,
.dp-slider__btn:active {
	background: none;
	color: var(--dpg-nav-line);
	outline: none;
	box-shadow: none;
}

/* The only state kept: an arrow that cannot go any further is dimmed, so the
   control does not look broken when clicking it does nothing. */
.dp-slider__btn:disabled {
	color: var(--dpg-nav-muted);
	cursor: default;
}

/* Nothing to scroll — hide the control rather than show two dead arrows. */
.dp-slider__controls[hidden] {
	display: none;
}

/* ==========================================================================
   Layout 3 — grid
   Every card identical: same width, same image shape, same caption height.
   ========================================================================== */

.dp-gallery--grid .dp-gallery__items {
	display: grid;
	grid-template-columns: repeat(var(--dpg-cols), minmax(0, 1fr));
	gap: calc(var(--dpg-gap) + 8px) var(--dpg-gap);
	align-items: start;
}

.dp-gallery--grid .dp-tile {
	margin-bottom: 0;
}

/* ==========================================================================
   Tile — shared by all three layouts
   ========================================================================== */

.dp-tile {
	display: flex;
	flex-direction: column;
	position: relative;
	text-decoration: none;
	color: inherit;
	background: transparent;
}

/* Only a tile that actually links gets interactive styling — the selector is
   the element itself, so a tile whose Custom link is empty renders as a <div>
   and picks none of this up. Kept to the minimum: a pointer, and a focus ring
   for keyboard users only. No hover zoom, no active state. */
a.dp-tile {
	cursor: pointer;
}

a.dp-tile:focus-visible {
	outline: 2px solid var(--dpg-accent);
	outline-offset: 3px;
}

.dp-tile__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--dpg-radius);
	background: #e7ddd3;
}

.dp-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--dpg-ratio);
	object-fit: cover;
}

/* ---------- Number badge ---------- */

.dp-tile__number {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 26px;
	padding: 0 9px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	background: rgba(20, 17, 14, 0.35);
	backdrop-filter: blur(2px);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
}

/* ---------- Caption ---------- */

.dp-tile__caption {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dp-tile__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Pills keep the wording exactly as typed — "London", not "LONDON". */
.dp-tile__pill {
	padding: 7px 14px;
	border: 1px solid var(--dpg-line);
	border-radius: 0;
	color: var(--dpg-muted);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
}

.dp-tile__title {
	color: var(--dpg-text);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.25;
}

/* Caption mode: under the image, always visible (the default for slider and grid). */
.dp-gallery--cap-under .dp-tile__caption {
	gap: 16px;
	padding: 22px 0 0;
}

/* Caption mode: over the image, on hover or keyboard focus. */
.dp-gallery--cap-hover .dp-tile__caption {
	position: absolute;
	inset: 0;
	z-index: 1;
	justify-content: flex-end;
	padding: 16px;
	border-radius: var(--dpg-radius);
	background: linear-gradient(to top, rgba(20, 17, 14, 0.78) 0%, rgba(20, 17, 14, 0.28) 45%, rgba(20, 17, 14, 0) 75%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.dp-gallery--cap-hover .dp-tile:hover .dp-tile__caption {
	opacity: 1;
}

.dp-gallery--cap-hover .dp-tile__pill {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(20, 17, 14, 0.35);
	color: #fff;
}

.dp-gallery--cap-hover .dp-tile__pill {
	padding: 5px 11px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dp-gallery--cap-hover .dp-tile__title {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	transform: translateY(6px);
	transition: transform 0.3s ease;
}

.dp-gallery--cap-hover .dp-tile:hover .dp-tile__title {
	transform: none;
}

/* Touch screens have no hover, so an overlay label would never appear. */
@media (hover: none) {
	.dp-gallery--cap-hover .dp-tile__caption {
		opacity: 1;
	}

	.dp-gallery--cap-hover .dp-tile__title {
		transform: none;
	}
}

/* Caption mode: none. */
.dp-gallery--cap-none .dp-tile__caption {
	display: none;
}

.dp-gallery--cap-none .dp-tile__number,
.dp-gallery--cap-under .dp-tile__number {
	background: rgba(255, 255, 255, 0.8);
	border-color: rgba(28, 24, 20, 0.12);
	color: var(--dpg-text);
}

/* ==========================================================================
   Load more
   ========================================================================== */

.dp-gallery .dp-actions {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.dp-gallery .dp-actions[hidden] {
	display: none;
}

.dp-gallery__status {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--dpg-muted);
}

.dp-gallery__sentinel {
	height: 1px;
}

.dp-gallery__items.is-loading {
	opacity: 0.5;
}

.dp-gallery .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   Responsive
   Column counts step down on their own, so a four-across grid or slider set
   in the shortcode still works on a phone without a second shortcode.
   ========================================================================== */

@media (max-width: 1024px) {
	.dp-gallery {
		--dpg-cols: var(--dpg-cols-t);
		--dpg-gap: 12px;
		padding: 32px 18px;
	}
}

@media (max-width: 600px) {
	.dp-gallery {
		--dpg-cols: var(--dpg-cols-m);
		padding: 24px 14px;
	}

	.dp-tile__title {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dp-gallery--slider .dp-slider__viewport {
		scroll-behavior: auto;
	}

	.dp-tile__caption,
	.dp-tile__title {
		transition: none;
	}

	.dp-gallery--cap-hover .dp-tile__title {
		transform: none;
	}
}