/**
 * Inoforest Photo Gallery
 *
 * Contents
 * 1. Defaults (variables)
 * 2. Filter tabs (Normal / Hover / Active)
 * 3. Grid: masonry (CSS columns) and even grid
 * 4. Photo, hover overlay and icon
 * 5. Caption
 * 6. Editor hint, reduced motion, responsive
 *
 * Colours read the Design System (--inoforest-color-*) with fallbacks. The defaults sit in :where() blocks (no
 * specificity), so the Style tab controls, which set the same variables or properties on the widget, always win.
 */

/* 1. Defaults ------------------------------------------------------------------ */
:where(.inoforest-photo-gallery) {
	--ino-pg-columns: 3;
	--ino-pg-gap: 24px;
	--ino-pg-ratio: 1 / 1;
	--ino-pg-radius: 24px;
	--ino-pg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ino-pg-primary: var(--inoforest-color-primary, #0b7a75);
	--ino-pg-overlay: rgba(11, 122, 117, 0.55);
	--ino-pg-overlay: color-mix(in srgb, var(--ino-pg-primary) 55%, transparent);
	--ino-pg-icon-color: #fff;
	--ino-pg-icon-size: 34px;
	--ino-pg-caption-inset: 18px;

	--ino-pg-tab-color: var(--inoforest-color-heading, #0d1b2a);
	--ino-pg-tab-bg: var(--inoforest-color-background, #fff);
	--ino-pg-tab-border: var(--inoforest-color-border, #e5ebef);
	--ino-pg-tab-hover-color: var(--ino-pg-primary);
	--ino-pg-tab-hover-bg: var(--ino-pg-tab-bg);
	--ino-pg-tab-hover-border: var(--ino-pg-primary);
	--ino-pg-tab-active-color: #fff;
	--ino-pg-tab-active-bg: var(--ino-pg-primary);
	--ino-pg-tab-active-border: var(--ino-pg-primary);
}

/* 2. Filter tabs ------------------------------------------------------------------ */
.inoforest-photo-gallery__filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 40px;
}

/* Two classes: out-rank the kit's button styles. */
.inoforest-photo-gallery .inoforest-photo-gallery__tab {
	margin: 0;
	padding: 11px 24px;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.75;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ino-pg-tab-color);
	background-color: var(--ino-pg-tab-bg);
	border: 1px solid var(--ino-pg-tab-border);
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.35s var(--ino-pg-ease), color 0.35s var(--ino-pg-ease), border-color 0.35s var(--ino-pg-ease);
}

.inoforest-photo-gallery button.inoforest-photo-gallery__tab:hover,
.inoforest-photo-gallery button.inoforest-photo-gallery__tab:focus-visible {
	color: var(--ino-pg-tab-hover-color);
	background-color: var(--ino-pg-tab-hover-bg);
	border-color: var(--ino-pg-tab-hover-border);
}

.inoforest-photo-gallery button.inoforest-photo-gallery__tab.is-active {
	color: var(--ino-pg-tab-active-color);
	background-color: var(--ino-pg-tab-active-bg);
	border-color: var(--ino-pg-tab-active-border);
}

/* 3. Grid ------------------------------------------------------------------ */
.inoforest-photo-gallery__grid {
	columns: var(--ino-pg-columns);
	column-gap: var(--ino-pg-gap);
}

.inoforest-photo-gallery[data-layout="grid"] .inoforest-photo-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--ino-pg-columns), minmax(0, 1fr));
	gap: var(--ino-pg-gap);
	columns: auto;
}

/* Bento: a mosaic on a grid of equal rows; the pattern makes some tiles span two columns or rows. */
.inoforest-photo-gallery[data-layout="bento"] .inoforest-photo-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--ino-pg-columns), minmax(0, 1fr));
	grid-auto-rows: var(--ino-pg-row, 220px);
	gap: var(--ino-pg-gap);
	columns: auto;
}

.inoforest-photo-gallery[data-layout="bento"][data-pattern="a"] .inoforest-photo-gallery__item:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

.inoforest-photo-gallery[data-layout="bento"][data-pattern="a"] .inoforest-photo-gallery__item:nth-child(4) {
	grid-row: span 2;
}

.inoforest-photo-gallery[data-layout="bento"][data-pattern="a"] .inoforest-photo-gallery__item:nth-child(6) {
	grid-column: span 2;
}

.inoforest-photo-gallery[data-layout="bento"][data-pattern="b"] .inoforest-photo-gallery__item:nth-child(2) {
	grid-column: span 2;
	grid-row: span 2;
}

.inoforest-photo-gallery[data-layout="bento"][data-pattern="b"] .inoforest-photo-gallery__item:nth-child(5) {
	grid-column: span 2;
}

/* 4. Photo ------------------------------------------------------------------ */
.inoforest-photo-gallery__item {
	position: relative;
	display: block;
	margin: 0 0 var(--ino-pg-gap);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	border-radius: var(--ino-pg-radius);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	isolation: isolate;
}

