/**
 * Tura – Gallery widget
 *
 * Justified rows without JavaScript. Each item carries its own --tura-g-ratio
 * (width / height, written server-side from the attachment metadata) and both
 * flex-grow and flex-basis derive from it, so flexbox distributes each row's
 * leftover space in proportion to how wide each image wants to be. Rows finish
 * flush with both edges regardless of what mix of shapes you upload.
 */

.tura-g {
	--tura-g-row: 260px;
	--tura-g-gap: 10px;
	--tura-g-radius: 4px;
	--tura-g-zoom: 1.06;
	--tura-g-overlay: rgba(4, 34, 40, 0.28);
	--tura-g-columns: 3;
	--tura-g-tile: 75%;

	/* Fills whatever container it is dropped into, at any width. */
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Elementor's widget wrapper can shrink-to-fit inside a flex container. */
.elementor-widget-tura-gallery .elementor-widget-container {
	width: 100%;
}

/* Head ----------------------------------------------------------------- */

.tura-g__head {
	margin-bottom: 30px;
}

.tura-g__eyebrow {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tura-g .tura-g__title {
	margin: 0;
	line-height: 1.2;
}

.tura-g__subtitle {
	margin-top: 10px;
	line-height: 1.6;
}

/* The alignment control sets text-align on __head; keep the subtitle's
   max-width honouring that instead of always hugging the left. */
.tura-g__head[style*="center"] .tura-g__subtitle {
	margin-left: auto;
	margin-right: auto;
}

.tura-g__head[style*="right"] .tura-g__subtitle {
	margin-left: auto;
}

/* Shared item chrome --------------------------------------------------- */

.tura-g__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--tura-g-radius);
	background-color: #eef1f3;
}

.tura-g__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	line-height: 0;
}

/* 0,2,0 beats Elementor's `.elementor img{height:auto;max-width:100%}` (0,1,1),
   which would otherwise stop object-fit from filling the tile. */
.tura-g .tura-g__img {
	display: block;
	width: 100%;
	max-width: none;
	transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
	will-change: transform;
}

.tura-g__item:hover .tura-g__img,
.tura-g__link:focus-visible .tura-g__img {
	transform: scale(var(--tura-g-zoom));
}

.tura-g__veil {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--tura-g-overlay);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.tura-g__item:hover .tura-g__veil,
.tura-g__link:focus-visible .tura-g__veil {
	opacity: 1;
}

.tura-g__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 16px;
	color: #fff;
	font-size: 14px;
	line-height: 1.35;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.tura-g__item:hover .tura-g__caption,
.tura-g__link:focus-visible .tura-g__caption {
	opacity: 1;
	transform: translateY(0);
}

.tura-g__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Layout: justified ---------------------------------------------------- */

.tura-g--justified .tura-g__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tura-g-gap);
}

.tura-g--justified .tura-g__item {
	/* Longhand rather than the flex shorthand: some engines mis-parse a custom
	   property used as the grow factor inside the shorthand. */
	flex-grow: var(--tura-g-ratio, 1.5);
	flex-shrink: 1;
	flex-basis: calc(var(--tura-g-row) * var(--tura-g-ratio, 1.5));
	height: var(--tura-g-row);
	min-width: 0;
}

.tura-g--justified .tura-g__img {
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Absorbs the slack on the final row, so a lone last image keeps its natural
   width instead of being stretched across the container. */
.tura-g--justified .tura-g__grid::after {
	content: "";
	flex-grow: 999999;
	flex-basis: 0;
	min-width: 0;
	height: 0;
}

/* Layout: masonry ------------------------------------------------------ */

.tura-g--masonry .tura-g__grid {
	column-count: var(--tura-g-columns);
	column-gap: var(--tura-g-gap);
}

.tura-g--masonry .tura-g__item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: var(--tura-g-gap);
	display: inline-block; /* Safari needs this to respect break-inside. */
	width: 100%;
}

.tura-g--masonry .tura-g__img {
	height: auto;
}

/* Layout: uniform grid -------------------------------------------------- */

.tura-g--grid .tura-g__grid {
	display: grid;
	grid-template-columns: repeat(var(--tura-g-columns), minmax(0, 1fr));
	gap: var(--tura-g-gap);
}

.tura-g--grid .tura-g__item {
	position: relative;
	padding-top: var(--tura-g-tile);
}

.tura-g--grid .tura-g__link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.tura-g--grid .tura-g__img {
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 767px) {
	.tura-g__head {
		margin-bottom: 22px;
	}

	/* Very narrow screens: let a tall portrait take a whole row rather than
	   squeezing three slivers side by side. */
	.tura-g--justified .tura-g__item {
		min-width: 42%;
	}

	.tura-g__caption {
		opacity: 1;
		transform: none;
		padding: 10px 12px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tura-g__img,
	.tura-g__veil,
	.tura-g__caption {
		transition: none;
	}

	.tura-g__item:hover .tura-g__img {
		transform: none;
	}
}

.tura-g__empty {
	margin: 0;
	padding: 16px;
	border: 1px dashed #c9d2d8;
	border-radius: 8px;
	color: #6b7a83;
}