/**
 * GTGS Elegant Gallery — front end.
 * Every color and measurement comes from custom properties written inline by PHP,
 * so the same stylesheet works on any site without edits.
 */

.gtgs-gallery {
	--gtgs-cols-now: var( --gtgs-cols-mobile, 1 );
	box-sizing: border-box;
	width: 100%;
}

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

/* ---------------------------------------------------------------- Filters */

.gtgs-gallery__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: var( --gtgs-btn-align, center );
	gap: var( --gtgs-btn-gap, 10px );
	margin: 0 0 calc( var( --gtgs-gap, 18px ) * 1.6 );
}

.gtgs-gallery__filter {
	appearance: none;
	margin: 0;
	cursor: pointer;
	font-family: var( --gtgs-btn-font, inherit );
	font-size: var( --gtgs-btn-size, 13px );
	font-weight: var( --gtgs-btn-weight, 500 );
	letter-spacing: var( --gtgs-btn-spacing, 1.4px );
	text-transform: var( --gtgs-btn-transform, uppercase );
	line-height: 1.2;
	padding: var( --gtgs-btn-pad-y, 11px ) var( --gtgs-btn-pad-x, 22px );
	border-radius: var( --gtgs-btn-radius, 40px );
	border: var( --gtgs-btn-border-width, 1px ) solid var( --gtgs-btn-border, #d8d3cc );
	color: var( --gtgs-btn-text, #4a4a4a );
	background: var( --gtgs-btn-bg, #fff );
	transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

.gtgs-gallery__filter:hover,
.gtgs-gallery__filter:focus-visible {
	color: var( --gtgs-btn-text-hover, #1f1f1f );
	background: var( --gtgs-btn-bg-hover, #faf7f3 );
	border-color: var( --gtgs-btn-border-hover, #b8ada0 );
}

.gtgs-gallery__filter:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.gtgs-gallery__filter.is-active {
	color: var( --gtgs-btn-text-on, #b4703a );
	background: var( --gtgs-btn-bg-on, #fff );
	border-color: var( --gtgs-btn-border-on, #b4703a );
}

/* ------------------------------------------------------------ Grid: shared */

.gtgs-gallery__item {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var( --gtgs-img-radius, 2px );
	background: rgba( 0, 0, 0, .04 );
}

.gtgs-gallery__open {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	appearance: none;
}

.gtgs-gallery__open:focus-visible {
	outline: 3px solid var( --gtgs-btn-border-on, #b4703a );
	outline-offset: -3px;
}

.gtgs-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier( .2, .7, .3, 1 ), opacity .4s ease;
}

/* Fallback for themes that do not define WordPress's screen-reader class. */
.gtgs-gallery .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.gtgs-gallery__empty {
	text-align: center;
	opacity: .7;
	margin: 2em 0;
}

/* Hover treatments */

.gtgs-hover--zoom .gtgs-gallery__open:hover .gtgs-gallery__img,
.gtgs-hover--zoom .gtgs-gallery__open:focus-visible .gtgs-gallery__img {
	transform: scale( 1.06 );
}

.gtgs-hover--fade .gtgs-gallery__open:hover .gtgs-gallery__img,
.gtgs-hover--fade .gtgs-gallery__open:focus-visible .gtgs-gallery__img {
	opacity: .78;
}

.gtgs-hover--lift .gtgs-gallery__item {
	transition: transform .35s ease, box-shadow .35s ease;
}

.gtgs-hover--lift .gtgs-gallery__item:hover,
.gtgs-hover--lift .gtgs-gallery__item:focus-within {
	transform: translateY( -5px );
	box-shadow: 0 14px 30px rgba( 0, 0, 0, .16 );
}

/* ----------------------------------------------------------- Masonry mode */

.gtgs-gallery--masonry .gtgs-gallery__grid {
	column-count: var( --gtgs-cols-now );
	column-gap: var( --gtgs-gap, 18px );
}

.gtgs-gallery--masonry .gtgs-gallery__item {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	margin-bottom: var( --gtgs-gap, 18px );
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

.gtgs-gallery--masonry .gtgs-gallery__img {
	height: auto;
}

/* Masonry sizes change proportion, since columns cannot be spanned. */
.gtgs-gallery--masonry .gtgs-size--small .gtgs-gallery__img { aspect-ratio: 1 / 1; }
.gtgs-gallery--masonry .gtgs-size--short .gtgs-gallery__img { aspect-ratio: 4 / 3; }
.gtgs-gallery--masonry .gtgs-size--long  .gtgs-gallery__img { aspect-ratio: 2 / 3; }
.gtgs-gallery--masonry .gtgs-size--large .gtgs-gallery__img { aspect-ratio: 3 / 4; }

.gtgs-gallery--masonry .gtgs-size--auto .gtgs-gallery__img {
	height: auto;
	aspect-ratio: var( --gtgs-ratio, auto );
	object-fit: cover;
}

/* -------------------------------------------------------- Fixed grid mode */

.gtgs-gallery--grid .gtgs-gallery__grid {
	display: grid;
	grid-template-columns: repeat( var( --gtgs-cols-now ), minmax( 0, 1fr ) );
	grid-auto-rows: var( --gtgs-row, 220px );
	grid-auto-flow: dense;
	gap: var( --gtgs-gap, 18px );
}

.gtgs-gallery--grid .gtgs-gallery__item {
	grid-column: span 1;
	grid-row: span 1;
	min-width: 0;
}

.gtgs-gallery--grid .gtgs-size--short {
	grid-column: span 2;
}

.gtgs-gallery--grid .gtgs-size--long {
	grid-row: span 2;
}

.gtgs-gallery--grid .gtgs-size--large {
	grid-column: span 2;
	grid-row: span 2;
}

/* Single-column layouts cannot span sideways. */
.gtgs-gallery--grid.gtgs-cols-1 .gtgs-size--short,
.gtgs-gallery--grid.gtgs-cols-1 .gtgs-size--large {
	grid-column: span 1;
}

/* -------------------------------------------------------- Filtered state */

/*
 * Declared after both layout blocks and scoped to the wrapper so it outranks
 * the display value each layout sets on its items. Without this, a filtered
 * photo stays on screen in masonry mode.
 */
.gtgs-gallery .gtgs-gallery__item.is-hidden {
	display: none !important;
}

/* ------------------------------------------------------------ Breakpoints */

@media ( min-width: 600px ) {
	.gtgs-gallery {
		--gtgs-cols-now: var( --gtgs-cols-tablet, 2 );
	}
}

@media ( min-width: 1000px ) {
	.gtgs-gallery {
		--gtgs-cols-now: var( --gtgs-cols, 3 );
	}
}

/* ------------------------------------------------------------- Lightbox */

.gtgs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: var( --gtgs-lightbox-bg, #12100e );
	opacity: 0;
	transition: opacity .28s ease;
}

.gtgs-lightbox[hidden] {
	display: none;
}

.gtgs-lightbox.is-open {
	opacity: 1;
}

.gtgs-lightbox__stage {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.gtgs-lightbox__img {
	max-width: 92vw;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
	transform: scale( .97 );
	opacity: 0;
	transition: transform .3s ease, opacity .3s ease;
}

.gtgs-lightbox.is-loaded .gtgs-lightbox__img {
	transform: scale( 1 );
	opacity: 1;
}

.gtgs-lightbox__caption {
	color: rgba( 255, 255, 255, .82 );
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	max-width: 60ch;
}

.gtgs-lightbox__caption:empty {
	display: none;
}

.gtgs-lightbox__count {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX( -50% );
	margin: 0;
	color: rgba( 255, 255, 255, .55 );
	font-size: 12px;
	letter-spacing: 2px;
}

.gtgs-lightbox__close,
.gtgs-lightbox__nav {
	position: absolute;
	appearance: none;
	border: 0;
	background: rgba( 255, 255, 255, .08 );
	color: #fff;
	cursor: pointer;
	line-height: 1;
	border-radius: 50%;
	transition: background-color .2s ease;
}

.gtgs-lightbox__close:hover,
.gtgs-lightbox__nav:hover,
.gtgs-lightbox__close:focus-visible,
.gtgs-lightbox__nav:focus-visible {
	background: rgba( 255, 255, 255, .2 );
}

.gtgs-lightbox__close {
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	font-size: 28px;
}

.gtgs-lightbox__nav {
	top: 50%;
	transform: translateY( -50% );
	width: 48px;
	height: 48px;
	font-size: 32px;
}

.gtgs-lightbox__nav--prev { left: 12px; }
.gtgs-lightbox__nav--next { right: 12px; }

.gtgs-lightbox__nav[hidden] { display: none; }

@media ( max-width: 600px ) {
	.gtgs-lightbox__nav {
		width: 40px;
		height: 40px;
		font-size: 26px;
	}

	.gtgs-lightbox__img {
		max-height: 70vh;
	}
}

body.gtgs-lightbox-open {
	overflow: hidden;
}

/* ------------------------------------------------------- Reduced motion */

@media ( prefers-reduced-motion: reduce ) {
	.gtgs-gallery__img,
	.gtgs-gallery__filter,
	.gtgs-gallery__item,
	.gtgs-lightbox,
	.gtgs-lightbox__img {
		transition: none !important;
	}

	.gtgs-hover--zoom .gtgs-gallery__open:hover .gtgs-gallery__img,
	.gtgs-hover--lift .gtgs-gallery__item:hover {
		transform: none;
	}
}