/* ==========================================================================
   GALLERY (/gallery/)
   01 hero · 02 featured photo story · 03 browse albums · 04 video stories · 05 latest moments
   Class prefix: gallery-.  Semantic tone variables only (--bg --fg --line --accent …).
   ========================================================================== */


/* ==========================================================================
   Photo tile — a photograph that opens the lightbox (markup: hs_gallery_tile()).
   Echoes the lightbox's sacred corner brackets on hover.
   ========================================================================== */
.gallery-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--surface-2);
	isolation: isolate;
	cursor: zoom-in;
	-webkit-tap-highlight-color: transparent;
}

.gallery-tile--fill {
	width: 100%;
	height: 100%;
}

.gallery-tile .media-slot {
	border-radius: 0;
}

.gallery-tile .media-slot__media {
	transition: transform 0.9s var(--ease-out);
}

.gallery-tile:hover .media-slot__media,
.gallery-tile:focus-visible .media-slot__media {
	transform: scale(1.045);
}

.gallery-tile__frame {
	position: absolute;
	inset: 12px;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, inset 0.55s var(--ease-out);
}

.gallery-tile__frame::before,
.gallery-tile__frame::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	border: 0 solid var(--antique-gold);
}

.gallery-tile__frame::before {
	top: 0;
	left: 0;
	border-top-width: 1.5px;
	border-left-width: 1.5px;
}

.gallery-tile__frame::after {
	right: 0;
	bottom: 0;
	border-right-width: 1.5px;
	border-bottom-width: 1.5px;
}

.gallery-tile:hover .gallery-tile__frame,
.gallery-tile:focus-visible .gallery-tile__frame {
	inset: 16px;
	opacity: 1;
}

.gallery-tile__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(246, 235, 221, 0.32);
	border-radius: 50%;
	background: rgba(11, 9, 7, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--warm-ivory);
	opacity: 0;
	translate: 0 6px;
	transition: opacity 0.3s ease, translate 0.4s var(--ease-out);
}

.gallery-tile:hover .gallery-tile__zoom,
.gallery-tile:focus-visible .gallery-tile__zoom {
	opacity: 1;
	translate: 0 0;
}

/* Touch: a tap opens the lightbox — no hover affordance needed on the thumbnails. */
@media (hover: none) {
	.gallery-tile__zoom {
		display: none;
	}
}

/* "+12" — more photos continue in the lightbox */
.gallery-tile__more {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	background: rgba(11, 9, 7, 0.6);
	color: var(--warm-ivory);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
	letter-spacing: -0.02em;
	transition: background-color 0.3s ease;
}

.gallery-tile:hover .gallery-tile__more {
	background: rgba(11, 9, 7, 0.42);
}


/* ==========================================================================
   01 HERO — black, 55–65svh, one iconic full-bleed photograph
   ========================================================================== */
.gallery-hero {
	--hero-min: 62svh;
}

@supports not (min-height: 1svh) {
	.gallery-hero {
		--hero-min: 62vh;
	}
}

.gallery-hero__inner {
	/* .page-hero__inner sets width:100%, which would cancel the .wrap gutters */
	width: min(100% - 2 * var(--gutter), var(--container));
	align-items: end;
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
}

@media (min-width: 1024px) {
	.gallery-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
	}
}

