/* || Mosaic Gallery */
.gallery { 
    position: relative; 
    isolation: isolate; 
    background-color: var(--primary-color); 
    padding: 2rem; 
}

.mosaic-gallery {
	background: #fff;
  	padding: 3.5rem 1rem 4.2rem;
  	position: relative;
}
.mosaic-gallery .gallery_inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.gallery.mosaic-gallery {
    background: #fff !important;
    padding: 3.5rem 1rem 4.2rem;
}

.mosaic_grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(180px, 22vw, 280px);
    gap: 1.4rem;
    width: 100%;
}

/* Grid item placements */
.left_top { grid-column: 1 / span 3; grid-row: 1; }
.left_bottom { grid-column: 1 / span 3; grid-row: 2; }
.center_main { grid-column: 4 / span 6; grid-row: 1 / span 2; }
.right_top { grid-column: 10 / span 3; grid-row: 1; }
.right_bottom_a { grid-column: 10 / span 3; grid-row: 2; }
.right_bottom_b { grid-column: 1 / span 12; grid-row: 3; display: block; }
.mosaic_grid { grid-auto-rows: clamp(180px, 20vw, 260px); }

/* === Gallery Images Hover Lift Effect === */
.mosaic_item {
    position: relative;
	overflow: visible; 
	background: #f6f4f2;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	isolation: isolate;
	transition: transform .42s cubic-bezier(.25,.6,.25,1), box-shadow .42s ease, filter .42s ease;
	will-change: transform;
}

.mosaic_item img { pointer-events: none; }

.mosaic_item video { pointer-events: auto; }

.mosaic_item::after {
	content:"";
	position:absolute; inset:0;
	background:rgba(0,0,0,0);
	border-radius: 6px;
	transition: background .45s ease, border .45s ease;
	pointer-events: none;
}

.mosaic_item img, .mosaic_item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transform-origin: center center;
	filter: brightness(1);
	transition: transform .42s cubic-bezier(.25,.6,.25,1), filter .42s ease;
}

.mosaic_item.center_main { overflow: visible; }

.mosaic_item:hover {
	transform: translateY(-10px) scale(1.06);
  	box-shadow: 0 22px 44px -12px rgba(0,0,0,.35), 0 8px 18px -4px rgba(0,0,0,.28); 
	z-index: 20;
}

.mosaic_item:hover img {
  	transform: scale(1.08);
  	filter: brightness(.95);
}

.mosaic_item.center_main:hover {
  	transform: translateY(-14px) scale(1.05);
  	box-shadow: 0 26px 52px -14px rgba(0,0,0,.38), 0 10px 22px -6px rgba(0,0,0,.30);
}

.mosaic_item.center_main:hover video {
	transform: none;
  	filter: brightness(1);   
}

.mosaic_item:hover::after {
	background: rgba(0,0,0,0.08);
  	border: 2px solid rgba(255,255,255,.65);
}

.mosaic_external_video {
	display: inline-flex;
	padding: .85rem 1.2rem;
	background: rgba(0,0,0,.65);
	color: #fff;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	border: 1px solid rgba(255,255,255,.35);
	backdrop-filter: blur(3px);
	transition: background .3s ease, transform .3s ease;
}

.mosaic_external_video:hover {
	background: var(--primary-color);
	transform: translateY(-2px);
}

.mosaic_placeholder {
	width: 100%; height: 100%;
	background: repeating-linear-gradient(45deg,#ececec,#ececec 12px,#e1e1e1 12px,#e1e1e1 24px);
	font-size: .7rem;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.mosaic_item img, .mosaic_item video, .mosaic_external_video { opacity: 0; animation: mosaicFade .7s ease forwards; }
.mosaic_item:nth-child(2) img, .mosaic_item:nth-child(2) video { animation-delay: .05s; }
.mosaic_item:nth-child(3) img, .mosaic_item:nth-child(3) video { animation-delay: .10s; }
.mosaic_item:nth-child(4) img, .mosaic_item:nth-child(4) video { animation-delay: .15s; }
.mosaic_item:nth-child(5) img, .mosaic_item:nth-child(5) video { animation-delay: .20s; }
.mosaic_item:nth-child(6) img, .mosaic_item:nth-child(6) video { animation-delay: .25s; }

@keyframes mosaicFade { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }

/* Gallery Button */
.gallery_actions {
    display: flex;
	justify-content: center;
	margin-top: .5rem;
}

.gallery_actions .gallery_btn {
    background: transparent;
	color: var(--text-dark);
	border: 1px solid var(--text-dark);
	letter-spacing: .12em;
	font-size: .75rem;
	padding: .9rem 2.2rem;
	border-radius: 4px;
	transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.gallery_actions .gallery_btn:hover {
	background: var(--primary-color);
	color: #fff;
	box-shadow: 0 8px 26px -6px rgba(0,0,0,.25);
	transform: translateY(-10px);
}

@media (max-width: 1020px) {
	.mosaic_grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(160px, 28vw, 240px); }
    .center_main { grid-column: 1 / span 6; grid-row: 1 / span 2; }
	.left_top { grid-column: 1 / span 3; grid-row: 3; }
	.right_top { grid-column: 4 / span 3; grid-row: 3; }
	.left_bottom { grid-column: 1 / span 3; grid-row: 4; }
	.right_bottom_a { grid-column: 4 / span 3; grid-row: 4; }
	.right_bottom_b { display: none; }
}

@media (max-width: 640px) {
	.mosaic_grid { grid-template-columns: 1fr; grid-auto-rows: clamp(180px, 55vw, 260px); gap: 1rem; }
	.center_main { grid-column: 1; grid-row: 1; }
	.left_top { grid-column: 1; grid-row: 2; }
	.left_bottom { grid-column: 1; grid-row: 3; }
	.right_top { grid-column: 1; grid-row: 4; }
	.right_bottom_a { grid-column: 1; grid-row: 5; }
	.right_bottom_b { display: none; }
	.mosaic_item { border-radius: 6px; }
}