.inoforest-photo-gallery[data-layout="grid"] .inoforest-photo-gallery__item {
	margin: 0;
	aspect-ratio: var(--ino-pg-ratio);
}

.inoforest-photo-gallery[data-layout="bento"] .inoforest-photo-gallery__item {
	margin: 0;
}

.inoforest-photo-gallery__item.is-hidden {
	display: none;
}

/* Two classes: out-rank Elementor's image reset. */
.inoforest-photo-gallery .inoforest-photo-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	border-radius: 0;
	transition: transform 0.8s var(--ino-pg-ease);
}

.inoforest-photo-gallery[data-layout="grid"] .inoforest-photo-gallery__item img,
.inoforest-photo-gallery[data-layout="bento"] .inoforest-photo-gallery__item img {
	height: 100%;
	object-fit: cover;
}

.inoforest-photo-gallery[data-zoom="yes"] .inoforest-photo-gallery__item:hover img,
.inoforest-photo-gallery[data-zoom="yes"] .inoforest-photo-gallery__item:focus-visible img {
	transform: scale(1.06);
}

.inoforest-photo-gallery__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: var(--ino-pg-icon-size);
	line-height: 1;
	color: var(--ino-pg-icon-color);
	background-color: var(--ino-pg-overlay);
	opacity: 0;
	transition: opacity 0.35s var(--ino-pg-ease);
}

.inoforest-photo-gallery__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.inoforest-photo-gallery__item:hover .inoforest-photo-gallery__icon,
.inoforest-photo-gallery__item:focus-visible .inoforest-photo-gallery__icon {
	opacity: 1;
}

.inoforest-photo-gallery__item:focus-visible {
	outline: 3px solid var(--ino-pg-primary);
	outline-offset: 3px;
}

/* 5. Caption ------------------------------------------------------------------ */
.inoforest-photo-gallery .inoforest-photo-gallery__caption {
	position: absolute;
	right: var(--ino-pg-caption-inset);
	bottom: calc(var(--ino-pg-caption-inset) - 2px);
	left: var(--ino-pg-caption-inset);
	z-index: 1;
	display: block;
	padding: 12px 16px;
	font-size: 0.85rem;
	line-height: 1.35;
	color: var(--inoforest-color-text, #5a6a79);
	background-color: var(--inoforest-color-background, #fff);
	border-radius: 16px;
	transition: opacity 0.35s var(--ino-pg-ease), transform 0.35s var(--ino-pg-ease);
}

.inoforest-photo-gallery[data-caption="hover"] .inoforest-photo-gallery__caption {
	opacity: 0;
	transform: translateY(14px);
}

.inoforest-photo-gallery[data-caption="hover"] .inoforest-photo-gallery__item:hover .inoforest-photo-gallery__caption,
.inoforest-photo-gallery[data-caption="hover"] .inoforest-photo-gallery__item:focus-visible .inoforest-photo-gallery__caption {
	opacity: 1;
	transform: none;
}

.inoforest-photo-gallery .inoforest-photo-gallery__caption-title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--inoforest-color-heading, #0d1b2a);
}

.inoforest-photo-gallery__caption-text {
	display: block;
}

/* 6. Editor hint, reduced motion, responsive ------------------------------------------- */
.inoforest-photo-gallery__hint {
	margin: 0 0 16px;
	padding: 16px;
	font-size: 0.85rem;
	text-align: center;
	border: 1px dashed currentColor;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.inoforest-photo-gallery .inoforest-photo-gallery__tab,
	.inoforest-photo-gallery .inoforest-photo-gallery__item img,
	.inoforest-photo-gallery__icon,
	.inoforest-photo-gallery .inoforest-photo-gallery__caption {
		transition: none;
	}

	.inoforest-photo-gallery[data-zoom="yes"] .inoforest-photo-gallery__item:hover img {
		transform: none;
	}
}

@media (max-width: 991px) {
	.inoforest-photo-gallery[data-layout="bento"] .inoforest-photo-gallery__grid {
		grid-auto-rows: var(--ino-pg-row, 180px);
	}
}

@media (max-width: 767px) {
	.inoforest-photo-gallery[data-layout="bento"] .inoforest-photo-gallery__grid {
		grid-auto-rows: var(--ino-pg-row, 150px);
	}

	.inoforest-photo-gallery[data-layout="bento"][data-pattern] .inoforest-photo-gallery__item:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	.inoforest-photo-gallery[data-layout="bento"][data-pattern] .inoforest-photo-gallery__item:nth-child(1) {
		grid-column: span 2;
		grid-row: span 2;
	}
}

@media (max-width: 767px) {
	:where(.inoforest-photo-gallery) {
		--ino-pg-gap: 12px;
		--ino-pg-radius: 16px;
	}

	.inoforest-photo-gallery[data-caption-sm="no"] .inoforest-photo-gallery__caption {
		display: none;
	}
}