/**
 * Envira Albums - Mediatis-Style Grid Layout
 * Inspired by mediatis.com - Professional photography portfolio grid
 *
 * Features:
 * - 12-column CSS Grid system for gallery covers
 * - 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
 *
 * @version 1.0.0
 * @author Mediatis AG
 */

/* ==========================================================================
   Flexbox Container - 12 Column System for Albums
   ========================================================================== */

.envira-album-wrap.envira-layout-mediatis .envira-album-public,
.envira-album-wrap.envira-layout-mediatis-album .envira-album-public {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 11px;
	width: 100%;
	height: auto !important;
	max-width: 1800px;
	margin: 0 auto;
	padding: 0;
}

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

.envira-album-wrap.envira-layout-mediatis .envira-gallery-item,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item {
	position: relative;
	overflow: hidden;
	margin: 0 !important;
	float: none !important;
	flex: 0 0 auto;
	height: auto;
	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 */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item-inner,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item-inner {
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	width: 100% !important;
	height: 0 !important;
	padding-bottom: 66.67% !important; /* 3:2 aspect ratio (2/3 = 0.6667) */
	top: auto !important;
	left: auto !important;
}

.envira-album-wrap.envira-layout-mediatis .envira-album-link,
.envira-album-wrap.envira-layout-mediatis-album .envira-album-link,
.envira-album-wrap.envira-layout-mediatis .envira-gallery-link,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-link {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
}

/* ==========================================================================
   Image Styles (Gallery Cover Images)
   ========================================================================== */

.envira-album-wrap.envira-layout-mediatis .envira-gallery-item img,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item img {
	width: 100% !important;
	height: 100% !important;
	display: block;
	object-fit: cover;
	object-position: center;
	position: absolute !important;
	top: 0 !important;
	left: 0 !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 gallery covers - 3 columns (25% width) */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-3,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-3 {
	width: calc(25% - 8.25px) !important;
}

/* Medium gallery covers - 4 columns (33% width) */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-4,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-4 {
	width: calc(33.333% - 7.333px) !important;
}

/* Large gallery covers - 5 columns (42% width) */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-5,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-5 {
	width: calc(41.667% - 6.417px) !important;
}

/* Extra large - 6 columns (50% width) */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-6,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-6 {
	width: calc(50% - 5.5px) !important;
}

/* Featured/Hero - 8 columns (66% width) */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-8,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-8 {
	width: calc(66.667% - 3.667px) !important;
}

/* 6 columns - Left aligned (50% width with empty space on right) */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-6-left,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-6-left {
	width: calc(50% - 5.5px) !important;
	margin-right: auto !important;
}

/* 6 columns - Right aligned (50% width with empty space on left) */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-6-right,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-6-right {
	width: calc(50% - 5.5px) !important;
	margin-left: auto !important;
}

/* 8 columns - Left aligned (66% width with empty space on right) */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-8-left,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-8-left {
	width: calc(66.667% - 3.667px) !important;
	margin-right: auto !important;
}

/* 8 columns - Right aligned (66% width with empty space on left) */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-8-right,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-8-right {
	width: calc(66.667% - 3.667px) !important;
	margin-left: auto !important;
}

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

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

/* Default: Mix of 3, 4, and 5 column spans */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(6n + 1),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(6n + 1) {
	width: calc(41.667% - 6.417px);
}

.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(6n + 2),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(6n + 2) {
	width: calc(33.333% - 7.333px);
}

.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(6n + 3),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(6n + 3) {
	width: calc(25% - 8.25px);
}

.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(6n + 4),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(6n + 4) {
	width: calc(33.333% - 7.333px);
}

.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(6n + 5),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(6n + 5) {
	width: calc(41.667% - 6.417px);
}

.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(6n + 6),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(6n + 6) {
	width: calc(25% - 8.25px);
}

/* Manual classes override nth-child patterns - grid-span-* classes have higher specificity */

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

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

/* Hover: Lift item with shadow */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:hover,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:hover {
	transform: translateY(-3px);
	z-index: 10;
}

/* Overlay Effect */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item::before,
.envira-album-wrap.envira-layout-mediatis-album .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-album-wrap.envira-layout-mediatis .envira-gallery-item:hover::before,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:hover::before {
	opacity: 1;
}

/* ==========================================================================
   Gallery Title/Caption Styling
   ========================================================================== */

.envira-album-wrap.envira-layout-mediatis .envira-album-title,
.envira-album-wrap.envira-layout-mediatis-album .envira-album-title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	z-index: 2;
	/* Backdrop blur for modern browsers */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

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

/* Gallery caption */
.envira-album-wrap.envira-layout-mediatis .envira-album-caption,
.envira-album-wrap.envira-layout-mediatis-album .envira-album-caption {
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	margin-top: 5px;
	opacity: 0.9;
}

/* ==========================================================================
   Entrance Animations
   ========================================================================== */

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

.envira-album-wrap.envira-layout-mediatis .envira-gallery-item,
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item {
	animation: fadeInMediatis 0.8s ease-out forwards;
	animation-delay: calc(var(--item-index, 0) * 0.05s);
	opacity: 0;
}

/* Apply animation delays via nth-child */
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(1),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(1) { animation-delay: 0.05s; }
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(2),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(2) { animation-delay: 0.1s; }
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(3),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(3) { animation-delay: 0.15s; }
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(4),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(4) { animation-delay: 0.2s; }
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(5),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(5) { animation-delay: 0.25s; }
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(6),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(6) { animation-delay: 0.3s; }
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(7),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(7) { animation-delay: 0.35s; }
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(8),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(8) { animation-delay: 0.4s; }
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(9),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(9) { animation-delay: 0.45s; }
.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(10),
.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(10) { animation-delay: 0.5s; }

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet Landscape: 6-column grid (768px - 1023px) */
@media screen and (max-width: 1023px) {
	.envira-album-wrap.envira-layout-mediatis .envira-album-public,
	.envira-album-wrap.envira-layout-mediatis-album .envira-album-public {
		grid-template-columns: repeat(6, 1fr);
	}

	/* Scale spans down proportionally */
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-3,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-3 {
		grid-column: span 2 !important; /* 25% */
	}

	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-4,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-4 {
		grid-column: span 2 !important; /* 33% */
	}

	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-5,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-5 {
		grid-column: span 3 !important; /* 50% */
	}

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

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

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

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

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

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

/* Tablet Portrait: 4-column grid (480px - 767px) */
@media screen and (max-width: 767px) {
	.envira-album-wrap.envira-layout-mediatis .envira-album-public,
	.envira-album-wrap.envira-layout-mediatis-album .envira-album-public {
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
	}

	/* Simplify to 2 columns or full width */
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-3,
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-4,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-3,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-4 {
		grid-column: span 2 !important; /* 50% */
	}

	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-5,
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-6,
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-8,
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item.grid-span-12,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-5,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-6,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-8,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item.grid-span-12 {
		grid-column: span 4 !important; /* 100% */
	}

	/* Auto layout: alternating 2-column and full-width */
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(odd),
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(odd) {
		grid-column: span 2;
	}

	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:nth-child(even),
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:nth-child(even) {
		grid-column: span 2;
	}

	/* Titles always visible on tablet */
	.envira-album-wrap.envira-layout-mediatis .envira-album-title,
	.envira-album-wrap.envira-layout-mediatis-album .envira-album-title {
		opacity: 1;
		transform: translateY(0);
	}

	/* Reduce hover effects on touch devices */
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:hover,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:hover {
		transform: none;
	}
}

/* Mobile: Single column (< 480px) */
@media screen and (max-width: 479px) {
	.envira-album-wrap.envira-layout-mediatis .envira-album-public,
	.envira-album-wrap.envira-layout-mediatis-album .envira-album-public {
		display: block !important;
		grid-template-columns: 1fr;
	}

	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item {
		grid-column: span 1 !important;
		width: 100%;
		margin-bottom: 15px;
	}

	/* Disable hover effects on mobile */
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:hover img,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:hover img {
		transform: none;
	}

	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item:hover,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item:hover {
		transform: none;
		box-shadow: none;
	}

	/* Titles always visible on mobile */
	.envira-album-wrap.envira-layout-mediatis .envira-album-title,
	.envira-album-wrap.envira-layout-mediatis-album .envira-album-title {
		opacity: 1;
		transform: translateY(0);
		position: static;
		background: #333;
		padding: 15px;
		backdrop-filter: none;
	}

	/* Reduce animation intensity */
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item {
		animation-duration: 0.4s;
	}
}

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

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item,
	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item img,
	.envira-album-wrap.envira-layout-mediatis .envira-album-title,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item img,
	.envira-album-wrap.envira-layout-mediatis-album .envira-album-title {
		animation: none !important;
		transition: none !important;
	}
}

/* Focus styles for keyboard navigation */
.envira-album-wrap.envira-layout-mediatis .envira-album-link:focus-visible,
.envira-album-wrap.envira-layout-mediatis-album .envira-album-link:focus-visible {
	outline: 3px solid #CC6633;
	outline-offset: 2px;
	border-radius: 2px;
}

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

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

	.envira-album-wrap.envira-layout-mediatis .envira-gallery-item,
	.envira-album-wrap.envira-layout-mediatis-album .envira-gallery-item {
		grid-column: span 1 !important;
		page-break-inside: avoid;
		box-shadow: none !important;
	}

	.envira-album-wrap.envira-layout-mediatis .envira-album-title,
	.envira-album-wrap.envira-layout-mediatis-album .envira-album-title {
		opacity: 1;
		position: static;
		background: none;
		color: #000;
		padding: 10px 0;
	}
}