.gallery-hero__title {
	margin: 0 0 clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
	font-size: clamp(3.75rem, 1.2rem + 14vw, 10rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
}

.gallery-hero__lead {
	max-width: 28rem;
	margin: 0;
	color: var(--fg-soft);
	font-size: var(--fs-lg);
	line-height: 1.55;
}

/* a soft shadow keeps small type readable over any photograph */
.gallery-hero__copy .eyebrow,
.gallery-hero__lead,
.gallery-hero__group-label {
	text-shadow: 0 1px 12px rgba(11, 9, 7, 0.7), 0 0 2px rgba(11, 9, 7, 0.5);
}

/* Ken Burns 1.00 → 1.03 (plan) — effects.css owns the mechanism and the reduced-motion switch-off. */
.gallery-hero [data-ken-burns] .media-slot__inner {
	animation-name: gallery-kenburns;
	animation-duration: 26s;
	transform-origin: 58% 42%;
}

@keyframes gallery-kenburns {
	from { scale: 1; }
	to { scale: 1.03; }
}

/* category / year selector */
.gallery-hero__selector {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* an implicit auto track would grow to the full width of the chips and stop them scrolling */
	gap: 1.1rem;
	min-width: 0;
}

.gallery-hero__group {
	min-width: 0;
}

@media (min-width: 1024px) {
	.gallery-hero__selector {
		padding: 1.5rem;
		border: 1px solid var(--line-strong);
		border-radius: var(--r-lg);
		background: rgba(11, 9, 7, 0.55);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

.gallery-hero__group-label {
	margin: 0 0 0.55rem;
	color: var(--accent-2);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gallery-hero .chips--scroll {
	scroll-padding-inline: var(--gutter);
}

/* Empty background slot: keep the art, drop the label that would sit behind the selector chips. */
.gallery-hero__media .media-slot__meta {
	display: none;
}

.gallery-hero .chip {
	border-color: rgba(246, 235, 221, 0.3);
	background: rgba(11, 9, 7, 0.5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--warm-ivory);
}

.gallery-hero .chip:hover,
.gallery-hero .chip:focus-visible {
	border-color: var(--saffron);
}

.gallery-hero .chip.is-active {
	border-color: var(--saffron);
	background: var(--saffron);
	color: var(--sanctum-black);
}


/* ==========================================================================
   02 FEATURED PHOTO STORY — ivory. 1 hero + 5 supporting photos + a short narrative.
   ========================================================================== */
.gallery-story__layout {
	--gs-gap: clamp(12px, 1.5vw, 22px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gs-gap);
}

.gallery-story__hero {
	position: relative;
	aspect-ratio: 4 / 3;
	min-width: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--card-shadow);
}

.gallery-story__hero > .gallery-tile {
	position: absolute;
	inset: 0;
	border-radius: var(--r-lg);
}

.gallery-story__text {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	min-width: 0;
	padding: clamp(1.5rem, 1rem + 2.2vw, 3rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}

.gallery-story__text::before {
	content: '';
	position: absolute;
	top: -1px;
	left: clamp(1.5rem, 1rem + 2.2vw, 3rem);
	width: 72px;
	height: 3px;
	background: linear-gradient(90deg, var(--saffron), var(--antique-gold));
}

.gallery-story__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.gallery-story__text .eyebrow {
	margin: 0;
}

.gallery-story__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.gallery-story__title a {
	color: inherit;
}

.gallery-story__title a:hover {
	color: var(--accent);
}

.gallery-story__meta {
	margin: 0;
}

.gallery-story__narrative {
	max-width: 46ch;
	color: var(--fg-soft);
	font-size: var(--fs-body);
	line-height: 1.7;
}

.gallery-story__narrative p {
	margin: 0 0 0.8em;
}

.gallery-story__narrative p:last-child {
	margin-bottom: 0;
}

.gallery-story__actions {
	margin-top: 0.4rem;
}

/* mosaic — a unit grid whose row height equals a quarter of a column, so tiles line up like a printed spread */
.gallery-story__mosaic {
	container-type: inline-size;
	min-width: 0;
}

.gallery-story__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 11vw;
	gap: var(--gs-gap);
}

@supports (width: 1cqw) {
	.gallery-story__tiles {
		grid-auto-rows: calc((100cqw - var(--gs-gap)) / 8);
	}
}

.gallery-story__tile {
	min-width: 0;
	min-height: 0;
}

/* mobile: two columns of alternating tall / short tiles */
.gallery-story__tile--a { grid-column: 1; grid-row: 1 / span 4; }
.gallery-story__tile--b { grid-column: 2; grid-row: 1 / span 3; }
.gallery-story__tile--c { grid-column: 2; grid-row: 4 / span 4; }
.gallery-story__tile--d { grid-column: 1; grid-row: 5 / span 3; }
.gallery-story__tile--e { grid-column: 1 / -1; grid-row: 8 / span 4; }

.gallery-story__layout--n3 .gallery-story__tile--b { grid-row: 1 / span 4; }
.gallery-story__layout--n3 .gallery-story__tile--c { grid-column: 1 / -1; grid-row: 5 / span 4; }

.gallery-story__layout--n2 .gallery-story__tile--a,
.gallery-story__layout--n2 .gallery-story__tile--b { grid-row: 1 / span 5; }

.gallery-story__layout--n1 .gallery-story__tile--a { grid-column: 1 / -1; grid-row: 1 / span 5; }

@media (min-width: 768px) {
	.gallery-story__layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	/* Explicit stretch on both axes: with an aspect-ratio, "normal" alignment would size the hero from the row height and let it
	   spill into the neighbouring column. */
	.gallery-story__hero,
	.gallery-story__text,
	.gallery-story__mosaic {
		grid-column: 1 / -1;
		align-self: stretch;
		justify-self: stretch;
	}

	.gallery-story__hero {
		aspect-ratio: 16 / 9;
	}

	.gallery-story__tiles {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: 7.5vw;
	}

	@supports (width: 1cqw) {
		.gallery-story__tiles {
			grid-auto-rows: calc((100cqw - 2 * var(--gs-gap)) / 12);
		}
	}

	/* desktop: three columns, five rows — A tall | B over C | D over E */
	.gallery-story__tile--a { grid-column: 1 / span 4; grid-row: 1 / span 5; }
	.gallery-story__tile--b { grid-column: 5 / span 4; grid-row: 1 / span 3; }
	.gallery-story__tile--c { grid-column: 5 / span 4; grid-row: 4 / span 2; }
	.gallery-story__tile--d { grid-column: 9 / span 4; grid-row: 1 / span 2; }
	.gallery-story__tile--e { grid-column: 9 / span 4; grid-row: 3 / span 3; }

	.gallery-story__layout--n4 .gallery-story__tile--d { grid-row: 1 / span 5; }

	/* three photos: three equal columns, a little shorter than the five-photo spread */
	.gallery-story__layout--n3 .gallery-story__tile--a,
	.gallery-story__layout--n3 .gallery-story__tile--b,
	.gallery-story__layout--n3 .gallery-story__tile--c { grid-row: 1 / span 4; }
	.gallery-story__layout--n3 .gallery-story__tile--c { grid-column: 9 / span 4; }

	.gallery-story__layout--n2 .gallery-story__tile--a { grid-column: 1 / span 6; grid-row: 1 / span 4; }
	.gallery-story__layout--n2 .gallery-story__tile--b { grid-column: 7 / span 6; grid-row: 1 / span 4; }

	.gallery-story__layout--n1 .gallery-story__tile--a { grid-column: 1 / -1; grid-row: 1 / span 5; }
}

@media (min-width: 1024px) {
	.gallery-story__hero {
		grid-column: 1 / span 7;
		aspect-ratio: 3 / 2;
	}

	.gallery-story__text {
		grid-column: 8 / -1;
	}

	.gallery-story__layout--n0 .gallery-story__hero {
		grid-column: 1 / span 8;
	}

	.gallery-story__layout--n0 .gallery-story__text {
		grid-column: 9 / -1;
	}
}

.gallery-story__empty {
	padding-block: clamp(1.5rem, 1rem + 4vw, 4rem);
}


/* ==========================================================================
   03 BROWSE ALBUMS — ivory band: filter console + album grid
   ========================================================================== */
.tone-ivory.gallery-browse {
	background-color: var(--bg-alt);
	border-top: 1px solid var(--line);
}

.gallery-filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.1rem;
	margin: 0 0 clamp(1.75rem, 1.2rem + 2vw, 3rem);
	padding: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}

.gallery-filters__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.6rem;
	align-items: center;
	min-width: 0;
}

@media (min-width: 900px) {
	.gallery-filters__row {
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: 1rem;
	}
}

.gallery-filters__label {
	margin: 0;
	color: var(--accent);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* the scroll-snap chip rows bleed to the panel edge on small screens; scroll-padding keeps the first chip off the edge when the row snaps */
.gallery-filters .chips--scroll {
	margin-inline: calc(clamp(1rem, 0.6rem + 1.4vw, 1.75rem) * -1);
	padding-inline: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
	scroll-padding-inline: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
}

/* from a large phone up the chips simply wrap — nothing hides behind a scroll */
@media (min-width: 640px) {
	.gallery-filters .chips--scroll,
	.gallery-hero .chips--scroll {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
}

.gallery-filters__place {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.gallery-filters__place select {
	width: min(100%, 22rem);
	min-width: 0;
}

html.hs-js .gallery-filters__apply {
	display: none;
}

.gallery-filters__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line);
}

.gallery-status {
	margin: 0;
	color: var(--fg-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.gallery-filters__reset {
	font-size: var(--fs-sm);
}

/* album grid: 1 column → 2 → 3 */
.gallery-albums {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
	transition: opacity 0.3s ease;
}

@media (min-width: 600px) {
	.gallery-albums {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.gallery-albums {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gallery-albums.is-filtering > [data-filter-item] {
	transition: opacity 250ms var(--ease-out), scale 250ms var(--ease-out);
}

.gallery-albums[aria-busy='true'] {
	opacity: 0.4;
	pointer-events: none;
}

.gallery-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	max-width: 40rem;
	margin: 0 auto;
	padding: clamp(2rem, 1.4rem + 3vw, 3.5rem) 1.5rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-lg);
	color: var(--fg-soft);
	text-align: center;
}

.gallery-empty .icon {
	color: var(--accent-2);
}

.gallery-empty__title {
	margin: 0.25rem 0 0;
	color: var(--heading);
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
	line-height: 1.15;
}

.gallery-empty__text {
	max-width: 32rem;
	margin: 0 0 0.75rem;
}

.gallery-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}

html:not(.hs-js) .gallery-more {
	display: none;
}

html.hs-js .gallery-pagination {
	display: none;
}

.gallery-more [data-gallery-more].is-loading {
	pointer-events: none;
	opacity: 0.7;
	cursor: progress;
}


/* ==========================================================================
   04 VIDEO STORIES — sanctum black. Posters only: nothing plays in the grid.
   ========================================================================== */
.gallery-videos__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
}

@media (min-width: 768px) {
	.gallery-videos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* three films on a tablet: the first one leads across both columns */
	.gallery-videos__grid > :first-child:nth-last-child(3) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.gallery-videos__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gallery-videos__grid > :first-child:nth-last-child(3) {
		grid-column: auto;
	}
}

.gallery-videos .card__title {
	font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
}


/* ==========================================================================
   05 LATEST MOMENTS — charcoal. Curated photographs: caption + date + category. Stacks on mobile.
   ========================================================================== */
/* The template renders 1, 2, 3, 4, 6, 8 or 12 photographs (data-count), so every row is complete at every width. */
.gallery-latest__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 1.5rem + 2vw, 3rem) var(--gap);
}

/* a phone shows the first four, stacked */
@media (max-width: 767px) {
	.gallery-latest__grid > :nth-child(n + 5) {
		display: none;
	}
}

@media (min-width: 768px) {
	.gallery-latest__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gallery-latest__grid[data-count='1'] {
		grid-template-columns: minmax(0, 22rem);
	}

	.gallery-latest__grid[data-count='2'],
	.gallery-latest__grid[data-count='4'],
	.gallery-latest__grid[data-count='8'] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gallery-latest__grid[data-count='2'] {
		grid-template-columns: repeat(2, minmax(0, 22rem));
	}
}

@media (min-width: 1280px) {
	.gallery-latest__grid[data-count='4'],
	.gallery-latest__grid[data-count='8'],
	.gallery-latest__grid[data-count='12'] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.gallery-latest__grid[data-count='6'] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gallery-moment {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	margin: 0;
}

.gallery-moment__photo.gallery-tile--fill {
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-md);
}

.gallery-moment__caption {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
	color: var(--fg-soft);
	font-size: var(--fs-body);
}

.gallery-moment__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.9rem;
	margin: 0;
	color: var(--accent-2);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gallery-moment__cat {
	color: var(--accent);
}

.gallery-moment__meta > * + *::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 0.9rem;
	border-radius: 50%;
	background: var(--antique-gold);
	vertical-align: middle;
}

.gallery-moment__text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
	overflow: hidden;
	color: var(--heading);
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
	line-height: 1.25;
}

.gallery-moment__link {
	font-size: var(--fs-sm);
}

.gallery-latest__follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
}

.gallery-latest__follow-label {
	margin: 0;
	color: var(--accent-2);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gallery-latest__follow .social-links {
	margin: 0;
}


/* ==========================================================================
   LONG TEXT — anything typed in the admin (titles, places, captions, links) wraps inside its box instead of widening the page.
   overflow-wrap is inherited, so the section roots also cover the shared card components rendered inside them.
   ========================================================================== */
.gallery-hero,
.gallery-story,
.gallery-browse,
.gallery-videos,
.gallery-latest {
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}

/* grid children may shrink below their longest word (1fr tracks otherwise grow to fit it) */
.gallery-story__layout > *,
.gallery-albums > *,
.gallery-videos__grid > * {
	min-width: 0;
}

.gallery-moment__link {
	max-width: 100%;
}

.gallery-moment__link > span {
	min-width: 0;
}