/**
 * Envira Gallery - Mediatis-Style Grid Layout
 * Inspired by mediatis.com - Professional photography portfolio grid
 *
 * Features:
 * - 12-column CSS Grid system for precise positioning
 * - Variable column spans for visual hierarchy
 * - Advanced hover effects with mix-blend-mode
 * - Responsive breakpoints: 12 cols → 6 cols → 4 cols → single column
 * - Smooth animations and transitions
 */

/* ==========================================================================
   Grid Container - 12 Column System
   ========================================================================== */

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: none !important;
	grid-auto-rows: auto; /* Auto height - images determine their own height */
	gap: 11px;
	row-gap: 11px;
	column-gap: 11px;
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
	padding: 0;
}

/* ==========================================================================
   Gallery Items Base Styles
   ========================================================================== */

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item {
	position: relative;
	overflow: hidden;
	margin: 0;
	float: none;
	width: 100%;
	height: auto;
	min-height: 0; /* Allow grid items to shrink */
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove any default Envira margins/padding and override Justified Gallery positioning */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item-inner {
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	top: auto !important;
	left: auto !important;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-link {
	display: block;
	position: relative;
	overflow: hidden;
}

/* ==========================================================================
   Image Styles
   ========================================================================== */

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	object-position: center;
	position: relative !important;
	margin: 0 !important;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Column Span Classes - Variable Width Control
   Desktop: Based on 12 columns
   ========================================================================== */

/* Small images - 3 columns (25% width) */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-3 {
	grid-column: span 3 !important;
}

/* Medium images - 4 columns (33% width) */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-4 {
	grid-column: span 4 !important;
}

/* Large images - 5 columns (42% width) */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-5 {
	grid-column: span 5 !important;
}

/* Extra large - 6 columns (50% width) */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-6 {
	grid-column: span 6 !important;
}

/* Featured/Hero - 8 columns (66% width) */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-8 {
	grid-column: span 8 !important;
}

/* Full width - 12 columns (100% width) */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-12 {
	grid-column: span 12 !important;
}

/* ==========================================================================
   Row Span Classes - Variable Height Control
   ========================================================================== */

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-row-1 {
	grid-row: span 1;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-row-2 {
	grid-row: span 2;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-row-3 {
	grid-row: span 3;
}

/* ==========================================================================
   Default Pattern - Auto Layout (if no classes applied)
   Creates interesting visual rhythm automatically
   ========================================================================== */

/* Default: Mix of 3, 4, and 5 column spans */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 1) {
	grid-column: span 5;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 2) {
	grid-column: span 4;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 3) {
	grid-column: span 3;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 4) {
	grid-column: span 4;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 5) {
	grid-column: span 5;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 6) {
	grid-column: span 3;
}

/* Manual classes override nth-child patterns */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item[class*="grid-span-"] {
	/* Manual span classes take precedence */
}

/* ==========================================================================
   Advanced Hover Effects
   ========================================================================== */

/* Hover: Scale image slightly */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:hover img {
	transform: scale(1.05);
}

/* Hover: Lift item with shadow */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
	z-index: 10;
}

/* Overlay Effect */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	mix-blend-mode: normal;
	z-index: 1;
	pointer-events: none;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:hover::before {
	opacity: 1;
}

/* ==========================================================================
   Captions and Titles with Backdrop Blur
   ========================================================================== */

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-title,
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #fff;
	padding: 20px;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:hover .envira-title,
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:hover .envira-caption {
	opacity: 1;
	transform: translateY(0);
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-title {
	font-family: 'Oswald-Bold', Arial, sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	margin-bottom: 8px;
	letter-spacing: 0.5px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-caption {
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.95);
	font-weight: 300;
}

/* ==========================================================================
   Entrance Animations - Fade In on Load
   ========================================================================== */

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item {
	opacity: 0;
	animation: fadeInMediatis 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInMediatis {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Stagger animation delays for visual interest */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(1) { animation-delay: 0.05s; }
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(2) { animation-delay: 0.1s; }
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(3) { animation-delay: 0.15s; }
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(4) { animation-delay: 0.2s; }
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(5) { animation-delay: 0.25s; }
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6) { animation-delay: 0.3s; }
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(n+7) { animation-delay: 0.35s; }

/* ==========================================================================
   Tablet Landscape (768px - 1200px)
   Switch to 6-column grid
   ========================================================================== */

@media screen and (max-width: 1200px) and (min-width: 768px) {
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public {
		grid-template-columns: repeat(6, 1fr);
		gap: 10px;
	}

	/* Adjust spans for 6-column grid */
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-3,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 3),
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 6) {
		grid-column: span 2; /* 33% */
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-4,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 2),
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 4) {
		grid-column: span 3; /* 50% */
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-5,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 1),
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(6n + 5) {
		grid-column: span 3; /* 50% */
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-6 {
		grid-column: span 3; /* 50% */
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-8 {
		grid-column: span 4; /* 66% */
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-12 {
		grid-column: span 6; /* 100% */
	}
}

/* ==========================================================================
   Tablet Portrait (480px - 767px)
   Switch to 4-column grid
   ========================================================================== */

@media screen and (max-width: 767px) and (min-width: 480px) {
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public {
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}

	/* Most items span 2 columns (50%) or 4 columns (100%) */
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-3,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-4 {
		grid-column: span 2; /* 50% */
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-5,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-6,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-8,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item.grid-span-12,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:nth-child(3n + 1) {
		grid-column: span 4; /* 100% */
	}

	/* Show captions by default on tablets */
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-title,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-caption {
		opacity: 1;
		transform: translateY(0);
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-title {
		font-size: 16px;
		padding: 15px;
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-caption {
		font-size: 12px;
		padding: 15px;
	}
}

/* ==========================================================================
   Mobile (< 480px)
   Single column layout
   ========================================================================== */

@media screen and (max-width: 479px) {
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public {
		display: block; /* Fallback to block layout */
		padding: 0;
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item {
		width: 100% !important;
		margin-bottom: 14px;
		grid-column: auto !important;
		grid-row: auto !important;
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item img {
		height: auto;
		object-fit: contain;
	}

	/* Always show captions on mobile */
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-title,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-caption {
		opacity: 1;
		transform: translateY(0);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-title {
		font-size: 15px;
		padding: 12px;
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-caption {
		font-size: 12px;
		padding: 12px;
	}

	/* Reduce animation intensity on mobile */
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:hover {
		transform: none;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item:hover img {
		transform: scale(1.02);
	}
}

/* ==========================================================================
   Isotope Compatibility
   ========================================================================== */

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public.enviratope .envira-gallery-item {
	clear: none !important;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public {
		grid-template-columns: repeat(2, 1fr);
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item {
		grid-column: span 1 !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-title,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-caption {
		opacity: 1;
		transform: none;
		background: #f5f5f5;
		color: #000;
		backdrop-filter: none;
	}
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item img,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-title,
	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-caption {
		animation: none !important;
		transition: none !important;
	}

	.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-item {
		opacity: 1;
	}
}

/* Focus styles for keyboard navigation */
.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-link:focus {
	outline: 3px solid #CC6633;
	outline-offset: 2px;
}

.envira-gallery-wrap.envira-layout-mediatis .envira-gallery-public .envira-gallery-link:focus-visible {
	outline: 3px solid #CC6633;
	outline-offset: 2px;
}